Update web-platform-tests to revision b'544363de4568baf9ae90d71e4822661edc546650'

This commit is contained in:
WPT Sync Bot 2023-01-28 01:49:33 +00:00
parent 4d5a804d03
commit 32cc2e03c4
197 changed files with 3539 additions and 2824 deletions

View file

@ -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'));

View file

@ -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
//

View file

@ -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'));

View file

@ -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>

View file

@ -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'));

View file

@ -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');

View file

@ -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>

View file

@ -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>