mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 19:17:44 +00:00
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.
This commit is contained in:
parent
384c6cf0f9
commit
5484062095
5 changed files with 150 additions and 1 deletions
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue