Update web-platform-tests to revision b'a3cb53d786edfd9106825e312866624150382075'

This commit is contained in:
WPT Sync Bot 2023-04-23 01:33:06 +00:00
parent 9acb9cc5cf
commit 40def0914a
549 changed files with 16001 additions and 1815 deletions

View file

@ -68,8 +68,8 @@
test_condition_known('style(--my-prop:)');
test_condition_known('style(--my-prop: )');
test_condition_known('style(--foo: bar !important)');
test_condition_known('style(--foo)');
test_condition_unknown('style(--foo: bar;)');
test_condition_unknown('style(--foo)');
test_condition_unknown('style(style(--foo: bar))');
</script>

View file

@ -25,7 +25,7 @@
["style(--foo: bar)", "Normalize spaces"],
["style(--foo: )", "Empty declaration value - spaces"],
["style(--foo: )", "Empty declaration value"],
["STyle(--foo)", "Missing declaration value"],
["style(--foo)", "No declaration value"],
["style((--FOO: BAR) or ( prop: val ))", "Unknown CSS property after 'or'"],
["style (--foo: bar)", "Not a style function with space before '('"],
["style(--foo: bar baz)", "Spaces preserved in custom property value"],

View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<link rel="help" href="https://crbug.com/1429955.html">
<div id="mc" style="display:list-item; width:0; columns:2; container-type:size;">
<div id="abs" style="position:absolute; container-type:inline-size;">line</div>
</div>

View file

@ -210,9 +210,15 @@
@container style(--initial: initial) {
#initial { color: green; }
}
@container not style(--initial) {
#initial-implicit { color: green; }
}
@container not style(--initial-no: initial) {
#initial-no { color: green; }
}
@container style(--initial-no) {
#initial-no-implicit { color: green; }
}
@container style(--inherit: inherit) {
#inherit { color: green; }
}
@ -229,7 +235,9 @@
<div id="defaulting">
<div id="defaulting-container">
<div id="initial"></div>
<div id="initial-implicit"></div>
<div id="initial-no"></div>
<div id="initial-no-implicit"></div>
<div id="inherit"></div>
<div id="inherit-no"></div>
<div id="unset"></div>
@ -241,10 +249,18 @@
assert_equals(getComputedStyle(document.querySelector("#initial")).color, green);
}, "Style query 'initial' matching");
test(() => {
assert_equals(getComputedStyle(document.querySelector("#initial-implicit")).color, green);
}, "Style query matching negated value-less query against initial value");
test(() => {
assert_equals(getComputedStyle(document.querySelector("#initial-no")).color, green);
}, "Style query 'initial' not matching");
test(() => {
assert_equals(getComputedStyle(document.querySelector("#initial-no-implicit")).color, green);
}, "Style query matching value-less query against non-initial value");
test(() => {
assert_equals(getComputedStyle(document.querySelector("#inherit")).color, green);
}, "Style query 'inherit' matching");
@ -284,6 +300,9 @@
@container style(--reg-length: initial) {
#reg-px-initial { color: green; }
}
@container not style(--reg-length) {
#reg-px-initial-implicit { color: green; }
}
#reg-container-font-relative {
--reg-length: 10px;
@ -316,11 +335,15 @@
@container style(--reg-length: initial) {
#reg-initial-keyword { color: green; }
}
@container not style(--reg-length) {
#reg-initial-implicit { color: green; }
}
</style>
<div id="registered">
<div id="reg-container-px">
<div id="reg-px"></div>
<div id="reg-px-initial"></div>
<div id="reg-px-initial-implicit"></div>
</div>
<div id="reg-container-font-relative">
<div id="reg-font-relative"></div>
@ -334,6 +357,7 @@
<div id="reg-container-initial">
<div id="reg-initial-value"></div>
<div id="reg-initial-keyword"></div>
<div id="reg-initial-implicit"></div>
</div>
</div>
<script>

View file

@ -4,13 +4,3 @@
<div>PASS</div>
<div>PASS</div>
<div>PASS</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<title>CSS Container Queries Test: Container for pseudo elements</title>
<title>CSS Container Queries Test: Container for ::before/::after pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
<link rel="match" href="pseudo-elements-002-ref.html">
<style>
@ -16,61 +16,13 @@
@container (max-width: 100px) { #c4::after { content: "PASS" } }
@container (min-width: 150px) { #c4::after { content: "FAIL" } }
@container (max-width: 300px) { #c5::first-letter { color: green } }
@container (max-width: 300px) { #c6::first-letter { color: green } }
@container (min-width: 400px) { #c7::first-letter { color: green } }
@container (min-width: 400px) { #c8::first-letter { color: green } }
@container (max-width: 300px) { #c9::first-line { color: green } }
@container (max-width: 300px) { #c10::first-line { color: green } }
@container (min-width: 400px) { #c11::first-line { color: green } }
@container (min-width: 400px) { #c12::first-line { color: green } }
#c13::first-line { color: red }
@container (min-width: 400px) { #c13::first-line { color: green } }
@container (min-width: 400px) { #c14::first-line { color: green } }
</style>
<div id="c1" class="container" style="width:100px"></div>
<div id="c2" class="container" style="width:200px"></div>
<div id="c3" class="container" style="width:100px"></div>
<div id="c4" class="container" style="width:200px"></div>
<div class="container" style="width:400px">
<div id="c5" class="container" style="width:300px">PASS if P is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c6" class="container" style="width:400px">PASS if P is green.</div>
</div>
<div id="c7" class="container" style="width:400px">
<div class="container" style="width:300px">PASS if P is green.</div>
</div>
<div id="c8" class="container" style="width:300px">
<div class="container" style="width:300px">PASS if P is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c9" class="container" style="width:300px">PASS if text is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c10" class="container" style="width:400px">PASS if text is green.</div>
</div>
<div id="c11" class="container" style="width:400px">
<div class="container" style="width:300px">PASS if text is green.</div>
</div>
<div id="c12" class="container" style="width:300px">
<div class="container" style="width:300px">PASS if text is green.</div>
</div>
<div id="c13" class="container" style="width:300px">PASS if text is green.</div>
<div id="c14" class="container" style="width:300px">PASS if text is green.</div>
<script>
document.body.offsetTop;
c2.style.width = "100px";
c4.style.width = "100px";
c6.style.width = "300px";
c8.style.width = "400px";
c10.style.width = "300px";
c12.style.width = "400px";
c13.style.width = "400px";
c14.style.width = "400px";
</script>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div><span style="color:green">P</span>ASS if P is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<title>CSS Container Queries Test: Container for ::first-letter/::first-line pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
<link rel="match" href="pseudo-elements-002b-ref.html">
<style>
.container { container-type: inline-size; }
@container (max-width: 300px) { #c5::first-letter { color: green } }
@container (max-width: 300px) { #c6::first-letter { color: green } }
@container (min-width: 400px) { #c7::first-letter { color: green } }
@container (min-width: 400px) { #c8::first-letter { color: green } }
@container (max-width: 300px) { #c9::first-line { color: green } }
@container (max-width: 300px) { #c10::first-line { color: green } }
@container (min-width: 400px) { #c11::first-line { color: green } }
@container (min-width: 400px) { #c12::first-line { color: green } }
#c13::first-line { color: red }
@container (min-width: 400px) { #c13::first-line { color: green } }
@container (min-width: 400px) { #c14::first-line { color: green } }
</style>
<div class="container" style="width:400px">
<div id="c5" class="container" style="width:300px">PASS if P is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c6" class="container" style="width:400px">PASS if P is green.</div>
</div>
<div id="c7" class="container" style="width:400px">
<div class="container" style="width:300px">PASS if P is green.</div>
</div>
<div id="c8" class="container" style="width:300px">
<div class="container" style="width:300px">PASS if P is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c9" class="container" style="width:300px">PASS if text is green.</div>
</div>
<div class="container" style="width:400px">
<div id="c10" class="container" style="width:400px">PASS if text is green.</div>
</div>
<div id="c11" class="container" style="width:400px">
<div class="container" style="width:300px">PASS if text is green.</div>
</div>
<div id="c12" class="container" style="width:300px">
<div class="container" style="width:300px">PASS if text is green.</div>
</div>
<div id="c13" class="container" style="width:300px">PASS if text is green.</div>
<div id="c14" class="container" style="width:300px">PASS if text is green.</div>
<script>
document.body.offsetTop;
c6.style.width = "300px";
c8.style.width = "400px";
c10.style.width = "300px";
c12.style.width = "400px";
c13.style.width = "400px";
c14.style.width = "400px";
</script>