test_mq_changes_in_iframe.html (1596B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Media feature value change propagation in an iframe</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 8 </head> 9 <body> 10 <p id="display"></p> 11 <div id="content" style="display: none"></div> 12 <iframe id="iframe"></iframe> 13 <pre id="test"></pre> 14 <script> 15 add_task(async () => { 16 const mqString = "(prefers-reduced-motion: reduce)"; 17 18 await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 0]]}); 19 20 iframe.src = SimpleTest.getTestFileURL("mq_changes_child.html") 21 .replace("mochi.test:8888", "example.com"); 22 await new Promise(resolve => window.addEventListener("message", event => { 23 if (event.data == "ready") { 24 resolve(); 25 } 26 }, { once: true } )); 27 28 const mql = matchMedia(mqString); 29 ok(!mql.matches, `Doesn't matches ${mqString}`); 30 31 const changedInThisDocument = new Promise(resolve => { 32 mql.addEventListener("change", event => { resolve(event.matches); }); 33 }); 34 const changedInIFrame = new Promise(resolve => { 35 window.addEventListener("message", event => { 36 if ("matches" in event.data) { 37 resolve(event.data.matches); 38 } 39 }, { once: true }); 40 }); 41 42 await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 1]]}); 43 44 const results = 45 await Promise.allSettled([ changedInThisDocument, changedInIFrame ]); 46 47 results.forEach(result => { 48 is(result.status, "fulfilled"); 49 ok(result.value, `Matches ${mqString}`); 50 }); 51 }); 52 </script> 53 </body> 54 </html>