iframe-scroll.sub.html (2111B)
1 <!doctype html> 2 <title>Text directive in cross-origin iframe doesn't cause scrolling in main document</title> 3 <meta charset=utf-8> 4 <link rel="help" href="https://wicg.github.io/ScrollToTextFragment/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/common/utils.js"></script> 10 <script src="stash.js"></script> 11 <style> 12 iframe { 13 width: 300px; 14 height: 300px; 15 /* Make sure iframe is mostly offscreen but intersects viewport slightly so 16 * it isn't throttled in any way */ 17 margin-top: 95vh; 18 } 19 </style> 20 21 <iframe></iframe> 22 23 <script> 24 let iframe_did_scroll = false; 25 26 window.addEventListener('message', (e) => { 27 if (e.data != 'did_scroll') 28 throw new Error("Got unexpected message: " + e.data); 29 if (iframe_did_scroll) 30 throw new Error("Got multiple messages from single iframe"); 31 32 iframe_did_scroll = true; 33 }); 34 35 async function wait_for_iframe_scroll(t) { 36 await t.step_wait(() => iframe_did_scroll == true, "iframe scrolled to text directive", 10000); 37 iframe_did_scroll = false; 38 } 39 40 async function rAF() { 41 return new Promise((resolve) => { 42 window.requestAnimationFrame(resolve); 43 }); 44 } 45 46 onload = () => { 47 promise_test(async function (t) { 48 window.scrollTo(0, 0); 49 50 frames[0].location = "http://{{hosts[][www]}}:{{ports[http][0]}}/scroll-to-text-fragment/resources/self-text-directive-iframe.html"; 51 await wait_for_iframe_scroll(t); 52 await rAF(); 53 assert_equals(document.scrollingElement.scrollTop, 0); 54 }, "CROSS-ORIGIN: Text directive in iframe doesn't bubble to outer frame."); 55 56 promise_test(async function (t) { 57 window.scrollTo(0, 0); 58 59 frames[0].location = "resources/self-text-directive-iframe.html"; 60 await wait_for_iframe_scroll(t); 61 await rAF(); 62 assert_greater_than(document.scrollingElement.scrollTop, 0); 63 }, "SAME-ORIGIN: Text directive in iframe bubbles to outer frame."); 64 } 65 </script>