Upstream position: sticky tests for script insertion and layout to WPT

third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html

Index: third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html
index a664ab3d181e7f40526d93965c36d3b9eab4216b..dfc9629357a71f5f209c2c5fcae4636559d032b9 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html
@@ -19,6 +19,7 @@ body {
 }
 
 .spacer {
+  width: 2000px;
   height: 2000px;
 }
 
@@ -26,29 +27,71 @@ body {
   width: 100px;
   height: 100px;
   background-color: green;
-  top: 50px;
 }
 
 .sticky {
   position: sticky;
+  top: 50px;
+  left: 20px;
 }
 </style>
 
-<div id="scroller" class="container">
-  <div id="sticky" class="sticky box"></div>
+<div id="scroller1" class="container">
+  <div id="sticky1" class="sticky box"></div>
   <div class="spacer"></div>
 </div>
 
 <script>
 test(() => {
-  var element = document.getElementById('sticky');
-  assert_equals(element.getBoundingClientRect().top, 50);
-  document.getElementById('scroller').scrollTop = 100;
-  assert_equals(element.getBoundingClientRect().top, 50);
+  var sticky = document.getElementById('sticky1');
+  assert_equals(sticky.getBoundingClientRect().top, 50);
+  document.getElementById('scroller1').scrollTop = 100;
+  assert_equals(sticky.getBoundingClientRect().top, 50);
   sticky.style.position = 'relative';
-  assert_equals(element.getBoundingClientRect().top, -50);
+  assert_equals(sticky.getBoundingClientRect().top, -50);
   sticky.style.position = 'sticky';
-  assert_equals(element.getBoundingClientRect().top, 50);
+  assert_equals(sticky.getBoundingClientRect().top, 50);
 }, 'sticky positioned element should be observable by getBoundingClientRect.');
 </script>
 
+<div id="scroller2" class="container">
+  <div id="spacer2" class="spacer"></div>
+</div>
+
+<script>
+test(() => {
+  var scroller = document.getElementById('scroller2');
+  scroller.scrollTop = 100;
+  scroller.scrollLeft = 75;
+
+  var sticky = document.createElement('div');
+  sticky.className = 'sticky box';
+  scroller.insertBefore(sticky, document.getElementById('spacer2'));

[flackr, 2017/06/07 18:32:56]

perhaps even better than giving it an id, document.querySelector('#scroller2 >
.spacer') or scroller.querySelector('.spacer')

[smcgruer, 2017/06/07 20:57:31]

Done.

+
+  var sticky_bounds = sticky.getBoundingClientRect();
+  var scroller_bounds = scroller.getBoundingClientRect();
+  assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
+  assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
+}, 'getBoundingClientRect should be correct for sticky after script insertion');
+</script>
+
+<div id="scroller3" class="container">
+  <div id="sticky3" class="sticky box"></div>
+  <div id="spacer3" class="spacer"></div>

[yigu, 2017/06/06 21:32:01]

nits: Unused id name.

[smcgruer, 2017/06/07 20:57:32]

Done.

+</div>
+
+<script>
+test(() => {
+  var scroller = document.getElementById('scroller3');
+  var sticky = document.getElementById('sticky3');
+  scroller.scrollTop = 100;
+  scroller.scrollLeft = 75;
+
+  scroller.append(document.createElement('div'));

[flackr, 2017/06/07 18:32:56]

Wouldn't it be more exciting to append the div before the sticky element and
give it some height so that you have to re-establish the sticky box rect?

[smcgruer, 2017/06/07 20:57:31]

Done.

+
+  var sticky_bounds = sticky.getBoundingClientRect();
+  var scroller_bounds = scroller.getBoundingClientRect();
+  assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
+  assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
+}, 'getBoundingClientRect should be correct for sticky after script-caused layout');
+</script>