Commit 2f63202b authored by haozhe's avatar haozhe Committed by Commit Bot

Add more references to sticky position ref tests

This is a follow-up patch of
https://chromium-review.googlesource.com/c/chromium/src/+/2105754

This patch adds more reference rectangles to sticky ref-tests to catch
when the main thread position is different from the sticky position.

Bug: 1059272
Change-Id: Ib3101e58a95db134a427b2852bca4c4bd58f805e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2137828Reviewed-by: default avatarRobert Flack <flackr@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#761027}
parent 016d0b14
......@@ -7,6 +7,7 @@
<meta name="assert" content="This test checks that sticky elements are invalidated correctly when top/left/bottom/right change "/>
<script src="/common/reftest-wait.js"></script>
<script src="resources/ref-rectangle.js"></script>
<!--
It is important for this test that the sticky element is viewport-bound, and
......@@ -44,6 +45,7 @@
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector('.sticky').style.setProperty('top', '200px');
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
takeScreenshot();
});
});
......
......@@ -41,7 +41,7 @@
<div id="spacer"></div>
</div>
<div>You should see a light green box above with a dark green border.</div>
<div>You should see a light green box above with a dark green border, no blue should be visible.</div>
<script>
window.addEventListener('load', function() {
......
......@@ -5,6 +5,8 @@
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" />
<meta name="assert" content="This test checks that a multicolumn element is positioned relative to a sticky position" />
<script src="resources/ref-rectangle.js"></script>
<style>
body {
margin: 0;
......@@ -46,10 +48,11 @@
<div id="spacer"></div>
</div>
<div>You should see a light green box above with a dark green border.</div>
<div>You should see a light green box above with a dark green border, no blue should be visible.</div>
<script>
window.addEventListener('load', function() {
scroller.scrollTop = 100;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -49,6 +49,7 @@
}
</style>
<div>You should see a green box below. No blue should be visible.</div>
<div class="position-parent fixed">
<div class="container">
<div class="spacer"></div>
......
......@@ -7,6 +7,8 @@
<meta name="assert" content="This test checks that a sticky element inside a fixed subtree doesn't scroll with the viewport "/>
<script src="/common/reftest-wait.js"></script>
<script src="resources/ref-rectangle.js"></script>
<style>
body,html {
......@@ -59,6 +61,7 @@
}
</style>
<div>You should see a green box below. No blue should be visible.</div>
<div class="position-parent">
<div class="container">
<div class="spacer"></div>
......@@ -67,7 +70,6 @@
</div>
<div class="long"></div>
<button id="button">Toggle Fixed</button>
<script>
function toggleFixed() {
document.querySelector('.position-parent').classList.toggle('fixed');
......@@ -77,6 +79,7 @@
requestAnimationFrame(() => {
window.scrollTo(0, document.querySelector('.long').clientHeight);
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
requestAnimationFrame(() => {
toggleFixed();
takeScreenshot();
......
......@@ -60,4 +60,4 @@ window.addEventListener('load', function() {
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with flexbox" />
<script src="resources/ref-rectangle.js"></script>
<style>
.scroller {
overflow: scroll;
......@@ -47,6 +49,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 250;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -77,4 +80,4 @@ window.addEventListener('load', function() {
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
......@@ -72,5 +72,5 @@ window.addEventListener('load', function() {
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with grid" />
<script src="resources/ref-rectangle.js"></script>
<style>
.scroller {
position: relative;
......@@ -56,6 +58,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 300;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -89,5 +92,5 @@ window.addEventListener('load', function() {
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
......@@ -30,7 +30,7 @@
}
.innerIndicator {
color: blue;
color: yellow;
position: absolute;
left: 25px;
}
......@@ -71,4 +71,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green and three blue rectangles above. No red should be visible.</div>
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>
......@@ -5,6 +5,9 @@
<meta name="assert" content="This test checks that nested inline position:sticky elements render correctly" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<script src="resources/ref-rectangle.js"></script>
<style>
.group {
display: inline-block;
......@@ -59,7 +62,7 @@
.innerSticky {
display: inline;
color: blue;
color: yellow;
position: sticky;
top: 60px;
}
......@@ -70,6 +73,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -112,4 +116,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green and three blue rectangles above. No red should be visible.</div>
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>
......@@ -63,4 +63,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
<script src="resources/ref-rectangle.js"></script>
<style>
.group {
display: inline-block;
......@@ -62,6 +64,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -128,4 +131,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>
<div>You should see three green rectangles above. No red or blue should be visible.</div>
......@@ -101,4 +101,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see four green squares above. No red should be visible.</div>
<div>You should see four green squares above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements are rendered correctly" />
<script src="resources/ref-rectangle.js"></script>
<style>
.group {
display: inline-block;
......@@ -102,6 +104,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller2').scrollTop = 50;
document.getElementById('scroller3').scrollLeft = 125;
document.getElementById('scroller4').scrollLeft = 75;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -153,4 +156,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see four green squares above. No red should be visible.</div>
<div>You should see four green squares above. No red or blue should be visible.</div>
......@@ -14,4 +14,4 @@
<div class="indicator box"></div>
<div>You should see a single green box above. No red should be visible.</div>
<div>You should see a single green box above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="position:sticky elements should create a stacking context" />
<script src="resources/ref-rectangle.js"></script>
<style>
.indicator {
position: absolute;
......@@ -28,6 +30,11 @@
}
</style>
<script>
window.addEventListener('load', function() {
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
})
</script>
<div class="indicator box"></div>
<div class="sticky box">
<!-- Because sticky forms a stacking context, this child remains on bottom
......@@ -35,4 +42,4 @@
<div class="child box"></div>
</div>
<div>You should see a single green box above. No red should be visible.</div>
<div>You should see a single green box above. No red or blue should be visible.</div>
......@@ -45,4 +45,4 @@ window.addEventListener('load', function() {
</table>
</div>
</div>
<div>There should be a green square at the top of the scroll view and no red visible.</div>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
<script src="resources/ref-rectangle.js"></script>
<style>
.scroller {
position: relative;
......@@ -50,6 +52,7 @@ table * {
window.addEventListener('load', function() {
document.body.offsetTop;
document.getElementById('scroller1').scrollTop = 150;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -69,4 +72,4 @@ window.addEventListener('load', function() {
</table>
</div>
</div>
<div>There should be a green square at the top of the scroll view and no red visible.</div>
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for &lt;tfoot&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse:collapse;
......@@ -61,6 +63,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -118,4 +121,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky left constraint behaves correctly for &lt;th&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse: collapse;
......@@ -58,6 +60,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 250;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -112,4 +115,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky right constraint behaves correctly for &lt;th&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse: collapse;
......@@ -58,6 +60,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 75;
document.getElementById('scroller3').scrollLeft = 200;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -112,4 +115,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;thead&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse:collapse;
......@@ -61,6 +63,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -118,4 +121,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for &lt;tr&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse:collapse;
......@@ -61,6 +63,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -115,4 +118,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -59,4 +59,4 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -4,6 +4,8 @@
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;tr&gt; elements" />
<script src="resources/ref-rectangle.js"></script>
<style>
table {
border-collapse:collapse;
......@@ -61,6 +63,7 @@ window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
});
</script>
......@@ -115,5 +118,5 @@ window.addEventListener('load', function() {
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
<div>You should see three green boxes above. No red or blue should be visible.</div>
......@@ -3,6 +3,9 @@
* using sticky position. If it's directly under the sticky element it could be
* obscured and not show up when compared to the ref. */
function createIndicatorForStickyElements(sticky_divs) {
if (sticky_divs.length == 0)
throw "No sticky div was found in the test case.";
sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment