scrollLeftTop.html (5759B)
1 <!DOCTYPE html> 2 <title>CSSOM View - scrollLeft/scrollTop considers writing-mode and css direction</title> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area-origin"> 7 <link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element"> 8 <meta name="assert" content="This test verifies the assigned and extreme values of the scroll positions of an element."> 9 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 13 <head> 14 <style> 15 .scroller { 16 overflow: scroll; 17 width: 150px; 18 height: 100px; 19 } 20 .content { 21 width: 300px; 22 height: 400px; 23 } 24 .horizontal-tb { 25 writing-mode: horizontal-tb; 26 } 27 .vertical-lr { 28 writing-mode: vertical-lr; 29 } 30 .vertical-rl { 31 writing-mode: vertical-rl; 32 } 33 .rtl { 34 direction: rtl; 35 } 36 </style> 37 </head> 38 39 <body> 40 <h1>scrollLeft/scrollTop</h1> 41 <h2>writing-mode: horizontal-tb;</h2> 42 <div id="target_scroller" class="scroller horizontal-tb ltr"> 43 <div id="target_content" class="content"></div> 44 </div> 45 <div class="scroller horizontal-tb rtl"> 46 <div class="content"></div> 47 </div> 48 <h2>writing-mode: vertical-lr;</h2> 49 <div class="scroller vertical-lr ltr"> 50 <div class="content"></div> 51 </div> 52 <div class="scroller vertical-lr rtl"> 53 <div class="content"></div> 54 </div> 55 <h2>writing-mode: vertical-rl;</h2> 56 <div class="scroller vertical-rl ltr"> 57 <div class="content"></div> 58 </div> 59 <div class="scroller vertical-rl rtl"> 60 <div class="content"></div> 61 </div> 62 63 <script> 64 var scroller = document.querySelector("#target_scroller"); 65 var content = document.querySelector("#target_content"); 66 var scrollbar_width = scroller.offsetWidth - scroller.clientWidth; 67 var scroller_width = scroller.offsetWidth; 68 var scroller_height = scroller.offsetHeight; 69 var content_width = content.offsetWidth; 70 var content_height = content.offsetHeight; 71 72 expectedScrollTop = content_height - scroller_height + scrollbar_width; 73 expectedScrollLeft = content_width - scroller_width + scrollbar_width; 74 75 const epsilon = 0.5; 76 test(() => { 77 var scroller = document.querySelector(".horizontal-tb.ltr"); 78 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 79 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 80 scroller.scrollLeft = 2*content_width; 81 scroller.scrollTop = 2*content_height; 82 assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); 83 assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); 84 }, `writing-mode:horizontal-tb; direction:ltr`); 85 86 test(() => { 87 var scroller = document.querySelector(".horizontal-tb.rtl"); 88 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 89 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 90 scroller.scrollLeft = -2*content_width; 91 scroller.scrollTop = 2*content_height; 92 assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); 93 assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); 94 }, `writing-mode:horizontal-tb; direction:rtl`); 95 96 test(() => { 97 var scroller = document.querySelector(".vertical-lr.ltr"); 98 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 99 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 100 scroller.scrollLeft = 2*content_width; 101 scroller.scrollTop = 2*content_height; 102 assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); 103 assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); 104 }, `writing-mode:vertical-lr; direction:ltr`); 105 106 test(() => { 107 var scroller = document.querySelector(".vertical-lr.rtl"); 108 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 109 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 110 scroller.scrollLeft = 2*content_width; 111 scroller.scrollTop = -2*content_height; 112 assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft"); 113 assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); 114 }, `writing-mode:vertical-lr; direction:rtl`); 115 116 test(() => { 117 var scroller = document.querySelector(".vertical-rl.ltr"); 118 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 119 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 120 scroller.scrollLeft = -2*content_width; 121 scroller.scrollTop = 2*content_height; 122 assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); 123 assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop"); 124 }, `writing-mode:vertical-rl; direction:ltr`); 125 126 test(() => { 127 var scroller = document.querySelector(".vertical-rl.rtl"); 128 assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft"); 129 assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop"); 130 scroller.scrollLeft = -2*content_width; 131 scroller.scrollTop = -2*content_height; 132 assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft"); 133 assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop"); 134 }, `writing-mode:vertical-rl; direction:rtl`); 135 </script> 136 </body> 137 </html>