Skip to content
Permalink
Browse files
[CSS Container Queries] Rename container-type value 'none' to 'normal'
https://bugs.webkit.org/show_bug.cgi?id=242311

Reviewed by Alan Bujtas.

Implement w3c/csswg-drafts#7402

Also exclude some values from container-name (per https://drafts.csswg.org/css-contain-3/#container-name).
Also re-import container query WPT tests.

* LayoutTests/imported/w3c/resources/import-expectations.json:
* LayoutTests/imported/w3c/resources/resource-files.json:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-parsing.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-serialization-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-serialization.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-style-serialization-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/at-container-style-serialization.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/calc-evaluation-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/calc-evaluation.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/column-spanner-in-container-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/column-spanner-in-container.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-inheritance-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-inheritance.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-parsing-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-parsing.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-nested-invalidation-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-nested-invalidation.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-computed.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container-dynamic-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container-dynamic.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container-fallback-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container-fallback.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-in-at-container.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/font-relative-calc-dynamic-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/font-relative-calc-dynamic.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/grid-container-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/grid-container.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/grid-item-container-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/grid-item-container.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log:
* Source/WebCore/css/CSSComputedStyleDeclaration.cpp:
(WebCore::hasValidStyleForProperty):
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
* Source/WebCore/css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator ContainerType const):
* Source/WebCore/css/CSSValueKeywords.in:
* Source/WebCore/css/StyleProperties.cpp:
(WebCore::isCSSWideValueKeyword):

Drive-by fix.

(WebCore::isNormalValue):
(WebCore::StyleProperties::getPropertyValue const):
* Source/WebCore/css/parser/CSSParserFastPaths.cpp:
(WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeSingleContainerName):
* Source/WebCore/dom/Document.cpp:
(WebCore::Document::updateLayoutIfDimensionsOutOfDate):
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::willBeDestroyed):
(WebCore::RenderBox::styleWillChange):
* Source/WebCore/rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialContainerType):
* Source/WebCore/rendering/style/RenderStyleConstants.h:
* Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::effectiveContainment const):
* Source/WebCore/style/ContainerQueryEvaluator.cpp:
(WebCore::Style::ContainerQueryEvaluator::selectContainer):
(WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const):
* Source/WebCore/style/StyleScope.cpp:
(WebCore::Style::Scope::updateQueryContainerState):
* Source/WebCore/style/StyleSharingResolver.cpp:
(WebCore::Style::SharingResolver::canShareStyleWithElement const):
* Source/WebCore/style/StyleTreeResolver.cpp:
(WebCore::Style::TreeResolver::pushParent):
(WebCore::Style::TreeResolver::resolveComposedTree):
(WebCore::Style::TreeResolver::determineQueryContainerAction):

Canonical link: https://commits.webkit.org/252116@main
  • Loading branch information
anttijk committed Jul 4, 2022
1 parent a5dc4a3 commit 10224b907dbca4a066401003bd0734bdefbadf1c
Show file tree
Hide file tree
Showing 66 changed files with 899 additions and 106 deletions.
@@ -110,6 +110,7 @@
"web-platform-tests/css/css-color": "import",
"web-platform-tests/css/css-conditional": "import",
"web-platform-tests/css/css-contain": "import",
"web-platform-tests/css/css-contain/container-queries": "import",
"web-platform-tests/css/css-content": "import",
"web-platform-tests/css/css-counter-styles": "import",
"web-platform-tests/css/css-display": "import",
@@ -696,6 +696,8 @@
"web-platform-tests/css/css-contain/container-queries/crashtests/table-in-columns-001-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/table-in-columns-002-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/table-in-columns-003-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/table-in-columns-004-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/table-in-columns-005-crash.html",
"web-platform-tests/css/css-contain/container-queries/display-in-container-ref.html",
"web-platform-tests/css/css-contain/container-queries/fieldset-legend-change-ref.html",
"web-platform-tests/css/css-contain/container-queries/flex-in-columns-000-crash.html",
@@ -40,6 +40,13 @@ PASS (100px <= width < 200px)
PASS (100px > width > 200px)
PASS (100px > width >= 200px)
PASS (100px >= width > 200px)
PASS (width: calc(10px))
PASS (width: calc(10em))
PASS (width: calc(10px + 10em))
PASS (width < calc(10px + 10em))
PASS (width < max(10px, 10em))
PASS (calc(10px + 10em) < width)
PASS (calc(10px + 10em) < width < max(30px, 30em))
PASS foo(width)
PASS size(width)
PASS (asdf)
@@ -83,4 +90,24 @@ PASS Container selector: "foo"
PASS Container selector: "inherit"
PASS Container selector: none
PASS Container selector: None
PASS Container selector: normal
PASS Container selector: Normal
PASS Container selector: auto
PASS Container selector: Auto
PASS Container selector: and
PASS Container selector: or
PASS Container selector: not
PASS Container selector: And
PASS Container selector: oR
PASS Container selector: nOt
FAIL style(--my-prop: foo) assert_equals: expected "true" but got ""
FAIL style(--my-prop: foo - bar ()) assert_equals: expected "true" but got ""
FAIL style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x))))) assert_equals: expected "true" but got ""
FAIL style((--foo: bar) or (--bar: 10px)) assert_equals: expected "true" but got ""
FAIL style(--foo: bar !important) assert_equals: expected "true" but got ""
FAIL style(--my-prop:) assert_equals: expected "true" but got ""
FAIL style(--my-prop: ) assert_equals: expected "true" but got ""
PASS style(--foo: bar;)
PASS style(--foo)
PASS style(style(--foo: bar))

@@ -112,6 +112,14 @@
test_query_known('(100px > width >= 200px)');
test_query_known('(100px >= width > 200px)');

test_query_known('(width: calc(10px))');
test_query_known('(width: calc(10em))');
test_query_known('(width: calc(10px + 10em))');
test_query_known('(width < calc(10px + 10em))');
test_query_known('(width < max(10px, 10em))');
test_query_known('(calc(10px + 10em) < width)');
test_query_known('(calc(10px + 10em) < width < max(30px, 30em))');

test_query_unknown('foo(width)');
test_query_unknown('size(width)');
test_query_unknown('(asdf)');
@@ -158,4 +166,26 @@
test_container_selector_invalid('"inherit"');
test_container_selector_invalid('none');
test_container_selector_invalid('None');
test_container_selector_invalid('normal');
test_container_selector_invalid('Normal');
test_container_selector_invalid('auto');
test_container_selector_invalid('Auto');
test_container_selector_invalid('and');
test_container_selector_invalid('or');
test_container_selector_invalid('not');
test_container_selector_invalid('And');
test_container_selector_invalid('oR');
test_container_selector_invalid('nOt');

test_query_known('style(--my-prop: foo)');
test_query_known('style(--my-prop: foo - bar ())');
test_query_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))');
test_query_known('style((--foo: bar) or (--bar: 10px))');
test_query_known('style(--foo: bar !important)');
test_query_known('style(--my-prop:)');
test_query_known('style(--my-prop: )');

test_query_unknown('style(--foo: bar;)');
test_query_unknown('style(--foo)');
test_query_unknown('style(style(--foo: bar))');
</script>
@@ -5,4 +5,5 @@ PASS Serialization of nested @container rule
PASS Serialization of boolean condition syntax
PASS Serialization of colon condition syntax
PASS Serialization of range condition syntax
PASS Serialization of calc()

@@ -24,14 +24,15 @@
@container (10px <= width <= 100px) { }
@container (100px>WIDTH>10px) { }
@container ( 100px >= width >= 10px ) { }
@container (calc(1em + 1px) >= width >= max(10em, 10px)) { }
</style>
<script>
setup(() => assert_implements_container_queries());

let rules = testSheet.sheet.cssRules;

test(() => {
assert_equals(rules.length, 13);
assert_equals(rules.length, 14);
assert_equals(rules[0].cssRules.length, 2);

assert_equals(rules[0].conditionText, "(width = 100px)");
@@ -66,4 +67,8 @@
assert_equals(rules[11].conditionText, "(100px > width > 10px)");
assert_equals(rules[12].conditionText, "(100px >= width >= 10px)");
}, "Serialization of range condition syntax");

test(() => {
assert_equals(rules[13].conditionText, "(calc(1em + 1px) >= width >= max(10em, 10px))");
}, "Serialization of calc()");
</script>
@@ -0,0 +1,8 @@

FAIL Normalize spaces assert_equals: expected "style(--foo: bar)" but got "style( --foo:bar)"
FAIL Empty declaration value - spaces assert_equals: expected "style(--foo: )" but got "STyle(--foo: )"
FAIL Empty declaration value assert_equals: expected "style(--foo: )" but got "STyle(--foo:)"
PASS Missing declaration value
FAIL Unknown CSS property after 'or' assert_equals: expected "style((--FOO: BAR) or ( prop: val ))" but got "style( ( --FOO: BAR) OR ( prop: val ) )"
FAIL Not a style function with space before '(' assert_equals: expected "(--foo: bar)" but got "(--foo: )"

@@ -0,0 +1,34 @@
<!doctype html>
<title>CSS Container Queries: style() conditionText serialization</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style id="testSheet">
@container style( --foo:bar) { }
@container STyle(--foo: ) { }
@container STyle(--foo:) { }
@container STyle(--foo) { }
@container style( ( --FOO: BAR) OR ( prop: val ) ) { }
@container style (--foo: bar) { }
</style>
<script>
setup(() => {
assert_implements_container_queries();
assert_equals(testSheet.sheet.cssRules.length, 6);
});

const tests = [
["style(--foo: bar)", "Normalize spaces"],
["style(--foo: )", "Empty declaration value - spaces"],
["style(--foo: )", "Empty declaration value"],
["STyle(--foo)", "Missing declaration value"],
["style((--FOO: BAR) or ( prop: val ))", "Unknown CSS property after 'or'"],
["(--foo: bar)", "Not a style function with space before '('"]
].map((e, i) => [testSheet.sheet.cssRules[i], ...e]);

tests.forEach((t) => {
test(() => assert_equals(t[0].conditionText, t[1]), t[2]);
});
</script>
@@ -0,0 +1,3 @@

PASS em relative inline-size

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>CSS Container Queries Test: calc()</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#units">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
:root { font-size: 10px; }

/* To make output more readable */
:root > * { font-size: initial; }

#container {
container-type: size;
width: 200px;
height: 50px;
}
@container (width = calc(100px + 10rem)) {
#target { color: green; }
}
</style>
<div id=container>
<div id=target></div>
</div>
<script>
setup(() => assert_implements_container_queries());

test(() => {
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'em relative inline-size');
</script>
@@ -21,5 +21,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
@@ -22,5 +22,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
@@ -24,5 +24,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
@@ -25,5 +25,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
@@ -0,0 +1,5 @@

PASS #spanner matching container with column-width 300px, getting column-span:all
PASS Reducing #multicol width means #spanner no longer gets column-span:all
PASS Back to matching 300px and column-span:all

@@ -0,0 +1,41 @@
<!doctype html>
<title>CSS Container Queries Test: Column-spanner depending on container in column</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
#multicol {
container-type: inline-size;
width: 600px;
columns: 2;
column-gap: 0;
height: 200px;
}
#spanner { height: 100px; }
@container (width = 600px) {
#spanner {
column-span: all;
}
}
</style>
<div id="multicol">
<div id="spanner"></div>
</div>
<script>
setup(() => assert_implements_container_queries());

test(() => {
assert_equals(getComputedStyle(spanner).width, "600px");
}, "#spanner matching container with column-width 300px, getting column-span:all");

test(() => {
multicol.style.width = "500px";
assert_equals(getComputedStyle(spanner).width, "250px");
}, "Reducing #multicol width means #spanner no longer gets column-span:all");

test(() => {
multicol.style.width = "";
assert_equals(getComputedStyle(spanner).width, "600px");
}, "Back to matching 300px and column-span:all");
</script>
@@ -14,4 +14,5 @@ PASS Property container value 'foo/ inline-size'
PASS Property container value 'foo/inline-size'
PASS Property container value 'FoO / size'
PASS Property container value 'foo bar / size'
PASS Property container value 'foo / normal'

@@ -26,4 +26,5 @@
test_computed_value('container', 'foo/inline-size', 'foo / inline-size');
test_computed_value('container', 'FoO / size');
test_computed_value('container', 'foo bar / size', 'foo bar / size');
test_computed_value('container', 'foo / normal', 'foo');
</script>
@@ -1,6 +1,6 @@

PASS Property container-name has initial value none
PASS Property container-name does not inherit
PASS Property container-type has initial value none
PASS Property container-type has initial value normal
PASS Property container-type does not inherit

@@ -14,5 +14,5 @@
setup(() => assert_implements_container_queries());

assert_not_inherited('container-name', 'none', 'foo');
assert_not_inherited('container-type', 'none', 'inline-size');
assert_not_inherited('container-type', 'normal', 'inline-size');
</script>
@@ -9,7 +9,8 @@ PASS e.style['container-name'] = "BAR" should set the property value
PASS e.style['container-name'] = "foo bar" should set the property value
PASS e.style['container-name'] = "foo foo" should set the property value
PASS e.style['container-name'] = "\\!escaped" should set the property value
PASS e.style['container-name'] = "not" should set the property value
PASS e.style['container-name'] = "auto" should not set the property value
PASS e.style['container-name'] = "normal" should not set the property value
PASS e.style['container-name'] = "none none" should not set the property value
PASS e.style['container-name'] = "foo, bar" should not set the property value
PASS e.style['container-name'] = "#fff" should not set the property value
@@ -21,4 +22,10 @@ PASS e.style['container-name'] = "\"unset\"" should not set the property value
PASS e.style['container-name'] = "\"revert\"" should not set the property value
PASS e.style['container-name'] = "\"none\"" should not set the property value
PASS e.style['container-name'] = "\"foo\"" should not set the property value
PASS e.style['container-name'] = "not" should not set the property value
PASS e.style['container-name'] = "and" should not set the property value
PASS e.style['container-name'] = "or" should not set the property value
PASS e.style['container-name'] = "Not" should not set the property value
PASS e.style['container-name'] = "aNd" should not set the property value
PASS e.style['container-name'] = "oR" should not set the property value

@@ -20,8 +20,9 @@
test_valid_value('container-name', 'foo bar');
test_valid_value('container-name', 'foo foo');
test_valid_value('container-name', '\\!escaped');
test_valid_value('container-name', 'not');

test_invalid_value('container-name', 'auto');
test_invalid_value('container-name', 'normal');
test_invalid_value('container-name', 'none none');
test_invalid_value('container-name', 'foo, bar');
test_invalid_value('container-name', '#fff');
@@ -34,4 +35,11 @@
test_invalid_value('container-name', '"revert"');
test_invalid_value('container-name', '"none"');
test_invalid_value('container-name', '"foo"');

test_invalid_value('container-name', 'not');
test_invalid_value('container-name', 'and');
test_invalid_value('container-name', 'or');
test_invalid_value('container-name', 'Not');
test_invalid_value('container-name', 'aNd');
test_invalid_value('container-name', 'oR');
</script>

0 comments on commit 10224b9

Please sign in to comment.