| <!DOCTYPE html> |
| <html> |
| <title>scrollIntoView() and scroll-margin applied to an inline element</title> |
| <link rel='author' title='Martin Robinson' href='http://igalia.com'> |
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style type='text/css'> |
| .container { |
| border: solid black 1px; |
| height: 40px; |
| width: 40px; |
| overflow: auto; |
| } |
| </style> |
| |
| <div class="container"> |
| <div style="height: 1000px; width: 2000px;"></div> |
| <div style="width: 2000px;"> |
| <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span> |
| <span id="target">TARGETTARGETTARGETTARGET</span> |
| <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span> |
| </div> |
| <div style="height: 1000px; width: 2000px;"></div> |
| </div> |
| |
| <script> |
| |
| test(() => { |
| target.scrollIntoView(); |
| const scroller = target.parentElement.parentElement; |
| let expectedScrollPosition = [scroller.scrollLeft - 20, scroller.scrollTop - 20]; |
| scroller.scrollTo(0, 0); |
| |
| target.style.scrollMarginTop = "20px"; |
| target.style.scrollMarginLeft = "20px"; |
| target.scrollIntoView(); |
| assert_equals(scroller.scrollLeft, expectedScrollPosition[0]); |
| assert_equals(scroller.scrollTop, expectedScrollPosition[1]); |
| |
| target.style.scrollMarginTop = "0px"; |
| target.style.scrollMarginLeft = "0px"; |
| |
| scroller.scrollTo(2000, 2000); |
| target.scrollIntoView({"block": "end", "inline": "end"}); |
| expectedScrollPosition = [scroller.scrollLeft + 20, scroller.scrollTop + 20]; |
| scroller.scrollTo(2000, 2000); |
| |
| target.style.scrollMarginBottom = "20px"; |
| target.style.scrollMarginRight = "20px"; |
| target.scrollIntoView({"block": "end", "inline": "end"}); |
| assert_equals(scroller.scrollLeft, expectedScrollPosition[0]); |
| assert_equals(scroller.scrollTop, expectedScrollPosition[1]); |
| |
| }, "scroll-margin is taken into account when scrolling an inline element into view"); |
| </script> |
