mirror of
https://github.com/servo/servo.git
synced 2025-08-16 19:05:33 +01:00
Update web-platform-tests to revision ac3d096a5972dea5ecca1c43e324086895db7c6f
This commit is contained in:
WPT Sync Bot
parent
1c74a80e28
commit
db54f176d0
47 changed files with 860 additions and 246 deletions
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break/">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=966369">
|
||||
<div id="container" style="height:100px";>
|
||||
<div style="height:100%;">
|
||||
<div style="break-before:page;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
document.body.offsetTop;
|
||||
container.style.height = "101px";
|
||||
}, "no crash");
|
||||
</script>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
contain: layout;
|
||||
background: cyan;
|
||||
font-size: 20px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.wrapper > :nth-child(1) {
|
||||
background: magenta;
|
||||
|
|
@ -49,7 +50,7 @@ fieldset, details {
|
|||
</div>
|
||||
<div class="wrapper">
|
||||
<canvas></canvas>
|
||||
<input value="foo"></input>
|
||||
<input value="foo" size="3"></input>
|
||||
<input type="file"></input>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,16 @@
|
|||
<title>CSS Containment Test: Layout containment on button</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
|
||||
<link rel="match" href="reference/contain-layout-button-001-ref.html">
|
||||
<meta name=assert content="Layout containment does apply to buttons, thus their baseline is the same than if they don't have contents.">
|
||||
<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">
|
||||
<style>
|
||||
button {
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
/* We use a nonzero margin-bottom to be sure we're synthesizing a baseline
|
||||
from the margin-box rather than from the border-box: */
|
||||
margin-bottom: 2px;
|
||||
contain: layout;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
|
|
@ -16,5 +20,5 @@ button {
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
|
||||
before<button>b</button>after
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ fieldset, details {
|
|||
</div>
|
||||
<div class="wrapper">
|
||||
<canvas></canvas>
|
||||
<input value="foo"></input>
|
||||
<input value="foo" size="3"></input>
|
||||
<input type="file"></input>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
button {
|
||||
div.fakeButton {
|
||||
display: inline-block;
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
margin-bottom: 2px;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0px;
|
||||
|
|
@ -15,5 +17,5 @@ button {
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<button></button>after
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
|
||||
before<div class="fakeButton"></div>after
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<title>flexbox | flexcontainer versus stf :: fixed</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
||||
<link rel="match" href="about:blank">
|
||||
<link rel="match" href="../reference/blank.html">
|
||||
<style>
|
||||
#test {
|
||||
background: red;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<title>::marker pseudo-elements generated by ::before and ::after are not addressable by selectors</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1539171">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1543758">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="match" href="nested-marker-ref.html">
|
||||
<style>
|
||||
li, ::marker {
|
||||
color: red;
|
||||
}
|
||||
li::before, li::after {
|
||||
display: list-item;
|
||||
content: "Before";
|
||||
}
|
||||
li::after {
|
||||
content: "After";
|
||||
}
|
||||
.tweak::marker {
|
||||
color: blue;
|
||||
}
|
||||
.tweak, .tweak::before, .tweak::after {
|
||||
color: initial;
|
||||
}
|
||||
</style>
|
||||
<ol>
|
||||
<li>Foo
|
||||
<li>Bar
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.body.offsetTop;
|
||||
for (let li of document.querySelectorAll("li"))
|
||||
li.classList.add("tweak");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
li::marker {
|
||||
color: blue;
|
||||
}
|
||||
div {
|
||||
display: list-item;
|
||||
}
|
||||
</style>
|
||||
<ol>
|
||||
<li><div>Before</div>Foo<div>After</div>
|
||||
<li><div>Before</div>Bar<div>After</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<title>::marker pseudo-elements generated by ::before and ::after are not addressable by global selectors</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1539171">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1543758">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="match" href="nested-marker-ref.html">
|
||||
<style>
|
||||
::marker {
|
||||
color: red;
|
||||
}
|
||||
li::marker {
|
||||
color: blue;
|
||||
}
|
||||
li::before, li::after {
|
||||
display: list-item;
|
||||
content: "Before";
|
||||
}
|
||||
li::after {
|
||||
content: "After";
|
||||
}
|
||||
</style>
|
||||
<ol>
|
||||
<li>Foo
|
||||
<li>Bar
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: ::slotted() should not match via the matches() API, since it's in the wrong scope</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
|
||||
<link rel="help" href="https://dom.spec.whatwg.org/#dom-element-matches">
|
||||
<link rel="help" href="https://bugzil.la/1544242">
|
||||
<div id="host"><div id="slotted"></div></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let slotted = document.getElementById("slotted");
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `<slot></slot>`;
|
||||
assert_false(slotted.matches("::slotted(div)"), "Shouldn't match ::slotted from the outer tree")
|
||||
}, "::slotted() doesn't reveal the presence of shadow DOM via matches()");
|
||||
</script>
|
||||
|
|
@ -19,7 +19,8 @@ assert_not_inherited('offset-anchor', 'auto', '2px 3px');
|
|||
assert_not_inherited('offset-distance', '0px', '4px');
|
||||
assert_not_inherited('offset-path', 'none', 'path("M 5 6 H 7")');
|
||||
assert_not_inherited('offset-position', 'auto', '8px 9px');
|
||||
assert_not_inherited('offset-rotate', 'auto 0deg', '90deg');
|
||||
// https://github.com/w3c/fxtf-drafts/issues/340
|
||||
assert_not_inherited('offset-rotate', ['auto 0deg', 'auto'], '90deg');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: offset-rotate</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
|
||||
<link rel="match" href="offset-rotate-ref.html">
|
||||
<meta name="assert" content="This tests offset-rotate <angle>">
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: path('m 0 0 v -200 -200') ;
|
||||
offset-rotate: 30deg;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Motion Path: offset-rotate</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
|
||||
<link rel="match" href="offset-rotate-ref.html">
|
||||
<meta name="assert" content="This tests offset-rotate auto with path()">
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-rotate: auto;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function test() {
|
||||
let target = document.getElementById('target');
|
||||
// Get a path which has the same direction as "ray(120deg ...)"
|
||||
let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
|
||||
target.style.offsetPath = `path("m 0 0 l 100 ${verticalMove}")`;
|
||||
window.getComputedStyle(target).offsetPath;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload='test()'>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Motion Path: offset-rotate</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
|
||||
<link rel="match" href="offset-rotate-ref.html">
|
||||
<meta name="assert" content="This tests offset-rotate reverse <angle> with path()">
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-rotate: reverse 60deg;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function test() {
|
||||
let target = document.getElementById('target');
|
||||
// Get a path which has the same direction as "ray(-120deg ...)"
|
||||
let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
|
||||
target.style.offsetPath = `path("m 0 0 l -100 ${verticalMove}")`;
|
||||
window.getComputedStyle(target).offsetPath;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload='test()'>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("offset-rotate", "auto", "auto 0deg");
|
||||
// https://github.com/w3c/fxtf-drafts/issues/340
|
||||
test_computed_value("offset-rotate", "auto", ["auto 0deg", "auto"]);
|
||||
test_computed_value("offset-rotate", "reverse", "auto 180deg");
|
||||
test_computed_value("offset-rotate", "calc(90deg - 0.5turn - 300grad + 0rad)", "-360deg");
|
||||
test_computed_value("offset-rotate", "auto 5turn", "auto 1800deg");
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ test_valid_value("offset-rotate", "auto");
|
|||
test_valid_value("offset-rotate", "reverse");
|
||||
test_valid_value("offset-rotate", "-400deg");
|
||||
test_valid_value("offset-rotate", "auto 5turn");
|
||||
test_valid_value("offset-rotate", "reverse 0rad");
|
||||
// https://github.com/w3c/fxtf-drafts/issues/340
|
||||
test_valid_value("offset-rotate", "reverse 0rad", ["reverse 0rad", "reverse"]);
|
||||
test_valid_value("offset-rotate", "5turn auto", "auto 5turn");
|
||||
test_valid_value("offset-rotate", "0rad reverse", "reverse 0rad");
|
||||
// https://github.com/w3c/fxtf-drafts/issues/340
|
||||
test_valid_value("offset-rotate", "0rad reverse", ["reverse 0rad", "reverse"]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,22 +6,36 @@
|
|||
*
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string} specified A specified value for the property.
|
||||
* @param {string} computed The expected computed value. If omitted,
|
||||
defaults to specified.
|
||||
* @param {string|array} computed The expected computed value,
|
||||
* or an array of permitted computed value.
|
||||
* If omitted, defaults to specified.
|
||||
*/
|
||||
function test_computed_value(property, specified, computed) {
|
||||
if (!computed)
|
||||
computed = specified;
|
||||
|
||||
let computedDesc = "'" + computed + "'";
|
||||
if (Array.isArray(computed))
|
||||
computedDesc = '[' + computed.map(e => "'" + e + "'").join(' or ') + ']';
|
||||
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
|
||||
target.style[property] = '';
|
||||
target.style[property] = specified;
|
||||
assert_equals(getComputedStyle(target)[property], computed);
|
||||
if (computed !== specified) {
|
||||
target.style[property] = '';
|
||||
target.style[property] = computed;
|
||||
assert_equals(getComputedStyle(target)[property], computed, 'computed value should round-trip');
|
||||
|
||||
let readValue = getComputedStyle(target)[property];
|
||||
if (Array.isArray(computed)) {
|
||||
assert_in_array(readValue, computed);
|
||||
} else {
|
||||
assert_equals(readValue, computed);
|
||||
}
|
||||
}, "Property " + property + " value '" + specified + "' computes to '" + computed + "'");
|
||||
if (readValue !== specified) {
|
||||
target.style[property] = '';
|
||||
target.style[property] = readValue;
|
||||
assert_equals(getComputedStyle(target)[property], readValue,
|
||||
'computed value should round-trip');
|
||||
}
|
||||
}, "Property " + property + " value '" + specified + "' computes to " +
|
||||
computedDesc);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,21 @@
|
|||
(function() {
|
||||
|
||||
function assert_initial(property, initial) {
|
||||
let initialDesc = initial;
|
||||
if (Array.isArray(initial))
|
||||
initialDesc = '[' + initial.map(e => "'" + e + "'").join(' or ') + ']';
|
||||
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
|
||||
target.style[property] = 'initial';
|
||||
assert_equals(getComputedStyle(target)[property], initial);
|
||||
if (Array.isArray(initial)) {
|
||||
assert_in_array(getComputedStyle(target)[property], initial);
|
||||
} else {
|
||||
assert_equals(getComputedStyle(target)[property], initial);
|
||||
}
|
||||
target.style[property] = '';
|
||||
}, 'Property ' + property + ' has initial value ' + initial);
|
||||
}, 'Property ' + property + ' has initial value ' + initialDesc);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -17,10 +25,12 @@ function assert_initial(property, initial) {
|
|||
*
|
||||
* The current document must have an element #target within element #container.
|
||||
*
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string} initial The computed value for 'initial'.
|
||||
* @param {string} other An arbitrary value for the property that round
|
||||
* trips and is distinct from the initial value.
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string|array} initial The computed value for 'initial' or a list
|
||||
* of acceptable computed value serializations.
|
||||
* @param {string} other An arbitrary value for the property that
|
||||
* round trips and is distinct from the initial
|
||||
* value.
|
||||
*/
|
||||
function assert_inherited(property, initial, other) {
|
||||
assert_initial(property, initial);
|
||||
|
|
@ -52,10 +62,12 @@ function assert_inherited(property, initial, other) {
|
|||
*
|
||||
* The current document must have an element #target within element #container.
|
||||
*
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string} initial The computed value for 'initial'.
|
||||
* @param {string} other An arbitrary value for the property that round
|
||||
* trips and is distinct from the initial value.
|
||||
* @param {string} property The name of the CSS property being tested.
|
||||
* @param {string|array} initial The computed value for 'initial' or a list
|
||||
* of acceptable computed value serializations.
|
||||
* @param {string} other An arbitrary value for the property that
|
||||
* round trips and is distinct from the initial
|
||||
* value.
|
||||
*/
|
||||
function assert_not_inherited(property, initial, other) {
|
||||
assert_initial(property, initial);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue