Bug 1628010 [wpt PR 22752] - Add more references to sticky position ref tests, a=testonly
authorhaozhe <haozhes@chromium.org>
Tue, 28 Apr 2020 11:34:33 +0000
changeset 527160 44b9e5cf79011ab6a8d488b678d0b57d549b2a47
parent 527159 806757491bc2cbd85e14c57b4035af411d7cc291
child 527161 e29464cb384ffccddfa50404e51777d4e66fcd69
push id114648
push userwptsync@mozilla.com
push dateThu, 30 Apr 2020 19:15:02 +0000
treeherderautoland@2545233d9410 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1628010, 22752, 2105754, 1059272, 2137828, 761027
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1628010 [wpt PR 22752] - Add more references to sticky position ref tests, a=testonly Automatic update from web-platform-tests 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/+/2137828 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Hao Sheng <haozhes@chromium.org> Cr-Commit-Position: refs/heads/master@{#761027} -- wpt-commits: 9586cd0785957c1f58c58cc9df9bc7410ffe8aff wpt-pr: 22752
testing/web-platform/tests/css/css-position/position-sticky-change-top.html
testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn-ref.html
testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn.html
testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor-ref.html
testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor.html
testing/web-platform/tests/css/css-position/position-sticky-flexbox-ref.html
testing/web-platform/tests/css/css-position/position-sticky-flexbox.html
testing/web-platform/tests/css/css-position/position-sticky-grid-ref.html
testing/web-platform/tests/css/css-position/position-sticky-grid.html
testing/web-platform/tests/css/css-position/position-sticky-nested-inline-ref.html
testing/web-platform/tests/css/css-position/position-sticky-nested-inline.html
testing/web-platform/tests/css/css-position/position-sticky-nested-table-ref.html
testing/web-platform/tests/css/css-position/position-sticky-nested-table.html
testing/web-platform/tests/css/css-position/position-sticky-rendering-ref.html
testing/web-platform/tests/css/css-position/position-sticky-rendering.html
testing/web-platform/tests/css/css-position/position-sticky-stacking-context-ref.html
testing/web-platform/tests/css/css-position/position-sticky-stacking-context.html
testing/web-platform/tests/css/css-position/position-sticky-table-parts-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-parts.html
testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom.html
testing/web-platform/tests/css/css-position/position-sticky-table-th-left-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-th-left.html
testing/web-platform/tests/css/css-position/position-sticky-table-th-right-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-th-right.html
testing/web-platform/tests/css/css-position/position-sticky-table-thead-top-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-thead-top.html
testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom.html
testing/web-platform/tests/css/css-position/position-sticky-table-tr-top-ref.html
testing/web-platform/tests/css/css-position/position-sticky-table-tr-top.html
testing/web-platform/tests/css/css-position/resources/ref-rectangle.js
--- a/testing/web-platform/tests/css/css-position/position-sticky-change-top.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-change-top.html
@@ -2,16 +2,17 @@
 <html class='reftest-wait'>
 <title>Sticky elements should invalidate when top/left/bottom/right changes</title>
 <link rel="match" href="position-sticky-change-top-ref.html" />
 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
 <link rel="help" href="https://crbug.com/939632">
 <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
   that multiple animation frames pass before changing the style.
 -->
 <style>
 .marker {
   background: red;
@@ -39,13 +40,14 @@
 
 <div class="sticky"></div>
 <div class="spacer"></div>
 
 <script>
 requestAnimationFrame(() => {
   requestAnimationFrame(() => {
     document.querySelector('.sticky').style.setProperty('top', '200px');
+    createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
     takeScreenshot();
   });
 });
 </script>
 </html>
--- a/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn-ref.html
@@ -36,15 +36,15 @@
   <div id="relative">
     <div id="child">
       <div id="contents"></div>
     </div>
   </div>
   <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;
   });
 </script>
--- a/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-child-multicolumn.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <title>Multicolumn under position:sticky should be positioned correctly</title>
 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
 <link rel="match" href="position-sticky-child-multicolumn-ref.html" />
 <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;
   }
   #scroller {
     overflow-y: scroll;
     width: 200px;
     height: 200px;
@@ -41,15 +43,16 @@
   <div id="sticky">
     <div id="multicolumn">
       <div id="contents"></div>
     </div>
   </div>
   <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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor-ref.html
@@ -44,16 +44,17 @@
   }
 
   .fixed {
     position: fixed;
     top: 25vh;
   }
 </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>
     <div class="sticky"></div>
   </div>
 </div>
 <div class="long"></div>
 <button id="button">Toggle Fixed</button>
--- a/testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-fixed-ancestor.html
@@ -2,16 +2,18 @@
 <html class='reftest-wait'>
 <title>Sticky elements inside fixed ancestors shouldn't account for scroll</title>
 <link rel="match" href="position-sticky-fixed-ancestor-ref.html" />
 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
 <link rel="help" href="https://crbug.com/1019142">
 <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 {
     margin: 0;
     width: 100%;
     height: 100%;
   }
 
@@ -54,33 +56,34 @@
   }
 
   .fixed {
     position: fixed;
     top: 25vh;
   }
 </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>
     <div class="sticky"></div>
   </div>
 </div>
 <div class="long"></div>
 <button id="button">Toggle Fixed</button>
-
 <script>
   function toggleFixed() {
     document.querySelector('.position-parent').classList.toggle('fixed');
   }
 
   document.getElementById('button').addEventListener('click', toggleFixed);
 
   requestAnimationFrame(() => {
     window.scrollTo(0, document.querySelector('.long').clientHeight);
+    createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
     requestAnimationFrame(() => {
       toggleFixed();
       takeScreenshot();
     });
   });
 </script>
 </html>
--- a/testing/web-platform/tests/css/css-position/position-sticky-flexbox-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-flexbox-ref.html
@@ -55,9 +55,9 @@ window.addEventListener('load', function
   <div class="flex-container">
     <div class="flex-item"></div>
     <div class="flex-item"></div>
     <div class="green flex-item"></div>
     <div class="green flex-item"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-flexbox.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-flexbox.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky elements should work correctly with flexbox</title>
 <link rel="match" href="position-sticky-flexbox-ref.html" />
 <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;
   width: 350px;
   height: 100px;
   margin-bottom: 15px;
 }
 
@@ -42,16 +44,17 @@
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollLeft = 50;
   document.getElementById('scroller2').scrollLeft = 150;
   document.getElementById('scroller3').scrollLeft = 250;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div id="scroller1" class="scroller">
   <div class="flex-container">
     <div class="indicator" style="left: 100px;"></div>
     <div class="flex-item"></div>
     <div class="sticky green flex-item"></div>
@@ -72,9 +75,9 @@ window.addEventListener('load', function
   <div class="flex-container">
     <div class="indicator" style="left: 300px;"></div>
     <div class="flex-item"></div>
     <div class="sticky green flex-item"></div>
     <div class="green flex-item"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-grid-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-grid-ref.html
@@ -67,10 +67,10 @@ window.addEventListener('load', function
     <div class="grid-item" style="grid-column: 1;"></div>
     <div class="grid-item" style="grid-column: 2;"></div>
     <div class="grid-item" style="grid-column: 3;"></div>
     <div class="green grid-item" style="grid-column: 4;"></div>
   </div>
   <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>
 
--- a/testing/web-platform/tests/css/css-position/position-sticky-grid.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-grid.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky elements should work correctly with grid layout</title>
 <link rel="match" href="position-sticky-grid-ref.html" />
 <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;
   overflow-x: scroll;
   overflow-y: hidden;
   width: 300px;
   height: 100px;
   margin-bottom: 15px;
@@ -51,16 +53,17 @@
 
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollLeft = 0;
   document.getElementById('scroller2').scrollLeft = 150;
   document.getElementById('scroller3').scrollLeft = 300;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div id="scroller1" class="scroller">
   <div class="grid-container">
     <div class="indicator" style="left: 100px;"></div>
     <div class="grid-item" style="grid-column: 1;"></div>
     <div class="sticky green grid-item" style="grid-column: 2;"></div>
@@ -84,10 +87,10 @@ window.addEventListener('load', function
     <div class="indicator" style="left: 300px;"></div>
     <div class="grid-item" style="grid-column: 1;"></div>
     <div class="sticky green grid-item" style="grid-column: 2;"></div>
     <div class="green grid-item" style="grid-column: 3;"></div>
   </div>
   <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>
 
--- a/testing/web-platform/tests/css/css-position/position-sticky-nested-inline-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-nested-inline-ref.html
@@ -25,17 +25,17 @@
 
 .outerIndicator {
   color: green;
   position: absolute;
   left: 0;
 }
 
 .innerIndicator {
-  color: blue;
+  color: yellow;
   position: absolute;
   left: 25px;
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 50;
@@ -66,9 +66,9 @@ window.addEventListener('load', function
   <div id="scroller3" class="scroller">
     <div class="contents">
       <div class="outerIndicator" style="top: 275px;">X</div>
       <div class="innerIndicator" style="top: 275px;">XX</div>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-nested-inline.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-nested-inline.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <title>Nested inline position:sticky elements should render correctly</title>
 <link rel="match" href="position-sticky-nested-inline-ref.html" />
 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
 <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;
   position: relative;
   width: 150px;
   height: 250px;
 }
 
@@ -54,27 +57,28 @@
   display: inline;
   color: green;
   position: sticky;
   top: 50px;
 }
 
 .innerSticky {
   display: inline;
-  color: blue;
+  color: yellow;
   position: sticky;
   top: 60px;
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 50;
   document.getElementById('scroller2').scrollTop = 125;
   document.getElementById('scroller3').scrollTop = 225;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="outerIndicator" style="top: 150px;">X</div>
     <div class="contents">
       <div class="prepadding"></div>
@@ -107,9 +111,9 @@ window.addEventListener('load', function
       <div class="container">
         <div class="innerpadding"></div>
         <div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
       </div>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-nested-table-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-nested-table-ref.html
@@ -58,9 +58,9 @@ window.addEventListener('load', function
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="contents">
       <div class="indicator" style="top: 250px;"></div>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-nested-table.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-nested-table.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>Nested position:sticky table elements should render correctly</title>
 <link rel="match" href="position-sticky-nested-table-ref.html" />
 <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;
   position: relative;
   width: 150px;
   height: 250px;
 }
 
@@ -57,16 +59,17 @@ th {
 
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 50;
   document.getElementById('scroller2').scrollTop = 125;
   document.getElementById('scroller3').scrollTop = 250;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="contents">
       <div class="indicator" style="top: 100px;"></div>
       <div class="prepadding"></div>
@@ -123,9 +126,9 @@ window.addEventListener('load', function
           <tr><td></td></tr>
           <tr><td></td></tr>
         </tbody>
       </table>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-rendering-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-rendering-ref.html
@@ -96,9 +96,9 @@ window.addEventListener('load', function
 <div class="inlineGroup">
   <div id="scroller4" class="scroller">
     <div class="contents">
       <div class="indicator box" style="left: 150px;"></div>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-rendering.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-rendering.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky elements should be rendered at their sticky offset</title>
 <link rel="match" href="position-sticky-rendering-ref.html" />
 <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;
   position: relative;
   width: 150px;
   height: 250px;
 }
 
@@ -97,16 +99,17 @@
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 125;
   document.getElementById('scroller2').scrollTop = 50;
   document.getElementById('scroller3').scrollLeft = 125;
   document.getElementById('scroller4').scrollLeft = 75;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator box" style="top: 175px;"></div>
     <div class="contents">
       <div class="prepadding"></div>
@@ -148,9 +151,9 @@ window.addEventListener('load', function
     <div class="indicator box" style="left: 150px;"></div>
     <div class="contents">
       <!-- As these elements are inline, they are whitespace sensitive. -->
       <div class="prepadding"></div><div class="container"><div class="filler"></div><div style="right: 25px;" class="sticky box"></div></div>
     </div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-stacking-context-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-stacking-context-ref.html
@@ -9,9 +9,9 @@
 .box {
   width: 200px;
   height: 200px;
 }
 </style>
 
 <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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-stacking-context.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-stacking-context.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position: sticky should create a stacking context</title>
 <link rel="match" href="position-sticky-stacking-context-ref.html" />
 <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;
   background-color: green;
   z-index: 1;
 }
 
 .sticky {
@@ -23,16 +25,21 @@
 }
 
 .box {
   width: 200px;
   height: 200px;
 }
 </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
        even though it has a higher z-index than the indicator box. -->
   <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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-parts-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-parts-ref.html
@@ -40,9 +40,9 @@ window.addEventListener('load', function
       <div class="prepadding"></div>
       <table>
         <tbody>
           <tr><td><div id="child"></div></td></tr>
         </tbody>
       </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-parts.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-parts.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>Nested position:sticky table elements should render correctly</title>
 <link rel="match" href="position-sticky-table-parts-ref.html" />
 <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;
   width: 100px;
   height: 250px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -45,16 +47,17 @@ table * {
 }
 
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.body.offsetTop;
   document.getElementById('scroller1').scrollTop = 150;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div id="scroller1" class="scroller">
   <div class="contents">
     <div class="indicator" style="top: 155px;"></div>
     <table>
       <tbody>
@@ -64,9 +67,9 @@ window.addEventListener('load', function
         <tr><td></td></tr>
         <tr><td></td></tr>
         <tr><td></td></tr>
         <tr><td></td></tr>
       </tbody>
     </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="top: 250px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tfoot-bottom.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky bottom constraint should behave correctly for &lt;tfoot&gt; elements</title>
 <link rel="match" href="position-sticky-table-tfoot-bottom-ref.html" />
 <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;
 }
 
 td, th {
   padding: 0;
 }
@@ -56,16 +58,17 @@ td > div, th > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 0;
   document.getElementById('scroller2').scrollTop = 75;
   document.getElementById('scroller3').scrollTop = 200;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="top: 100px;"></div>
     <div class="prepadding"></div>
     <table>
@@ -113,9 +116,9 @@ window.addEventListener('load', function
       <tfoot class="sticky">
         <tr><th><div></div></th></tr>
       </tfoot>
     </table>
     <div class="postpadding"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-th-left-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-th-left-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="left: 250px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-th-left.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-th-left.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky left constraint should behave correctly for &lt;th&gt; elements</title>
 <link rel="match" href="position-sticky-table-th-left-ref.html" />
 <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;
     margin-left: 100px;
 }
 
 td, th {
   padding: 0;
@@ -53,16 +55,17 @@ td > div, th > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollLeft = 50;
   document.getElementById('scroller2').scrollLeft = 125;
   document.getElementById('scroller3').scrollLeft = 250;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="left: 100px;"></div>
     <table>
       <tbody>
@@ -107,9 +110,9 @@ window.addEventListener('load', function
           <td><div></div></td>
         </tr>
       </tbody>
     </table>
     <div class="postpadding"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-th-right-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-th-right-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="left: 300px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-th-right.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-th-right.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky right constraint should behave correctly for &lt;th&gt; elements</title>
 <link rel="match" href="position-sticky-table-th-right-ref.html" />
 <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;
     margin-left: 150px;
 }
 
 td, th {
   padding: 0;
@@ -53,16 +55,17 @@ td > div, th > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollLeft = 0;
   document.getElementById('scroller2').scrollLeft = 75;
   document.getElementById('scroller3').scrollLeft = 200;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="left: 150px;"></div>
     <table>
       <tbody>
@@ -107,9 +110,9 @@ window.addEventListener('load', function
           <th class="sticky"><div></div></th>
         </tr>
       </tbody>
     </table>
     <div class="postpadding"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-thead-top-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-thead-top-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="top: 250px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-thead-top.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-thead-top.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky top constraint should behave correctly for &lt;thead&gt; elements</title>
 <link rel="match" href="position-sticky-table-thead-top-ref.html" />
 <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;
 }
 
 td, th {
   padding: 0;
 }
@@ -56,16 +58,17 @@ td > div, th > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 50;
   document.getElementById('scroller2').scrollTop = 125;
   document.getElementById('scroller3').scrollTop = 250;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="top: 100px;"></div>
     <div class="prepadding"></div>
     <table>
@@ -113,9 +116,9 @@ window.addEventListener('load', function
         <tr><td><div></div></td></tr>
         <tr><td><div></div></td></tr>
       </tbody>
     </table>
     <div class="postpadding"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="top: 250px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tr-bottom.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky bottom constraint should behave correctly for &lt;tr&gt; elements</title>
 <link rel="match" href="position-sticky-table-tr-bottom-ref.html" />
 <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;
 }
 
 td {
   padding: 0;
 }
@@ -56,16 +58,17 @@ td > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 0;
   document.getElementById('scroller2').scrollTop = 75;
   document.getElementById('scroller3').scrollTop = 200;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <!-- .sticky element pushed as far up as possible to table edge -->
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="top: 100px;"></div>
     <div class="prepadding"></div>
@@ -110,9 +113,9 @@ window.addEventListener('load', function
         <tr><td><div></div></td></tr>
         <tr class="sticky"><td><div></div></td></tr>
       </tbody>
     </table>
     <div class="postpadding"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tr-top-ref.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tr-top-ref.html
@@ -54,9 +54,9 @@ window.addEventListener('load', function
 
 <div class="group">
   <div id="scroller3" class="scroller">
     <div class="indicator" style="top: 250px;"></div>
     <div class="contents"></div>
   </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>
--- a/testing/web-platform/tests/css/css-position/position-sticky-table-tr-top.html
+++ b/testing/web-platform/tests/css/css-position/position-sticky-table-tr-top.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <title>position:sticky top constraint should behave correctly for &lt;tr&gt; elements</title>
 <link rel="match" href="position-sticky-table-tr-top-ref.html" />
 <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;
 }
 
 td {
   padding: 0;
 }
@@ -56,16 +58,17 @@ td > div {
 }
 </style>
 
 <script>
 window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollTop = 50;
   document.getElementById('scroller2').scrollTop = 125;
   document.getElementById('scroller3').scrollTop = 250;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
 <!-- .sticky element not yet stuck -->
 <div class="group">
   <div id="scroller1" class="scroller">
     <div class="indicator" style="top: 100px;"></div>
     <div class="prepadding"></div>
@@ -110,10 +113,10 @@ window.addEventListener('load', function
         <tr><td><div></div></td></tr>
         <tr><td><div></div></td></tr>
       </tbody>
     </table>
     <div class="postpadding"></div>
   </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>
 
--- a/testing/web-platform/tests/css/css-position/resources/ref-rectangle.js
+++ b/testing/web-platform/tests/css/css-position/resources/ref-rectangle.js
@@ -1,13 +1,16 @@
 /**
  * The function positions a new div to exactly the bounding client rect without
  * 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
     // (offsetTop/offsetLeft)
     if (getComputedStyle(sticky_div).position != "sticky")
       throw "Provided sticky element does not have position: sticky";
     var position_div = document.createElement("div");
     position_div.style.left = sticky_div.offsetLeft + "px";