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