mirror of
https://github.com/servo/servo.git
synced 2025-08-17 03:15:34 +01:00
Update web-platform-tests to revision b'421155a1c8752a36b465e62f466b18f821190e08'
This commit is contained in:
WPT Sync Bot
parent
871cefc926
commit
fd56698ec7
722 changed files with 19686 additions and 8130 deletions
|
|
@ -62,8 +62,15 @@ test_computed_value('animation-timeline', 'scroll(vertical root)');
|
|||
// https://drafts.csswg.org/scroll-animations-1/#view-notation
|
||||
test_computed_value('animation-timeline', 'view()');
|
||||
test_computed_value('animation-timeline', 'view(block)', 'view()');
|
||||
test_computed_value('animation-timeline', 'view(inline)');
|
||||
test_computed_value('animation-timeline', 'view(horizontal)');
|
||||
test_computed_value('animation-timeline', 'view(vertical)');
|
||||
test_computed_value('animation-timeline', 'view(inline)', 'view(inline)');
|
||||
test_computed_value('animation-timeline', 'view(horizontal)', 'view(horizontal)');
|
||||
test_computed_value('animation-timeline', 'view(vertical)', 'view(vertical)');
|
||||
test_computed_value('animation-timeline', 'view(vertical 1px)');
|
||||
test_computed_value('animation-timeline', 'view(1px auto)');
|
||||
test_computed_value('animation-timeline', 'view(auto 1px)');
|
||||
test_computed_value('animation-timeline', 'view(vertical 1px auto)');
|
||||
test_computed_value('animation-timeline', 'view(1px vertical)', 'view(vertical 1px)');
|
||||
test_computed_value('animation-timeline', 'view(vertical auto)', 'view(vertical)');
|
||||
test_computed_value('animation-timeline', 'view(vertical auto auto)', 'view(vertical)');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -56,13 +56,31 @@ test_invalid_value('animation-timeline', 'scroll(abc)');
|
|||
test_invalid_value('animation-timeline', 'scroll(vertical abc)');
|
||||
test_invalid_value('animation-timeline', 'scroll("string")');
|
||||
|
||||
// https://drafts.csswg.org/scroll-animations-1/#scroll-notation
|
||||
// https://drafts.csswg.org/scroll-animations-1/#view-notation
|
||||
test_valid_value('animation-timeline', 'view()');
|
||||
test_valid_value('animation-timeline', 'view(block)', 'view()');
|
||||
test_valid_value('animation-timeline', 'view(inline)');
|
||||
test_valid_value('animation-timeline', 'view(horizontal)');
|
||||
test_valid_value('animation-timeline', 'view(vertical)');
|
||||
test_valid_value('animation-timeline', 'view(vertical 1px 2px)');
|
||||
test_valid_value('animation-timeline', 'view(vertical 1px)');
|
||||
test_valid_value('animation-timeline', 'view(vertical auto)', 'view(vertical)');
|
||||
test_valid_value('animation-timeline', 'view(vertical auto auto)', 'view(vertical)');
|
||||
test_valid_value('animation-timeline', 'view(vertical auto 1px)');
|
||||
test_valid_value('animation-timeline', 'view(1px 2px vertical)', 'view(vertical 1px 2px)');
|
||||
test_valid_value('animation-timeline', 'view(1px vertical)', 'view(vertical 1px)');
|
||||
test_valid_value('animation-timeline', 'view(auto horizontal)', 'view(horizontal)');
|
||||
test_valid_value('animation-timeline', 'view(1px 2px)');
|
||||
test_valid_value('animation-timeline', 'view(1px)');
|
||||
test_valid_value('animation-timeline', 'view(1px 1px)', 'view(1px)');
|
||||
test_valid_value('animation-timeline', 'view(1px auto)');
|
||||
test_valid_value('animation-timeline', 'view(auto calc(1% + 1px))');
|
||||
test_valid_value('animation-timeline', 'view(auto)', 'view()');
|
||||
test_valid_value('animation-timeline', 'view(auto auto)', 'view()');
|
||||
|
||||
test_invalid_value('animation-timeline', 'view(vertical 1px 2px 3px)');
|
||||
test_invalid_value('animation-timeline', 'view(1px vertical 3px)');
|
||||
test_invalid_value('animation-timeline', 'view(1px 2px 3px)');
|
||||
test_invalid_value('animation-timeline', 'view(abc block)');
|
||||
test_invalid_value('animation-timeline', 'view(abc)');
|
||||
test_invalid_value('animation-timeline', 'view(vertical abc)');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,263 @@
|
|||
<!DOCTYPE html>
|
||||
<title>The animation-timeline: view() notation</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" src="https://w3c.github.io/csswg-drafts/scroll-animations-1/#view-notation">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7587">
|
||||
<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 fade-in-out {
|
||||
enter 0% { opacity: 0; }
|
||||
enter 100% { opacity: 1; }
|
||||
exit 0% { opacity: 1; }
|
||||
exit 100% { opacity: 0; }
|
||||
}
|
||||
@keyframes fade-out {
|
||||
exit 0% { opacity: 1; }
|
||||
exit 100% { opacity: 0; }
|
||||
}
|
||||
@keyframes change-font-size {
|
||||
exit 0% { font-size: 10px; }
|
||||
exit 100% { font-size: 20px; }
|
||||
}
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
.content {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
setup(assert_implements_animation_timeline);
|
||||
|
||||
const createTargetWithStuff = function(t, divClasses) {
|
||||
let container = document.createElement('div');
|
||||
container.id = 'container';
|
||||
document.body.appendChild(container);
|
||||
|
||||
// *** When testing inset
|
||||
// <div id='container'>
|
||||
// <div class='content'></div>
|
||||
// <div class='target'></div>
|
||||
// <div class='content'></div>
|
||||
// </div>
|
||||
// *** When testing axis
|
||||
// <div id='container'>
|
||||
// <div class='target'></div>
|
||||
// <div class='content'></div>
|
||||
// </div>
|
||||
|
||||
let divs = [];
|
||||
let target;
|
||||
for(let className of divClasses) {
|
||||
let div = document.createElement('div');
|
||||
div.className = className;
|
||||
container.appendChild(div);
|
||||
|
||||
divs.push(div);
|
||||
if(className === 'target')
|
||||
target = div;
|
||||
}
|
||||
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(() => {
|
||||
for(let div of divs)
|
||||
div.remove();
|
||||
container.remove();
|
||||
});
|
||||
}
|
||||
|
||||
return [container, target];
|
||||
};
|
||||
|
||||
async function scrollLeft(element, value) {
|
||||
element.scrollLeft = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
|
||||
async function scrollTop(element, value) {
|
||||
element.scrollTop = value;
|
||||
await waitForNextFrame();
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
div.style.animation = "fade-in-out 1s linear";
|
||||
div.style.animationTimeline = "view()";
|
||||
|
||||
await scrollTop(container, 200);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
|
||||
await scrollTop(container, 250);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
|
||||
await scrollTop(container, 300);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100%');
|
||||
|
||||
await scrollTop(container, 400);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollTop(container, 450);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollTop(container, 500);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view()');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
div.style.animation = "fade-in-out 1s linear";
|
||||
div.style.animationTimeline = "view(50px)";
|
||||
|
||||
await scrollTop(container, 250);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
|
||||
await scrollTop(container, 300);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
|
||||
|
||||
await scrollTop(container, 350);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100% & exit 0%');
|
||||
|
||||
await scrollTop(container, 400);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollTop(container, 450);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(50px)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
|
||||
div.style.animation = "fade-in-out 1s linear";
|
||||
div.style.animationTimeline = "view(auto 50px)";
|
||||
|
||||
await scrollTop(container, 250);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
|
||||
await scrollTop(container, 300);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
|
||||
await scrollTop(container, 350);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100%');
|
||||
|
||||
await scrollTop(container, 400);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollTop(container, 450);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollTop(container, 500);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(auto 50px)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear";
|
||||
div.style.animationTimeline = "view(inline)";
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(inline)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear";
|
||||
div.style.animationTimeline = "view(horizontal)";
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(horizontal)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear";
|
||||
div.style.animationTimeline = "view(vertical)";
|
||||
|
||||
await scrollTop(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollTop(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollTop(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(vertical)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflowY = 'hidden';
|
||||
container.style.overflowX = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear";
|
||||
div.style.animationTimeline = "view(horizontal 50px)";
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(horizontal 50px)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflow = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear, change-font-size 1s linear";
|
||||
div.style.animationTimeline = "view(), view(inline)";
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).fontSize, '10px', 'At exit 0% inline');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).fontSize, '20px', 'At exit 100% inline');
|
||||
|
||||
await scrollLeft(container, 0);
|
||||
|
||||
await scrollTop(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0% block');
|
||||
await scrollTop(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
|
||||
await scrollTop(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100% block');
|
||||
|
||||
await scrollLeft(container, 50);
|
||||
await scrollTop(container, 50);
|
||||
assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
|
||||
}, 'animation-timeline: view(), view(inline)');
|
||||
|
||||
promise_test(async t => {
|
||||
let [container, div] = createTargetWithStuff(t, ['target', 'content']);
|
||||
container.style.overflowY = 'hidden';
|
||||
container.style.overflowX = 'scroll';
|
||||
div.style.animation = "fade-out 1s linear";
|
||||
|
||||
div.style.animationTimeline = "view(inline)";
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollLeft(container, 100);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
|
||||
div.style.animationTimeline = "view(inline 50px)";
|
||||
await scrollLeft(container, 0);
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
|
||||
await scrollLeft(container, 50);
|
||||
assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
|
||||
}, 'animation-timeline: view(inline) changes to view(inline 50px)');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue