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: Robert Flack <flackr@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#761027}

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-change-top.html

@@ -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();
   });
 });

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-child-multicolumn-ref.html

@@ -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() {

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-child-multicolumn.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-fixed-ancestor-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-fixed-ancestor.html

@@ -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();

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-flexbox-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-flexbox.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-grid-ref.html

@@ -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>
 

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-grid.html

@@ -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>
 

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-nested-inline-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-nested-inline.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-nested-table-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-nested-table.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-rendering-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-rendering.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-stacking-context-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-stacking-context.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-parts-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-parts.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tfoot-bottom-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tfoot-bottom.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-th-left-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-th-left.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-th-right-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-th-right.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-thead-top-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-thead-top.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tr-bottom-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tr-bottom.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tr-top-ref.html

@@ -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>

third_party/blink/web_tests/external/wpt/css/css-position/position-sticky-table-tr-top.html

@@ -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>
 

third_party/blink/web_tests/external/wpt/css/css-position/resources/ref-rectangle.js

@@ -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