Implement overflow-block and overflow-inline media features.

In current implementation only printing vs other devices is differentiated.

Currently overflow-block will not support (none) as there is no way
to understand we have a billboard.

https://drafts.csswg.org/mediaqueries-4/#mf-overflow-block
https://drafts.csswg.org/mediaqueries-4/#mf-overflow-inline

Fixed: 790911
Change-Id: I6462b1685716f66f5a6267d26bf3f96e864bd58d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4279967
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1108951}

third_party/blink/renderer/core/css/css_value_keywords.json5

@@ -1064,6 +1064,9 @@
     "window-controls-overlay",
     "tabbed",
 
+    // (overflow-block:) media feature
+    "paged",
+
     // position
     "sticky",
 

third_party/blink/renderer/core/css/media_feature_names.json5

@@ -64,6 +64,8 @@
     "resolution",
     "-webkit-transform-3d",
     "scan",
+    "overflow-inline",
+    "overflow-block",
     "device-posture",
     "horizontal-viewport-segments",
     "vertical-viewport-segments",

third_party/blink/renderer/core/css/media_query_evaluator.cc

@@ -1332,6 +1332,52 @@ static bool VerticalViewportSegmentsMediaFeatureEval(
          CompareValue(vertical_viewport_segments, static_cast<int>(number), op);
 }
 
+static bool OverflowInlineMediaFeatureEval(const MediaQueryExpValue& value,
+                                           MediaQueryOperator,
+                                           const MediaValues& media_values) {
+  bool can_scroll = !EqualIgnoringASCIICase(media_values.MediaType(),
+                                            media_type_names::kPrint);
+  // No value = boolean context:
+  // https://w3c.github.io/csswg-drafts/mediaqueries/#mq-boolean-context
+  if (!value.IsValid()) {
+    return can_scroll;
+  }
+  DCHECK(value.IsId());
+  switch (value.Id()) {
+    case CSSValueID::kNone:
+      return !can_scroll;
+    case CSSValueID::kScroll:
+      return can_scroll;
+    default:
+      NOTREACHED();
+      return false;
+  }
+}
+
+static bool OverflowBlockMediaFeatureEval(const MediaQueryExpValue& value,
+                                          MediaQueryOperator,
+                                          const MediaValues& media_values) {
+  bool can_scroll = !EqualIgnoringASCIICase(media_values.MediaType(),
+                                            media_type_names::kPrint);
+  // No value = boolean context:
+  // https://w3c.github.io/csswg-drafts/mediaqueries/#mq-boolean-context
+  if (!value.IsValid()) {
+    return true;
+  }
+  DCHECK(value.IsId());
+  switch (value.Id()) {
+    case CSSValueID::kNone:
+      return false;
+    case CSSValueID::kScroll:
+      return can_scroll;
+    case CSSValueID::kPaged:
+      return !can_scroll;
+    default:
+      NOTREACHED();
+      return false;
+  }
+}
+
 static bool DevicePostureMediaFeatureEval(const MediaQueryExpValue& value,
                                           MediaQueryOperator,
                                           const MediaValues& media_values) {

third_party/blink/renderer/core/css/media_query_evaluator_test.cc

@@ -351,6 +351,30 @@ MediaQueryEvaluatorTestCase g_video_dynamic_range_feature_disabled_cases[] = {
     {nullptr, false}  // Do not remove the terminator line.
 };
 
+// Tests when the output device is print.
+MediaQueryEvaluatorTestCase g_overflow_with_print_device_test_cases[] = {
+    {"(overflow-inline)", false},
+    {"(overflow-block)", true},
+    {"(overflow-inline: none)", true},
+    {"(overflow-block: none)", false},
+    {"(overflow-block: paged)", true},
+    {"(overflow-inline: scroll)", false},
+    {"(overflow-block: scroll)", false},
+    {nullptr, false}  // Do not remove the terminator line.
+};
+
+// Tests when the output device is scrollable.
+MediaQueryEvaluatorTestCase g_overflow_with_scrollable_device_test_cases[] = {
+    {"(overflow-inline)", true},
+    {"(overflow-block)", true},
+    {"(overflow-inline: none)", false},
+    {"(overflow-block: none)", false},
+    {"(overflow-block: paged)", false},
+    {"(overflow-inline: scroll)", true},
+    {"(overflow-block: scroll)", true},
+    {nullptr, false}  // Do not remove the terminator line.
+};
+
 void TestMQEvaluator(MediaQueryEvaluatorTestCase* test_cases,
                      const MediaQueryEvaluator& media_query_evaluator,
                      CSSParserMode mode) {
@@ -417,6 +441,24 @@ TEST(MediaQueryEvaluatorTest, Cached) {
     data.color_bits_per_component = 24;
     data.monochrome_bits_per_component = 0;
   }
+
+  // Overflow values with printing.
+  {
+    data.media_type = media_type_names::kPrint;
+    auto* media_values = MakeGarbageCollected<MediaValuesCached>(data);
+    MediaQueryEvaluator media_query_evaluator(media_values);
+    TestMQEvaluator(g_overflow_with_print_device_test_cases,
+                    media_query_evaluator);
+    data.media_type = media_type_names::kScreen;
+  }
+
+  // Overflow values with scrolling.
+  {
+    auto* media_values = MakeGarbageCollected<MediaValuesCached>(data);
+    MediaQueryEvaluator media_query_evaluator(media_values);
+    TestMQEvaluator(g_overflow_with_scrollable_device_test_cases,
+                    media_query_evaluator);
+  }
 }
 
 TEST(MediaQueryEvaluatorTest, Dynamic) {
@@ -425,8 +467,12 @@ TEST(MediaQueryEvaluatorTest, Dynamic) {
 
   MediaQueryEvaluator media_query_evaluator(&page_holder->GetFrame());
   TestMQEvaluator(g_viewport_test_cases, media_query_evaluator);
+  TestMQEvaluator(g_overflow_with_scrollable_device_test_cases,
+                  media_query_evaluator);
   page_holder->GetFrameView().SetMediaType(media_type_names::kPrint);
   TestMQEvaluator(g_print_test_cases, media_query_evaluator);
+  TestMQEvaluator(g_overflow_with_print_device_test_cases,
+                  media_query_evaluator);
 }
 
 TEST(MediaQueryEvaluatorTest, DynamicNoView) {

third_party/blink/renderer/core/css/media_query_exp.cc

@@ -133,6 +133,19 @@ static inline bool FeatureWithValidIdent(const String& media_feature,
     }
   }
 
+  if (RuntimeEnabledFeatures::CSSOverflowMediaFeaturesEnabled()) {
+    if (media_feature == media_feature_names::kOverflowInlineMediaFeature) {
+      return ident == CSSValueID::kNone || ident == CSSValueID::kScroll;
+    }
+  }
+
+  if (RuntimeEnabledFeatures::CSSOverflowMediaFeaturesEnabled()) {
+    if (media_feature == media_feature_names::kOverflowBlockMediaFeature) {
+      return ident == CSSValueID::kNone || ident == CSSValueID::kScroll ||
+             ident == CSSValueID::kPaged;
+    }
+  }
+
   return false;
 }
 

third_party/blink/renderer/core/css/parser/media_query_parser.cc

@@ -88,7 +88,11 @@ class MediaQueryFeatureSet : public MediaQueryParser::FeatureSet {
                 media_feature_names::kVerticalViewportSegmentsMediaFeature &&
             RuntimeEnabledFeatures::CSSFoldablesEnabled()) ||
            (feature == media_feature_names::kDevicePostureMediaFeature &&
-            RuntimeEnabledFeatures::DevicePostureEnabled());
+            RuntimeEnabledFeatures::DevicePostureEnabled()) ||
+           (feature == media_feature_names::kOverflowInlineMediaFeature &&
+            RuntimeEnabledFeatures::CSSOverflowMediaFeaturesEnabled()) ||
+           (feature == media_feature_names::kOverflowBlockMediaFeature &&
+            RuntimeEnabledFeatures::CSSOverflowMediaFeaturesEnabled());
   }
 
   bool IsCaseSensitive(const String& feature) const override { return false; }

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -936,6 +936,10 @@
       status: "stable",
       copied_from_base_feature_if: "overridden",
     },
+    {
+      name: "CSSOverflowMediaFeatures",
+      status: "experimental",
+    },
     {
       name: "CSSPaintAPIArguments",
       status: "experimental",

third_party/blink/web_tests/external/wpt/css/mediaqueries/overflow-media-features.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>CSS Media Queries Test: overflow media features</title>
+<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#descdef-media-update">
+<meta assert="The test is supposed to be run on computer displays as it will no match otherwise">
+<script type="text/javascript" src="/resources/testharness.js"></script>
+<script type="text/javascript" src="/resources/testharnessreport.js"></script>
+<script type="text/javascript" src="resources/matchmedia-utils.js"></script>
+
+<script>
+query_should_be_known("(overflow-inline)");
+query_should_be_known("(overflow-inline: none)");
+query_should_be_known("(overflow-inline: scroll)");
+
+query_should_be_unknown("overflow-inline");
+query_should_be_unknown("(overflow-inline: ?)");
+query_should_be_unknown("(overflow-inline: 10px)");
+query_should_be_unknown("(overflow-inline: 0)");
+
+query_should_be_known("(overflow-block)");
+query_should_be_known("(overflow-block: none)");
+query_should_be_known("(overflow-block: scroll)");
+query_should_be_known("(overflow-block: paged)");
+
+query_should_be_unknown("overflow-block");
+query_should_be_unknown("(overflow-block: ?)");
+query_should_be_unknown("(overflow-block: 10px)");
+query_should_be_unknown("(overflow-block: 0)");
+
+test(() => {
+  let match_standard = window.matchMedia("(overflow-inline: scroll)");
+  assert_true(match_standard.matches);
+}, "Check that overflow-inline: scroll always matches non printing documents");
+
+test(() => {
+  let match_standard = window.matchMedia("(overflow-block: scroll)");
+  assert_true(match_standard.matches);
+}, "Check that overflow-block: scroll always matches non printing documents");
+
+test(() => {
+  let match_standard = window.matchMedia("(overflow-inline: none)");
+  assert_false(match_standard.matches);
+}, "Check that overflow-inline: none doesn't match non printing documents");
+
+test(() => {
+  let match_standard = window.matchMedia("(overflow-block: none)");
+  assert_false(match_standard.matches);
+}, "Check that overflow-block: none doesn't match non printing documents");
+
+test(() => {
+  let match_standard = window.matchMedia("(overflow-block: paged)");
+  assert_false(match_standard.matches);
+}, "Check that overflow-block: paged doesn't match non printing documents");
+</script>

third_party/blink/web_tests/external/wpt/css/mediaqueries/test_media_queries-expected.txt

@@ -1,5 +1,5 @@
 This is a testharness.js-based test.
-Found 1338 tests; 1323 PASS, 15 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 1339 tests; 1334 PASS, 5 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS query_should_be_parseable: (orientation)
 PASS query_should_be_parseable: not (orientation)
 PASS expression_should_be_known: (orientation)
@@ -1257,20 +1257,21 @@ 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
-FAIL expression_should_be_known: overflow-block: optional-paged 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
+PASS expression_should_be_parseable: overflow-block: optional-paged
+PASS expression_should_be_unknown: overflow-block: optional-paged
 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

third_party/blink/web_tests/external/wpt/css/mediaqueries/test_media_queries.html

@@ -589,7 +589,7 @@
     expression_should_be_known("overflow-block: none")
     expression_should_be_known("overflow-block: paged")
     expression_should_be_known("overflow-block: scroll")
-    expression_should_be_known("overflow-block: optional-paged")
+    expression_should_be_unknown("overflow-block: optional-paged")
     expression_should_be_unknown("overflow-block: some-random-invalid-thing")
 
     // Sanity check for overflow-block