mirror of
https://github.com/servo/servo.git
synced 2025-08-08 15:05:35 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -37,25 +37,21 @@
|
|||
|
||||
@scroll-timeline top_timeline {
|
||||
source: selector(#scroller1);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline bottom_timeline {
|
||||
source: selector(#scroller1);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 80px;
|
||||
}
|
||||
@scroll-timeline left_timeline {
|
||||
source: selector(#scroller2);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline right_timeline {
|
||||
source: selector(#scroller2);
|
||||
time-range: 10s;
|
||||
start: 20px;
|
||||
end: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
<style>
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 50px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,13 +18,11 @@
|
|||
}
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 1s;
|
||||
start: 0px;
|
||||
end: 50px;
|
||||
}
|
||||
|
|
@ -45,6 +43,6 @@
|
|||
promise_test(async (t) => {
|
||||
scroller.scrollTop = 25;
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element).width, '105px');
|
||||
assert_equals(getComputedStyle(element).width, '150px');
|
||||
}, 'Latest @scroll-timeline rule wins');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule in the iframe for print</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-iframe-ref.html">
|
||||
|
||||
<iframe id="target" width="400" height="400" srcdoc='
|
||||
<html>
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
window.parent.postMessage("ready", "*");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<body>
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
</body>
|
||||
</html>
|
||||
'></iframe>
|
||||
|
||||
<script>
|
||||
window.addEventListener("message", event => {
|
||||
if (event.data == "ready") {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for default @scroll-timeline</title>
|
||||
<iframe width="400" height="400" srcdoc='
|
||||
<html>
|
||||
<style>
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
// Move the scroller to halfway.
|
||||
const scroller = document.scrollingElement;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
});
|
||||
</script>
|
||||
<div id="box"></div>
|
||||
</html>
|
||||
'></iframe>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule in the iframe</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-iframe-ref.html">
|
||||
|
||||
<iframe id="target" width="400" height="400" srcdoc='
|
||||
<html>
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
window.parent.postMessage("success", "*");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<body>
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
</body>
|
||||
</html>
|
||||
'></iframe>
|
||||
|
||||
<script>
|
||||
window.addEventListener("message", event => {
|
||||
if (event.data == "success") {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule for print</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule in quirks mode</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for default @scroll-timeline</title>
|
||||
<style>
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
// Move the scroller to halfway.
|
||||
const scroller = document.scrollingElement;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for default @scroll-timeline with vertical-rl</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<style>
|
||||
html {
|
||||
min-block-size: 100%;
|
||||
padding-block-end: 100px;
|
||||
writing-mode: vertical-rl
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin-block: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
// Move the scroller to halfway.
|
||||
const scroller = document.scrollingElement;
|
||||
const maxScroll = scroller.scrollWidth - scroller.clientWidth;
|
||||
scroller.scrollLeft = -0.5 * maxScroll;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule with writing-mode:vertical-rl</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using
|
||||
the default scroll-timeline at rule with writing-mode:vertical-rl">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-writing-mode-rl-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateX(0px); }
|
||||
to { transform: translateX(-200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-block-size: 100%;
|
||||
padding-block-end: 100px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-block: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollWidth - scroller.clientWidth;
|
||||
scroller.scrollLeft = -0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">
|
||||
<link rel="match" href="at-scroll-timeline-default-descriptors-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -20,8 +20,11 @@
|
|||
width: 0px;
|
||||
height: 20px;
|
||||
animation-name: expand;
|
||||
animation-duration: 1e10s;
|
||||
animation-timing-function: linear;
|
||||
/* Some of the tests in this file assume animations attached to the
|
||||
DocumentTimeline are "stopped" without actually being paused.
|
||||
Using 600s + steps(10, end) achieves this for one minute.*/
|
||||
animation-duration: 600s;
|
||||
animation-timing-function: steps(10, end);
|
||||
}
|
||||
</style>
|
||||
<div id=scrollers>
|
||||
|
|
@ -34,6 +37,8 @@
|
|||
scroller1.offsetTop;
|
||||
scroller2.offsetTop;
|
||||
|
||||
// Note the steps(10, end) timing function and height:100px. (10px scroll
|
||||
// resolution).
|
||||
scroller1.scrollTop = 20;
|
||||
scroller2.scrollTop = 40;
|
||||
|
||||
|
|
@ -60,8 +65,6 @@
|
|||
options.name = 'timeline';
|
||||
if (typeof(options.source) == 'undefined')
|
||||
options.source = 'selector(#scroller1)';
|
||||
if (typeof(options.timeRange) == 'undefined')
|
||||
options.timeRange = '1e10s';
|
||||
if (typeof(options.start) == 'undefined')
|
||||
options.start = '0px';
|
||||
if (typeof(options.end) == 'undefined')
|
||||
|
|
@ -69,7 +72,6 @@
|
|||
return insertSheet(`
|
||||
@scroll-timeline ${options.name} {
|
||||
source: ${options.source};
|
||||
time-range: ${options.timeRange};
|
||||
start: ${options.start};
|
||||
end: ${options.end};
|
||||
}
|
||||
|
|
@ -101,11 +103,11 @@
|
|||
|
||||
// Verify that the computed style after scrolling a bit.
|
||||
instantiate(async (element, expected) => {
|
||||
scroller1.scrollTop = scroller1.scrollTop + 1;
|
||||
scroller2.scrollTop = scroller2.scrollTop + 1;
|
||||
scroller1.scrollTop = scroller1.scrollTop + 10;
|
||||
scroller2.scrollTop = scroller2.scrollTop + 10;
|
||||
await waitForNextFrame();
|
||||
scroller1.scrollTop = scroller1.scrollTop - 1;
|
||||
scroller2.scrollTop = scroller2.scrollTop - 1;
|
||||
scroller1.scrollTop = scroller1.scrollTop - 10;
|
||||
scroller2.scrollTop = scroller2.scrollTop - 10;
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element).width, expected);
|
||||
}, description + ' [scroll]');
|
||||
|
|
@ -207,20 +209,6 @@
|
|||
await assert_width(element, '140px');
|
||||
}, 'Changing the source descriptor switches effective timeline');
|
||||
|
||||
dynamic_rule_test(async (t, assert_width) => {
|
||||
let element = insertElement();
|
||||
insertSheet('#element { animation-timeline: timeline; }');
|
||||
|
||||
// Unknown animation-timeline, current time held at zero.
|
||||
await assert_width(element, '100px');
|
||||
|
||||
insertScrollTimeline({timeRange: '1e10s'});
|
||||
await assert_width(element, '120px');
|
||||
|
||||
insertScrollTimeline({timeRange: '1e9s'});
|
||||
await assert_width(element, '102px');
|
||||
}, 'Changing the time-range descriptor switches effective timeline');
|
||||
|
||||
dynamic_rule_test(async (t, assert_width) => {
|
||||
let element = insertElement();
|
||||
insertSheet('#element { animation-timeline: timeline; }');
|
||||
|
|
|
|||
|
|
@ -25,61 +25,51 @@
|
|||
}
|
||||
@scroll-timeline timeline_start_start {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1);
|
||||
end: selector(#offset2);
|
||||
}
|
||||
@scroll-timeline timeline_end_end {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1) end;
|
||||
end: selector(#offset2) end;
|
||||
}
|
||||
@scroll-timeline timeline_end_start {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1) end;
|
||||
end: selector(#offset2) start;
|
||||
}
|
||||
@scroll-timeline timeline_end_1_end {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1) end 1;
|
||||
end: selector(#offset2) end;
|
||||
}
|
||||
@scroll-timeline timeline_end_start_05 {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1) end;
|
||||
end: selector(#offset2) 0.5;
|
||||
}
|
||||
@scroll-timeline timeline_start_400px {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset1);
|
||||
end: 400px;
|
||||
}
|
||||
@scroll-timeline timeline_50px_end {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 50px;
|
||||
end: selector(#offset2) end;
|
||||
}
|
||||
@scroll-timeline timeline_outside {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset_outside);
|
||||
end: auto;
|
||||
}
|
||||
@scroll-timeline timeline_display_none {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#offset_display_none);
|
||||
end: auto;
|
||||
}
|
||||
@scroll-timeline timeline_null_target {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: selector(#no_such_id);
|
||||
end: selector(#no_such_id);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for default @scroll-timeline</title>
|
||||
<style>
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
// Move the scroller to halfway.
|
||||
const scroller = document.scrollingElement;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>The default scroll-timeline at rule when the frame size changed</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using
|
||||
the default scroll-timeline at rule and update the
|
||||
frame size">
|
||||
<link rel="match" href="at-scroll-timeline-frame-size-changed-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateY(0px); }
|
||||
to { transform: translateY(200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the 25% point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.25 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
// Update scroll range to make the current position become 50% point.
|
||||
scroller.style.paddingBottom = "50px";
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -23,21 +23,18 @@
|
|||
@scroll-timeline timeline1 {
|
||||
source: selector(#scroller1);
|
||||
orientation: auto;
|
||||
time-range: 1e10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline2 {
|
||||
source: selector(#scroller2);
|
||||
orientation: auto;
|
||||
time-range: 1e10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline3 {
|
||||
source: selector(#scroller3);
|
||||
orientation: auto;
|
||||
time-range: 1e10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
@ -45,7 +42,7 @@
|
|||
width: 0px;
|
||||
height: 20px;
|
||||
animation-name: expand;
|
||||
animation-duration: 1e10s;
|
||||
animation-duration: 1000s;
|
||||
animation-timing-function: linear;
|
||||
animation-timeline: timeline1;
|
||||
}
|
||||
|
|
@ -101,8 +98,7 @@
|
|||
|
||||
// Set a (non-CSS) ScrollTimeline on the CSSAnimation.
|
||||
let timeline4 = new ScrollTimeline({
|
||||
scrollSource: scroller4,
|
||||
timeRange: 1e13,
|
||||
source: scroller4,
|
||||
scrollOffsets: [CSS.px(0), CSS.px(100)]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ promise_test(async (t) => {
|
|||
<style>
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for @scroll-timeline with inline orientation</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<style>
|
||||
html {
|
||||
min-width: 100%;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
// Move the scroller to halfway.
|
||||
const scroller = document.scrollingElement;
|
||||
const maxScroll = scroller.scrollWidth - scroller.clientWidth;
|
||||
scroller.scrollLeft = 0.5 * maxScroll;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The scroll-timeline at rule with inline orientation and default source</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#descdef-scroll-timeline-orientation">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the inline orientation">
|
||||
<link rel="match" href="at-scroll-timeline-inline-orientation-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes update {
|
||||
from { transform: translateX(0px); }
|
||||
to { transform: translateX(200px); }
|
||||
}
|
||||
|
||||
@scroll-timeline test-timeline {
|
||||
source: auto;
|
||||
orientation: inline;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-width: 100%;
|
||||
padding-right: 100px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: update 1s linear;
|
||||
animation-timeline: test-timeline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#covered {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="covered"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.scrollingElement;
|
||||
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollWidth - scroller.clientWidth;
|
||||
scroller.scrollLeft = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -16,11 +16,9 @@
|
|||
}
|
||||
@scroll-timeline timeline1 {
|
||||
source: selector(#scroller1);
|
||||
time-range: 10s;
|
||||
}
|
||||
@scroll-timeline timeline2 {
|
||||
source: selector(#scroller2);
|
||||
time-range: 10s;
|
||||
}
|
||||
main {
|
||||
height: 0px;
|
||||
|
|
|
|||
|
|
@ -19,14 +19,13 @@
|
|||
}
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 1e10s;
|
||||
start: selector(#offset1) end;
|
||||
end: selector(#offset2) end;
|
||||
}
|
||||
#element {
|
||||
width: 0px;
|
||||
height: 20px;
|
||||
animation: expand 1e10s linear;
|
||||
animation: expand 1000s linear;
|
||||
animation-timeline: timeline;
|
||||
}
|
||||
/* Ensure stable expectations if feature is not supported */
|
||||
|
|
|
|||
|
|
@ -27,49 +27,42 @@
|
|||
@scroll-timeline timeline_auto {
|
||||
source: selector(#scroller_horizontal_tb);
|
||||
orientation: auto;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_vertical {
|
||||
source: selector(#scroller_horizontal_tb);
|
||||
orientation: vertical;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_horizontal {
|
||||
source: selector(#scroller_horizontal_tb);
|
||||
orientation: horizontal;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_block_in_horizontal {
|
||||
source: selector(#scroller_horizontal_tb);
|
||||
orientation: block;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_inline_in_horizontal {
|
||||
source: selector(#scroller_horizontal_tb);
|
||||
orientation: inline;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_block_in_vertical {
|
||||
source: selector(#scroller_vertical_lr);
|
||||
orientation: block;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_inline_in_vertical {
|
||||
source: selector(#scroller_vertical_lr);
|
||||
orientation: inline;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>The default scroll-timeline at rule with paused animations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-animations/support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 100px; }
|
||||
to { width: 200px; }
|
||||
}
|
||||
|
||||
@scroll-timeline timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
.fill-vh {
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
|
||||
const filling = addDiv(t, { class: 'fill-vh' });
|
||||
const scroller = document.scrollingElement;
|
||||
getComputedStyle(document.scrollingElement).height
|
||||
|
||||
div.style.animation = 'anim 100s linear timeline paused';
|
||||
assert_equals(getComputedStyle(div).width, '100px');
|
||||
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = maxScroll;
|
||||
assert_equals(getComputedStyle(div).width, '100px');
|
||||
|
||||
// Reset to 0 so we don't affect following tests.
|
||||
document.scrollingElement.scrollTop = 0;
|
||||
}, 'Test that the scroll animation is paused');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
|
||||
const filling = addDiv(t, { class: 'fill-vh' });
|
||||
const scroller = document.scrollingElement;
|
||||
getComputedStyle(document.scrollingElement).height
|
||||
|
||||
div.style.animation = 'anim 100s linear timeline';
|
||||
assert_equals(getComputedStyle(div).width, '100px');
|
||||
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = maxScroll;
|
||||
assert_equals(getComputedStyle(div).width, '200px');
|
||||
|
||||
div.style.animationPlayState = "paused";
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
document.scrollingElement.scrollTop = 0;
|
||||
assert_equals(getComputedStyle(div).width, '200px');
|
||||
}, 'Test that the scroll animation is paused by updating animation-play-state');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>The default scroll-timeline at rule with animation moving from end point</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#update-an-animations-finished-state">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-animations/support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 100px; }
|
||||
to { width: 200px; }
|
||||
}
|
||||
|
||||
@scroll-timeline timeline {
|
||||
source: auto;
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
.fill-vh {
|
||||
width: 100px;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
|
||||
const filling = addDiv(t, { class: 'fill-vh' });
|
||||
const scroller = document.scrollingElement;
|
||||
getComputedStyle(document.scrollingElement).height;
|
||||
|
||||
div.style.animation = 'anim 100s linear timeline';
|
||||
assert_equals(getComputedStyle(div).width, '100px');
|
||||
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = maxScroll;
|
||||
assert_equals(getComputedStyle(div).width, '200px');
|
||||
|
||||
document.scrollingElement.scrollTop = 0;
|
||||
assert_equals(getComputedStyle(div).width, '100px');
|
||||
}, 'Test that the scroll animation is still responsive after moving from 100%');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
}
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,14 +23,13 @@
|
|||
}
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
time-range: 1e10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
#element {
|
||||
width: 0px;
|
||||
height: 20px;
|
||||
animation: expand 1e10s linear;
|
||||
animation: expand 1000s linear;
|
||||
animation-timeline: timeline;
|
||||
}
|
||||
/* Ensure stable expectations if feature is not supported */
|
||||
|
|
|
|||
|
|
@ -29,36 +29,30 @@
|
|||
}
|
||||
@scroll-timeline timeline_source_none {
|
||||
source: none;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_source_auto {
|
||||
source: auto;
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_source_selector {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_source_unspecified {
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_source_nonexistent_id {
|
||||
source: selector(#doesnotexist);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_source_no_layout_box {
|
||||
source: selector(#boxless);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Reference for @scroll-timeline with a specified scroller</title>
|
||||
<style>
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#contents {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="contents"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.getElementById("scroller");
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>The scroll-timeline at rule with a specified scroller for print</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
|
||||
<meta name="assert" content="CSS animation correctly updates values when using the a specified scroller">
|
||||
<link rel="match" href="at-scroll-timeline-specified-scroller-print-ref.html">
|
||||
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { transform: translateX(0px); }
|
||||
to { transform: translateX(100px); }
|
||||
}
|
||||
|
||||
@scroll-timeline timeline {
|
||||
source: selector(#scroller);
|
||||
orientation: auto;
|
||||
scroll-offsets: none;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#contents {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: anim 1s linear timeline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="contents"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const scroller = document.getElementById("scroller");
|
||||
// Move the scroller to the halfway point.
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
scroller.scrollTop = 0.5 * maxScroll;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -19,47 +19,39 @@
|
|||
}
|
||||
@scroll-timeline timeline_0px_100px {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_50px_100px {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 50px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_auto_auto {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: auto;
|
||||
end: auto;
|
||||
}
|
||||
@scroll-timeline timeline_auto_auto_implicit {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
}
|
||||
@scroll-timeline timeline_50px_auto {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 50px;
|
||||
end: auto;
|
||||
}
|
||||
@scroll-timeline timeline_auto_100px {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: auto;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_25p_75p {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 25%;
|
||||
end: 75%;
|
||||
}
|
||||
@scroll-timeline timeline_calc_calc {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: calc(25% + 10px);
|
||||
end: calc(75% + 10px);
|
||||
}
|
||||
|
|
@ -152,18 +144,14 @@
|
|||
test_approximate_width_at_fraction(element_auto_auto, 0.1, '110px');
|
||||
test_approximate_width_at_fraction(element_auto_auto, 0.5, '150px');
|
||||
test_approximate_width_at_fraction(element_auto_auto, 0.9, '190px');
|
||||
// TODO: Effects for scroll linked animations are not inclusive at max scroll
|
||||
// https://github.com/w3c/csswg-drafts/issues/5223
|
||||
test_approximate_width_at_fraction(element_auto_auto, 1, '0px');
|
||||
test_approximate_width_at_fraction(element_auto_auto, 1, '200px');
|
||||
|
||||
// [auto, auto] (implicit)
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 0, '100px');
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 0.1, '110px');
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 0.5, '150px');
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 0.9, '190px');
|
||||
// TODO: Effects for scroll linked animations are not inclusive at max scroll
|
||||
// https://github.com/w3c/csswg-drafts/issues/5223
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 1, '0px');
|
||||
test_approximate_width_at_fraction(element_auto_auto_implicit, 1, '200px');
|
||||
|
||||
// [50px, auto]
|
||||
{
|
||||
|
|
@ -173,7 +161,7 @@
|
|||
test_width_at_scroll_top(element_50px_auto, 50, '100px');
|
||||
test_approximate_width_at_fraction(element_50px_auto, offset(0.5), '150px');
|
||||
test_approximate_width_at_fraction(element_50px_auto, offset(0.9), '190px');
|
||||
test_approximate_width_at_fraction(element_50px_auto, 1, '0px');
|
||||
test_approximate_width_at_fraction(element_50px_auto, 1, '200px');
|
||||
}
|
||||
|
||||
// [auto, 100px]
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#descdef-scroll-timeline-time-range">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<style>
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#contents {
|
||||
height: 200px;
|
||||
}
|
||||
@keyframes expand {
|
||||
from { width: 100px; }
|
||||
to { width: 200px; }
|
||||
}
|
||||
@scroll-timeline timeline_10s {
|
||||
source: selector(#scroller);
|
||||
time-range: 10s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_1s {
|
||||
source: selector(#scroller);
|
||||
time-range: 1s;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
@scroll-timeline timeline_1000ms {
|
||||
source: selector(#scroller);
|
||||
time-range: 1000ms;
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
}
|
||||
#container > div {
|
||||
width: 0px;
|
||||
animation-name: expand;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
/* Ensure stable expectations if feature is not supported */
|
||||
@supports not (animation-timeline:foo) {
|
||||
#container > div { animation-play-state: paused; }
|
||||
}
|
||||
#element_10s { animation-timeline: timeline_10s; }
|
||||
#element_1s { animation-timeline: timeline_1s; }
|
||||
#element_1000ms { animation-timeline: timeline_1000ms; }
|
||||
</style>
|
||||
<div id=scroller>
|
||||
<div id=contents></div>
|
||||
</div>
|
||||
<div id=container>
|
||||
<div id=element_10s></div>
|
||||
<div id=element_1s></div>
|
||||
<div id=element_1000ms></div>
|
||||
</div>
|
||||
<script>
|
||||
scroller.scrollTop = 50;
|
||||
|
||||
promise_test(async (t) => {
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element_10s).width, '150px');
|
||||
}, 'Timerange mapped correctly (10s)');
|
||||
|
||||
promise_test(async (t) => {
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element_1s).width, '105px');
|
||||
}, 'Timerange mapped correctly (1s)');
|
||||
|
||||
promise_test(async (t) => {
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element_1s).width, '105px');
|
||||
}, 'Timerange mapped correctly (1000ms)');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<title>@scroll-timeline: Unknown Descriptors</title>
|
||||
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
|
||||
<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/5109">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<style>
|
||||
#scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#contents {
|
||||
height: 200px;
|
||||
}
|
||||
@keyframes expand {
|
||||
from { width: 100px; }
|
||||
to { width: 200px; }
|
||||
}
|
||||
@scroll-timeline timeline {
|
||||
unknown: 100px;
|
||||
source: selector(#scroller);
|
||||
start: 0px;
|
||||
end: 100px;
|
||||
time-range: 10s;
|
||||
foo: bar;
|
||||
}
|
||||
#element {
|
||||
width: 0px;
|
||||
animation: expand 10s linear timeline;
|
||||
}
|
||||
</style>
|
||||
<div id=scroller>
|
||||
<div id=contents></div>
|
||||
</div>
|
||||
<div id=element></div>
|
||||
<script>
|
||||
promise_test(async (t) => {
|
||||
scroller.scrollTop = 50;
|
||||
await waitForNextFrame();
|
||||
assert_equals(getComputedStyle(element).width, '150px');
|
||||
}, 'Unknown descriptors do not invalidate the @scroll-timeline rule');
|
||||
</script>
|
||||
|
|
@ -48,7 +48,11 @@ function test_descriptor(descriptor, specified, expected) {
|
|||
test_stylesheet(`@scroll-timeline test { ${descriptor}:${specified}; }`, (rules) => {
|
||||
assert_equals(rules.length, 1);
|
||||
assert_equals(rules[0].constructor.name, 'CSSScrollTimelineRule');
|
||||
assert_equals(rules[0][attribute], expected);
|
||||
if (Array.isArray(expected)) {
|
||||
assert_in_array(rules[0][attribute], expected, "serialization should be sound");
|
||||
} else {
|
||||
assert_equals(rules[0][attribute], expected, "serialization should be canonical");
|
||||
}
|
||||
}, `CSSScrollTimelineRule.${attribute} ${specified}`);
|
||||
}
|
||||
|
||||
|
|
@ -131,43 +135,57 @@ test_csstext(
|
|||
'orientation descriptor',
|
||||
`@scroll-timeline timeline { orientation: inline; }`);
|
||||
|
||||
// https://github.com/w3c/csswg-drafts/issues/6617
|
||||
test_csstext(
|
||||
'start descriptor (px)',
|
||||
`@scroll-timeline timeline { start: 100px; }`);
|
||||
'scroll-offsets descriptor (none)',
|
||||
`@scroll-timeline timeline { scroll-offsets: none; }`,
|
||||
`@scroll-timeline timeline { scroll-offsets: none; }`,);
|
||||
|
||||
test_csstext(
|
||||
'start descriptor (offset)',
|
||||
`@scroll-timeline timeline { start: selector(#bar); }`);
|
||||
'scroll-offsets descriptor (auto)',
|
||||
`@scroll-timeline timeline { scroll-offsets: auto; }`);
|
||||
|
||||
test_csstext(
|
||||
'start descriptor (offset with edge)',
|
||||
`@scroll-timeline timeline { start: selector(#bar) start; }`);
|
||||
'scroll-offsets descriptor (container-based offset, px)',
|
||||
`@scroll-timeline timeline { scroll-offsets: 100px; }`);
|
||||
|
||||
test_csstext(
|
||||
'start descriptor (offset with threshold)',
|
||||
`@scroll-timeline timeline { start: selector(#bar) 1; }`);
|
||||
'scroll-offsets descriptor (container-based offset, percentage)',
|
||||
`@scroll-timeline timeline { scroll-offsets: 100%; }`);
|
||||
|
||||
test_csstext(
|
||||
'start descriptor (offset with edge and threshold)',
|
||||
`@scroll-timeline timeline { start: selector(#bar) start 1; }`);
|
||||
'scroll-offsets descriptor (element offset)',
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar); }`);
|
||||
|
||||
test_csstext(
|
||||
'start descriptor (offset with threshold and edge)',
|
||||
`@scroll-timeline timeline { start: selector(#bar) 1 start; }`,
|
||||
`@scroll-timeline timeline { start: selector(#bar) start 1; }`);
|
||||
'scroll-offsets descriptor (element offset with edge)',
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar) start; }`);
|
||||
|
||||
test_csstext(
|
||||
'time-range descriptor',
|
||||
`@scroll-timeline timeline { time-range: 10s; }`);
|
||||
'scroll-offsets descriptor (element offset with threshold)',
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar) 1; }`);
|
||||
|
||||
test_csstext(
|
||||
'scroll-offsets descriptor (element offset with edge and threshold)',
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar) start 1; }`);
|
||||
|
||||
test_csstext(
|
||||
'scroll-offsets descriptor (element offset with threshold and edge)',
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar) 1 start; }`,
|
||||
`@scroll-timeline timeline { scroll-offsets: selector(#bar) start 1; }`);
|
||||
|
||||
test_csstext(
|
||||
'scroll-offsets descriptor (multiple offsets)',
|
||||
`@scroll-timeline timeline { scroll-offsets: auto, selector(#bar) start 1; }`);
|
||||
|
||||
test_csstext(
|
||||
'defaults',
|
||||
`@scroll-timeline timeline { source: none; orientation: auto; start: auto; end: auto; time-range: auto; }`);
|
||||
`@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
|
||||
|
||||
test_csstext(
|
||||
'order',
|
||||
`@scroll-timeline timeline { orientation: auto; time-range: auto; source: none; end: auto; start: auto; }`,
|
||||
`@scroll-timeline timeline { source: none; orientation: auto; start: auto; end: auto; time-range: auto; }`);
|
||||
`@scroll-timeline timeline { orientation: auto; source: auto; scroll-offsets: none; }`,
|
||||
`@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
|
||||
|
||||
// CSSScrollTimelineRule.source
|
||||
|
||||
|
|
@ -183,16 +201,16 @@ test_source(' none ', 'none');
|
|||
test_source('selector(#a\\9 b)');
|
||||
test_source('auto');
|
||||
|
||||
test_source('#foo', 'none');
|
||||
test_source('', 'none');
|
||||
test_source('element(#foo)', 'none');
|
||||
test_source('selector(#foo more)', 'none');
|
||||
test_source('selector(html)', 'none');
|
||||
test_source('selector(foo)', 'none');
|
||||
test_source('selector(:before)', 'none');
|
||||
test_source('selector(*)', 'none');
|
||||
test_source('selector(.a)', 'none');
|
||||
test_source('selector(.a, .b)', 'none');
|
||||
test_source('#foo', 'auto');
|
||||
test_source('', 'auto');
|
||||
test_source('element(#foo)', 'auto');
|
||||
test_source('selector(#foo more)', 'auto');
|
||||
test_source('selector(html)', 'auto');
|
||||
test_source('selector(foo)', 'auto');
|
||||
test_source('selector(:before)', 'auto');
|
||||
test_source('selector(*)', 'auto');
|
||||
test_source('selector(.a)', 'auto');
|
||||
test_source('selector(.a, .b)', 'auto');
|
||||
|
||||
// CSSScrollTimelineRule.orientation
|
||||
|
||||
|
|
@ -212,30 +230,30 @@ test_orientation('foo', 'auto');
|
|||
test_orientation('10px', 'auto');
|
||||
test_orientation('red', 'auto');
|
||||
|
||||
// CSSScrollTimelineRule.start
|
||||
// CSSScrollTimelineRule.end
|
||||
// CSSScrollTimelineRule.scrollOffsets
|
||||
|
||||
function test_offsets(specified, expected) {
|
||||
test_descriptor('start', specified, expected);
|
||||
test_descriptor('end', specified, expected);
|
||||
test_descriptor('scroll-offsets', specified, expected);
|
||||
}
|
||||
|
||||
test_offsets('none');
|
||||
test_offsets(' none ', 'none');
|
||||
test_offsets('', 'none');
|
||||
test_offsets('red', 'none');
|
||||
test_offsets('#fff', 'none');
|
||||
test_offsets('unset', 'none');
|
||||
test_offsets('unknown(#foo)', 'none');
|
||||
test_offsets('start', 'none');
|
||||
test_offsets('end', 'none');
|
||||
test_offsets('3', 'none');
|
||||
test_offsets('selector(#foo) 3 start 10', 'none');
|
||||
test_offsets('0%, 100%, selector(.a)', 'none');
|
||||
test_offsets('selector(#foo) 3 end, start', 'none');
|
||||
|
||||
test_offsets('auto');
|
||||
test_offsets(' auto ', 'auto');
|
||||
test_offsets('10px',);
|
||||
test_offsets(' 10px ', '10px');
|
||||
test_offsets('10em');
|
||||
test_offsets('10%');
|
||||
test_offsets('calc(1px + 1%)');
|
||||
|
||||
test_offsets('', 'auto');
|
||||
test_offsets('red', 'auto');
|
||||
test_offsets('#fff', 'auto');
|
||||
test_offsets('unset', 'auto');
|
||||
test_offsets('unknown(#foo)', 'auto');
|
||||
test_offsets('start', 'auto');
|
||||
test_offsets('end', 'auto');
|
||||
test_offsets('3', 'auto');
|
||||
test_offsets('calc(1px + 1%)', ['calc(1px + 1%)', 'calc(1% + 1px)']);
|
||||
test_offsets('selector(#foo)');
|
||||
test_offsets(' selector(#foo)', 'selector(#foo)');
|
||||
test_offsets('selector(#foo) start');
|
||||
|
|
@ -245,22 +263,11 @@ test_offsets('selector(#foo) 3.5');
|
|||
test_offsets('selector(#foo) end');
|
||||
test_offsets('selector(#foo) end 3');
|
||||
test_offsets('selector(#foo) 3 end', 'selector(#foo) end 3');
|
||||
|
||||
// CSSScrollTimelineRule.timeRange
|
||||
|
||||
function test_scroll_time_range(specified, expected) {
|
||||
test_descriptor('time-range', specified, expected);
|
||||
}
|
||||
|
||||
test_scroll_time_range('auto');
|
||||
test_scroll_time_range(' auto ', 'auto');
|
||||
test_scroll_time_range('1s');
|
||||
test_scroll_time_range(' 1s ', '1s');
|
||||
test_scroll_time_range('1000ms');
|
||||
|
||||
test_scroll_time_range('', 'auto');
|
||||
test_scroll_time_range('red', 'auto');
|
||||
test_scroll_time_range('#fff', 'auto');
|
||||
test_scroll_time_range('unset', 'auto');
|
||||
test_offsets(' auto , auto ', 'auto, auto');
|
||||
test_offsets('10%, 100px');
|
||||
test_offsets('auto, 100%');
|
||||
test_offsets('0%, selector( #foo) 3 end ', "0%, selector(#foo) end 3");
|
||||
test_offsets('selector(#foo) end 3, selector(#bar)');
|
||||
test_offsets('0%, auto, selector(#foo) start, auto, selector(#bar) 12.3');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue