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