ladybird/Tests/LibWeb/Ref/input/position-sticky-right.html
Sam Atkins b7efb61fbe Tests/LibWeb: Restructure Ref and Screenshot test dirs to match others
Now each test type has the same directories:
- input
- expected
- data

Also, tests can be in subdirectories within ./input.
2024-11-05 14:02:07 +00:00

56 lines
1.3 KiB
HTML

<!DOCTYPE html>
<link rel="match" href="../expected/position-sticky-right-ref.html" />
<style>
* {
scrollbar-width: none;
}
.scroll-container {
width: 500px;
overflow-x: scroll;
white-space: nowrap;
background-color: #f0f0f0;
display: grid;
grid-template-columns: 1000px 300px 1000px;
border: 5px solid yellowgreen;
}
.section {
height: 200px;
background-color: orangered;
}
.sticky-element {
position: sticky;
right: 0;
background-color: blueviolet;
height: 200px;
line-height: 200px;
color: white;
}
</style>
<div class="scroll-container" id="a">
<div class="section"></div>
<div class="sticky-element"></div>
<div class="section"></div>
</div>
<div class="scroll-container" id="b">
<div class="section"></div>
<div class="sticky-element"></div>
<div class="section"></div>
</div>
<div class="scroll-container" id="c">
<div class="section"></div>
<div class="sticky-element"></div>
<div class="section"></div>
</div>
<script>
const a = document.getElementById("a");
a.scrollLeft = 0;
const b = document.getElementById("b");
b.scrollLeft = 900;
const c = document.getElementById("c");
c.scrollLeft = 1400;
</script>