test_mq_dynamic_svg.html (1721B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Dynamic changes to prefers-color-scheme affecting SVG images</title> 4 <link rel=stylesheet type=text/css href=/tests/SimpleTest/test.css> 5 <script src=/tests/SimpleTest/SimpleTest.js></script> 6 <script src=/tests/SimpleTest/WindowSnapshot.js></script> 7 <body onload=run()> 8 <iframe id=f1 width=300 height=600></iframe> 9 <iframe id=f2 width=300 height=600></iframe> 10 <script> 11 SimpleTest.waitForExplicitFinish(); 12 13 // Not strictly needed, but keeps eslint happy. 14 let f1 = window.f1; 15 let f2 = window.f2; 16 17 function snapshotsEqual() { 18 let s1 = snapshotWindow(f1.contentWindow); 19 let s2 = snapshotWindow(f2.contentWindow); 20 return compareSnapshots(s1, s2, true)[0]; 21 } 22 23 function waitForColorSchemeToBe(scheme) { 24 return new Promise(resolve => { 25 let mq = matchMedia(`(prefers-color-scheme: ${scheme})`); 26 if (mq.matches) { 27 resolve(); 28 } else { 29 mq.addEventListener("change", resolve, { once: true }); 30 } 31 }); 32 } 33 34 async function run() { 35 let loadedFrame1 = new Promise(resolve => f1.onload = resolve); 36 let loadedFrame2 = new Promise(resolve => f2.onload = resolve); 37 await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 1]] }); 38 await waitForColorSchemeToBe("light"); 39 f1.src = "mq_dynamic_svg_test.html"; 40 f2.src = "mq_dynamic_svg_ref.html"; 41 await loadedFrame1; 42 await loadedFrame2; 43 ok(!snapshotsEqual(), "In light mode snapshot comparison should be false"); 44 await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 0]] }); 45 await waitForColorSchemeToBe("dark"); 46 ok(snapshotsEqual(), "In dark mode snapshot comparison should be true"); 47 SimpleTest.finish(); 48 } 49 </script>