mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45:33 +01:00
Update web-platform-tests to revision b'a3cb53d786edfd9106825e312866624150382075'
This commit is contained in:
parent
9acb9cc5cf
commit
40def0914a
549 changed files with 16001 additions and 1815 deletions
|
@ -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>
|
||||
|
|
|
@ -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"],
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue