test_mq_dynamic_svg.html

Enable keyboard shortcuts

<!DOCTYPE html>

<meta charset=utf-8>

<title>Dynamic changes to prefers-color-scheme affecting SVG images</title>

<link rel=stylesheet type=text/css href=/tests/SimpleTest/test.css>

<script src=/tests/SimpleTest/SimpleTest.js></script>

<script src=/tests/SimpleTest/WindowSnapshot.js></script>

<body onload=run()>

<iframe id=f1 width=300 height=600></iframe>

<iframe id=f2 width=300 height=600></iframe>

<script>

SimpleTest.waitForExplicitFinish();

// Not strictly needed, but keeps eslint happy.

let f1 = window.f1;

let f2 = window.f2;

function snapshotsEqual() {

  let s1 = snapshotWindow(f1.contentWindow);

  let s2 = snapshotWindow(f2.contentWindow);

  return compareSnapshots(s1, s2, true)[0];

function waitForColorSchemeToBe(scheme) {

  return new Promise(resolve => {

    let mq = matchMedia(`(prefers-color-scheme: ${scheme})`);

    if (mq.matches) {

      resolve();

    } else {

      mq.addEventListener("change", resolve, { once: true });

});

async function run() {

  let loadedFrame1 = new Promise(resolve => f1.onload = resolve);

  let loadedFrame2 = new Promise(resolve => f2.onload = resolve);

  await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 1]] });

  await waitForColorSchemeToBe("light");

  f1.src = "mq_dynamic_svg_test.html";

  f2.src = "mq_dynamic_svg_ref.html";

  await loadedFrame1;

  await loadedFrame2;

  ok(!snapshotsEqual(), "In light mode snapshot comparison should be false");

  await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 0]] });

  await waitForColorSchemeToBe("dark");

  ok(snapshotsEqual(), "In dark mode snapshot comparison should be true");

  SimpleTest.finish();

</script>