[MQ4] Implement overflow-block/overflow-inline media query features

https://bugs.webkit.org/show_bug.cgi?id=253662 rdar://106511968 Reviewed by Darin Adler. https://drafts.csswg.org/mediaqueries-4/#mf-overflow-block https://drafts.csswg.org/mediaqueries-4/#mf-overflow-inline * LayoutTests/fast/css/media-query-overflow-block-dynamic-expected.html: Added. * LayoutTests/fast/css/media-query-overflow-block-dynamic.html: Added. * LayoutTests/fast/css/media-query-overflow-block-paged-expected.html: Added. * LayoutTests/fast/css/media-query-overflow-block-paged.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/mediaqueries/test_media_queries-expected.txt: * Source/WebCore/css/CSSValueKeywords.in: * Source/WebCore/css/query/MediaQueryFeatures.cpp: (WebCore::MQ::Features::overflowBlock): (WebCore::MQ::Features::overflowInline): * Source/WebCore/css/query/MediaQueryFeatures.h: Canonical link: https://commits.webkit.org/263088@main
WebKit · Apr 18, 2023 · 3f9d91e · 3f9d91e
1 parent e4d2a74
commit 3f9d91e
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 9 deletions.
diff --git a/LayoutTests/fast/css/media-query-overflow-block-dynamic-expected.html b/LayoutTests/fast/css/media-query-overflow-block-dynamic-expected.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html style="color: green;"><p>This text should be green.</p></html>
diff --git a/LayoutTests/fast/css/media-query-overflow-block-dynamic.html b/LayoutTests/fast/css/media-query-overflow-block-dynamic.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+    :root {
+        color: blue;
+    }
+    @media (overflow-block: paged) {
+        :root {
+            color: red;
+        }
+    }
+    @media (overflow-block: scroll) {
+        :root {
+            color: green;
+        }
+    }
+    @media (overflow-block: none) {
+        :root {
+            color: red;
+        }
+    }
+</style>
+<p>This text should be green.</p>
+<script>
+addEventListener("load", () => {
+    if (!window.internals)
+        return;
+
+    internals.setPagination("LeftToRightPaginated", 0);
+
+    // Give it a chance to actually render as overflow-block: paged before switching back.
+    requestAnimationFrame(() => {
+        setTimeout(() => {
+            internals.setPagination("Unpaginated", 0);
+            document.documentElement.classList.remove("reftest-wait");
+        }, 0);
+    });
+});
+</script>
+</html>
diff --git a/LayoutTests/fast/css/media-query-overflow-block-paged-expected.html b/LayoutTests/fast/css/media-query-overflow-block-paged-expected.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html style="color: green;"><p>This text should be green in paginated mode.</p></html>
diff --git a/LayoutTests/fast/css/media-query-overflow-block-paged.html b/LayoutTests/fast/css/media-query-overflow-block-paged.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<style>
+    :root {
+        color: blue;
+    }
+    @media (overflow-block: paged) {
+        :root {
+            color: green;
+        }
+    }
+    @media (overflow-block: scroll) {
+        :root {
+            color: red;
+        }
+    }
+    @media (overflow-block: none) {
+        :root {
+            color: red;
+        }
+    }
+</style>
+<p>This text should be green in paginated mode.</p>
+<script>
+if (window.internals)
+    internals.setPagination("LeftToRightPaginated", 0);
+</script>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/mediaqueries/test_media_queries-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/mediaqueries/test_media_queries-expected.txt
@@ -1256,20 +1256,20 @@ PASS should_not_apply: all and min-color : 1
 PASS should_not_apply: (bogus)
 PASS should_not_apply: not all and (bogus)
 PASS should_not_apply: only all and (bogus)
-FAIL expression_should_be_known: overflow-block assert_true: expected true got false
-FAIL expression_should_be_known: overflow-block: none assert_true: expected true got false
-FAIL expression_should_be_known: overflow-block: paged assert_true: expected true got false
-FAIL expression_should_be_known: overflow-block: scroll assert_true: expected true got false
+PASS expression_should_be_known: overflow-block
+PASS expression_should_be_known: overflow-block: none
+PASS expression_should_be_known: overflow-block: paged
+PASS expression_should_be_known: overflow-block: scroll
 FAIL expression_should_be_known: overflow-block: optional-paged assert_true: expected true got false
 PASS expression_should_be_parseable: overflow-block: some-random-invalid-thing
 PASS expression_should_be_unknown: overflow-block: some-random-invalid-thing
-FAIL Sanity check for overflow-block assert_not_equals: overflow-block should be equivalent to not (overflow-block: none) got disallowed value false
-FAIL expression_should_be_known: overflow-inline assert_true: expected true got false
-FAIL expression_should_be_known: overflow-inline: none assert_true: expected true got false
-FAIL expression_should_be_known: overflow-inline: scroll assert_true: expected true got false
+PASS Sanity check for overflow-block
+PASS expression_should_be_known: overflow-inline
+PASS expression_should_be_known: overflow-inline: none
+PASS expression_should_be_known: overflow-inline: scroll
 PASS expression_should_be_parseable: overflow-inline: some-random-invalid-thing
 PASS expression_should_be_unknown: overflow-inline: some-random-invalid-thing
-FAIL Sanity check for overflow-inline assert_not_equals: overflow-inline should be equivalent to not (overflow-inline: none) got disallowed value false
+PASS Sanity check for overflow-inline
 FAIL expression_should_be_known: update assert_true: expected true got false
 FAIL expression_should_be_known: update: none assert_true: expected true got false
 FAIL expression_should_be_known: update: slow assert_true: expected true got false

diff --git a/Source/WebCore/css/CSSValueKeywords.in b/Source/WebCore/css/CSSValueKeywords.in
@@ -1226,6 +1226,11 @@ interlace
 // none
 active
 
+// (overflow-block/inline:) media feature.
+// none
+// scroll
+paged
+
 // blend modes
 // normal
 multiply

diff --git a/Source/WebCore/css/query/MediaQueryFeatures.cpp b/Source/WebCore/css/query/MediaQueryFeatures.cpp
@@ -689,6 +689,37 @@ const FeatureSchema& displayMode()
 }
 #endif
 
+const FeatureSchema& overflowBlock()
+{
+    static MainThreadNeverDestroyed<IdentifierSchema> schema {
+        "overflow-block"_s,
+        Vector { CSSValueNone, CSSValueScroll, CSSValuePaged },
+        [](auto& context) {
+            // FIXME: Match none when scrollEnabled is set to false by UIKit.
+            bool usesPaginatedMode = [&] {
+                auto& frame = *context.document.frame();
+                auto* frameView = frame.view();
+                return frameView && frameView->pagination().mode != PaginationMode::Unpaginated;
+            }();
+            return MatchingIdentifiers { usesPaginatedMode ? CSSValuePaged : CSSValueScroll };
+        }
+    };
+    return schema;
+}
+
+const FeatureSchema& overflowInline()
+{
+    static MainThreadNeverDestroyed<IdentifierSchema> schema {
+        "overflow-inline"_s,
+        Vector { CSSValueNone, CSSValueScroll },
+        [](auto&) {
+            // FIXME: Match none when scrollEnabled is set to false by UIKit.
+            return MatchingIdentifiers { CSSValueScroll };
+        }
+    };
+    return schema;
+}
+
 #if ENABLE(DARK_MODE_CSS)
 const FeatureSchema& prefersColorScheme()
 {
@@ -727,6 +758,8 @@ Vector<const FeatureSchema*> allSchemas()
         &hover(),
         &invertedColors(),
         &monochrome(),
+        &overflowBlock(),
+        &overflowInline(),
         &orientation(),
         &pointer(),
         &prefersContrast(),

diff --git a/Source/WebCore/css/query/MediaQueryFeatures.h b/Source/WebCore/css/query/MediaQueryFeatures.h
@@ -49,6 +49,8 @@ const FeatureSchema& hover();
 const FeatureSchema& invertedColors();
 const FeatureSchema& monochrome();
 const FeatureSchema& orientation();
+const FeatureSchema& overflowBlock();
+const FeatureSchema& overflowInline();
 const FeatureSchema& pointer();
 const FeatureSchema& prefersContrast();
 const FeatureSchema& prefersDarkInterface();