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}

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

@@ -66,4 +66,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-inline.html

@@ -5,6 +5,9 @@
 <meta name="assert" content="This test checks that position:sticky works for inline elements" />
 
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<script src="resources/ref-rectangle.js"></script>
+
 <style>
 .group {
   display: inline-block;
@@ -60,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>
 
@@ -102,4 +106,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-writing-modes-ref.html

@@ -55,4 +55,4 @@ window.addEventListener('load', function() {
   </div>
 </div>
 
-<div>You should see two green blocks above. No red should be visible.</div>
+<div>You should see two green blocks above. No red or blue should be visible.</div>

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

@@ -5,6 +5,9 @@
 <meta name="assert" content="This test checks that position:sticky constraints are independent of the writing mode" />
 
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<script src="resources/ref-rectangle.js"></script>
+
 <style>
 .group {
   display: inline-block;
@@ -45,6 +48,7 @@ window.addEventListener('load', function() {
   document.getElementById('scroller1').scrollLeft = 20;
   document.getElementById('scroller2').scrollTop = 50;
   document.getElementById('scroller2').scrollLeft = -25;
+  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
 });
 </script>
 
@@ -59,11 +63,11 @@ window.addEventListener('load', function() {
 
 <div class="group">
   <div id="scroller2" class="scroller" style="writing-mode: vertical-rl;">
+    <div class="indicator" style="left: 45px; top: 100px;">XXX</div>
     <div class="contents">
-      <div class="indicator" style="left: 45px; top: 100px;">XXX</div>
       <div class="sticky" style="right: 20px;">XXX</div>
     </div>
   </div>
 </div>
 
-<div>You should see two green blocks above. No red should be visible.</div>
+<div>You should see two green blocks above. No red or blue should be visible.</div>

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

+/**
+ * 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) {
+  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";
+    position_div.style.top  = sticky_div.offsetTop + "px";
+    // The absolute position is to ensure that the position_div adds zero size
+    // to in flow layout
+    position_div.style.position = "absolute"
+    var indicator_div = document.createElement("div");
+    indicator_div.style.width = sticky_div.offsetWidth + "px";
+    indicator_div.style.height = sticky_div.offsetHeight + "px";
+    indicator_div.style.backgroundColor = "blue";
+    indicator_div.style.position = "relative";
+    position_div.appendChild(indicator_div);
+    sticky_div.parentNode.insertBefore(position_div, sticky_div);
+  });
+}