eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-27 02:05:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Use document's viewport when resolving lengths in media queries

Browse Source 
Previously we would always use the window's viewport which was incorrect
if we were within an iframe.

This is likely applicable to all uses of
`Length::ResolutionContext::for_window`.
This commit is contained in:
Callum Law
2025-10-07 00:54:19 +13:00
committed by Sam Atkins
parent c33be71df9
commit 05c336ea4e
Notes: github-actions[bot] 2025-10-07 09:34:36 +00:00 
Author: https://github.com/Calme1709
Commit: https://github.com/LadybirdBrowser/ladybird/commit/05c336ea4e0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6412
Reviewed-by: https://github.com/AtkinsSJ ✅
23 changed files with 198 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
Tests/LibWeb/Text/input/wpt-import/css/css-values/viewport-units-media-queries.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<title>Viewport units in @media</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 100px;
}
</style>
<iframe id=iframe></iframe>
<script>
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
function test_media_query(feature, result, description) {
test((t) => {
t.add_cleanup(() => { doc.body.innerHTML = ''; })
doc.body.innerHTML = `
<style>
body {
color: red;
}
@media (${feature}) {
body {
color: green;
}
}
</style>
`;
assert_equals(win.getComputedStyle(doc.body).color, result);
}, description);
}
function test_media_query_applies(feature) {
test_media_query(feature, 'rgb(0, 128, 0)', `@media(${feature}) applies`);
}
function test_media_query_does_not_apply(feature) {
test_media_query(feature, 'rgb(255, 0, 0)', `@media(${feature}) does not apply`);
}
test_media_query_applies('width:100vw');
test_media_query_applies('width:100vi');
test_media_query_applies('width:100vmax');
test_media_query_applies('width:100svw');
test_media_query_applies('width:100svi');
test_media_query_applies('width:100svmax');
test_media_query_applies('width:100lvw');
test_media_query_applies('width:100lvi');
test_media_query_applies('width:100lvmax');
test_media_query_applies('width:100dvw');
test_media_query_applies('width:100dvi');
test_media_query_applies('width:100dvmax');
test_media_query_applies('height:100vh');
test_media_query_applies('height:100vb');
test_media_query_applies('height:100vmin');
test_media_query_applies('height:100svh');
test_media_query_applies('height:100svb');
test_media_query_applies('height:100svmin');
test_media_query_applies('height:100lvh');
test_media_query_applies('height:100lvb');
test_media_query_applies('height:100lvmin');
test_media_query_applies('height:100dvh');
test_media_query_applies('height:100dvb');
test_media_query_applies('height:100dvmin');
test_media_query_does_not_apply('width:90vw');
test_media_query_does_not_apply('height:90vh');
</script>