We use cookies to ensure you get the best experience on our website
Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
0ct0pu5
/
ladybird
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

LibWeb: Apply scroll offset to PushStackingContext command

In cases where the stacking context painting requires a separate
bitmap, the destination position needs to be translated by the
scrolling offset to ensure it ends up in the correct position.
Aliaksandr Kalenik 1 éve
szülő
384c6cf0f9
commit
5484062095
5 módosított fájl, 150 hozzáadás és 1 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 52 0
      Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-and-opacity-ref.html
  2. 91 0
      Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-and-opacity.html
  3. 2 0
      Userland/Libraries/LibWeb/Painting/PaintableBox.h
  4. 1 1
      Userland/Libraries/LibWeb/Painting/RecordingPainter.h
  5. 4 0
      Userland/Libraries/LibWeb/Painting/StackingContext.cpp

+ 52 - 0
Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-and-opacity-ref.html
Fájl Megtekintése 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<style>
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        position: absolute;
 
+        inset: 0px;
 
+        display: flex;
 
+        background: pink;
 
+    }
 
+    #outer {
 
+        overflow: hidden;
 
+        background: orange;
 
+        margin-top: 100px;
 
+    }
 
+    #inner {
 
+        height: 1000px;
 
+        background: yellow;
 
+    }
 
+    .item {
 
+        box-sizing: border-box;
 
+        border: 1px solid black;
 
+        background: lime;
 
+        height: 50px;
 
+        width: 200px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        opacity: 0.5;
 
+    }
 
+</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>
 
+<div class="item">30</div>

+ 91 - 0
Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-and-opacity.html
Fájl Megtekintése 

@@ -0,0 +1,91 @@
 
+<!DOCTYPE html>
 
+<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-and-opacity-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 {
 
+        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;
 
+        opacity: 0.5;
 
+    }
 
+</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>

+ 2 - 0
Userland/Libraries/LibWeb/Painting/PaintableBox.h
Fájl Megtekintése 

@@ -198,6 +198,8 @@ public:
 
     void set_enclosing_scroll_frame_offset(CSSPixelPoint offset) { m_enclosing_scroll_frame_offset = offset; }
 
     void set_corner_clip_radii(BorderRadiiData const& corner_radii) { m_corner_clip_radii = corner_radii; }
 
 
+    Optional<int> scroll_frame_id() const { return m_scroll_frame_id; }
 
+
 
 protected:
 
     explicit PaintableBox(Layout::Box const&);

+ 1 - 1
Userland/Libraries/LibWeb/Painting/RecordingPainter.h
Fájl Megtekintése 

@@ -122,7 +122,7 @@ struct PushStackingContext {
 
 
     void translate_by(Gfx::IntPoint const& offset)
 
     {
 
-        post_transform_translation.translate_by(offset);
 
+        source_paintable_rect.translate_by(offset);
 
     }
 
 };

+ 4 - 0
Userland/Libraries/LibWeb/Painting/StackingContext.cpp
Fájl Megtekintése 

@@ -319,9 +319,13 @@ void StackingContext::paint(PaintContext& context) const
 
         }
 
     }
 
 
+    context.recording_painter().save();
 
+    if (paintable().is_paintable_box() && paintable_box().scroll_frame_id().has_value())
 
+        context.recording_painter().set_scroll_frame_id(*paintable_box().scroll_frame_id());
 
     context.recording_painter().push_stacking_context(push_stacking_context_params);
 
     paint_internal(context);
 
     context.recording_painter().pop_stacking_context();
 
+    context.recording_painter().restore();
 
 }
 
 
 template<typename Callback>

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