layout-follows-focused-targeted-block.html (4436B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/dom/events/scrolling/scroll_support.js"></script> 8 </head> 9 <body> 10 <style> 11 iframe { 12 width: 1000px; 13 height: 1000px; 14 } 15 </style> 16 <script> 17 let scroller; 18 let box1; 19 let box2; 20 let frame; 21 22 const iframe_load_promise = new Promise((resolve) => { 23 frame = document.createElement("iframe"); 24 frame.onload = async () => { 25 scroller = frame.contentDocument.getElementById("scroller"); 26 box1 = frame.contentDocument.getElementById("box1"); 27 box2 = frame.contentDocument.getElementById("box2"); 28 resolve(); 29 }; 30 frame.src = "./layout-follows-focused-targeted-block-iframe.html#box2"; 31 document.body.appendChild(frame); 32 }); 33 34 const displacement = 150; 35 async function test_resnap(t, target) { 36 // Save box1's position and setup the cleanup. 37 const box1_left = box1.style.left; 38 t.add_cleanup(async () => { 39 // Reset box1's position. 40 box1.style.left = box1_left; 41 // Reset scroller's writing-mode. 42 scroller.style.writingMode = "horizontal-tb"; 43 // Reset scroll position. 44 await waitForScrollReset(t, scroller); 45 }); 46 47 assert_equals(scroller.scrollTop, 0, "scroll top is reset"); 48 assert_equals(scroller.scrollLeft, 0, "scroll left is reset"); 49 50 // Move box1 outside the scrollport by translating it 150px 51 // horizontally. 52 const new_left = box1.offsetLeft + displacement; 53 box1.style.left = `${new_left}px`; 54 55 assert_equals(scroller.scrollLeft, target.offsetLeft, 56 `scroller followed ${target.id} in x axis`); 57 58 assert_equals(scroller.scrollTop, target.offsetTop, 59 `scroller followed ${target.id} in y axis`); 60 } 61 62 promise_test(async (t) => { 63 await iframe_load_promise; 64 65 box1.focus(); 66 assert_equals(frame.contentDocument.activeElement, box1, 67 "sanity check that box1 is focused."); 68 assert_equals(frame.contentDocument.querySelector(":target"), box2, 69 "sanity check that box2 is targeted."); 70 // box2 is targeted but box1 is focused, so box1 should be 71 // followed. 72 await test_resnap(t, box1); 73 74 // Remove focus from box1. 75 scroller.focus(); 76 }, "focused area prefered over targeted area."); 77 78 promise_test(async (t) => { 79 await iframe_load_promise; 80 81 assert_not_equals(frame.contentDocument.activeElement, box1, 82 "sanity check that box1 is not focused."); 83 assert_equals(frame.contentDocument.querySelector(":target"), box2, 84 "sanity check that box2 is targeted."); 85 // box2 is targeted and box1 is not focused, so box2 should be 86 // followed. 87 await test_resnap(t, box2); 88 }, "targeted area prefered over non-focused area."); 89 90 promise_test(async (t) => { 91 await iframe_load_promise; 92 93 // Clear the targeted element. 94 frame.contentDocument.location.hash = ""; 95 assert_equals(frame.contentDocument.querySelector(":target"), null, 96 "sanity check that no box is targeted."); 97 assert_not_equals(frame.contentDocument.activeElement, box1, 98 "sanity check that box1 is not focused."); 99 100 // Neither box is targeted or focused; so, the block axis target should 101 // be followed. 102 await test_resnap(t, box1); 103 }, "block axis area is preferred."); 104 105 promise_test(async (t) => { 106 await iframe_load_promise; 107 108 scroller.style.writingMode = "vertical-lr"; 109 110 // Clear the targeted element. 111 frame.contentDocument.location.hash = ""; 112 assert_equals(frame.contentDocument.querySelector(":target"), null, 113 "sanity check that no box is targeted."); 114 assert_not_equals(frame.contentDocument.activeElement, box1, 115 "sanity check that box1 is not focused."); 116 117 // Neither box is targeted or focused; so, the block (x) axis target 118 // should be followed. 119 await test_resnap(t, box2); 120 }, "block axis area is preferred (vertical writing-mode)."); 121 </script> 122 </body> 123 124 </html>