mirror of
https://github.com/servo/servo.git
synced 2025-08-17 03:15:34 +01:00
Update web-platform-tests to revision 89ad54bd0d498c8209ec80407f5758566f91e82f
This commit is contained in:
WPT Sync Bot
parent
34bf312e0c
commit
1eb76da73c
27 changed files with 740 additions and 126 deletions
|
|
@ -28,14 +28,22 @@ function makeDeclaration(object = {}) {
|
|||
* element before starting the transition.
|
||||
* @param finalStyles A dictionary object with property names and values towards which
|
||||
* the element will transition.
|
||||
* @param [transitionStyles] An optional dictionary object to costumize the transition.
|
||||
*/
|
||||
function transition(t, baseStyles, finalStyles) {
|
||||
function transition(t, baseStyles, finalStyles, transitionStyles = {}) {
|
||||
// Clear styles from previous test.
|
||||
testEl.style.cssText = "";
|
||||
testEl.className = "";
|
||||
getComputedStyle(testEl).height;
|
||||
|
||||
// Set base styles
|
||||
// Set base and final styles
|
||||
addStyle(t, {
|
||||
"#test": makeDeclaration(baseStyles),
|
||||
"#test.transition": makeDeclaration(finalStyles),
|
||||
});
|
||||
getComputedStyle(testEl).height;
|
||||
|
||||
// Set transition styles
|
||||
const defaultTransition = {
|
||||
"transition-property": Object.keys(finalStyles).join(", "),
|
||||
"transition-timing-function": "linear",
|
||||
|
|
@ -43,10 +51,8 @@ function transition(t, baseStyles, finalStyles) {
|
|||
"transition-delay": "-5s",
|
||||
};
|
||||
addStyle(t, {
|
||||
"#test": makeDeclaration(Object.assign(defaultTransition, baseStyles)),
|
||||
"#test.transition": makeDeclaration(finalStyles),
|
||||
"#test": makeDeclaration(Object.assign(defaultTransition, transitionStyles)),
|
||||
});
|
||||
getComputedStyle(testEl).height;
|
||||
|
||||
// Start the transition
|
||||
testEl.className = "transition";
|
||||
|
|
@ -95,22 +101,22 @@ test(t => {
|
|||
}, 'Declaration order is respected within declaration blocks');
|
||||
|
||||
test(t => {
|
||||
transition(t, {
|
||||
"transition-timing-function": "step-start",
|
||||
}, {
|
||||
transition(t, {}, {
|
||||
"margin-top": "200px",
|
||||
"margin-block-start": "100px"
|
||||
}, {
|
||||
"transition-timing-function": "step-start",
|
||||
});
|
||||
assert_equals(getComputedStyle(testEl).marginTop, '100px');
|
||||
}, 'Logical properties are able to override physical properties in declaration blocks');
|
||||
|
||||
test(t => {
|
||||
transition(t, {
|
||||
"transition-timing-function": "step-start",
|
||||
}, {
|
||||
transition(t, {}, {
|
||||
"margin-inline": "200px",
|
||||
"margin-inline-start": "0px",
|
||||
"margin-inline-start": "100px",
|
||||
}, {
|
||||
"transition-timing-function": "step-start",
|
||||
});
|
||||
assert_equals(getComputedStyle(testEl).marginLeft, '100px');
|
||||
}, 'Declaration order is respected amongst logical properties within declaration blocks');
|
||||
|
|
@ -153,12 +159,13 @@ test(t => {
|
|||
|
||||
promise_test(async t => {
|
||||
transition(t, {
|
||||
"transition-delay": "-9.9s",
|
||||
"width": "0px",
|
||||
"height": "0px",
|
||||
"block-size": "0px",
|
||||
}, {
|
||||
"block-size": "100px",
|
||||
}, {
|
||||
"transition-delay": "-9.9s",
|
||||
});
|
||||
const watcher = new EventWatcher(t, testEl, [ 'transitionend' ]);
|
||||
await watcher.wait_for('transitionend');
|
||||
|
|
@ -247,4 +254,31 @@ test(t => {
|
|||
assert_equals(getComputedStyle(testEl).marginRight, '50px');
|
||||
}, 'Transitions update when the direction is changed');
|
||||
|
||||
test(t => {
|
||||
transition(t, {
|
||||
"margin-inline-start": "100px",
|
||||
}, {
|
||||
"margin-left": "200px",
|
||||
});
|
||||
assert_equals(getComputedStyle(testEl).marginLeft, '150px');
|
||||
assert_equals(getComputedStyle(testEl).marginRight, '0px');
|
||||
|
||||
testEl.style.direction = 'rtl';
|
||||
assert_equals(getComputedStyle(testEl).marginLeft, '150px');
|
||||
assert_equals(getComputedStyle(testEl).marginRight, '100px');
|
||||
}, 'Transitions from logical to physical update when the direction is changed');
|
||||
|
||||
test(t => {
|
||||
transition(t, {
|
||||
"margin-left": "200px",
|
||||
}, {
|
||||
"margin-inline-start": "100px",
|
||||
});
|
||||
assert_equals(getComputedStyle(testEl).marginLeft, '150px');
|
||||
assert_equals(getComputedStyle(testEl).marginRight, '0px');
|
||||
|
||||
testEl.style.direction = 'rtl';
|
||||
assert_equals(getComputedStyle(testEl).marginLeft, '200px');
|
||||
assert_equals(getComputedStyle(testEl).marginRight, '50px');
|
||||
}, 'Transitions from physical to logical update when the direction is changed');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: columns with list-item and column-span</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
li {
|
||||
width: 300px;
|
||||
outline: 1px solid black;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h3 {
|
||||
outline: 1px solid blue;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li style="list-style-position: outside;">
|
||||
bullet outside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
bullet inside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<h3>spanner (bullet outside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<h3>spanner (bullet inside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet outside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet inside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: columns with list-item and column-span</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-list-item-001-ref.html">
|
||||
<meta name="assert" content="This test checks the columns with list-item are renederd correctly.">
|
||||
|
||||
<style>
|
||||
li {
|
||||
column-count: 1;
|
||||
width: 300px;
|
||||
outline: 1px solid black;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h3 {
|
||||
column-span: all;
|
||||
outline: 1px solid blue;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li style="list-style-position: outside;">
|
||||
bullet outside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
bullet inside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<h3>spanner (bullet outside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<h3>spanner (bullet inside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet outside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet inside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: columns with list-item, column-span, and overflow</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
li {
|
||||
width: 300px;
|
||||
outline: 1px solid black;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
h3 {
|
||||
outline: 1px solid blue;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li style="list-style-position: outside;">
|
||||
bullet outside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
bullet inside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<h3>spanner (bullet outside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<h3>spanner (bullet inside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet outside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet inside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: columns with list-item, column-span, and overflow</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="match" href="multicol-span-all-list-item-002-ref.html">
|
||||
<meta name="assert" content="This test checks the columns with list-item are renederd correctly.">
|
||||
|
||||
<style>
|
||||
li {
|
||||
column-count: 1;
|
||||
width: 300px;
|
||||
outline: 1px solid black;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
h3 {
|
||||
column-span: all;
|
||||
outline: 1px solid blue;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li style="list-style-position: outside;">
|
||||
bullet outside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
bullet inside
|
||||
<h3>spanner</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<h3>spanner (bullet outside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<h3>spanner (bullet inside)</h3>
|
||||
</li>
|
||||
<li style="list-style-position: outside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet outside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li style="list-style-position: inside;">
|
||||
<div>
|
||||
<h3>nested spanner (bullet inside)</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -28,10 +28,12 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- XXX: This chunk needs to move to a separate test (Bug 1507663)
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<div class="basic"></div>outside after
|
||||
</div>
|
||||
<br>
|
||||
-->
|
||||
|
||||
<div class="basic min col-width-ref"></div>
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -38,10 +38,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained multicol element should perform baseline alignment as if it had no contents.-->
|
||||
<!-- XXX: This chunk needs to move to a separate test (Bug 1507663)
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
|
||||
</div>
|
||||
<br>
|
||||
-->
|
||||
|
||||
<!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue