Changeset 289789 in webkit

Timestamp:

Feb 14, 2022 10:29:39 PM (5 months ago)

Author:

Antti Koivisto

Message:

[CSS Container Queries] Support range operators in size queries
​https://bugs.webkit.org/show_bug.cgi?id=236600

Reviewed by Sam Weinig.

LayoutTests/imported/w3c:

• web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt:
• web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt:

Source/WebCore:

Support (width > 100px) and similar.

• css/ContainerQueryParser.cpp:

(WebCore::ContainerQueryParser::consumeSizeQuery):
(WebCore::ContainerQueryParser::consumeSizeFeature):

Factor into a function.
Add operator support. No reverse (100px < width) or full range (10px < width < 100px) yet.
The evaluator supports these already.

• css/ContainerQueryParser.h:

LayoutTests:

• TestExpectations:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/TestExpectations (modified) (1 diff)
• LayoutTests/imported/w3c/ChangeLog (modified) (1 diff)
• LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt (modified) (2 diffs)
• LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/ContainerQueryParser.cpp (modified) (3 diffs)
• Source/WebCore/css/ContainerQueryParser.h (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2022-02-14  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Support range operators in size queries
+        https://bugs.webkit.org/show_bug.cgi?id=236600
+
+        Reviewed by Sam Weinig.
+
+        * TestExpectations:
+
 2022-02-14  Ryosuke Niwa  <rniwa@webkit.org>
 

trunk/LayoutTests/TestExpectations

@@ -4757 +4757 @@
 webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/display-in-container.html [ ImageOnlyFailure ]
 webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative.html [ ImageOnlyFailure ]
-webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-inside-container.html [ ImageOnlyFailure ]
-webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html [ ImageOnlyFailure ]
 
 # Flaky css-contain test

trunk/LayoutTests/imported/w3c/ChangeLog

@@ +1 @@
+2022-02-14  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Support range operators in size queries
+        https://bugs.webkit.org/show_bug.cgi?id=236600
+
+        Reviewed by Sam Weinig.
+
+        * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt:
+        * web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt:
+
 2022-02-14  Antti Koivisto  <antti@apple.com>
 

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt

@@ -1 +1 @@
 Test
 
-FAIL size(width < 100px) (.horizontal) assert_equals: expected "" but got "true"
-FAIL size(width >= 100px) (.horizontal) assert_equals: expected "true" but got ""
+PASS size(width < 100px) (.horizontal)
+PASS size(width >= 100px) (.horizontal)
 PASS size(min-width: 100px) (.horizontal)
 PASS size(min-width: 101px) (.horizontal)
 PASS size(max-width: 100px) (.horizontal)
 PASS size(max-width: 99px) (.horizontal)
-FAIL size(height < 200px) (.horizontal) assert_equals: expected "" but got "true"
-FAIL size(height >= 200px) (.horizontal) assert_equals: expected "true" but got ""
+PASS size(height < 200px) (.horizontal)
+PASS size(height >= 200px) (.horizontal)
 PASS size(min-height: 200px) (.horizontal)
 PASS size(min-height: 201px) (.horizontal)
@@ -29 +29 @@
 FAIL size(aspect-ratio: 1/2) (.horizontal) assert_equals: expected "true" but got ""
 PASS size(aspect-ratio: 2/1) (.horizontal)
-FAIL size(width < 100px) (.vertical) assert_equals: expected "" but got "true"
-FAIL size(width >= 100px) (.vertical) assert_equals: expected "true" but got ""
+PASS size(width < 100px) (.vertical)
+PASS size(width >= 100px) (.vertical)
 PASS size(min-width: 100px) (.vertical)
 PASS size(min-width: 101px) (.vertical)
 PASS size(max-width: 100px) (.vertical)
 PASS size(max-width: 99px) (.vertical)
-FAIL size(height < 200px) (.vertical) assert_equals: expected "" but got "true"
-FAIL size(height >= 200px) (.vertical) assert_equals: expected "true" but got ""
+PASS size(height < 200px) (.vertical)
+PASS size(height >= 200px) (.vertical)
 PASS size(min-height: 200px) (.vertical)
 PASS size(min-height: 201px) (.vertical)

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt

@@ -1 +1 @@
 Test
 
-FAIL size(width > 0px) assert_equals: expected "true" but got ""
-PASS size(height > 0px)
-FAIL size((height > 0px) or (width > 0px)) assert_equals: expected "true" but got ""
-FAIL size((width > 0px) or (height > 0px)) assert_equals: expected "true" but got ""
+PASS size(width > 0px)
+FAIL size(height > 0px) assert_equals: expected "" but got "true"
+PASS size((height > 0px) or (width > 0px))
+PASS size((width > 0px) or (height > 0px))
 FAIL size((orientation: landscape) or (width > 0px)) assert_equals: expected "true" but got ""
 FAIL size((width > 0px) or (orientation: landscape)) assert_equals: expected "true" but got ""

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-02-14  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Support range operators in size queries
+        https://bugs.webkit.org/show_bug.cgi?id=236600
+
+        Reviewed by Sam Weinig.
+
+        Support (width > 100px) and similar.
+
+        * css/ContainerQueryParser.cpp:
+        (WebCore::ContainerQueryParser::consumeSizeQuery):
+        (WebCore::ContainerQueryParser::consumeSizeFeature):
+
+        Factor into a function.
+        Add operator support. No reverse (100px < width) or full range (10px < width < 100px) yet.
+        The evaluator supports these already.
+
+        * css/ContainerQueryParser.h:
+
 2022-02-14  Dan Glastonbury  <djg@apple.com>
 

trunk/Source/WebCore/css/ContainerQueryParser.cpp

@@ -144 +144 @@
     }
 
+    auto sizeFeature = consumeSizeFeature(range);
+    if (!sizeFeature)
+        return { };
+
+    range.consumeWhitespace();
+    if (!range.atEnd())
+        return { };
+
+    return { *sizeFeature };
+}
+
+std::optional<CQ::SizeFeature> ContainerQueryParser::consumeSizeFeature(CSSParserTokenRange& range)
+{
+    // FIXME: Support value-first (100px < width) and full range (100px < width < 200px) notations.
+
     auto nameToken = range.consumeIncludingWhitespace();
+    ASSERT(nameToken.type() == IdentToken);
+
     auto name = nameToken.value();
 
@@ -150 +167 @@
         return CQ::SizeFeature { CQ::ComparisonOperator::True, name.toAtomString(), { } };
 
-    auto opToken = range.consumeIncludingWhitespace();
-    if (range.atEnd())
-        return { };
-
-    // FIXME: Support '<' style operators and ranges.
-    auto op = CQ::ComparisonOperator::Equal;
-    if (opToken.type() == ColonToken) {
-        if (name.startsWith("min-"))
-            op = CQ::ComparisonOperator::GreaterThanOrEqual;
-        else if (name.startsWith("max-"))
-            op = CQ::ComparisonOperator::LessThanOrEqual;
-
-        if (op != CQ::ComparisonOperator::Equal)
-            name = name.substring(4);
-        if (name.isEmpty())
-            return { };
-    }
+    auto consumeOperator = [&]() -> std::optional<CQ::ComparisonOperator> {
+        auto opToken = range.consume();
+        if (range.atEnd())
+            return { };
+        if (opToken.type() == ColonToken) {
+            if (name.startsWith("min-")) {
+                name = name.substring(4);
+                return CQ::ComparisonOperator::GreaterThanOrEqual;
+            }
+            if (name.startsWith("max-")) {
+                name = name.substring(4);
+                return CQ::ComparisonOperator::LessThanOrEqual;
+            }
+            return CQ::ComparisonOperator::Equal;
+        }
+        if (opToken.type() == DelimiterToken) {
+            switch (opToken.delimiter()) {
+            case '=':
+                return CQ::ComparisonOperator::Equal;
+            case '<':
+                if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
+                    range.consume();
+                    return CQ::ComparisonOperator::LessThanOrEqual;
+                }
+                return CQ::ComparisonOperator::LessThan;
+            case '>':
+                if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
+                    range.consume();
+                    return CQ::ComparisonOperator::GreaterThanOrEqual;
+                }
+                return CQ::ComparisonOperator::GreaterThan;
+            default:
+                return { };
+            }
+        }
+        return { };
+    };
+
+    auto op = consumeOperator();
+    if (!op)
+        return { };
+
+    range.consumeWhitespace();
 
     auto length = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);
@@ -172 +215 @@
         return { };
 
-    return CQ::SizeFeature { op, name.toAtomString(), length };
-}
-
-}
+    return CQ::SizeFeature { *op, name.toAtomString(), length };
+}
+
+}

trunk/Source/WebCore/css/ContainerQueryParser.h

@@ -38 +38 @@
     std::optional<CQ::SizeQuery> consumeSizeQuery(CSSParserTokenRange&);
     template<typename ConditionType> std::optional<ConditionType> consumeCondition(CSSParserTokenRange&);
+    std::optional<CQ::SizeFeature> consumeSizeFeature(CSSParserTokenRange&);
 
     ContainerQueryParser(const CSSParserContext& context)