We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb: Account for scroll offset in overflow clip rect calculation

This change addresses an issue with overflow clipping in scenarios
where `overflow: hidden` is applied to boxes nested within elements
with `overflow: scroll`.

Fixes https://github.com/SerenityOS/serenity/issues/22733
Aliaksandr Kalenik 1 year ago
parent
4330cdee74
commit
9dddd6b028
5 changed files with 281 additions and 1 deletions
Split View Show Diff Stats
  1. 76 0
      Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html
  2. 48 0
      Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html
  3. 91 0
      Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html
  4. 64 0
      Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html
  5. 2 1
      Userland/Libraries/LibWeb/Painting/PaintableBox.cpp

+ 76 - 0
Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html
View File 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<style>
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        position: absolute;
 
+        inset: 0px;
 
+        display: flex;
 
+        background: pink;
 
+    }
 
+    #outer {
 
+        overflow-x: hidden;
 
+        overflow-y: scroll;
 
+        background: orange;
 
+        margin-top: 100px;
 
+    }
 
+    #inner {
 
+        height: 1000px;
 
+        background: magenta;
 
+    }
 
+    .item {
 
+        overflow: hidden;
 
+        background: yellow;
 
+    }
 
+    .wrapper {
 
+        box-sizing: border-box;
 
+        border: 1px solid black;
 
+        background: lime;
 
+        height: 50px;
 
+        width: 200px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+</style><body><div id="outer"><div id="inner">
 
+<div class="item"><div class="wrapper">11</div></div>
 
+<div class="item"><div class="wrapper">12</div></div>
 
+<div class="item"><div class="wrapper">13</div></div>
 
+<div class="item"><div class="wrapper">14</div></div>
 
+<div class="item"><div class="wrapper">15</div></div>
 
+<div class="item"><div class="wrapper">16</div></div>
 
+<div class="item"><div class="wrapper">17</div></div>
 
+<div class="item"><div class="wrapper">18</div></div>
 
+<div class="item"><div class="wrapper">19</div></div>
 
+<div class="item"><div class="wrapper">20</div></div>
 
+<div class="item"><div class="wrapper">21</div></div>
 
+<div class="item"><div class="wrapper">22</div></div>
 
+<div class="item"><div class="wrapper">23</div></div>
 
+<div class="item"><div class="wrapper">24</div></div>
 
+<div class="item"><div class="wrapper">25</div></div>
 
+<div class="item"><div class="wrapper">26</div></div>
 
+<div class="item"><div class="wrapper">27</div></div>
 
+<div class="item"><div class="wrapper">28</div></div>
 
+<div class="item"><div class="wrapper">29</div></div>
 
+<div class="item"><div class="wrapper">30</div></div>
 
+<div class="item"><div class="wrapper">31</div></div>
 
+<div class="item"><div class="wrapper">32</div></div>
 
+<div class="item"><div class="wrapper">33</div></div>
 
+<div class="item"><div class="wrapper">34</div></div>
 
+<div class="item"><div class="wrapper">35</div></div>
 
+<div class="item"><div class="wrapper">36</div></div>
 
+<div class="item"><div class="wrapper">37</div></div>
 
+<div class="item"><div class="wrapper">38</div></div>
 
+<div class="item"><div class="wrapper">39</div></div>
 
+<div class="item"><div class="wrapper">40</div></div>
 
+<div class="item"><div class="wrapper">41</div></div>
 
+<div class="item"><div class="wrapper">42</div></div>
 
+<div class="item"><div class="wrapper">43</div></div>
 
+<div class="item"><div class="wrapper">44</div></div>
 
+<div class="item"><div class="wrapper">45</div></div>
 
+<div class="item"><div class="wrapper">46</div></div>
 
+<div class="item"><div class="wrapper">47</div></div>
 
+<div class="item"><div class="wrapper">48</div></div>
 
+<div class="item"><div class="wrapper">49</div></div>
 
+<div class="item"><div class="wrapper">50</div></div>

+ 48 - 0
Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html
View File 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html><style>
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        position: absolute;
 
+        inset: 0px;
 
+        display: flex;
 
+        background: pink;
 
+    }
 
+    #outer {
 
+        margin-top: 100px;
 
+        overflow-x: hidden;
 
+        overflow-y: scroll;
 
+        background: orange;
 
+    }
 
+    #inner {
 
+        height: 1000px;
 
+        background: magenta;
 
+    }
 
+    .item {
 
+        box-sizing: border-box;
 
+        border: 1px solid black;
 
+        width: 200px;
 
+        height: 50px;
 
+        overflow: hidden;
 
+        background: lime;
 
+    }
 
+</style><body><div id="outer"><div id="inner">
 
+<div class="item">11</div>
 
+<div class="item">12</div>
 
+<div class="item">13</div>
 
+<div class="item">14</div>
 
+<div class="item">15</div>
 
+<div class="item">16</div>
 
+<div class="item">17</div>
 
+<div class="item">18</div>
 
+<div class="item">19</div>
 
+<div class="item">20</div>
 
+<div class="item">21</div>
 
+<div class="item">22</div>
 
+<div class="item">23</div>
 
+<div class="item">24</div>
 
+<div class="item">25</div>
 
+<div class="item">26</div>
 
+<div class="item">27</div>
 
+<div class="item">28</div>
 
+<div class="item">29</div>

+ 91 - 0
Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html
View File 

@@ -0,0 +1,91 @@
 
+<!DOCTYPE html>
 
+<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html" />
 
+<style>
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        position: absolute;
 
+        inset: 0px;
 
+        display: flex;
 
+        background: pink;
 
+    }
 
+    #outer {
 
+        overflow-x: hidden;
 
+        overflow-y: scroll;
 
+        background: orange;
 
+        margin-top: 100px;
 
+    }
 
+    #inner {
 
+        height: 1000px;
 
+        background: magenta;
 
+    }
 
+    .item {
 
+        overflow: hidden;
 
+        background: yellow;
 
+    }
 
+    .wrapper {
 
+        box-sizing: border-box;
 
+        border: 1px solid black;
 
+        background: lime;
 
+        height: 50px;
 
+        width: 200px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+</style><body><div id="outer"><div id="inner">
 
+<div class="item"><div class="wrapper">1</div></div>
 
+<div class="item"><div class="wrapper">2</div></div>
 
+<div class="item"><div class="wrapper">3</div></div>
 
+<div class="item"><div class="wrapper">4</div></div>
 
+<div class="item"><div class="wrapper">5</div></div>
 
+<div class="item"><div class="wrapper">6</div></div>
 
+<div class="item"><div class="wrapper">7</div></div>
 
+<div class="item"><div class="wrapper">8</div></div>
 
+<div class="item"><div class="wrapper">9</div></div>
 
+<div class="item"><div class="wrapper">10</div></div>
 
+<div class="item"><div class="wrapper">11</div></div>
 
+<div class="item"><div class="wrapper">12</div></div>
 
+<div class="item"><div class="wrapper">13</div></div>
 
+<div class="item"><div class="wrapper">14</div></div>
 
+<div class="item"><div class="wrapper">15</div></div>
 
+<div class="item"><div class="wrapper">16</div></div>
 
+<div class="item"><div class="wrapper">17</div></div>
 
+<div class="item"><div class="wrapper">18</div></div>
 
+<div class="item"><div class="wrapper">19</div></div>
 
+<div class="item"><div class="wrapper">20</div></div>
 
+<div class="item"><div class="wrapper">21</div></div>
 
+<div class="item"><div class="wrapper">22</div></div>
 
+<div class="item"><div class="wrapper">23</div></div>
 
+<div class="item"><div class="wrapper">24</div></div>
 
+<div class="item"><div class="wrapper">25</div></div>
 
+<div class="item"><div class="wrapper">26</div></div>
 
+<div class="item"><div class="wrapper">27</div></div>
 
+<div class="item"><div class="wrapper">28</div></div>
 
+<div class="item"><div class="wrapper">29</div></div>
 
+<div class="item"><div class="wrapper">30</div></div>
 
+<div class="item"><div class="wrapper">31</div></div>
 
+<div class="item"><div class="wrapper">32</div></div>
 
+<div class="item"><div class="wrapper">33</div></div>
 
+<div class="item"><div class="wrapper">34</div></div>
 
+<div class="item"><div class="wrapper">35</div></div>
 
+<div class="item"><div class="wrapper">36</div></div>
 
+<div class="item"><div class="wrapper">37</div></div>
 
+<div class="item"><div class="wrapper">38</div></div>
 
+<div class="item"><div class="wrapper">39</div></div>
 
+<div class="item"><div class="wrapper">40</div></div>
 
+<div class="item"><div class="wrapper">41</div></div>
 
+<div class="item"><div class="wrapper">42</div></div>
 
+<div class="item"><div class="wrapper">43</div></div>
 
+<div class="item"><div class="wrapper">44</div></div>
 
+<div class="item"><div class="wrapper">45</div></div>
 
+<div class="item"><div class="wrapper">46</div></div>
 
+<div class="item"><div class="wrapper">47</div></div>
 
+<div class="item"><div class="wrapper">48</div></div>
 
+<div class="item"><div class="wrapper">49</div></div>
 
+<div class="item"><div class="wrapper">50</div></div>
 
+<script>
 
+    const scrollContainer = document.getElementById("outer");
 
+    scrollContainer.scrollTop = 500;
 
+</script>

+ 64 - 0
Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html
View File 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html" />
 
+<style>
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        position: absolute;
 
+        inset: 0px;
 
+        display: flex;
 
+        background: pink;
 
+    }
 
+    #outer {
 
+        margin-top: 100px;
 
+        overflow-x: hidden;
 
+        overflow-y: scroll;
 
+        background: orange;
 
+    }
 
+    #inner {
 
+        height: 1000px;
 
+        background: magenta;
 
+    }
 
+    .item {
 
+        box-sizing: border-box;
 
+        border: 1px solid black;
 
+        width: 200px;
 
+        height: 50px;
 
+        overflow: hidden;
 
+        background: lime;
 
+    }
 
+</style><body><div id="outer"><div id="inner">
 
+<div class="item">1</div>
 
+<div class="item">2</div>
 
+<div class="item">3</div>
 
+<div class="item">4</div>
 
+<div class="item">5</div>
 
+<div class="item">6</div>
 
+<div class="item">7</div>
 
+<div class="item">8</div>
 
+<div class="item">9</div>
 
+<div class="item">10</div>
 
+<div class="item">11</div>
 
+<div class="item">12</div>
 
+<div class="item">13</div>
 
+<div class="item">14</div>
 
+<div class="item">15</div>
 
+<div class="item">16</div>
 
+<div class="item">17</div>
 
+<div class="item">18</div>
 
+<div class="item">19</div>
 
+<div class="item">20</div>
 
+<div class="item">21</div>
 
+<div class="item">22</div>
 
+<div class="item">23</div>
 
+<div class="item">24</div>
 
+<div class="item">25</div>
 
+<div class="item">26</div>
 
+<div class="item">27</div>
 
+<div class="item">28</div>
 
+<div class="item">29</div>
 
+<script>
 
+    const scrollContainer = document.getElementById("outer");
 
+    scrollContainer.scrollTop = 500;
 
+</script>

+ 2 - 1
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View File 

@@ -128,6 +128,7 @@ CSSPixelRect PaintableBox::compute_absolute_padding_rect_with_css_transform_appl
 
         auto offset = block->paintable_box()->offset();
 
         auto affine_transform = Gfx::extract_2d_affine_transform(block->paintable_box()->transform());
 
         offset.translate_by(affine_transform.translation().to_type<CSSPixels>());
 
+        offset.translate_by(-block->paintable_box()->scroll_offset());
 
         rect.translate_by(offset);
 
     }
 
     auto affine_transform = Gfx::extract_2d_affine_transform(transform());
 
@@ -598,7 +599,7 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
 
     bool should_clip_overflow = computed_values().overflow_x() != CSS::Overflow::Visible && computed_values().overflow_y() != CSS::Overflow::Visible;
 
     Optional<u32> corner_clip_id;
 
 
-    auto clip_box = context.rounded_device_rect(absolute_padding_box_rect());
 
+    auto clip_box = context.rounded_device_rect(compute_absolute_padding_rect_with_css_transform_applied());
 
 
     if (should_clip_overflow) {
 
         context.recording_painter().save();

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5