scroll-marker-013.html (1445B)
1 <!DOCTYPE html> 2 <title>::scroll-marker in inline formatting context</title> 3 <link rel="help" href="https://issues.chromium.org/issues/376834376"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 <style> 11 #container { 12 font: 20px/20px Ahem; 13 overflow: auto; 14 width: 300px; 15 height: 100px; 16 scroll-marker-group: before; 17 background: yellow; 18 } 19 20 #container::scroll-marker-group { 21 display: block; 22 height: 20px; 23 background: cyan; 24 } 25 26 #container>* { 27 height: 100px; 28 } 29 30 #container>*::scroll-marker { 31 content: "x"; 32 } 33 </style> 34 <div id="container"> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 <div></div> 43 <div></div> 44 </div> 45 46 <script> 47 function sendClick(x) { 48 return new test_driver.Actions() 49 .pointerMove(x, 10) 50 .pointerDown() 51 .pointerUp() 52 .send(); 53 } 54 55 promise_test(async t => { 56 await sendClick(170); 57 assert_equals(container.scrollTop, 800); 58 }, "Scroll last item into view"); 59 promise_test(async t => { 60 await sendClick(130); 61 assert_equals(container.scrollTop, 600); 62 }, "Scroll seventh item into view"); 63 </script>