Skip to content

Commit

Permalink
[CSS Container Queries] Rename container-type value 'none' to 'normal'
Browse files Browse the repository at this point in the history
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 authored and Jarred-Sumner committed Jul 27, 2022
1 parent fd5fb72 commit eef7b41
Show file tree
Hide file tree
Showing 66 changed files with 899 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions LayoutTests/imported/w3c/resources/resource-files.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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))

Original file line number Diff line number Diff line change
Expand Up @@ -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)');
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Original file line number Diff line number Diff line change
Expand Up @@ -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)");
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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: )"

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

PASS em relative inline-size

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
target.focus();
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
target.focus();
});
});
</script>
Original file line number Diff line number Diff line change
@@ -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

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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

Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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>
Loading

0 comments on commit eef7b41

Please sign in to comment.