scroll-initial-target-rtl.tentative.html (1588B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 12 <body> 13 <style> 14 #scroller { 15 height: 500px; 16 width: 500px; 17 display: block; 18 overflow: scroll; 19 writing-mode: vertical-rl; 20 } 21 22 .box { 23 position: relative; 24 width: 60%; 25 height: 60%; 26 } 27 28 .top_right { 29 top: 0px; 30 left: 0px; 31 background-color: red; 32 } 33 34 .center { 35 top: 60%; 36 background-color: purple; 37 scroll-initial-target: nearest; 38 } 39 40 .bottom_left { 41 top: 120%; 42 background-color: yellow; 43 } 44 </style> 45 <div id="scroller"> 46 <div class="top_right box" id="box1"></div> 47 <div class="center box" id="box2"></div> 48 <div class="bottom_left box" id="box3"></div> 49 </div> 50 <script> 51 let initial_expected_scroll_top = box1.getBoundingClientRect().height; 52 let initial_expected_scroll_left = -box1.getBoundingClientRect().width; 53 54 test((t) => { 55 assert_equals(scroller.scrollTop, initial_expected_scroll_top, 56 "scroller is vertically scrolled to scroll-initial-target"); 57 assert_equals(scroller.scrollLeft, initial_expected_scroll_left, 58 "scroller is horizontally scrolled to scroll-initial-target"); 59 }, "scroll-initial-target reflects vertical rtl writing mode."); 60 </script> 61 </body> 62 63 </html>