Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,5 +1,44 @@
2022-03-15 Antti Koivisto <an...@apple.com>
+ [CSS Container Queries] Some more WPT updates
+ https://bugs.webkit.org/show_bug.cgi?id=237890
+
+ Reviewed by Antoine Quint.
+
+ * web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html:
+ * web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html:
+ * web-platform-tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html:
+ * web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-computed.html:
+ * web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-parsing.html:
+ * web-platform-tests/css/css-contain/container-queries/container-type-parsing-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-type-parsing.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-animation-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-units-animation.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-basic.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-computational-independence-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-units-computational-independence.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-invalidation-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-selection.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html:
+ * web-platform-tests/css/css-contain/container-queries/container-units-typed-om-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/container-units-typed-om.html:
+ * web-platform-tests/css/css-contain/container-queries/display-none-expected.txt:
+ * web-platform-tests/css/css-contain/container-queries/display-none.html:
+ * web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html:
+ * web-platform-tests/css/css-contain/container-queries/multicol-container-001.html:
+ * web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt: Added.
+ * web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html: Added.
+ * web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html:
+ * web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html:
+ * web-platform-tests/css/css-contain/container-queries/table-inside-container-changing-display.html:
+ * web-platform-tests/css/css-contain/container-queries/w3c-import.log:
+ * web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html:
+
+2022-03-15 Antti Koivisto <an...@apple.com>
+
CSSConditionRule.conditionText should be readonly
https://bugs.webkit.org/show_bug.cgi?id=237880
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -3,6 +3,7 @@
<link rel="help" href=""
<script src=""
<script src=""
+<script src=""
<style>
canvas {
display: block;
@@ -20,6 +21,8 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
+ setup(() => assert_implements_container_queries());
+
test(() => {
target.focus();
assert_not_equals(document.activeElement, target);
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -3,6 +3,7 @@
<link rel="help" href=""
<script src=""
<script src=""
+<script src=""
<style>
canvas {
display: block;
@@ -21,6 +22,8 @@
<div id="target" tabIndex="1"></div>
</canvas>
<script>
+ setup(() => assert_implements_container_queries());
+
test(() => {
target.focus();
assert_not_equals(document.activeElement, target);
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -3,7 +3,18 @@
<link rel="help" href=""
<link rel="help" href=""
<link rel="match" href=""
+<style>
+ #container {
+ container-type: inline-size;
+ }
+ #multicol {
+ column-count: 1;
+ }
+
+ @supports not (container-type: inline-size) {
+ #container { display: none }
+ }
+</style>
<p>Test passes if there is the word "PASS" below.</p>
-<div style="container-type:inline-size"><span>PASS</span></div>
-<span style="column-count:1"><table></table></span>
-
+<div id="container"><span>PASS</span></div>
+<span id="multicol"><table></table></span>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -7,7 +7,7 @@
PASS Property container value 'inline-size / inline-size'
PASS Property container value 'size / block-size'
FAIL Property container value 'size style / name' assert_true: 'size style / name' is a supported value for container. expected true got false
-FAIL Property container value 'inline-size state style/ name' assert_true: 'inline-size state style/ name' is a supported value for container. expected true got false
+FAIL Property container value 'inline-size style/ name' assert_true: 'inline-size style/ name' is a supported value for container. expected true got false
PASS Property container value 'inline-size / foo'
PASS Property container value 'inline-size /foo'
PASS Property container value 'inline-size/ foo'
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -19,7 +19,7 @@
test_computed_value('container', 'inline-size / inline-size');
test_computed_value('container', 'size / block-size');
test_computed_value('container', 'size style / name', 'style size / name');
-test_computed_value('container', 'inline-size state style/ name', 'style state inline-size / name');
+test_computed_value('container', 'inline-size style/ name', 'style inline-size / name');
test_computed_value('container', 'inline-size / foo');
test_computed_value('container', 'inline-size /foo', 'inline-size / foo');
test_computed_value('container', 'inline-size/ foo', 'inline-size / foo');
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -11,7 +11,7 @@
PASS e.style['container'] = "size / block-size" should set the property value
PASS e.style['container'] = "inline-size / inline-size" should set the property value
PASS e.style['container'] = "size / size" should set the property value
-FAIL e.style['container'] = "size state / none" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['container'] = "size style / none" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['container'] = "size / foo" should set the property value
PASS e.style['container'] = "size / foo bar" should set the property value
PASS e.style['container'] = "none none" should not set the property value
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -23,7 +23,7 @@
test_valid_value('container', 'size / block-size');
test_valid_value('container', 'inline-size / inline-size');
test_valid_value('container', 'size / size');
-test_valid_value('container', 'size state / none', 'size state');
+test_valid_value('container', 'size style / none', 'size style');
test_valid_value('container', 'size / foo');
test_valid_value('container', 'size / foo bar');
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -5,13 +5,11 @@
PASS e.style['container-type'] = "revert" should set the property value
PASS e.style['container-type'] = "none" should set the property value
FAIL e.style['container-type'] = "style" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['container-type'] = "state" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['container-type'] = "size" should set the property value
PASS e.style['container-type'] = "inline-size" should set the property value
-FAIL e.style['container-type'] = "inline-size state" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['container-type'] = "style state" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['container-type'] = "inline-size style" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['container-type'] = "style inline-size" should set the property value assert_not_equals: property should be set got disallowed value ""
-FAIL e.style['container-type'] = "state size" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['container-type'] = "style size" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['container-type'] = "block-size" should not set the property value
PASS e.style['container-type'] = "none none" should not set the property value
PASS e.style['container-type'] = "none inline-size" should not set the property value
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-parsing.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -16,14 +16,12 @@
test_valid_value('container-type', 'revert');
test_valid_value('container-type', 'none');
test_valid_value('container-type', 'style');
-test_valid_value('container-type', 'state');
test_valid_value('container-type', 'size');
test_valid_value('container-type', 'inline-size');
-test_valid_value('container-type', 'inline-size state');
-test_valid_value('container-type', 'style state');
+test_valid_value('container-type', 'inline-size style');
test_valid_value('container-type', 'style inline-size');
-test_valid_value('container-type', 'state size');
+test_valid_value('container-type', 'style size');
test_invalid_value('container-type', 'block-size');
test_invalid_value('container-type', 'none none');
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,14 +1,14 @@
-FAIL Animation using qw unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qw unit responds to changing container size assert_equals: expected "60px" but got "auto"
-FAIL Animation using qh unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qh unit responds to changing container size assert_equals: expected "60px" but got "auto"
-FAIL Animation using qi unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qi unit responds to changing container size assert_equals: expected "60px" but got "auto"
-FAIL Animation using qb unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qb unit responds to changing container size assert_equals: expected "60px" but got "auto"
-FAIL Animation using qmin unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qmin unit responds to changing container size assert_equals: expected "60px" but got "auto"
-FAIL Animation using qmax unit assert_equals: expected "60px" but got "auto"
-FAIL Animation using qmax unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqw unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqw unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqh unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqh unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqi unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqi unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqb unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqb unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqmin unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqmin unit responds to changing container size assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqmax unit assert_equals: expected "60px" but got "auto"
+FAIL Animation using cqmax unit responds to changing container size assert_equals: expected "60px" but got "auto"
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -11,12 +11,12 @@
height: 200px;
}
- @keyframes anim_qw { from { top: 20qw; } to { top: 40qw; } }
- @keyframes anim_qh { from { top: 20qh; } to { top: 40qh; } }
- @keyframes anim_qi { from { top: 20qi; } to { top: 40qi; } }
- @keyframes anim_qb { from { top: 20qb; } to { top: 40qb; } }
- @keyframes anim_qmin { from { top: 20qmin; } to { top: 40qmin; } }
- @keyframes anim_qmax { from { top: 20qmax; } to { top: 40qmax; } }
+ @keyframes anim_cqw { from { top: 20cqw; } to { top: 40cqw; } }
+ @keyframes anim_cqh { from { top: 20cqh; } to { top: 40cqh; } }
+ @keyframes anim_cqi { from { top: 20cqi; } to { top: 40cqi; } }
+ @keyframes anim_cqb { from { top: 20cqb; } to { top: 40cqb; } }
+ @keyframes anim_cqmin { from { top: 20cqmin; } to { top: 40cqmin; } }
+ @keyframes anim_cqmax { from { top: 20cqmax; } to { top: 40cqmax; } }
#container > div {
animation-delay: -5s;
@@ -25,26 +25,26 @@
animation-timing-function: linear;
}
- #element_qw { animation-name: anim_qw; }
- #element_qh { animation-name: anim_qh; }
- #element_qi { animation-name: anim_qi; }
- #element_qb { animation-name: anim_qb; }
- #element_qmin { animation-name: anim_qmin; }
- #element_qmax { animation-name: anim_qmax; }
+ #element_cqw { animation-name: anim_cqw; }
+ #element_cqh { animation-name: anim_cqh; }
+ #element_cqi { animation-name: anim_cqi; }
+ #element_cqb { animation-name: anim_cqb; }
+ #element_cqmin { animation-name: anim_cqmin; }
+ #element_cqmax { animation-name: anim_cqmax; }
</style>
<div id=container>
- <div id=element_qw></div>
- <div id=element_qh></div>
- <div id=element_qi></div>
- <div id=element_qb></div>
- <div id=element_qmin></div>
- <div id=element_qmax></div>
+ <div id=element_cqw></div>
+ <div id=element_cqh></div>
+ <div id=element_cqi></div>
+ <div id=element_cqb></div>
+ <div id=element_cqmin></div>
+ <div id=element_cqmax></div>
</div>
<script>
setup(() => assert_implements_container_queries());
- const units = ['qw', 'qh', 'qi', 'qb', 'qmin', 'qmax'];
+ const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
for (let unit of units) {
test(() => {
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-basic.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-basic.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-basic.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,5 +1,5 @@
<!doctype html>
-<title>Container Relative Units: qi, qb, etc</title>
+<title>Container Relative Units: cqi, cqb, etc</title>
<link rel="help" href=""
<script src=""
<script src=""
@@ -35,20 +35,20 @@
}
test(function() {
- assert_unit_equals(child, '0qi', '0px');
- assert_unit_equals(child, '1qi', '3px');
- assert_unit_equals(child, '10qi', '30px');
- assert_unit_equals(child, '10qw', '30px');
- assert_unit_equals(child, '10qb', '40px');
- assert_unit_equals(child, '10qh', '40px');
- assert_unit_equals(child, '10qmin', '30px');
- assert_unit_equals(child, '10qmax', '40px');
+ assert_unit_equals(child, '0cqi', '0px');
+ assert_unit_equals(child, '1cqi', '3px');
+ assert_unit_equals(child, '10cqi', '30px');
+ assert_unit_equals(child, '10cqw', '30px');
+ assert_unit_equals(child, '10cqb', '40px');
+ assert_unit_equals(child, '10cqh', '40px');
+ assert_unit_equals(child, '10cqmin', '30px');
+ assert_unit_equals(child, '10cqmax', '40px');
}, 'Container relative units');
test(function() {
- assert_unit_equals(child, '10qi', '30px');
- assert_unit_equals(child, '10qb', '40px');
- assert_unit_equals(child, 'calc(10qi + 10qb)', '70px');
- assert_unit_equals(child, 'max(10qi, 10qb)', '40px');
+ assert_unit_equals(child, '10cqi', '30px');
+ assert_unit_equals(child, '10cqb', '40px');
+ assert_unit_equals(child, 'calc(10cqi + 10cqb)', '70px');
+ assert_unit_equals(child, 'max(10cqi, 10cqb)', '40px');
}, 'Container relative units in math functions');
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,8 +1,8 @@
-PASS Container relative unit qw is not computationally independent
-PASS Container relative unit qh is not computationally independent
-PASS Container relative unit qi is not computationally independent
-PASS Container relative unit qb is not computationally independent
-PASS Container relative unit qmin is not computationally independent
-PASS Container relative unit qmax is not computationally independent
+PASS Container relative unit cqw is not computationally independent
+PASS Container relative unit cqh is not computationally independent
+PASS Container relative unit cqi is not computationally independent
+PASS Container relative unit cqb is not computationally independent
+PASS Container relative unit cqmin is not computationally independent
+PASS Container relative unit cqmax is not computationally independent
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -8,7 +8,7 @@
<script>
setup(() => assert_implements_container_queries());
- const units = ['qw', 'qh', 'qi', 'qb', 'qmin', 'qmax'];
+ const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
for (let unit of units) {
test(function() {
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,8 +1,8 @@
Test
-FAIL qi respond when selected container changes type (inline-size -> none) assert_equals: expected "30px" but got "0px"
-FAIL qb respond when selected container changes type (size -> none) assert_equals: expected "40px" but got "0px"
-FAIL qb respond when intermediate container changes type (inline-size -> size) assert_equals: expected "40px" but got "0px"
-FAIL qi respond when selected container changes inline-size assert_equals: expected "30px" but got "0px"
-FAIL qb respond when selected container changes block-size assert_equals: expected "40px" but got "0px"
+FAIL cqi respond when selected container changes type (inline-size -> none) assert_equals: expected "30px" but got "0px"
+FAIL cqb respond when selected container changes type (size -> none) assert_equals: expected "40px" but got "0px"
+FAIL cqb respond when intermediate container changes type (inline-size -> size) assert_equals: expected "40px" but got "0px"
+FAIL cqi respond when selected container changes inline-size assert_equals: expected "30px" but got "0px"
+FAIL cqb respond when selected container changes block-size assert_equals: expected "40px" but got "0px"
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -12,8 +12,8 @@
.h400 { height: 400px; }
.w300 { width: 300px; }
#child {
- padding-left: 10qi;
- padding-right: 10qb;
+ padding-left: 10cqi;
+ padding-right: 10cqb;
}
</style>
<div id=ref></div>
@@ -27,77 +27,77 @@
<script>
setup(() => assert_implements_container_queries());
- function assert_qi_equals(element, expected) {
+ function assert_cqi_equals(element, expected) {
assert_equals(getComputedStyle(element).paddingLeft, expected);
}
- function assert_qb_equals(element, expected) {
+ function assert_cqb_equals(element, expected) {
assert_equals(getComputedStyle(element).paddingRight, expected);
}
test(function(t) {
- assert_qi_equals(child, '30px');
+ assert_cqi_equals(child, '30px');
try {
inline.style.containerType = 'none';
- assert_qi_equals(child, '50px');
+ assert_cqi_equals(child, '50px');
} finally {
inline.style = '';
}
- assert_qi_equals(child, '30px');
- }, `qi respond when selected container changes type (inline-size -> none)`);
+ assert_cqi_equals(child, '30px');
+ }, `cqi respond when selected container changes type (inline-size -> none)`);
test(function() {
- assert_qb_equals(child, '40px');
+ assert_cqb_equals(child, '40px');
try {
size.style.containerType = 'none';
- assert_qb_equals(child, '60px');
+ assert_cqb_equals(child, '60px');
} finally {
size.style = '';
}
- assert_qb_equals(child, '40px');
- }, `qb respond when selected container changes type (size -> none)`);
+ assert_cqb_equals(child, '40px');
+ }, `cqb respond when selected container changes type (size -> none)`);
test(function() {
- assert_qb_equals(child, '40px');
+ assert_cqb_equals(child, '40px');
try {
inline.style.containerType = 'size';
inline.style.height = '200px';
- assert_qb_equals(child, '20px');
+ assert_cqb_equals(child, '20px');
} finally {
inline.style = '';
}
- assert_qb_equals(child, '40px');
- }, `qb respond when intermediate container changes type (inline-size -> size)`);
+ assert_cqb_equals(child, '40px');
+ }, `cqb respond when intermediate container changes type (inline-size -> size)`);
test(function() {
- assert_qi_equals(child, '30px');
+ assert_cqi_equals(child, '30px');
try {
inline.style.width = '50px';
- assert_qi_equals(child, '5px');
+ assert_cqi_equals(child, '5px');
} finally {
inline.style = '';
}
- assert_qi_equals(child, '30px');
- }, 'qi respond when selected container changes inline-size');
+ assert_cqi_equals(child, '30px');
+ }, 'cqi respond when selected container changes inline-size');
test(function() {
- assert_qb_equals(child, '40px');
+ assert_cqb_equals(child, '40px');
try {
size.style.height = '50px';
- assert_qb_equals(child, '5px');
+ assert_cqb_equals(child, '5px');
} finally {
size.style = '';
}
- assert_qb_equals(child, '40px');
- }, 'qb respond when selected container changes block-size');
+ assert_cqb_equals(child, '40px');
+ }, 'cqb respond when selected container changes block-size');
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-selection.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-selection.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-selection.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -43,22 +43,22 @@
test(() => {
try {
c1.className = 'inline w500'; // Selected by nothing.
- c2.className = 'size h400 w300'; // Selected by qh, qb.
- c3.className = 'inline w100'; // Selected by qw, qi.
- assert_unit_equals(child, '10qw', '10px');
- assert_unit_equals(child, '10qi', '10px');
- assert_unit_equals(child, '10qh', '40px');
- assert_unit_equals(child, '10qb', '40px');
- assert_unit_equals(child, '10qmin', '10px');
- assert_unit_equals(child, '10qmax', '40px');
+ c2.className = 'size h400 w300'; // Selected by cqh, cqb.
+ c3.className = 'inline w100'; // Selected by cqw, cqi.
+ assert_unit_equals(child, '10cqw', '10px');
+ assert_unit_equals(child, '10cqi', '10px');
+ assert_unit_equals(child, '10cqh', '40px');
+ assert_unit_equals(child, '10cqb', '40px');
+ assert_unit_equals(child, '10cqmin', '10px');
+ assert_unit_equals(child, '10cqmax', '40px');
- c3.className = ''; // qw, qi now selects c2 instead.
- assert_unit_equals(child, '10qw', '30px');
- assert_unit_equals(child, '10qi', '30px');
- assert_unit_equals(child, '10qh', '40px');
- assert_unit_equals(child, '10qb', '40px');
- assert_unit_equals(child, '10qmin', '30px');
- assert_unit_equals(child, '10qmax', '40px');
+ c3.className = ''; // cqw, cqi now selects c2 instead.
+ assert_unit_equals(child, '10cqw', '30px');
+ assert_unit_equals(child, '10cqi', '30px');
+ assert_unit_equals(child, '10cqh', '40px');
+ assert_unit_equals(child, '10cqb', '40px');
+ assert_unit_equals(child, '10cqmin', '30px');
+ assert_unit_equals(child, '10cqmax', '40px');
} finally {
for (let c of [c1, c2, c3, c4, child])
@@ -71,27 +71,27 @@
c1.className = 'size w500 h400';
c2.className = 'inline w300 h200';
- // [qi, qb] corresponds to [qw, qh].
- assert_unit_equals(child, '10qw', '30px');
- assert_unit_equals(child, '10qi', '30px');
- assert_unit_equals(child, '10qh', '40px');
- assert_unit_equals(child, '10qb', '40px');
+ // [cqi, cqb] corresponds to [cqw, cqh].
+ assert_unit_equals(child, '10cqw', '30px');
+ assert_unit_equals(child, '10cqi', '30px');
+ assert_unit_equals(child, '10cqh', '40px');
+ assert_unit_equals(child, '10cqb', '40px');
child.className = 'vertical';
- // [qi, qb] now corresponds to [qh, qw].
- assert_unit_equals(child, '10qw', '30px');
- assert_unit_equals(child, '10qi', '40px');
- assert_unit_equals(child, '10qh', '40px');
- assert_unit_equals(child, '10qb', '30px');
+ // [cqi, cqb] now corresponds to [cqh, cqw].
+ assert_unit_equals(child, '10cqw', '30px');
+ assert_unit_equals(child, '10cqi', '40px');
+ assert_unit_equals(child, '10cqh', '40px');
+ assert_unit_equals(child, '10cqb', '30px');
c2.classList.add('vertical');
// The inline containment on #c2 now applies to the vertical axis.
- // [qi, qb] still corresponds to [qh, qw], but we now expect
- // qh to resolve against #c2, and qw to resolve against #c1.
- assert_unit_equals(child, '10qw', '50px');
- assert_unit_equals(child, '10qi', '20px');
- assert_unit_equals(child, '10qh', '20px');
- assert_unit_equals(child, '10qb', '50px');
+ // [cqi, cqb] still corresponds to [cqh, cqw], but we now expect
+ // cqh to resolve against #c2, and cqw to resolve against #c1.
+ assert_unit_equals(child, '10cqw', '50px');
+ assert_unit_equals(child, '10cqi', '20px');
+ assert_unit_equals(child, '10cqh', '20px');
+ assert_unit_equals(child, '10cqb', '50px');
} finally {
for (let c of [c1, c2, c3, c4, child])
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -18,12 +18,12 @@
height: 30px;
}
#target {
- left: 10qw;
- top: 10qh;
- right: 10qi;
- bottom: 10qb;
- margin-left: 10qmax;
- margin-right: 10qmin;
+ left: 10cqw;
+ top: 10cqh;
+ right: 10cqi;
+ bottom: 10cqb;
+ margin-left: 10cqmax;
+ margin-right: 10cqmin;
}
</style>
<div id=container>
@@ -42,29 +42,29 @@
await waitForLoad(window);
let inner_target = iframe.contentDocument.querySelector('#target');
- // Since there's an inline-size container, qw/qi should evaluate against
+ // Since there's an inline-size container, cqw/cqi should evaluate against
// that.
- assert_equals(getComputedStyle(inner_target).left, '7px'); // 10qw
- assert_equals(getComputedStyle(inner_target).right, '7px'); // 10qi
+ assert_equals(getComputedStyle(inner_target).left, '7px'); // 10cqw
+ assert_equals(getComputedStyle(inner_target).right, '7px'); // 10cqi
- // However, there is no size container, so qh/qb should evaluate against
+ // However, there is no size container, so cqh/cqb should evaluate against
// the small viewport size.
- assert_equals(getComputedStyle(inner_target).top, '4px'); // 10qh
- assert_equals(getComputedStyle(inner_target).bottom, '4px'); // 10qb
+ assert_equals(getComputedStyle(inner_target).top, '4px'); // 10cqh
+ assert_equals(getComputedStyle(inner_target).bottom, '4px'); // 10cqb
- assert_equals(getComputedStyle(inner_target).marginLeft, '7px'); // 10qmax
- assert_equals(getComputedStyle(inner_target).marginRight, '4px'); // 10qmin
+ assert_equals(getComputedStyle(inner_target).marginLeft, '7px'); // 10cqmax
+ assert_equals(getComputedStyle(inner_target).marginRight, '4px'); // 10cqmin
iframe.style = 'width:400px;height:80px';
// Not affected by resize:
- assert_equals(getComputedStyle(inner_target).left, '7px'); // 10qw
- assert_equals(getComputedStyle(inner_target).right, '7px'); // 10qi
+ assert_equals(getComputedStyle(inner_target).left, '7px'); // 10cqw
+ assert_equals(getComputedStyle(inner_target).right, '7px'); // 10cqi
// Affected:
- assert_equals(getComputedStyle(inner_target).top, '8px'); // 10qh
- assert_equals(getComputedStyle(inner_target).bottom, '8px'); // 10qb
- assert_equals(getComputedStyle(inner_target).marginLeft, '8px'); // 10qmax
- assert_equals(getComputedStyle(inner_target).marginRight, '7px'); // 10qmin
+ assert_equals(getComputedStyle(inner_target).top, '8px'); // 10cqh
+ assert_equals(getComputedStyle(inner_target).bottom, '8px'); // 10cqb
+ assert_equals(getComputedStyle(inner_target).marginLeft, '8px'); // 10cqmax
+ assert_equals(getComputedStyle(inner_target).marginRight, '7px'); // 10cqmin
}, 'Use small viewport size as fallback');
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -1,26 +1,26 @@
-FAIL CSS.qw function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qw unit null is not an object (evaluating 'value.value')
-FAIL Set value with qw unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qw unit (CSS.qw) func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL CSS.qh function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qh unit null is not an object (evaluating 'value.value')
-FAIL Set value with qh unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qh unit (CSS.qh) func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL CSS.qi function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qi unit null is not an object (evaluating 'value.value')
-FAIL Set value with qi unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qi unit (CSS.qi) func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL CSS.qb function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qb unit null is not an object (evaluating 'value.value')
-FAIL Set value with qb unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qb unit (CSS.qb) func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL CSS.qmin function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qmin unit null is not an object (evaluating 'value.value')
-FAIL Set value with qmin unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qmin unit (CSS.qmin) func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL CSS.qmax function func is not a function. (In 'func(10)', 'func' is undefined)
-FAIL Reify value with qmax unit null is not an object (evaluating 'value.value')
-FAIL Set value with qmax unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
-FAIL Set value with qmax unit (CSS.qmax) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqw function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqw unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqw unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqw unit (CSS.cqw) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqh function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqh unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqh unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqh unit (CSS.cqh) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqi function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqi unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqi unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqi unit (CSS.cqi) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqb function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqb unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqb unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqb unit (CSS.cqb) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqmin function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqmin unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqmin unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqmin unit (CSS.cqmin) func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL CSS.cqmax function func is not a function. (In 'func(10)', 'func' is undefined)
+FAIL Reify value with cqmax unit null is not an object (evaluating 'value.value')
+FAIL Set value with cqmax unit (string) element.attributeStyleMap.set is not a function. (In 'element.attributeStyleMap.set('top', `10${unit}`)', 'element.attributeStyleMap.set' is undefined)
+FAIL Set value with cqmax unit (CSS.cqmax) func is not a function. (In 'func(10)', 'func' is undefined)
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -9,14 +9,14 @@
<script>
setup(() => assert_implements_container_queries());
- const units = ['qw', 'qh', 'qi', 'qb', 'qmin', 'qmax'];
+ const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
const functions = {
- qw: CSS.qw,
- qh: CSS.qh,
- qi: CSS.qi,
- qb: CSS.qb,
- qmin: CSS.qmin,
- qmax: CSS.qmax,
+ cqw: CSS.cqw,
+ cqh: CSS.cqh,
+ cqi: CSS.cqi,
+ cqb: CSS.cqb,
+ cqmin: CSS.cqmin,
+ cqmax: CSS.cqmax,
};
for (let unit of units) {
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none-expected.txt (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none-expected.txt 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -16,4 +16,5 @@
PASS getComputedStyle when originating element is display:none
PASS getComputedStyle on ::before when ancestor element is display:none
PASS getComputedStyle on ::before when container is display:none
+FAIL getComputedStyle when in display:none with layout dirty outer element assert_equals: expected "50" but got ""
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/display-none.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -15,11 +15,18 @@
height: 30px;
background: tomato;
}
+ .small {
+ width: 10px;
+ height: 10px;
+ }
.big {
width: 50px;
height: 50px;
background: skyblue;
}
+ .auto {
+ width: auto;
+ }
.none {
display: none;
}
@@ -346,4 +353,25 @@
}, 'getComputedStyle on ::before when container is display:none');
</script>
+ <!-- Target in display:none with layout dirty outer element -->
+ <div class=small id="outer18">
+ <div class="container auto">
+ <div class="none">
+ <div>
+ <div class="target" id=target18></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script>
+ test(function() {
+ target18.offsetTop;
+ let s = getComputedStyle(target18);
+ assert_equals(s.getPropertyValue('--x'), '');
+
+ outer18.classList.remove('small');
+ outer18.classList.add('big');
+ assert_equals(s.getPropertyValue('--x'), '50');
+ }, 'getComputedStyle when in display:none with layout dirty outer element');
+ </script>
</main>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -38,6 +38,8 @@
</div>
</div>
<script>
+ setup(() => assert_implements_container_queries());
+
test(() => {
const green = "rgb(0, 128, 0)";
assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green);
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-container-001.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-container-001.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-container-001.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -21,6 +21,8 @@
<div id="second-child">Second</div>
</div>
<script>
+ setup(() => assert_implements_container_queries());
+
test(() => {
const green = "rgb(0, 128, 0)";
assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green);
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt (0 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt 2022-03-15 16:13:55 UTC (rev 291293)
@@ -0,0 +1,7 @@
+XXXX
+
+FAIL Sibling style mutation assert_equals: expected "10" but got "20"
+FAIL Sibling style mutation, parent is affected assert_equals: expected "10" but got "20"
+FAIL Sibling style mutation, ancestor is affected assert_equals: expected "10" but got "20"
+FAIL Sibling text mutation assert_equals: expected "10" but got "20"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html (0 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -0,0 +1,134 @@
+<!doctype html>
+<title>@container-dependent styles respond to layout changes</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<link rel="stylesheet" type="text/css" href="" />
+<script src=""
+<script src=""
+<script src=""
+<script>
+ setup(() => assert_implements_container_queries());
+</script>
+<style>
+
+ @container (width: 10px) { .affected { --x:10; } }
+ @container (width: 20px) { .affected { --x:20; } }
+
+ .flex {
+ display: flex;
+ height: 30px;
+ width: 30px;
+ }
+
+ .container {
+ container-type: size;
+ flex: 1;
+ background: tomato;
+ }
+
+ .sibling {
+ background-color: skyblue;
+ }
+ .w10 {
+ width: 10px;
+ }
+ .ahem { font: 5px Ahem; }
+
+ /* The following is just to make the results more human-readable. */
+ main {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+</style>
+
+<main>
+ <!-- A sibling of the container gets a layout-affecting style change -->
+ <div class=flex>
+ <div class=container>
+ <div>
+ <div>
+ <div class=affected id=target1></div>
+ </div>
+ </div>
+ </div>
+ <div class="sibling w10" id=sibling1></div>
+ </div>
+ <script>
+ test(function() {
+ let cs = getComputedStyle(target1);
+ assert_equals(cs.getPropertyValue('--x'), '20');
+
+ sibling1.style.width = '20px';
+ assert_equals(cs.getPropertyValue('--x'), '10');
+ }, 'Sibling style mutation');
+ </script>
+
+ <!-- A sibling of the container gets a layout-affecting style change
+ affecting the parent of the gCS target -->
+ <div class=flex>
+ <div class=container>
+ <div>
+ <div class=affected id=parent2>
+ <div id=target2></div>
+ </div>
+ </div>
+ </div>
+ <div class="sibling w10" id=sibling2></div>
+ </div>
+ <script>
+ test(function() {
+ let cs = getComputedStyle(target2);
+ assert_equals(cs.getPropertyValue('--x'), '20');
+
+ sibling2.style.width = '20px';
+ assert_equals(cs.getPropertyValue('--x'), '10');
+ }, 'Sibling style mutation, parent is affected');
+ </script>
+
+<!-- A sibling of the container gets a layout-affecting style change
+ affecting an ancestor of the gCS target -->
+ <div class=flex>
+ <div class=container>
+ <div class=affected id=ancestor3>
+ <div>
+ <div id=target3></div>
+ </div>
+ </div>
+ </div>
+ <div class="sibling w10" id=sibling3></div>
+ </div>
+ <script>
+ test(function() {
+ let cs = getComputedStyle(target3);
+ assert_equals(cs.getPropertyValue('--x'), '20');
+
+ sibling3.style.width = '20px';
+ assert_equals(cs.getPropertyValue('--x'), '10');
+ }, 'Sibling style mutation, ancestor is affected');
+ </script>
+
+ <!-- A sibling of the container needs layout via text mutation -->
+ <div class=flex>
+ <div class=container>
+ <div>
+ <div>
+ <div class=affected id=target4></div>
+ </div>
+ </div>
+ </div>
+ <div class="sibling ahem" id=sibling4>XX</div>
+ </div>
+ <script>
+ promise_test(async function() {
+ await document.fonts.ready;
+
+ let cs = getComputedStyle(target4);
+ assert_equals(cs.getPropertyValue('--x'), '20');
+
+ sibling4.textContent = 'XXXX';
+ assert_equals(cs.getPropertyValue('--x'), '10');
+ }, 'Sibling text mutation');
+ </script>
+
+</main>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -9,6 +9,9 @@
height: 100px;
container-type: size;
}
+ @supports not (container-type: size) {
+ div { color: red; }
+ }
@container (width = 100px) {
div { color: red; }
}
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -3,6 +3,7 @@
<link rel="help" href=""
<script src=""
<script src=""
+<script src=""
<style>
svg {
display: block;
@@ -21,8 +22,10 @@
</foreignobject>
</svg>
<script>
- let green = "rgb(0, 128, 0)";
+ setup(() => assert_implements_container_queries());
+ const green = "rgb(0, 128, 0)";
+
test(() => {
assert_equals(getComputedStyle(text).color, green);
}, "SVG text querying SVG root size container");
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/table-inside-container-changing-display.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/table-inside-container-changing-display.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/table-inside-container-changing-display.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -3,8 +3,18 @@
<link rel="help" href=""
<link rel="help" href=""
<link rel="match" href=""
+<style>
+ @supports not (container-type: inline-size) {
+ #container { display: none !important; }
+ }
+ #container {
+ width: 200px;
+ height: 200px;
+ container-type: inline-size;
+ }
+</style>
<p>You should see the word PASS below.</p>
-<div id="container" style="width: 200px; height: 200px; container-type:inline-size;">
+<div id="container">
<div>
<table><td>PASS</td></table>
</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log 2022-03-15 16:13:55 UTC (rev 291293)
@@ -128,6 +128,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-ref.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-container-no-principal-box.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/style-change-in-container.html
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html (291292 => 291293)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html 2022-03-15 15:38:21 UTC (rev 291292)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html 2022-03-15 16:13:55 UTC (rev 291293)
@@ -16,9 +16,11 @@
<p>You should see the word PASS below.</p>
<div id="container"><span id="fail">FAIL</span> <span>PASS</span></div>
<script>
- container.offsetTop;
- container.style.width = "200px";
- // The space text node between the two spans no longer takes up space when the
- // first span is removed.
- fail.remove();
+ if (CSS.supports("container-type:size")) {
+ container.offsetTop;
+ container.style.width = "200px";
+ // The space text node between the two spans no longer takes up space when the
+ // first span is removed.
+ fail.remove();
+ }
</script>
