From 6fd24c2a6898216bfef7fbf2e95cf34d82615346 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Thu, 13 Feb 2025 13:02:14 +0100 Subject: [PATCH] LibWeb: Update layout when checking media queries inside iframes This ensures that the containing iframe has up-to-date viewport metrics, which is important since that may affect media query results. --- Libraries/LibWeb/CSS/MediaQueryList.cpp | 7 +++++ .../media-query-matches-in-iframe.txt | 27 ++++++++++--------- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/Libraries/LibWeb/CSS/MediaQueryList.cpp b/Libraries/LibWeb/CSS/MediaQueryList.cpp index 5236eae49f9..63d4ac0e2e0 100644 --- a/Libraries/LibWeb/CSS/MediaQueryList.cpp +++ b/Libraries/LibWeb/CSS/MediaQueryList.cpp @@ -54,6 +54,13 @@ bool MediaQueryList::matches() const if (m_media.is_empty()) 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(this)->evaluate(); + } + for (auto& media : m_media) { if (media->matches()) return true; diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/media-query-matches-in-iframe.txt b/Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/media-query-matches-in-iframe.txt index d321602ae2e..40970705717 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/media-query-matches-in-iframe.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/mediaqueries/media-query-matches-in-iframe.txt @@ -2,19 +2,20 @@ Harness status: OK Found 22 tests -22 Fail -Fail matchMedia('(max-width: 150px)').matches should update immediately -Fail matchMedia('(width: 100px)').matches should update immediately -Fail matchMedia('(orientation: portrait)').matches should update immediately -Fail matchMedia('(aspect-ratio: 1/1)').matches should update immediately -Fail matchMedia('(max-aspect-ratio: 4/3)').matches should update immediately -Fail matchMedia('(height: 100px)').matches should update immediately -Fail matchMedia('(max-height: 150px)').matches should update immediately -Fail matchMedia('(min-aspect-ratio: 3/4)').matches should update immediately -Fail matchMedia('(min-height: 150px)').matches should update immediately -Fail matchMedia('(aspect-ratio: 1/2)').matches should update immediately -Fail matchMedia('(min-width: 150px)').matches should update immediately -Fail matchMedia('(min-aspect-ratio: 4/3)').matches should update immediately +12 Pass +10 Fail +Pass matchMedia('(max-width: 150px)').matches should update immediately +Pass matchMedia('(width: 100px)').matches should update immediately +Pass matchMedia('(orientation: portrait)').matches should update immediately +Pass matchMedia('(aspect-ratio: 1/1)').matches should update immediately +Pass matchMedia('(max-aspect-ratio: 4/3)').matches should update immediately +Pass matchMedia('(height: 100px)').matches should update immediately +Pass matchMedia('(max-height: 150px)').matches should update immediately +Pass matchMedia('(min-aspect-ratio: 3/4)').matches should update immediately +Pass matchMedia('(min-height: 150px)').matches should update immediately +Pass matchMedia('(aspect-ratio: 1/2)').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('(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