Attachment #451991 for bug #236600

View Details Raw Unified Return to Bug 236600

| Differences between



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  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Implement full query parser and evaluator



        return { *sizeCondition };
    }

    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();

    if (range.atEnd())
        return CQ::SizeFeature { CQ::ComparisonOperator::True, name.toAtomString(), { } };

    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 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 length = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);
    if (!length)
        return { };

    return CQ::SizeFeature { *op, name.toAtomString(), length };
}

}

Lines 37-42 private: a/Source/WebCore/css/ContainerQueryParser.h_sec1
- a/Source/WebCore/css/ContainerQueryParser.h +1 lines
37	std::optional<CQ::ContainerQuery> consumeContainerQuery(CSSParserTokenRange&);	37	std::optional<CQ::ContainerQuery> consumeContainerQuery(CSSParserTokenRange&);
38	std::optional<CQ::SizeQuery> consumeSizeQuery(CSSParserTokenRange&);	38	std::optional<CQ::SizeQuery> consumeSizeQuery(CSSParserTokenRange&);
39	template<typename ConditionType> std::optional<ConditionType> consumeCondition(CSSParserTokenRange&);	39	template<typename ConditionType> std::optional<ConditionType> consumeCondition(CSSParserTokenRange&);
		40	std::optional<CQ::SizeFeature> consumeSizeFeature(CSSParserTokenRange&);
40		41
41	ContainerQueryParser(const CSSParserContext& context)	42	ContainerQueryParser(const CSSParserContext& context)
42	: m_context(context) { }	43	: m_context(context) { }



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  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Implement full query parser and evaluator



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>

        [CSS Container Queries] Implement full query parser and evaluator



# Container queries
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
imported/w3c/web-platform-tests/css/css-contain/content-visibility/animation-display-lock.html [ Failure Pass ]



Test

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)
PASS size(height < 200px) (.horizontal)
PASS size(height >= 200px) (.horizontal)
PASS size(min-height: 200px) (.horizontal)
PASS size(min-height: 201px) (.horizontal)
PASS size(max-height: 200px) (.horizontal)

FAIL size(orientation: portrait) (.horizontal) assert_equals: expected "true" but got ""
FAIL size(aspect-ratio: 1/2) (.horizontal) assert_equals: expected "true" but got ""
PASS size(aspect-ratio: 2/1) (.horizontal)
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)
PASS size(height < 200px) (.vertical)
PASS size(height >= 200px) (.vertical)
PASS size(min-height: 200px) (.vertical)
PASS size(min-height: 201px) (.vertical)
PASS size(max-height: 200px) (.vertical)



Test

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 ""
PASS size((height > 0px) or (orientation: landscape))

Return to Bug 236600

Lines 143-177 std::optional<CQ::SizeQuery> ContainerQueryParser::consumeSizeQuery(CSSParserTok a/Source/WebCore/css/ContainerQueryParser.cpp_sec1
- a/Source/WebCore/css/ContainerQueryParser.cpp -16 / +59 lines
143	return { *sizeCondition };	143	return { *sizeCondition };
144	}	144	}
145		145
		146	auto sizeFeature = consumeSizeFeature(range);
		147	if (!sizeFeature)
		148	return { };
		149
		150	range.consumeWhitespace();
		151	if (!range.atEnd())
		152	return { };
		153
		154	return { *sizeFeature };
		155	}
		156
		157	std::optional<CQ::SizeFeature> ContainerQueryParser::consumeSizeFeature(CSSParserTokenRange& range)
		158	{
		159	// FIXME: Support value-first (100px < width) and full range (100px < width < 200px) notations.
		160
146	auto nameToken = range.consumeIncludingWhitespace();	161	auto nameToken = range.consumeIncludingWhitespace();
		162	ASSERT(nameToken.type() == IdentToken);
		163
147	auto name = nameToken.value();	164	auto name = nameToken.value();
148		165
149	if (range.atEnd())	166	if (range.atEnd())
150	return CQ::SizeFeature { CQ::ComparisonOperator::True, name.toAtomString(), { } };	167	return CQ::SizeFeature { CQ::ComparisonOperator::True, name.toAtomString(), { } };
151		168
152	auto opToken = range.consumeIncludingWhitespace();	169	auto consumeOperator = [&]() -> std::optional<CQ::ComparisonOperator> {
153	if (range.atEnd())	170	auto opToken = range.consume();
		171	if (range.atEnd())
		172	return { };
		173	if (opToken.type() == ColonToken) {
		174	if (name.startsWith("min-")) {
		175	name = name.substring(4);
		176	return CQ::ComparisonOperator::GreaterThanOrEqual;
		177	}
		178	if (name.startsWith("max-")) {
		179	name = name.substring(4);
		180	return CQ::ComparisonOperator::LessThanOrEqual;
		181	}
		182	return CQ::ComparisonOperator::Equal;
		183	}
		184	if (opToken.type() == DelimiterToken) {
		185	switch (opToken.delimiter()) {
		186	case '=':
		187	return CQ::ComparisonOperator::Equal;
		188	case '<':
		189	if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
		190	range.consume();
		191	return CQ::ComparisonOperator::LessThanOrEqual;
		192	}
		193	return CQ::ComparisonOperator::LessThan;
		194	case '>':
		195	if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
		196	range.consume();
		197	return CQ::ComparisonOperator::GreaterThanOrEqual;
		198	}
		199	return CQ::ComparisonOperator::GreaterThan;
		200	default:
		201	return { };
		202	}
		203	}
		204	return { };
		205	};
		206
		207	auto op = consumeOperator();
		208	if (!op)
154	return { };	209	return { };
155		210
156	// FIXME: Support '<' style operators and ranges.	211	range.consumeWhitespace();
157	auto op = CQ::ComparisonOperator::Equal;
158	if (opToken.type() == ColonToken) {
159	if (name.startsWith("min-"))
160	op = CQ::ComparisonOperator::GreaterThanOrEqual;
161	else if (name.startsWith("max-"))
162	op = CQ::ComparisonOperator::LessThanOrEqual;
163
164	if (op != CQ::ComparisonOperator::Equal)
165	name = name.substring(4);
166	if (name.isEmpty())
167	return { };
168	}
169		212
170	auto length = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);	213	auto length = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);
171	if (!length)	214	if (!length)
172	return { };	215	return { };
173		216
174	return CQ::SizeFeature { op, name.toAtomString(), length };	217	return CQ::SizeFeature { *op, name.toAtomString(), length };
175	}	218	}
176		219
177	}	220	}

Lines 4756-4763 imported/w3c/web-platform-tests/css/css-contain/contain-html-overflow-004.html [ a/LayoutTests/TestExpectations_sec1
- a/LayoutTests/TestExpectations -2 lines
4756	# Container queries	4756	# Container queries
4757	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/display-in-container.html [ ImageOnlyFailure ]	4757	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/display-in-container.html [ ImageOnlyFailure ]
4758	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative.html [ ImageOnlyFailure ]	4758	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative.html [ ImageOnlyFailure ]
4759	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-inside-container.html [ ImageOnlyFailure ]
4760	webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html [ ImageOnlyFailure ]
4761		4759
4762	# Flaky css-contain test	4760	# Flaky css-contain test
4763	imported/w3c/web-platform-tests/css/css-contain/content-visibility/animation-display-lock.html [ Failure Pass ]	4761	imported/w3c/web-platform-tests/css/css-contain/content-visibility/animation-display-lock.html [ Failure Pass ]

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +19 lines
		1	2022-02-14 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Support range operators in size queries
		4	https://bugs.webkit.org/show_bug.cgi?id=236600
		5
		6	Reviewed by Sam Weinig.
		7
		8	Support (width > 100px) and similar.
		9
		10	* css/ContainerQueryParser.cpp:
		11	(WebCore::ContainerQueryParser::consumeSizeQuery):
		12	(WebCore::ContainerQueryParser::consumeSizeFeature):
		13
		14	Factor into a function.
		15	Add operator support. No reverse (100px < width) or full range (10px < width < 100px) yet.
		16	The evaluator supports these already.
		17
		18	* css/ContainerQueryParser.h:
		19
1	2022-02-14 Antti Koivisto <antti@apple.com>	20	2022-02-14 Antti Koivisto <antti@apple.com>
2		21
3	[CSS Container Queries] Implement full query parser and evaluator	22	[CSS Container Queries] Implement full query parser and evaluator

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +9 lines
		1	2022-02-14 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Support range operators in size queries
		4	https://bugs.webkit.org/show_bug.cgi?id=236600
		5
		6	Reviewed by Sam Weinig.
		7
		8	* TestExpectations:
		9
1	2022-02-14 Antti Koivisto <antti@apple.com>	10	2022-02-14 Antti Koivisto <antti@apple.com>
2		11
3	[CSS Container Queries] Implement full query parser and evaluator	12	[CSS Container Queries] Implement full query parser and evaluator

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +10 lines
		1	2022-02-14 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Support range operators in size queries
		4	https://bugs.webkit.org/show_bug.cgi?id=236600
		5
		6	Reviewed by Sam Weinig.
		7
		8	* web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt:
		9	* web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt:
		10
1	2022-02-14 Antti Koivisto <antti@apple.com>	11	2022-02-14 Antti Koivisto <antti@apple.com>
2		12
3	[CSS Container Queries] Implement full query parser and evaluator	13	[CSS Container Queries] Implement full query parser and evaluator

Lines 1-13 a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt -8 / +8 lines
1	Test	1	Test
2		2
3	FAIL size(width < 100px) (.horizontal) assert_equals: expected "" but got "true"	3	PASS size(width < 100px) (.horizontal)
4	FAIL size(width >= 100px) (.horizontal) assert_equals: expected "true" but got ""	4	PASS size(width >= 100px) (.horizontal)
5	PASS size(min-width: 100px) (.horizontal)	5	PASS size(min-width: 100px) (.horizontal)
6	PASS size(min-width: 101px) (.horizontal)	6	PASS size(min-width: 101px) (.horizontal)
7	PASS size(max-width: 100px) (.horizontal)	7	PASS size(max-width: 100px) (.horizontal)
8	PASS size(max-width: 99px) (.horizontal)	8	PASS size(max-width: 99px) (.horizontal)
9	FAIL size(height < 200px) (.horizontal) assert_equals: expected "" but got "true"	9	PASS size(height < 200px) (.horizontal)
10	FAIL size(height >= 200px) (.horizontal) assert_equals: expected "true" but got ""	10	PASS size(height >= 200px) (.horizontal)
11	PASS size(min-height: 200px) (.horizontal)	11	PASS size(min-height: 200px) (.horizontal)
12	PASS size(min-height: 201px) (.horizontal)	12	PASS size(min-height: 201px) (.horizontal)
13	PASS size(max-height: 200px) (.horizontal)	13	PASS size(max-height: 200px) (.horizontal)
Lines 28-41 PASS size(orientation: landscape) (.horizontal) a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt_sec2
28	FAIL size(orientation: portrait) (.horizontal) assert_equals: expected "true" but got ""	28	FAIL size(orientation: portrait) (.horizontal) assert_equals: expected "true" but got ""
29	FAIL size(aspect-ratio: 1/2) (.horizontal) assert_equals: expected "true" but got ""	29	FAIL size(aspect-ratio: 1/2) (.horizontal) assert_equals: expected "true" but got ""
30	PASS size(aspect-ratio: 2/1) (.horizontal)	30	PASS size(aspect-ratio: 2/1) (.horizontal)
31	FAIL size(width < 100px) (.vertical) assert_equals: expected "" but got "true"	31	PASS size(width < 100px) (.vertical)
32	FAIL size(width >= 100px) (.vertical) assert_equals: expected "true" but got ""	32	PASS size(width >= 100px) (.vertical)
33	PASS size(min-width: 100px) (.vertical)	33	PASS size(min-width: 100px) (.vertical)
34	PASS size(min-width: 101px) (.vertical)	34	PASS size(min-width: 101px) (.vertical)
35	PASS size(max-width: 100px) (.vertical)	35	PASS size(max-width: 100px) (.vertical)
36	PASS size(max-width: 99px) (.vertical)	36	PASS size(max-width: 99px) (.vertical)
37	FAIL size(height < 200px) (.vertical) assert_equals: expected "" but got "true"	37	PASS size(height < 200px) (.vertical)
38	FAIL size(height >= 200px) (.vertical) assert_equals: expected "true" but got ""	38	PASS size(height >= 200px) (.vertical)
39	PASS size(min-height: 200px) (.vertical)	39	PASS size(min-height: 200px) (.vertical)
40	PASS size(min-height: 201px) (.vertical)	40	PASS size(min-height: 201px) (.vertical)
41	PASS size(max-height: 200px) (.vertical)	41	PASS size(max-height: 200px) (.vertical)