| <!DOCTYPE html> |
| <style> |
| ::-webkit-scrollbar { |
| width: 0px; |
| height: 0px; |
| } |
| |
| body, html { |
| width: 100%; |
| height: 100%; |
| } |
| |
| body { |
| margin: 0px; |
| } |
| |
| #container { |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| } |
| |
| #sticky { |
| width: 100%; |
| height: 50px; |
| background-color: lightgreen; |
| position: sticky; |
| top: 50px; |
| } |
| |
| #space { |
| width: 100%; |
| height: 400%; |
| } |
| |
| #before { |
| height: 300px; |
| } |
| |
| </style> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div id="container"> |
| <div id="before"></div> |
| <div id="sticky"> |
| </div> |
| <div id="space"></div> |
| </div> |
| |
| <script> |
| var container = document.querySelector('#container'); |
| var sticky = document.querySelector('#sticky'); |
| |
| test(function() { |
| assert_false(typeof document.rootScroller === 'undefined'); |
| |
| document.rootScroller = container; |
| |
| assert_equals(sticky.getBoundingClientRect().top, 300, |
| "rect top should be regular in-flow location when unscrolled"); |
| |
| container.scrollTo(0, 100); |
| assert_equals(sticky.getBoundingClientRect().top, 200, |
| "rect top should account for scroll before becoming fixed"); |
| |
| container.scrollTo(0, 500); |
| assert_equals(sticky.getBoundingClientRect().top, 50, |
| "rect top should be sticky location"); |
| |
| }, 'getBoundingClientRect correct on position: sticky in rootScroller.'); |
| </script> |
