test_isUsedColorSchemeDark.html (1896B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Test InspectorUtils::isUsedColorSchemeDark</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 6 <meta name="color-scheme" content="light dark"> 7 8 <div id="dark" style="color-scheme: dark"></div> 9 <div id="light" style="color-scheme: light"></div> 10 <div id="preferred" style="color-scheme: light dark"></div> 11 <div id="default"></div> 12 13 <script> 14 const InspectorUtils = SpecialPowers.InspectorUtils; 15 16 function testElement(id, dark) { 17 is(InspectorUtils.isUsedColorSchemeDark(document.getElementById(id)), dark, id + " should " + (dark ? "" : "not ") + "be dark"); 18 } 19 20 const meta = document.querySelector('meta[name="color-scheme"]'); 21 22 function runTests() { 23 const prefersDark = matchMedia("(prefers-color-scheme: dark)").matches; 24 info(`testing with meta ${meta.content} and preference ${prefersDark ? "dark" : "light"}`); 25 26 testElement("dark", true); 27 testElement("light", false); 28 testElement("preferred", prefersDark); 29 testElement("default", meta.content.includes("dark") && (!meta.content.includes("light") || prefersDark)); 30 } 31 32 function waitForColorSchemeToBe(scheme) { 33 return new Promise(resolve => { 34 let mq = matchMedia(`(prefers-color-scheme: ${scheme})`); 35 if (mq.matches) { 36 resolve(); 37 } else { 38 mq.addEventListener("change", resolve, { once: true }); 39 } 40 }); 41 } 42 43 async function switchColorScheme(dark) { 44 await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", dark ? 0 : 1]] }); 45 await waitForColorSchemeToBe(dark ? "dark" : "light"); 46 } 47 48 add_task(async function() { 49 runTests(); 50 51 for (let dark of [false, true]) { 52 for (let metaValue of ["light", "dark", "light dark"]) { 53 meta.setAttribute("content", metaValue); 54 await switchColorScheme(dark); 55 runTests(); 56 } 57 } 58 }); 59 </script>