<!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>
