mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision b'544363de4568baf9ae90d71e4822661edc546650'
This commit is contained in:
parent
4d5a804d03
commit
32cc2e03c4
197 changed files with 3539 additions and 2824 deletions
|
@ -22,17 +22,9 @@ test_computed_value('animation-timeline', 'auto, auto');
|
|||
test_computed_value('animation-timeline', 'none, none');
|
||||
test_computed_value('animation-timeline', 'auto, none');
|
||||
test_computed_value('animation-timeline', 'none, auto');
|
||||
test_computed_value('animation-timeline', '"test"', 'test');
|
||||
test_computed_value('animation-timeline', '"none"');
|
||||
test_computed_value('animation-timeline', '"auto"');
|
||||
test_computed_value('animation-timeline', '"initial"');
|
||||
test_computed_value('animation-timeline', '"inherit"');
|
||||
test_computed_value('animation-timeline', '"unset"');
|
||||
test_computed_value('animation-timeline', '"revert"');
|
||||
test_computed_value('animation-timeline', '"revert-layer"');
|
||||
test_computed_value('animation-timeline', 'test');
|
||||
test_computed_value('animation-timeline', 'test1, test2');
|
||||
test_computed_value('animation-timeline', 'test1, "test2", none, test3, auto', 'test1, test2, none, test3, auto');
|
||||
test_computed_value('animation-timeline', 'test1, test2, none, test3, auto', 'test1, test2, none, test3, auto');
|
||||
|
||||
test(() => {
|
||||
let style = getComputedStyle(document.getElementById('target'));
|
||||
|
|
|
@ -16,16 +16,9 @@ test_valid_value('animation-timeline', 'auto, auto');
|
|||
test_valid_value('animation-timeline', 'none, none');
|
||||
test_valid_value('animation-timeline', 'auto, none');
|
||||
test_valid_value('animation-timeline', 'none, auto');
|
||||
test_valid_value('animation-timeline', '"test"', ["test", '"test"']);
|
||||
test_valid_value('animation-timeline', '"none"');
|
||||
test_valid_value('animation-timeline', '"auto"');
|
||||
test_valid_value('animation-timeline', '"initial"');
|
||||
test_valid_value('animation-timeline', '"inherit"');
|
||||
test_valid_value('animation-timeline', '"unset"');
|
||||
test_valid_value('animation-timeline', '"revert"');
|
||||
test_valid_value('animation-timeline', 'test');
|
||||
test_valid_value('animation-timeline', 'test1, test2');
|
||||
test_valid_value('animation-timeline', 'test1, "test2", none, test3, auto', ["test1, test2, none, test3, auto", 'test1, "test2", none, test3, auto']);
|
||||
test_valid_value('animation-timeline', 'test1, test2, none, test3, auto', ["test1, test2, none, test3, auto", 'test1, test2, none, test3, auto']);
|
||||
|
||||
test_invalid_value('animation-timeline', '10px');
|
||||
test_invalid_value('animation-timeline', 'auto auto');
|
||||
|
@ -34,6 +27,7 @@ test_invalid_value('animation-timeline', 'foo bar');
|
|||
test_invalid_value('animation-timeline', '"foo" "bar"');
|
||||
test_invalid_value('animation-timeline', 'rgb(1, 2, 3)');
|
||||
test_invalid_value('animation-timeline', '#fefefe');
|
||||
test_invalid_value('animation-timeline', '"test"');
|
||||
|
||||
// https://drafts.csswg.org/scroll-animations-1/#scroll-notation
|
||||
//
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
#outer { scroll-timeline-axis: inline; }
|
||||
#target { scroll-timeline-axis: vertical; }
|
||||
|
@ -21,6 +19,10 @@ test_computed_value('scroll-timeline-axis', 'block');
|
|||
test_computed_value('scroll-timeline-axis', 'inline');
|
||||
test_computed_value('scroll-timeline-axis', 'vertical');
|
||||
test_computed_value('scroll-timeline-axis', 'horizontal');
|
||||
test_computed_value('scroll-timeline-axis', 'block, inline');
|
||||
test_computed_value('scroll-timeline-axis', 'inline, block');
|
||||
test_computed_value('scroll-timeline-axis', 'block, vertical, horizontal, inline');
|
||||
test_computed_value('scroll-timeline-axis', 'inline, inline, inline, inline');
|
||||
|
||||
test(() => {
|
||||
let style = getComputedStyle(document.getElementById('target'));
|
|
@ -1,10 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<div id="target"></div>
|
||||
|
||||
<script>
|
||||
|
@ -18,10 +16,16 @@ test_valid_value('scroll-timeline-axis', 'block');
|
|||
test_valid_value('scroll-timeline-axis', 'inline');
|
||||
test_valid_value('scroll-timeline-axis', 'vertical');
|
||||
test_valid_value('scroll-timeline-axis', 'horizontal');
|
||||
test_valid_value('scroll-timeline-axis', 'block, inline');
|
||||
test_valid_value('scroll-timeline-axis', 'inline, block');
|
||||
test_valid_value('scroll-timeline-axis', 'block, vertical, horizontal, inline');
|
||||
test_valid_value('scroll-timeline-axis', 'inline, inline, inline, inline');
|
||||
|
||||
test_invalid_value('scroll-timeline-axis', 'abc');
|
||||
test_invalid_value('scroll-timeline-axis', '10px');
|
||||
test_invalid_value('scroll-timeline-axis', 'auto');
|
||||
test_invalid_value('scroll-timeline-axis', 'none');
|
||||
test_invalid_value('scroll-timeline-axis', 'block inline');
|
||||
test_invalid_value('scroll-timeline-axis', 'block / inline');
|
||||
|
||||
</script>
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
|
@ -19,7 +18,11 @@ test_computed_value('scroll-timeline-name', 'unset', 'none');
|
|||
test_computed_value('scroll-timeline-name', 'revert', 'none');
|
||||
test_computed_value('scroll-timeline-name', 'none');
|
||||
test_computed_value('scroll-timeline-name', 'test');
|
||||
test_computed_value('scroll-timeline-name', 'tEst');
|
||||
test_computed_value('scroll-timeline-name', 'foo, bar');
|
||||
test_computed_value('scroll-timeline-name', 'bar, foo');
|
||||
test_computed_value('scroll-timeline-name', 'a, b, c, D, e');
|
||||
test_computed_value('scroll-timeline-name', 'none, none');
|
||||
test_computed_value('scroll-timeline-name', 'a, b, c, none, d, e');
|
||||
|
||||
test(() => {
|
||||
let style = getComputedStyle(document.getElementById('target'));
|
|
@ -1,12 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<div id="target"></div>
|
||||
|
||||
<script>
|
||||
|
||||
test_valid_value('scroll-timeline-name', 'initial');
|
||||
|
@ -18,6 +15,10 @@ test_valid_value('scroll-timeline-name', 'none');
|
|||
test_valid_value('scroll-timeline-name', 'abc');
|
||||
test_valid_value('scroll-timeline-name', ' abc', 'abc');
|
||||
test_valid_value('scroll-timeline-name', 'aBc');
|
||||
test_valid_value('scroll-timeline-name', 'foo, bar');
|
||||
test_valid_value('scroll-timeline-name', 'bar, foo');
|
||||
test_valid_value('scroll-timeline-name', 'none, none');
|
||||
test_valid_value('scroll-timeline-name', 'a, none, b');
|
||||
test_valid_value('scroll-timeline-name', 'auto');
|
||||
|
||||
test_invalid_value('scroll-timeline-name', 'default');
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
|
@ -13,26 +12,38 @@ test_valid_value('scroll-timeline', 'none inline');
|
|||
test_valid_value('scroll-timeline', 'abc horizontal');
|
||||
test_valid_value('scroll-timeline', 'abc inline');
|
||||
test_valid_value('scroll-timeline', 'aBc inline');
|
||||
test_valid_value('scroll-timeline', 'none vertical');
|
||||
test_valid_value('scroll-timeline', 'inline inline');
|
||||
test_valid_value('scroll-timeline', 'abc');
|
||||
test_valid_value('scroll-timeline', 'inline');
|
||||
test_valid_value('view-timeline', 'a, b, c');
|
||||
test_valid_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
|
||||
|
||||
test_valid_value('scroll-timeline', 'inline block', 'inline');
|
||||
test_valid_value('scroll-timeline', 'block block', 'block');
|
||||
test_valid_value('scroll-timeline', 'vertical block', 'vertical');
|
||||
test_valid_value('scroll-timeline', 'horizontal block', 'horizontal');
|
||||
|
||||
test_valid_value('scroll-timeline', 'a, b, c');
|
||||
test_valid_value('scroll-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
|
||||
test_valid_value('scroll-timeline', 'auto');
|
||||
|
||||
test_invalid_value('scroll-timeline', '');
|
||||
test_invalid_value('scroll-timeline', 'abc abc');
|
||||
test_invalid_value('view-timeline', ',');
|
||||
test_invalid_value('view-timeline', ',,block,,');
|
||||
test_invalid_value('scroll-timeline', 'block none');
|
||||
test_invalid_value('scroll-timeline', 'inline abc');
|
||||
test_invalid_value('scroll-timeline', 'default');
|
||||
test_invalid_value('scroll-timeline', ',');
|
||||
test_invalid_value('scroll-timeline', ',,block,,');
|
||||
|
||||
test_computed_value('scroll-timeline', 'none block', 'none');
|
||||
test_computed_value('scroll-timeline', 'abc inline');
|
||||
test_computed_value('scroll-timeline', 'none vertical', 'none vertical');
|
||||
test_computed_value('scroll-timeline', 'none vertical');
|
||||
test_computed_value('scroll-timeline', 'abc horizontal');
|
||||
test_computed_value('scroll-timeline', 'vertical vertical');
|
||||
test_computed_value('scroll-timeline', 'abc');
|
||||
test_computed_value('view-timeline', 'a, b, c');
|
||||
test_computed_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
|
||||
test_computed_value('scroll-timeline', 'inline block', 'inline');
|
||||
test_computed_value('scroll-timeline', 'block block', 'block');
|
||||
test_computed_value('scroll-timeline', 'vertical block', 'vertical');
|
||||
test_computed_value('scroll-timeline', 'horizontal block', 'horizontal');
|
||||
test_computed_value('scroll-timeline', 'a, b, c');
|
||||
test_computed_value('scroll-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
|
||||
|
||||
test_shorthand_value('scroll-timeline', 'abc vertical',
|
||||
{
|
||||
|
@ -54,4 +65,45 @@ test_shorthand_value('scroll-timeline', 'abc, def',
|
|||
'scroll-timeline-name': 'abc, def',
|
||||
'scroll-timeline-axis': 'block, block',
|
||||
});
|
||||
|
||||
function test_shorthand_contraction(shorthand, longhands, expected) {
|
||||
let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}`).join(';');
|
||||
test((t) => {
|
||||
t.add_cleanup(() => {
|
||||
for (let shorthand of Object.keys(longhands))
|
||||
target.style.removeProperty(shorthand);
|
||||
});
|
||||
for (let [shorthand, value] of Object.entries(longhands))
|
||||
target.style.setProperty(shorthand, value);
|
||||
assert_equals(target.style.getPropertyValue(shorthand), expected, 'Declared value');
|
||||
assert_equals(getComputedStyle(target).getPropertyValue(shorthand), expected, 'Computed value');
|
||||
}, `Shorthand contraction of ${longhands_fmt}`);
|
||||
}
|
||||
|
||||
test_shorthand_contraction('scroll-timeline', {
|
||||
'scroll-timeline-name': 'abc',
|
||||
'scroll-timeline-axis': 'inline',
|
||||
}, 'abc inline');
|
||||
|
||||
test_shorthand_contraction('scroll-timeline', {
|
||||
'scroll-timeline-name': 'a, b',
|
||||
'scroll-timeline-axis': 'inline, block',
|
||||
}, 'a inline, b');
|
||||
|
||||
test_shorthand_contraction('scroll-timeline', {
|
||||
'scroll-timeline-name': 'none, none',
|
||||
'scroll-timeline-axis': 'block, block',
|
||||
}, 'none, none');
|
||||
|
||||
// Longhands with different lengths:
|
||||
|
||||
test_shorthand_contraction('scroll-timeline', {
|
||||
'scroll-timeline-name': 'a, b, c',
|
||||
'scroll-timeline-axis': 'inline, inline',
|
||||
}, '');
|
||||
|
||||
test_shorthand_contraction('scroll-timeline', {
|
||||
'scroll-timeline-name': 'a, b',
|
||||
'scroll-timeline-axis': 'inline, inline, inline',
|
||||
}, '');
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Change animation-range after creation</title>
|
||||
<link rel="help" src="https://www.w3.org/TR/scroll-animations-1/#named-range-animation-declaration">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { z-index: 0; background-color: skyblue;}
|
||||
to { z-index: 100; background-color: coral; }
|
||||
}
|
||||
#scroller {
|
||||
border: 10px solid lightgray;
|
||||
overflow-y: scroll;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
margin: 800px 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
background-color: green;
|
||||
animation: anim auto both linear;
|
||||
animation-timeline: t1;
|
||||
view-timeline: t1 block;
|
||||
}
|
||||
.restrict-range {
|
||||
animation-range-start: contain 0%;
|
||||
animation-range-end: contain 100%;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id=scroller>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
setup(assert_implements_animation_timeline);
|
||||
|
||||
async function scrollTop(e, value) {
|
||||
e.scrollTop = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
async function waitForAnimationReady(target) {
|
||||
await waitForNextFrame();
|
||||
await Promise.all(target.getAnimations().map(x => x.promise));
|
||||
}
|
||||
async function assertValueAt(scroller, target, position, expected) {
|
||||
await waitForAnimationReady(target);
|
||||
await scrollTop(scroller, position);
|
||||
assert_equals(getComputedStyle(target).zIndex, expected.toString());
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
const scroller = document.getElementById('scroller');
|
||||
const target = document.getElementById('target');
|
||||
waitForAnimationReady(target);
|
||||
|
||||
await assertValueAt(scroller, target, 600, 0);
|
||||
await assertValueAt(scroller, target, 700, 33);
|
||||
await assertValueAt(scroller, target, 750, 50);
|
||||
await assertValueAt(scroller, target, 800, 67);
|
||||
|
||||
target.classList.toggle('restrict-range');
|
||||
await waitForNextFrame();
|
||||
|
||||
await assertValueAt(scroller, target, 700, 0);
|
||||
await assertValueAt(scroller, target, 750, 50);
|
||||
await assertValueAt(scroller, target, 800, 100);
|
||||
}, 'Ensure that animation is updated on a style change');
|
||||
</script>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue