focus-prioritized.html (1413B)
1 <!DOCTYPE html> 2 <meta charset="utf8"> 3 <title>CSS Scroll Anchoring: prioritize focused element</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#anchor-node-selection"> 6 <meta name="assert" content="anchor selection prioritized focused element"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 body { height: 4000px } 13 .spacer { height: 100px } 14 #growing { height: 100px } 15 #focused { height: 10px } 16 </style> 17 18 <div class=spacer></div> 19 <div class=spacer></div> 20 <div class=spacer></div> 21 <div class=spacer></div> 22 <div id=growing></div> 23 <div class=spacer></div> 24 <div id=focused contenteditable></div> 25 <div class=spacer></div> 26 <div class=spacer></div> 27 28 <script> 29 async_test((t) => { 30 document.scrollingElement.scrollTop = 150; 31 focused.focus(); 32 33 const target_rect = focused.getBoundingClientRect(); 34 growing.style.height = "3000px"; 35 36 requestAnimationFrame(() => { 37 t.step(() => { 38 const new_rect = focused.getBoundingClientRect(); 39 assert_equals(new_rect.x, target_rect.x, "x coordinate"); 40 assert_equals(new_rect.y, target_rect.y, "y coordinate"); 41 assert_not_equals(document.scrollingElement.scrollTop, 150, "scroll adjusted"); 42 }); 43 t.done(); 44 }); 45 }, "Anchor selection prioritized focused element."); 46 </script>