diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html')
-rw-r--r-- | testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html new file mode 100644 index 0000000000..845454e1b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the vertical axis and in the horizontal axis</title> + + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> + + <meta name="flags" content=""> + + <style> + div#scrollingContainerVert + { + background-color: red; + height: 100px; + overflow: auto; + width: 200px; + } + + div#scrollingContainerHoriz + { + background-color: red; + height: 100px; + overflow-x: auto; + overflow-y: hidden; + width: 200px; + } + + div#elemStickyVert + { + background-color: green; + height: 100px; + position: sticky; + top: 0px; + } + + div#scrollingContainerHoriz > div + { + display: inline-block; + height: 100%; + } + + div#elemStickyHoriz + { + background-color: green; + left: 0px; + position: sticky; + width: 200px; + } + + div#tallItem + { + height: 600px; + } + + div#wideItem + { + width: 600px; + } + </style> + + + <script src="/resources/testharness.js"></script> + + <script src="/resources/testharnessreport.js"></script> + + <p>Test passes if there is a filled green square and <strong>no scrollbar</strong>. + + <div id="scrollingContainerVert"> + + <div id="elemStickyVert"></div> + + <div id="tallItem"></div> + + </div> + + + <div id="scrollingContainerHoriz"> + + <div id="elemStickyHoriz"></div><div id="wideItem"></div> + + </div> + + + <script> + test(()=> { + scrollingContainerVert.scrollTop = 600; + tallItem.style.display = "none"; + assert_equals(scrollingContainerVert.scrollHeight, 100); + }, "Sticky position and its overflow contribution in the vertical axis"); + + test(()=> { + scrollingContainerHoriz.scrollLeft = 600; + wideItem.style.display = "none"; + assert_equals(scrollingContainerHoriz.scrollWidth, 200); + }, "Sticky position and its overflow contribution in the horizontal axis"); + </script> |