mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
bdc2b709d0
Automatic update from web-platform-tests Verify layout position of sticky position elements in ref tests Verify sticky position while composition happens. Catch when the main thread position is different from the sticky position of ref tests. Bug: 1059272 Change-Id: I3ec4fa391b42ff3783b2e89347a4bd10ab81faaf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2105754 Commit-Queue: Hao Sheng <haozhes@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#755248} -- wpt-commits: 211c4a997d7622b034a82ef9b2772401c5fe771f wpt-pr: 22312
69 lines
1.4 KiB
HTML
69 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Reference for position:sticky should work for inline elements</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
.group {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 150px;
|
|
height: 250px;
|
|
}
|
|
|
|
.scroller {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 200px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
font: 25px/1 Ahem;
|
|
}
|
|
|
|
.contents {
|
|
height: 500px;
|
|
}
|
|
|
|
.indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
color: green;
|
|
}
|
|
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.addEventListener('load', function() {
|
|
document.getElementById('scroller1').scrollTop = 50;
|
|
document.getElementById('scroller2').scrollTop = 125;
|
|
document.getElementById('scroller3').scrollTop = 250;
|
|
});
|
|
</script>
|
|
|
|
<div class="group">
|
|
<div id="scroller1" class="scroller">
|
|
<div class="contents">
|
|
<div class="indicator inline" style="top: 150px;">XXX</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group">
|
|
<div id="scroller2" class="scroller">
|
|
<div class="contents">
|
|
<div class="indicator inline" style="top: 175px;">XXX</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group">
|
|
<div id="scroller3" class="scroller">
|
|
<div class="contents">
|
|
<div class="indicator inline" style="top: 275px;">XXX</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>You should see three green rectangles above. No red or blue should be visible.</div>
|