system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-15 12:23:15 +00:00
Code Issues Packages Projects Releases Wiki Activity
serenity/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html

95 lines
3.6 KiB
HTML
Raw Normal View History

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
2024-01-31 04:25:12 +00:00
<!DOCTYPE html>
<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html" />
<style>
LibWeb: Implement scrollbar painting Introduces the rendering of scroll thumbs in vertical and horizontal directions. Currently, the thumbs are purely graphical elements that do not respond to mouse events. Nevertheless, this is beneficial as it makes it easier to identify elements that should respond to scrolling events. Painting of scrollbars uncovers numerous bugs in the calculation of scrollable overflow rectangles highlighting all the places where elements are made scrollable whey they shouldn't be. Positively, this issue might motivate us to pay more attention to this problem to eliminate unnecessary scrollbars. Currently, the scrollbar style is uniform across all platforms: a semi-transparent gray rectangle with rounded corners. Also here we add `scrollbar-width: none` to all existing scrolling ref-tests, so they keep working with this change.
2024-02-15 20:12:50 +00:00
* {
scrollbar-width: none;
}
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
2024-01-31 04:25:12 +00:00
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>
Reference in a new issue Copy permalink