mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-09 17:49:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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
commit 6fd24c2a68
Notes: github-actions[bot] 2025-02-13 19:53:36 +00:00
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