| <!DOCTYPE html> |
| <title>CSSOM View - scrollLeft/scrollTop considers writing-mode and css direction</title> |
| <meta charset="utf-8"> |
| <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area-origin"> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element"> |
| <meta name="assert" content="This test verifies the assigned and extreme values of the scroll positions of an element."> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <head> |
| <style> |
| .scroller { |
| overflow: scroll; |
| width: 150px; |
| height: 100px; |
| } |
| .content { |
| width: 300px; |
| height: 400px; |
| } |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| } |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <h1>scrollLeft/scrollTop</h1> |
| <h2>writing-mode: horizontal-tb;</h2> |
| <div id="target_scroller" class="scroller horizontal-tb ltr"> |
| <div id="target_content" class="content"></div> |
| </div> |
| <div class="scroller horizontal-tb rtl"> |
| <div class="content"></div> |
| </div> |
| <h2>writing-mode: vertical-lr;</h2> |
| <div class="scroller vertical-lr ltr"> |
| <div class="content"></div> |
| </div> |
| <div class="scroller vertical-lr rtl"> |
| <div class="content"></div> |
| </div> |
| <h2>writing-mode: vertical-rl;</h2> |
| <div class="scroller vertical-rl ltr"> |
| <div class="content"></div> |
| </div> |
| <div class="scroller vertical-rl rtl"> |
| <div class="content"></div> |
| </div> |
| |
| <script> |
| var scroller = document.querySelector("#target_scroller"); |
| var content = document.querySelector("#target_content"); |
| var scrollbar_width = scroller.offsetWidth - scroller.clientWidth; |
| var scroller_width = scroller.offsetWidth; |
| var scroller_height = scroller.offsetHeight; |
| var content_width = content.offsetWidth; |
| var content_height = content.offsetHeight; |
| |
| expectedScrollTop = content_height - scroller_height + scrollbar_width; |
| expectedScrollLeft = content_width - scroller_width + scrollbar_width; |
| |
| const epsilon = 0.5; |
| test(() => { |
| var scroller = document.querySelector(".horizontal-tb.ltr"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = 2*content_width; |
| scroller.scrollTop = 2*content_height; |
| assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:horizontal-tb; direction:ltr`); |
| |
| test(() => { |
| var scroller = document.querySelector(".horizontal-tb.rtl"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = -2*content_width; |
| scroller.scrollTop = 2*content_height; |
| assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:horizontal-tb; direction:rtl`); |
| |
| test(() => { |
| var scroller = document.querySelector(".vertical-lr.ltr"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = 2*content_width; |
| scroller.scrollTop = 2*content_height; |
| assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:vertical-lr; direction:ltr`); |
| |
| test(() => { |
| var scroller = document.querySelector(".vertical-lr.rtl"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = 2*content_width; |
| scroller.scrollTop = -2*content_height; |
| assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:vertical-lr; direction:rtl`); |
| |
| test(() => { |
| var scroller = document.querySelector(".vertical-rl.ltr"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = -2*content_width; |
| scroller.scrollTop = 2*content_height; |
| assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:vertical-rl; direction:ltr`); |
| |
| test(() => { |
| var scroller = document.querySelector(".vertical-rl.rtl"); |
| assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); |
| scroller.scrollLeft = -2*content_width; |
| scroller.scrollTop = -2*content_height; |
| assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); |
| assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); |
| }, `writing-mode:vertical-rl; direction:rtl`); |
| </script> |
| </body> |
| </html> |
