fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Update layout when checking media queries inside iframes

Browse Source 
This ensures that the containing iframe has up-to-date viewport metrics,
which is important since that may affect media query results.
This commit is contained in:
Andreas Kling
2025-02-13 13:02:14 +01:00
committed by Andreas Kling
parent afff44be86
commit 6fd24c2a68
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Libraries/LibWeb/CSS/MediaQueryList.cpp
View File

@@ -54,6 +54,13 @@ bool MediaQueryList::matches() const
if (m_media.is_empty()) if (m_media.is_empty())
return true; return true;
// NOTE: If our document is inside a frame, we need to update layout
// since that may cause our frame (and thus viewport) to resize.
if (auto container_document = m_document->container_document()) {
container_document->update_layout();
const_cast<MediaQueryList*>(this)->evaluate();
}
for (auto& media : m_media) { for (auto& media : m_media) {
if (media->matches()) if (media->matches())
return true; return true;

27
Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/media-query-matches-in-iframe.txt
View File

@@ -2,19 +2,20 @@ Harness status: OK
Found 22 tests Found 22 tests
22 Fail 12 Pass
Fail matchMedia('(max-width: 150px)').matches should update immediately 10 Fail
Fail matchMedia('(width: 100px)').matches should update immediately Pass matchMedia('(max-width: 150px)').matches should update immediately
Fail matchMedia('(orientation: portrait)').matches should update immediately Pass matchMedia('(width: 100px)').matches should update immediately
Fail matchMedia('(aspect-ratio: 1/1)').matches should update immediately Pass matchMedia('(orientation: portrait)').matches should update immediately
Fail matchMedia('(max-aspect-ratio: 4/3)').matches should update immediately Pass matchMedia('(aspect-ratio: 1/1)').matches should update immediately
Fail matchMedia('(height: 100px)').matches should update immediately Pass matchMedia('(max-aspect-ratio: 4/3)').matches should update immediately
Fail matchMedia('(max-height: 150px)').matches should update immediately Pass matchMedia('(height: 100px)').matches should update immediately
Fail matchMedia('(min-aspect-ratio: 3/4)').matches should update immediately Pass matchMedia('(max-height: 150px)').matches should update immediately
Fail matchMedia('(min-height: 150px)').matches should update immediately Pass matchMedia('(min-aspect-ratio: 3/4)').matches should update immediately
Fail matchMedia('(aspect-ratio: 1/2)').matches should update immediately Pass matchMedia('(min-height: 150px)').matches should update immediately
Fail matchMedia('(min-width: 150px)').matches should update immediately Pass matchMedia('(aspect-ratio: 1/2)').matches should update immediately
Fail matchMedia('(min-aspect-ratio: 4/3)').matches should update immediately Pass matchMedia('(min-width: 150px)').matches should update immediately
Pass matchMedia('(min-aspect-ratio: 4/3)').matches should update immediately
Fail matchMedia('(max-width: 150px)') should not receive a change event until update the rendering step of HTML5 event loop Fail matchMedia('(max-width: 150px)') should not receive a change event until update the rendering step of HTML5 event loop
Fail matchMedia('(width: 100px)') should not receive a change event until update the rendering step of HTML5 event loop Fail matchMedia('(width: 100px)') should not receive a change event until update the rendering step of HTML5 event loop
Fail matchMedia('(orientation: portrait)') should not receive a change event until update the rendering step of HTML5 event loop Fail matchMedia('(orientation: portrait)') should not receive a change event until update the rendering step of HTML5 event loop