focus-element-no-snap.html (1212B)
1 <!doctype html> 2 <title>Resnap to focused element after relayout</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 7 #snapper { 8 width: 100px; 9 height: 200px; 10 overflow-x: scroll; 11 scroll-snap-type: x mandatory; 12 color: white; 13 background-color: oldlace; 14 display: flex; 15 align-items: center; 16 } 17 .child { 18 margin-right: 0.5rem; 19 height: 90%; 20 scroll-snap-align: start; 21 padding: 1rem; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 text-align: center; 26 width: 100px; 27 height: 100px; 28 background-color: indigo; 29 } 30 </style> 31 32 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> 33 34 <div id=snapper> 35 <div class="child no-snap" tabindex=-1></div> 36 <div class=child></div> 37 <div class="child" id ="focus" tabindex=-1></div> 38 <div class="child" tabindex=-1></div> 39 <div class=child></div> 40 <div class=child></div> 41 </div> 42 43 <script> 44 45 test(t => { 46 document.getElementById("focus").focus(); 47 const element = document.getElementById("snapper"); 48 element.style.width = "101px"; 49 assert_equals(element.scrollLeft, 0); 50 }); 51 </script>