Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/at-media-matches-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSSMediaRule.matches changes when viewport changes</title>
<link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
<script src="/common/rendering-utils.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#iframe {
width: 200px;
height: 200px;
}
</style>
<iframe id=iframe src="support/at-media-matches-002-iframe.html"></iframe>
<script>
function getMediaMatches() {
return new Promise(resolve => {
window.addEventListener("message", (event) => {
resolve(event.data);
}, { "once": true });
iframe.contentWindow.postMessage("getMediaMatches");
});
}
// Wait for the frame to fully load.
promise_setup(() => {
return new Promise(resolve => {
window.addEventListener("message", (event) => {
if (event.data === "ready")
resolve();
}, { "once": true });
});
});
promise_test(async () => {
const matches = await getMediaMatches();
assert_false(matches);
}, "Initially, @media (max-height: 100px) doesn't match in an iframe with 200px height");
promise_test(async () => {
iframe.style.height = "90px";
// Wait a few frames for style resolution.
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
const matches = await getMediaMatches();
assert_true(matches);
}, "Change iframe height to 90px, @media (max-height: 100px) now matches");
</script>