Reduced from a test in http://wpt.live/css/css-cascade/layer-media-query.html but doesn't actually involve layers, so this reduction doesn't use them.
I believe the bug here is that setting the iframe's width isn't triggering media-query re-evaluation.
<iframe id="iframe" width=300 height=300 frameborder=0></iframe>
<div id="output"></div>
<script type="module">
function assert_equals(actual, expected) {
document.getElementById("output").innerHTML += `${actual === expected ? 'PASS' : 'FAIL'}: expected "${expected}"; got "${actual}"<br/>`;
}
let iframe = document.querySelector("iframe");
iframe.width = 300;
await new Promise(resolve => {
iframe.onload = resolve;
iframe.srcdoc = `
<style>
target { color: red }
@media (min-width: 500px) {
target { color: green; }
}
</style>
<target></target>
`;
});
const target = iframe.contentDocument.querySelector('target');
assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)');
iframe.width = 600;
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
</script>
LadybirdBrowser / ladybird
Truly independent web browser
21.3k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too