Attachment #452369 for bug #236771

View Details Raw Unified Return to Bug 236771

| Differences between



2022-02-17  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Support full range notation in size queries
        https://bugs.webkit.org/show_bug.cgi?id=236771

        Reviewed by Dean Jackson.

        Parse and evaluate notations like (100px < width) and (100px < width < 200px).

        * css/ContainerQuery.h:

        There are now optional left and right comparisons.

        * css/ContainerQueryParser.cpp:
        (WebCore::ContainerQueryParser::consumeSizeQuery):
        (WebCore::ContainerQueryParser::consumeSizeFeature):
        (WebCore::ContainerQueryParser::consumePlainSizeFeature):

        Evaluate the plain (foo: value) notation.

        (WebCore::ContainerQueryParser::consumeRangeSizeFeature):

        Evaluate range notation.

        (WebCore::ContainerQueryParser::consumeValue):
        * css/ContainerQueryParser.h:
        * style/ContainerQueryEvaluator.cpp:
        (WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const):

        Evaluate both comparisons if they exist.

        * style/ContainerQueryEvaluator.h:
        (WebCore::Style::toEvaluationResult):
        (WebCore::Style::operator|):

2022-02-16  Joonghun Park  <jh718.park@samsung.com>

        Change the canonical unit for time category from ms to s.



using ContainerQuery = std::variant<ContainerCondition, SizeQuery, UnknownQuery>;

enum class LogicalOperator : uint8_t { And, Or, Not };
enum class ComparisonOperator : uint8_t { LessThan, LessThanOrEqual, Equal, GreaterThan, GreaterThanOrEqual };

struct ContainerCondition {
    LogicalOperator logicalOperator { LogicalOperator::And };

    Vector<SizeQuery> queries;
};

struct Comparison {
    ComparisonOperator op { ComparisonOperator::Equal };
    RefPtr<CSSValue> value;
};

struct SizeFeature {
    ComparisonOperator comparisonOperator { ComparisonOperator::Equal };
    AtomString name;
    std::optional<Comparison> leftComparison;
    std::optional<Comparison> rightComparison;
};

namespace FeatureNames {




std::optional<CQ::SizeQuery> ContainerQueryParser::consumeSizeQuery(CSSParserTokenRange& range)
{
    if (range.peek().type() == LeftParenthesisToken || (range.peek().type() == IdentToken && range.peek().id() == CSSValueNot)) {
        auto sizeCondition = consumeCondition<CQ::SizeCondition>(range);
        if (!sizeCondition)
            return { };

    if (!sizeFeature)
        return { };

    range.consumeWhitespace();
    if (!range.atEnd())
        return { };

    return { *sizeFeature };
}

std::optional<CQ::SizeFeature> ContainerQueryParser::consumeSizeFeature(CSSParserTokenRange& range)
{
    auto rangeCopy = range;
    if (auto sizeFeature = consumePlainSizeFeature(range))
        return sizeFeature;

    range = rangeCopy;
    return consumeRangeSizeFeature(range);
}

std::optional<CQ::SizeFeature> ContainerQueryParser::consumePlainSizeFeature(CSSParserTokenRange& range)
{
    auto consumePlainFeatureName = [&]() -> std::pair<AtomString, CQ::ComparisonOperator> {
        if (range.peek().type() != IdentToken)
            return { };
        auto token = range.consumeIncludingWhitespace();
        auto name = token.value();
        if (name.startsWith("min-"))
            return { name.substring(4).toAtomString(), CQ::ComparisonOperator::GreaterThanOrEqual };
        if (name.startsWith("max-"))
            return { name.substring(4).toAtomString(), CQ::ComparisonOperator::LessThanOrEqual };

        return { name.toAtomString(), CQ::ComparisonOperator::Equal };
    };

    auto [featureName, op] = consumePlainFeatureName();
    if (featureName.isEmpty())
        return { };

    range.consumeWhitespace();

    if (range.atEnd()) {
        if (op != CQ::ComparisonOperator::Equal)
            return { };
        return CQ::SizeFeature { featureName, { }, { } };
    }

    if (range.peek().type() != ColonToken)
        return { };

    range.consumeIncludingWhitespace();
    if (range.atEnd())
        return { };

    auto value = consumeValue(range);
    
    return CQ::SizeFeature { featureName, { }, CQ::Comparison { op, WTFMove(value) } };
}

std::optional<CQ::SizeFeature> ContainerQueryParser::consumeRangeSizeFeature(CSSParserTokenRange& range)
{
    auto consumeFeatureName = [&]() -> AtomString {
        if (range.peek().type() != IdentToken)
            return { };
        return range.consumeIncludingWhitespace().value().toAtomString();
    };

    auto consumeRangeOperator = [&]() -> std::optional<CQ::ComparisonOperator> {
        if (range.atEnd())
            return { };
        auto opToken = range.consume();
        if (range.atEnd() || opToken.type() != DelimiterToken)
            return { };

        switch (opToken.delimiter()) {
        case '=':
            range.consumeWhitespace();
            return CQ::ComparisonOperator::Equal;
        case '<':
            if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
                range.consumeIncludingWhitespace();
                return CQ::ComparisonOperator::LessThanOrEqual;
            }
            range.consumeWhitespace();
            return CQ::ComparisonOperator::LessThan;
        case '>':
            if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
                range.consumeIncludingWhitespace();
                return CQ::ComparisonOperator::GreaterThanOrEqual;
            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 { };
            }
            range.consumeWhitespace();
            return CQ::ComparisonOperator::GreaterThan;
        default:
            return { };
        }
        return { };
    };

    auto consumeLeftComparison = [&]() -> std::optional<CQ::Comparison> {
        if (range.peek().type() == IdentToken)
            return { };
        auto value = consumeValue(range);
        auto op = consumeRangeOperator();
        if (!op)
            return { };

        return CQ::Comparison { *op, WTFMove(value) };
    };

    auto consumeRightComparison = [&]() -> std::optional<CQ::Comparison> {
        auto op = consumeRangeOperator();
        if (!op)
            return { };
        auto value = consumeValue(range);

        return CQ::Comparison { *op, WTFMove(value) };
        if (featureName == CQ::FeatureNames::orientation())
            return CSSPropertyParserHelpers::consumeIdent(range);
        if (featureName == CQ::FeatureNames::aspectRatio())
            return CSSPropertyParserHelpers::consumeAspectRatioValue(range);
        return CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);
    };

    auto leftComparison = consumeLeftComparison();

    auto featureName = consumeFeatureName();
    if (featureName.isEmpty())
        return { };

    auto rightComparison = consumeRightComparison();

    if (!leftComparison && !rightComparison)
        return { };

    return CQ::SizeFeature { WTFMove(featureName), WTFMove(leftComparison), WTFMove(rightComparison) };
}

RefPtr<CSSValue> ContainerQueryParser::consumeValue(CSSParserTokenRange& range)
{
    if (range.atEnd())
        return nullptr;
    if (auto value = CSSPropertyParserHelpers::consumeIdent(range))
        return value;
    if (auto value = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All))
        return value;
    if (auto value = CSSPropertyParserHelpers::consumeAspectRatioValue(range))
        return value;
    range.consumeIncludingWhitespace();
    return nullptr;
}

}

Lines 41-46 private: a/Source/WebCore/css/ContainerQueryParser.h_sec1
- a/Source/WebCore/css/ContainerQueryParser.h +3 lines
41	std::optional<CQ::SizeQuery> consumeSizeQuery(CSSParserTokenRange&);	41	std::optional<CQ::SizeQuery> consumeSizeQuery(CSSParserTokenRange&);
42	template<typename ConditionType> std::optional<ConditionType> consumeCondition(CSSParserTokenRange&);	42	template<typename ConditionType> std::optional<ConditionType> consumeCondition(CSSParserTokenRange&);
43	std::optional<CQ::SizeFeature> consumeSizeFeature(CSSParserTokenRange&);	43	std::optional<CQ::SizeFeature> consumeSizeFeature(CSSParserTokenRange&);
		44	std::optional<CQ::SizeFeature> consumePlainSizeFeature(CSSParserTokenRange&);
		45	std::optional<CQ::SizeFeature> consumeRangeSizeFeature(CSSParserTokenRange&);
		46	RefPtr<CSSValue> consumeValue(CSSParserTokenRange&);
44		47
45	ContainerQueryParser(const CSSParserContext& context)	48	ContainerQueryParser(const CSSParserContext& context)
46	: m_context(context) { }	49	: m_context(context) { }




    auto container = resolveContainer();
    if (!container)
        return false;

    return evaluateQuery(filteredContainerQuery.query, *container) == EvaluationResult::True;
}

        return EvaluationResult::Unknown;

    switch (condition.logicalOperator) {
    case CQ::LogicalOperator::Not:
        return !evaluateQuery(condition.queries.first(), container);
        case EvaluationResult::True:
            return EvaluationResult::False;
        case EvaluationResult::False:
            return EvaluationResult::True;
        case EvaluationResult::Unknown:
            return EvaluationResult::Unknown;
        }
    }
    case CQ::LogicalOperator::And: {
        auto result = EvaluationResult::True;
        for (auto query : condition.queries) {


auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFeature, const ResolvedContainer& container) const -> EvaluationResult
{
    auto compare = [](CQ::ComparisonOperator op, auto left, auto right) {
        switch (op) {
    };

    auto compare = [&](auto left, auto right) {
        switch (sizeFeature.comparisonOperator) {
        case CQ::ComparisonOperator::LessThan:
            return left < right;
        case CQ::ComparisonOperator::GreaterThan:

            return left >= right;
        case CQ::ComparisonOperator::Equal:
            return left == right;
        case CQ::ComparisonOperator::True:
            ASSERT_NOT_REACHED();
            return false;
        }
    };

    enum class Side : uint8_t { Left, Right };
    auto evaluateSizeComparison = [&](LayoutUnit size, const std::optional<CQ::Comparison>& comparison, Side side) {
        if (!comparison)
            return EvaluationResult::True;
        auto expressionSize = computeSize(comparison->value.get(), container.conversionData);
        if (!expressionSize)
            return EvaluationResult::Unknown;
        auto left = side == Side::Left ? *expressionSize : size;
        auto right = side == Side::Left ? size : *expressionSize;

        return toEvaluationResult(compare(comparison->op, left, right));
    };

    auto evaluateSize = [&](LayoutUnit size) {
        if (!sizeFeature.leftComparison && !sizeFeature.rightComparison)
            return toEvaluationResult(!!size);

        auto leftResult = evaluateSizeComparison(size, sizeFeature.leftComparison, Side::Left);
        auto rightResult = evaluateSizeComparison(size, sizeFeature.rightComparison, Side::Right);

        return leftResult & rightResult;
    };

    auto evaluateAspectRatioComparison = [&](double aspectRatio, const std::optional<CQ::Comparison>& comparison, Side side) {
        if (!comparison)
            return EvaluationResult::True;

        if (!is<CSSValueList>(comparison->value))
            return EvaluationResult::Unknown;

        auto& ratioList = downcast<CSSValueList>(*comparison->value);
        if (ratioList.length() != 2)
            return EvaluationResult::Unknown;

        auto first = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(0));
        auto second = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(1));

        if (!first || !second || !first->isNumberOrInteger() || !second->isNumberOrInteger())
            return EvaluationResult::Unknown;

        auto expressionRatio = first->doubleValue() / second->doubleValue();

        auto left = side == Side::Left ? expressionRatio : aspectRatio;
        auto right = side == Side::Left ? aspectRatio : expressionRatio;

        return toEvaluationResult(compare(comparison->op, left, right));
    };

    enum class Axis : uint8_t { Both, Block, Inline, Width, Height };

            return EvaluationResult::Unknown;

        auto boxRatio = container.renderer.contentWidth().toDouble() / container.renderer.contentHeight().toDouble();
        
        if (!sizeFeature.leftComparison && !sizeFeature.rightComparison)
            return toEvaluationResult(!!boxRatio);

        auto leftResult = evaluateAspectRatioComparison(boxRatio, sizeFeature.leftComparison, Side::Left);
        auto rightResult = evaluateAspectRatioComparison(boxRatio, sizeFeature.rightComparison, Side::Right);

        auto& ratioList = downcast<CSSValueList>(*sizeFeature.value);
        if (ratioList.length() != 2)
            return EvaluationResult::Unknown;

        auto first = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(0));
        auto second = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(1));

        if (!first || !second || !first->isNumberOrInteger() || !second->isNumberOrInteger())
            return EvaluationResult::Unknown;

        auto expressionRatio = first->doubleValue() / second->doubleValue();

        return leftResult & rightResult;
    }

    if (sizeFeature.name == CQ::FeatureNames::orientation()) {
        if (!containerSupportsRequiredAxis(Axis::Both))
            return EvaluationResult::Unknown;

        if (!sizeFeature.rightComparison)
            return EvaluationResult::Unknown;

        auto& comparison = *sizeFeature.rightComparison;

        if (!is<CSSPrimitiveValue>(comparison.value) || comparison.op != CQ::ComparisonOperator::Equal)
            return EvaluationResult::Unknown;

        auto& value = downcast<CSSPrimitiveValue>(*sizeFeature.rightComparison->value);

        bool isPortrait = container.renderer.contentHeight() >= container.renderer.contentWidth();
        if (value.valueID() == CSSValuePortrait)

Lines 33-38 class Element; a/Source/WebCore/style/ContainerQueryEvaluator.h_sec1
- a/Source/WebCore/style/ContainerQueryEvaluator.h -1 / +28 lines
33		33
34	namespace Style {	34	namespace Style {
35		35
		36	enum class EvaluationResult : uint8_t { False, True, Unknown };
		37
36	class ContainerQueryEvaluator {	38	class ContainerQueryEvaluator {
37	public:	39	public:
38	ContainerQueryEvaluator(const Vector<Ref<const Element>>& containers);	40	ContainerQueryEvaluator(const Vector<Ref<const Element>>& containers);
Lines 41-47 public: a/Source/WebCore/style/ContainerQueryEvaluator.h_sec2
41		43
42	private:	44	private:
43	struct ResolvedContainer;	45	struct ResolvedContainer;
44	enum class EvaluationResult : uint8_t { False, True, Unknown };
45		46
46	EvaluationResult evaluateQuery(const CQ::ContainerQuery&, const ResolvedContainer&) const;	47	EvaluationResult evaluateQuery(const CQ::ContainerQuery&, const ResolvedContainer&) const;
47	EvaluationResult evaluateQuery(const CQ::SizeQuery&, const ResolvedContainer&) const;	48	EvaluationResult evaluateQuery(const CQ::SizeQuery&, const ResolvedContainer&) const;
Lines 51-55 private: a/Source/WebCore/style/ContainerQueryEvaluator.h_sec3
51	const Vector<Ref<const Element>>& m_containers;	52	const Vector<Ref<const Element>>& m_containers;
52	};	53	};
53		54
		55	inline EvaluationResult toEvaluationResult(bool boolean)
		56	{
		57	return boolean ? EvaluationResult::True : EvaluationResult::False;
		58	};
		59
		60	inline EvaluationResult operator&(EvaluationResult left, EvaluationResult right)
		61	{
		62	if (left == EvaluationResult::Unknown \|\| right == EvaluationResult::Unknown)
		63	return EvaluationResult::Unknown;
		64	if (left == EvaluationResult::True && right == EvaluationResult::True)
		65	return EvaluationResult::True;
		66	return EvaluationResult::False;
		67	}
		68
		69	inline EvaluationResult operator!(EvaluationResult result)
		70	{
		71	switch (result) {
		72	case EvaluationResult::True:
		73	return EvaluationResult::False;
		74	case EvaluationResult::False:
		75	return EvaluationResult::True;
		76	case EvaluationResult::Unknown:
		77	return EvaluationResult::Unknown;
		78	}
		79	}
		80
54	}	81	}
55	}	82	}



2022-02-17  Antti Koivisto  <antti@apple.com>

        [CSS Container Queries] Support full range notation in size queries
        https://bugs.webkit.org/show_bug.cgi?id=236771

        Reviewed by Dean Jackson.

        * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt:

2022-02-16  Joonghun Park  <jh718.park@samsung.com>

        Change the canonical unit for time category from ms to s.



PASS size((width: 100px) and (height: 100px))
PASS size((width: 50px) or (height: 100px))
PASS size(width < 100px)
PASS size(100px < width)
PASS size(100px < width < 200px)
PASS foo(width)
PASS size(asdf)
PASS size(resolution > 100dpi)
PASS size(resolution: 150dpi)
PASS size(color)
PASS size(min-color: 1)
PASS size(color-index >= 1)
PASS (color-index >= 1)
PASS size(grid)
PASS (grid)
PASS screen

Return to Bug 236771

Lines 136-142 std::optional<ConditionType> ContainerQueryParser::consumeCondition(CSSParserTok a/Source/WebCore/css/ContainerQueryParser.cpp_sec1
- a/Source/WebCore/css/ContainerQueryParser.cpp -53 / +113 lines
136		136
137	std::optional<CQ::SizeQuery> ContainerQueryParser::consumeSizeQuery(CSSParserTokenRange& range)	137	std::optional<CQ::SizeQuery> ContainerQueryParser::consumeSizeQuery(CSSParserTokenRange& range)
138	{	138	{
139	if (range.peek().type() != IdentToken \|\| range.peek().id() == CSSValueNot) {	139	if (range.peek().type() == LeftParenthesisToken \|\| (range.peek().type() == IdentToken && range.peek().id() == CSSValueNot)) {
140	auto sizeCondition = consumeCondition<CQ::SizeCondition>(range);	140	auto sizeCondition = consumeCondition<CQ::SizeCondition>(range);
141	if (!sizeCondition)	141	if (!sizeCondition)
142	return { };	142	return { };
Lines 147-228 std::optional<CQ::SizeQuery> ContainerQueryParser::consumeSizeQuery(CSSParserTok a/Source/WebCore/css/ContainerQueryParser.cpp_sec2
147	if (!sizeFeature)	147	if (!sizeFeature)
148	return { };	148	return { };
149		149
150	range.consumeWhitespace();
151	if (!range.atEnd())
152	return { };
153
154	return { *sizeFeature };	150	return { *sizeFeature };
155	}	151	}
156		152
157	std::optional<CQ::SizeFeature> ContainerQueryParser::consumeSizeFeature(CSSParserTokenRange& range)	153	std::optional<CQ::SizeFeature> ContainerQueryParser::consumeSizeFeature(CSSParserTokenRange& range)
158	{	154	{
159	// FIXME: Support value-first (100px < width) and full range (100px < width < 200px) notations.	155	auto rangeCopy = range;
		156	if (auto sizeFeature = consumePlainSizeFeature(range))
		157	return sizeFeature;
		158
		159	range = rangeCopy;
		160	return consumeRangeSizeFeature(range);
		161	}
		162
		163	std::optional<CQ::SizeFeature> ContainerQueryParser::consumePlainSizeFeature(CSSParserTokenRange& range)
		164	{
		165	auto consumePlainFeatureName = [&]() -> std::pair<AtomString, CQ::ComparisonOperator> {
		166	if (range.peek().type() != IdentToken)
		167	return { };
		168	auto token = range.consumeIncludingWhitespace();
		169	auto name = token.value();
		170	if (name.startsWith("min-"))
		171	return { name.substring(4).toAtomString(), CQ::ComparisonOperator::GreaterThanOrEqual };
		172	if (name.startsWith("max-"))
		173	return { name.substring(4).toAtomString(), CQ::ComparisonOperator::LessThanOrEqual };
		174
		175	return { name.toAtomString(), CQ::ComparisonOperator::Equal };
		176	};
		177
		178	auto [featureName, op] = consumePlainFeatureName();
		179	if (featureName.isEmpty())
		180	return { };
		181
		182	range.consumeWhitespace();
160		183
161	auto nameToken = range.consumeIncludingWhitespace();	184	if (range.atEnd()) {
162	ASSERT(nameToken.type() == IdentToken);	185	if (op != CQ::ComparisonOperator::Equal)
		186	return { };
		187	return CQ::SizeFeature { featureName, { }, { } };
		188	}
163		189
164	auto name = nameToken.value();	190	if (range.peek().type() != ColonToken)
		191	return { };
165		192
		193	range.consumeIncludingWhitespace();
166	if (range.atEnd())	194	if (range.atEnd())
167	return CQ::SizeFeature { CQ::ComparisonOperator::True, name.toAtomString(), { } };	195	return { };
168		196
169	auto consumeOperator = [&]() -> std::optional<CQ::ComparisonOperator> {	197	auto value = consumeValue(range);
170	auto opToken = range.consume();	198
		199	return CQ::SizeFeature { featureName, { }, CQ::Comparison { op, WTFMove(value) } };
		200	}
		201
		202	std::optional<CQ::SizeFeature> ContainerQueryParser::consumeRangeSizeFeature(CSSParserTokenRange& range)
		203	{
		204	auto consumeFeatureName = [&]() -> AtomString {
		205	if (range.peek().type() != IdentToken)
		206	return { };
		207	return range.consumeIncludingWhitespace().value().toAtomString();
		208	};
		209
		210	auto consumeRangeOperator = [&]() -> std::optional<CQ::ComparisonOperator> {
171	if (range.atEnd())	211	if (range.atEnd())
172	return { };	212	return { };
173	if (opToken.type() == ColonToken) {	213	auto opToken = range.consume();
174	if (name.startsWith("min-")) {	214	if (range.atEnd() \|\| opToken.type() != DelimiterToken)
175	name = name.substring(4);	215	return { };
176	return CQ::ComparisonOperator::GreaterThanOrEqual;	216
177	}	217	switch (opToken.delimiter()) {
178	if (name.startsWith("max-")) {	218	case '=':
179	name = name.substring(4);	219	range.consumeWhitespace();
		220	return CQ::ComparisonOperator::Equal;
		221	case '<':
		222	if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
		223	range.consumeIncludingWhitespace();
180	return CQ::ComparisonOperator::LessThanOrEqual;	224	return CQ::ComparisonOperator::LessThanOrEqual;
181	}	225	}
182	return CQ::ComparisonOperator::Equal;	226	range.consumeWhitespace();
183	}	227	return CQ::ComparisonOperator::LessThan;
184	if (opToken.type() == DelimiterToken) {	228	case '>':
185	switch (opToken.delimiter()) {	229	if (range.peek().type() == DelimiterToken && range.peek().delimiter() == '=') {
186	case '=':	230	range.consumeIncludingWhitespace();
187	return CQ::ComparisonOperator::Equal;	231	return CQ::ComparisonOperator::GreaterThanOrEqual;
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	}	232	}
		233	range.consumeWhitespace();
		234	return CQ::ComparisonOperator::GreaterThan;
		235	default:
		236	return { };
203	}	237	}
204	return { };
205	};	238	};
206		239
207	auto op = consumeOperator();	240	auto consumeLeftComparison = [&]() -> std::optional<CQ::Comparison> {
208	if (!op)	241	if (range.peek().type() == IdentToken)
209	return { };	242	return { };
		243	auto value = consumeValue(range);
		244	auto op = consumeRangeOperator();
		245	if (!op)
		246	return { };
210		247
211	range.consumeWhitespace();	248	return CQ::Comparison { *op, WTFMove(value) };
		249	};
212		250
213	auto featureName = name.toAtomString();	251	auto consumeRightComparison = [&]() -> std::optional<CQ::Comparison> {
		252	auto op = consumeRangeOperator();
		253	if (!op)
		254	return { };
		255	auto value = consumeValue(range);
214		256
215	auto consumeValue = [&]() -> RefPtr<CSSValue> {	257	return CQ::Comparison { *op, WTFMove(value) };
216	if (featureName == CQ::FeatureNames::orientation())
217	return CSSPropertyParserHelpers::consumeIdent(range);
218	if (featureName == CQ::FeatureNames::aspectRatio())
219	return CSSPropertyParserHelpers::consumeAspectRatioValue(range);
220	return CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All);
221	};	258	};
222		259
223	auto value = consumeValue();	260	auto leftComparison = consumeLeftComparison();
		261
		262	auto featureName = consumeFeatureName();
		263	if (featureName.isEmpty())
		264	return { };
		265
		266	auto rightComparison = consumeRightComparison();
224		267
225	return CQ::SizeFeature { *op, WTFMove(featureName), WTFMove(value) };	268	if (!leftComparison && !rightComparison)
		269	return { };
		270
		271	return CQ::SizeFeature { WTFMove(featureName), WTFMove(leftComparison), WTFMove(rightComparison) };
		272	}
		273
		274	RefPtr<CSSValue> ContainerQueryParser::consumeValue(CSSParserTokenRange& range)
		275	{
		276	if (range.atEnd())
		277	return nullptr;
		278	if (auto value = CSSPropertyParserHelpers::consumeIdent(range))
		279	return value;
		280	if (auto value = CSSPropertyParserHelpers::consumeLength(range, m_context.mode, ValueRange::All))
		281	return value;
		282	if (auto value = CSSPropertyParserHelpers::consumeAspectRatioValue(range))
		283	return value;
		284	range.consumeIncludingWhitespace();
		285	return nullptr;
226	}	286	}
227		287
228	}	288	}

Lines 76-82 bool ContainerQueryEvaluator::evaluate(const FilteredContainerQuery& filteredCon a/Source/WebCore/style/ContainerQueryEvaluator.cpp_sec1
- a/Source/WebCore/style/ContainerQueryEvaluator.cpp -42 / +58 lines
76		76
77	auto container = resolveContainer();	77	auto container = resolveContainer();
78	if (!container)	78	if (!container)
79	return { };	79	return false;
80		80
81	return evaluateQuery(filteredContainerQuery.query, *container) == EvaluationResult::True;	81	return evaluateQuery(filteredContainerQuery.query, *container) == EvaluationResult::True;
82	}	82	}
Lines 108-123 auto ContainerQueryEvaluator::evaluateCondition(const ConditionType& condition, a/Source/WebCore/style/ContainerQueryEvaluator.cpp_sec2
108	return EvaluationResult::Unknown;	108	return EvaluationResult::Unknown;
109		109
110	switch (condition.logicalOperator) {	110	switch (condition.logicalOperator) {
111	case CQ::LogicalOperator::Not: {	111	case CQ::LogicalOperator::Not:
112	switch (evaluateQuery(condition.queries.first(), container)) {	112	return !evaluateQuery(condition.queries.first(), container);
113	case EvaluationResult::True:
114	return EvaluationResult::False;
115	case EvaluationResult::False:
116	return EvaluationResult::True;
117	case EvaluationResult::Unknown:
118	return EvaluationResult::Unknown;
119	}
120	}
121	case CQ::LogicalOperator::And: {	113	case CQ::LogicalOperator::And: {
122	auto result = EvaluationResult::True;	114	auto result = EvaluationResult::True;
123	for (auto query : condition.queries) {	115	for (auto query : condition.queries) {
Lines 162-173 static std::optional<LayoutUnit> computeSize(const CSSValue* value, const CSSToL a/Source/WebCore/style/ContainerQueryEvaluator.cpp_sec3
162		154
163	auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFeature, const ResolvedContainer& container) const -> EvaluationResult	155	auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFeature, const ResolvedContainer& container) const -> EvaluationResult
164	{	156	{
165	auto toEvaluationResult = [](bool boolean) {	157	auto compare = [](CQ::ComparisonOperator op, auto left, auto right) {
166	return boolean ? EvaluationResult::True : EvaluationResult::False;	158	switch (op) {
167	};
168
169	auto compare = [&](auto left, auto right) {
170	switch (sizeFeature.comparisonOperator) {
171	case CQ::ComparisonOperator::LessThan:	159	case CQ::ComparisonOperator::LessThan:
172	return left < right;	160	return left < right;
173	case CQ::ComparisonOperator::GreaterThan:	161	case CQ::ComparisonOperator::GreaterThan:
Lines 178-198 auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFea a/Source/WebCore/style/ContainerQueryEvaluator.cpp_sec4
178	return left >= right;	166	return left >= right;
179	case CQ::ComparisonOperator::Equal:	167	case CQ::ComparisonOperator::Equal:
180	return left == right;	168	return left == right;
181	case CQ::ComparisonOperator::True:
182	ASSERT_NOT_REACHED();
183	return false;
184	}	169	}
185	};	170	};
186		171
		172	enum class Side : uint8_t { Left, Right };
		173	auto evaluateSizeComparison = [&](LayoutUnit size, const std::optional<CQ::Comparison>& comparison, Side side) {
		174	if (!comparison)
		175	return EvaluationResult::True;
		176	auto expressionSize = computeSize(comparison->value.get(), container.conversionData);
		177	if (!expressionSize)
		178	return EvaluationResult::Unknown;
		179	auto left = side == Side::Left ? *expressionSize : size;
		180	auto right = side == Side::Left ? size : *expressionSize;
		181
		182	return toEvaluationResult(compare(comparison->op, left, right));
		183	};
		184
187	auto evaluateSize = [&](LayoutUnit size) {	185	auto evaluateSize = [&](LayoutUnit size) {
188	if (sizeFeature.comparisonOperator == CQ::ComparisonOperator::True)	186	if (!sizeFeature.leftComparison && !sizeFeature.rightComparison)
189	return toEvaluationResult(!!size);	187	return toEvaluationResult(!!size);
190		188
191	auto expressionSize = computeSize(sizeFeature.value.get(), container.conversionData);	189	auto leftResult = evaluateSizeComparison(size, sizeFeature.leftComparison, Side::Left);
192	if (!expressionSize)	190	auto rightResult = evaluateSizeComparison(size, sizeFeature.rightComparison, Side::Right);
		191
		192	return leftResult & rightResult;
		193	};
		194
		195	auto evaluateAspectRatioComparison = [&](double aspectRatio, const std::optional<CQ::Comparison>& comparison, Side side) {
		196	if (!comparison)
		197	return EvaluationResult::True;
		198
		199	if (!is<CSSValueList>(comparison->value))
		200	return EvaluationResult::Unknown;
		201
		202	auto& ratioList = downcast<CSSValueList>(*comparison->value);
		203	if (ratioList.length() != 2)
193	return EvaluationResult::Unknown;	204	return EvaluationResult::Unknown;
194		205
195	return toEvaluationResult(compare(size, *expressionSize));	206	auto first = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(0));
		207	auto second = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(1));
		208
		209	if (!first \|\| !second \|\| !first->isNumberOrInteger() \|\| !second->isNumberOrInteger())
		210	return EvaluationResult::Unknown;
		211
		212	auto expressionRatio = first->doubleValue() / second->doubleValue();
		213
		214	auto left = side == Side::Left ? expressionRatio : aspectRatio;
		215	auto right = side == Side::Left ? aspectRatio : expressionRatio;
		216
		217	return toEvaluationResult(compare(comparison->op, left, right));
196	};	218	};
197		219
198	enum class Axis : uint8_t { Both, Block, Inline, Width, Height };	220	enum class Axis : uint8_t { Both, Block, Inline, Width, Height };
Lines 245-279 auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFea a/Source/WebCore/style/ContainerQueryEvaluator.cpp_sec5
245	return EvaluationResult::Unknown;	267	return EvaluationResult::Unknown;
246		268
247	auto boxRatio = container.renderer.contentWidth().toDouble() / container.renderer.contentHeight().toDouble();	269	auto boxRatio = container.renderer.contentWidth().toDouble() / container.renderer.contentHeight().toDouble();
248	if (sizeFeature.comparisonOperator == CQ::ComparisonOperator::True)	270
		271	if (!sizeFeature.leftComparison && !sizeFeature.rightComparison)
249	return toEvaluationResult(!!boxRatio);	272	return toEvaluationResult(!!boxRatio);
250		273
251	if (!is<CSSValueList>(sizeFeature.value))	274	auto leftResult = evaluateAspectRatioComparison(boxRatio, sizeFeature.leftComparison, Side::Left);
252	return EvaluationResult::Unknown;	275	auto rightResult = evaluateAspectRatioComparison(boxRatio, sizeFeature.rightComparison, Side::Right);
253
254	auto& ratioList = downcast<CSSValueList>(*sizeFeature.value);
255	if (ratioList.length() != 2)
256	return EvaluationResult::Unknown;
257
258	auto first = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(0));
259	auto second = dynamicDowncast<CSSPrimitiveValue>(ratioList.item(1));
260
261	if (!first \|\| !second \|\| !first->isNumberOrInteger() \|\| !second->isNumberOrInteger())
262	return EvaluationResult::Unknown;
263
264	auto expressionRatio = first->doubleValue() / second->doubleValue();
265		276
266	return toEvaluationResult(compare(boxRatio, expressionRatio));	277	return leftResult & rightResult;
267	}	278	}
268		279
269	if (sizeFeature.name == CQ::FeatureNames::orientation()) {	280	if (sizeFeature.name == CQ::FeatureNames::orientation()) {
270	if (!containerSupportsRequiredAxis(Axis::Both))	281	if (!containerSupportsRequiredAxis(Axis::Both))
271	return EvaluationResult::Unknown;	282	return EvaluationResult::Unknown;
272		283
273	if (!is<CSSPrimitiveValue>(sizeFeature.value) \|\| sizeFeature.comparisonOperator != CQ::ComparisonOperator::Equal)	284	if (!sizeFeature.rightComparison)
		285	return EvaluationResult::Unknown;
		286
		287	auto& comparison = *sizeFeature.rightComparison;
		288
		289	if (!is<CSSPrimitiveValue>(comparison.value) \|\| comparison.op != CQ::ComparisonOperator::Equal)
274	return EvaluationResult::Unknown;	290	return EvaluationResult::Unknown;
275		291
276	auto& value = downcast<CSSPrimitiveValue>(*sizeFeature.value);	292	auto& value = downcast<CSSPrimitiveValue>(*sizeFeature.rightComparison->value);
277		293
278	bool isPortrait = container.renderer.contentHeight() >= container.renderer.contentWidth();	294	bool isPortrait = container.renderer.contentHeight() >= container.renderer.contentWidth();
279	if (value.valueID() == CSSValuePortrait)	295	if (value.valueID() == CSSValuePortrait)

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +35 lines
		1	2022-02-17 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Support full range notation in size queries
		4	https://bugs.webkit.org/show_bug.cgi?id=236771
		5
		6	Reviewed by Dean Jackson.
		7
		8	Parse and evaluate notations like (100px < width) and (100px < width < 200px).
		9
		10	* css/ContainerQuery.h:
		11
		12	There are now optional left and right comparisons.
		13
		14	* css/ContainerQueryParser.cpp:
		15	(WebCore::ContainerQueryParser::consumeSizeQuery):
		16	(WebCore::ContainerQueryParser::consumeSizeFeature):
		17	(WebCore::ContainerQueryParser::consumePlainSizeFeature):
		18
		19	Evaluate the plain (foo: value) notation.
		20
		21	(WebCore::ContainerQueryParser::consumeRangeSizeFeature):
		22
		23	Evaluate range notation.
		24
		25	(WebCore::ContainerQueryParser::consumeValue):
		26	* css/ContainerQueryParser.h:
		27	* style/ContainerQueryEvaluator.cpp:
		28	(WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const):
		29
		30	Evaluate both comparisons if they exist.
		31
		32	* style/ContainerQueryEvaluator.h:
		33	(WebCore::Style::toEvaluationResult):
		34	(WebCore::Style::operator\|):
		35
1	2022-02-16 Joonghun Park <jh718.park@samsung.com>	36	2022-02-16 Joonghun Park <jh718.park@samsung.com>
2		37
3	Change the canonical unit for time category from ms to s.	38	Change the canonical unit for time category from ms to s.

Lines 42-48 using SizeQuery = std::variant<SizeCondition, SizeFeature>; a/Source/WebCore/css/ContainerQuery.h_sec1
- a/Source/WebCore/css/ContainerQuery.h -3 / +8 lines
42	using ContainerQuery = std::variant<ContainerCondition, SizeQuery, UnknownQuery>;	42	using ContainerQuery = std::variant<ContainerCondition, SizeQuery, UnknownQuery>;
43		43
44	enum class LogicalOperator : uint8_t { And, Or, Not };	44	enum class LogicalOperator : uint8_t { And, Or, Not };
45	enum class ComparisonOperator : uint8_t { LessThan, LessThanOrEqual, Equal, GreaterThan, GreaterThanOrEqual, True };	45	enum class ComparisonOperator : uint8_t { LessThan, LessThanOrEqual, Equal, GreaterThan, GreaterThanOrEqual };
46		46
47	struct ContainerCondition {	47	struct ContainerCondition {
48	LogicalOperator logicalOperator { LogicalOperator::And };	48	LogicalOperator logicalOperator { LogicalOperator::And };
Lines 54-63 struct SizeCondition { a/Source/WebCore/css/ContainerQuery.h_sec2
54	Vector<SizeQuery> queries;	54	Vector<SizeQuery> queries;
55	};	55	};
56		56
		57	struct Comparison {
		58	ComparisonOperator op { ComparisonOperator::Equal };
		59	RefPtr<CSSValue> value;
		60	};
		61
57	struct SizeFeature {	62	struct SizeFeature {
58	ComparisonOperator comparisonOperator { ComparisonOperator::Equal };
59	AtomString name;	63	AtomString name;
60	RefPtr<CSSValue> value;	64	std::optional<Comparison> leftComparison;
		65	std::optional<Comparison> rightComparison;
61	};	66	};
62		67
63	namespace FeatureNames {	68	namespace FeatureNames {

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +9 lines
		1	2022-02-17 Antti Koivisto <antti@apple.com>
		2
		3	[CSS Container Queries] Support full range notation in size queries
		4	https://bugs.webkit.org/show_bug.cgi?id=236771
		5
		6	Reviewed by Dean Jackson.
		7
		8	* web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt:
		9
1	2022-02-16 Joonghun Park <jh718.park@samsung.com>	10	2022-02-16 Joonghun Park <jh718.park@samsung.com>
2		11
3	Change the canonical unit for time category from ms to s.	12	Change the canonical unit for time category from ms to s.

Lines 21-36 PASS size(not (width: 100px)) a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt -7 / +7 lines
21	PASS size((width: 100px) and (height: 100px))	21	PASS size((width: 100px) and (height: 100px))
22	PASS size((width: 50px) or (height: 100px))	22	PASS size((width: 50px) or (height: 100px))
23	PASS size(width < 100px)	23	PASS size(width < 100px)
24	FAIL size(100px < width) assert_equals: expected 2 but got 0	24	PASS size(100px < width)
25	FAIL size(100px < width < 200px) assert_equals: expected 2 but got 0	25	PASS size(100px < width < 200px)
26	PASS foo(width)	26	PASS foo(width)
27	PASS size(asdf)	27	PASS size(asdf)
28	FAIL size(resolution > 100dpi) assert_equals: expected 2 but got 0	28	PASS size(resolution > 100dpi)
29	FAIL size(resolution: 150dpi) assert_equals: expected 2 but got 0	29	PASS size(resolution: 150dpi)
30	PASS size(color)	30	PASS size(color)
31	FAIL size(min-color: 1) assert_equals: expected 2 but got 0	31	PASS size(min-color: 1)
32	FAIL size(color-index >= 1) assert_equals: expected 2 but got 0	32	PASS size(color-index >= 1)
33	FAIL (color-index >= 1) assert_equals: expected 2 but got 0	33	PASS (color-index >= 1)
34	PASS size(grid)	34	PASS size(grid)
35	PASS (grid)	35	PASS (grid)
36	PASS screen	36	PASS screen