mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +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
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>transition duration change</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#starting">
|
||||
<style>
|
||||
#box {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
left: 0px;
|
||||
background-color: blue;
|
||||
transition-duration: 1s;
|
||||
transition-delay: -0.75s;
|
||||
transition-timing-function: linear;
|
||||
transition-property: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="box"></div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-transitions/support/helper.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
window.onload = () => {
|
||||
promise_test(async t => {
|
||||
// Make sure we have rendered the page before making the style change
|
||||
// to ensure we get transitions.
|
||||
await waitForAnimationFrames(2);
|
||||
|
||||
box.style.left = '400px';
|
||||
assert_equals(
|
||||
getComputedStyle(box).left, '300px',
|
||||
'The transition progresses 75% immediately due to negative ' +
|
||||
'transition-delay');
|
||||
|
||||
box.style.transitionDuration = '7.5s';
|
||||
assert_equals(
|
||||
getComputedStyle(box).left, '300px',
|
||||
'Changing the duration does not affect the current transition');
|
||||
|
||||
const anim = document.getAnimations()[0];
|
||||
anim.finish();
|
||||
|
||||
assert_equals(
|
||||
getComputedStyle(box).left, '400px',
|
||||
'The final value has been reached when finished');
|
||||
box.style.left = '1400px';
|
||||
assert_equals(
|
||||
getComputedStyle(box).left, '500px',
|
||||
'With the new duration taking effect, the transition progresses ' +
|
||||
'10% immediately');
|
||||
}, 'Transition duration change should not affect transition in progress');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>transition from transparent background</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation-alpha">
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
border: 1px solid black;
|
||||
transition: background-color 1s linear;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#one.changed {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: rgba(0, 255, 0, 0);
|
||||
}
|
||||
|
||||
#two.changed {
|
||||
background-color: rgba(0, 0, 255, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box" id="one"></div>
|
||||
<div class="box" id="two"></div>
|
||||
</body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-transitions/support/helper.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
promise_test(async t => {
|
||||
// Make sure we have rendered the page before making the style change
|
||||
// to ensure we get transitions.
|
||||
await waitForAnimationFrames(2);
|
||||
promises = [];
|
||||
|
||||
const elem1 = document.getElementById('one');
|
||||
const elem2 = document.getElementById('two');
|
||||
elem1.classList.add('changed');
|
||||
elem2.classList.add('changed');
|
||||
|
||||
document.getAnimations().forEach(anim => {
|
||||
anim.pause();
|
||||
anim.currentTime = 500;
|
||||
promises.push(anim.ready);
|
||||
});
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
assert_equals(promises.length, 2, 'Unexpected animation count');
|
||||
assert_equals(getComputedStyle(elem1).backgroundColor,
|
||||
'rgba(0, 128, 0, 0.5)');
|
||||
assert_equals(getComputedStyle(elem2).backgroundColor,
|
||||
'rgba(0, 0, 255, 0.5)');
|
||||
});
|
||||
}, 'Transition from transparent background');
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>move after transition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 300ms linear;
|
||||
transform: translateX(0);
|
||||
}
|
||||
#container.moved #box {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="box"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-transitions/support/helper.js"></script>
|
||||
<script type="text/javascript">
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const box = document.getElementById('box');
|
||||
|
||||
await waitForAnimationFrames(2);
|
||||
|
||||
container.classList.add('moved');
|
||||
const animations = document.getAnimations();
|
||||
assert_equals(animations.length, 1);
|
||||
assert_equals(getComputedStyle(box).transform,
|
||||
"matrix(1, 0, 0, 1, 0, 0)");
|
||||
|
||||
animations[0].finish();
|
||||
assert_equals(getComputedStyle(box).transform,
|
||||
"matrix(1, 0, 0, 1, 300, 0)");
|
||||
|
||||
// Verify that we do not create a second transform transition.
|
||||
box.style.transitionProperty = 'none';
|
||||
box.style.transform = 'translateX(150px)';
|
||||
|
||||
assert_equals(box.getAnimations().length, 0);
|
||||
assert_equals(getComputedStyle(box).transform,
|
||||
"matrix(1, 0, 0, 1, 150, 0)");
|
||||
}, 'Move after transition.');
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -68,7 +68,7 @@ test_composition({
|
|||
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
|
||||
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'},
|
||||
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'},
|
||||
]);
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ test_composition({
|
|||
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'},
|
||||
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'},
|
||||
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'},
|
||||
{at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'},
|
||||
|
|
@ -94,7 +94,7 @@ test_composition({
|
|||
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'},
|
||||
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'},
|
||||
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -106,5 +106,18 @@ test_interpolation({
|
|||
{at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px'},
|
||||
{at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'text-shadow',
|
||||
from: 'black 0px 0px 0px',
|
||||
to: 'black 1px 1px 1px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) -0.3px -0.3px 0px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px'},
|
||||
{at: 0.3, expect: 'rgb(0, 0, 0) 0.3px 0.3px 0.3px'},
|
||||
{at: 0.6, expect: 'rgb(0, 0, 0) 0.6px 0.6px 0.6px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 1px 1px 1px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 1.5px 1.5px 1.5px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>transition end event with shorthand property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
|
||||
<style>
|
||||
#box {
|
||||
transition: padding 1s;
|
||||
padding: 0px 1px 2px 3px; // top right bottom left
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="box"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-transitions/support/helper.js"></script>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
function timeoutPromise() {
|
||||
return waitForAnimationFrames(5);
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
// Make sure we have rendered the page before making the style change
|
||||
// to ensure we get transitions.
|
||||
await waitForAnimationFrames(2);
|
||||
|
||||
// Change three padding properties, but preserve padding-bottom.
|
||||
// This should trigger 3 transitions.
|
||||
box.style.padding = "8px 7px 2px 5px";
|
||||
|
||||
const animations = document.getAnimations();
|
||||
const properties =
|
||||
animations.map(anim => anim.transitionProperty).sort();
|
||||
assert_array_equals(properties,
|
||||
['padding-left', 'padding-right', 'padding-top']);
|
||||
|
||||
// Expect a transitionend event for each of the CSSTransitions.
|
||||
const eventWatcher =
|
||||
new EventWatcher(t, box, 'transitionend', timeoutPromise);
|
||||
|
||||
const eventsPromise =
|
||||
eventWatcher.wait_for(
|
||||
['transitionend', 'transitionend', 'transitionend'],
|
||||
{ record: 'all' }).then(events => {
|
||||
events.forEach(event => {
|
||||
assert_times_equal(event.elapsedTime, 1);
|
||||
})
|
||||
});
|
||||
animations.forEach(anim => {
|
||||
anim.finish();
|
||||
});
|
||||
await eventsPromise;
|
||||
|
||||
// Ensure no unexpected events are received.
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'Transition end events generated for transition on shorthand property');
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>transition timing function</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transition-timing-function-property">
|
||||
<style>
|
||||
.box {
|
||||
position: relative;
|
||||
left: 0;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
background-color: blue;
|
||||
transition: left 1s linear;
|
||||
}
|
||||
.animating > .box {
|
||||
left: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/css-transitions/support/helper.js"></script>
|
||||
<script src="/css/css-easing/testcommon.js"></script>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
function verifyPosition(element_id, expected) {
|
||||
const element = document.getElementById(element_id);
|
||||
const actual = Math.round(parseFloat(getComputedStyle(element).left));
|
||||
assert_equals(actual, expected, `verify ${element_id} left`);
|
||||
}
|
||||
|
||||
function easing(x1, y1, x2, y2) {
|
||||
return Math.round(400 * cubicBezier(x1, y1, x2, y2)(0.5));
|
||||
}
|
||||
|
||||
function ease() {
|
||||
return easing(0.25, 0.1, 0.25, 1); // 321
|
||||
}
|
||||
|
||||
function easeIn() {
|
||||
return easing(0.42, 0, 1, 1); // 126
|
||||
}
|
||||
|
||||
function easeOut() {
|
||||
return easing(0.0, 0.0, 0.58, 1.0); // 274
|
||||
}
|
||||
|
||||
function easeInOut() {
|
||||
return easing(0.42, 0.0, 0.58, 1.0); // 200
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
// Make sure we have rendered the page before making the style change
|
||||
// to ensure we get transitions.
|
||||
await waitForAnimationFrames(2);
|
||||
promises = [];
|
||||
document.getElementById('container').className = 'animating';
|
||||
document.getAnimations().forEach(anim => {
|
||||
anim.pause();
|
||||
anim.currentTime = 500;
|
||||
promises.push(anim.ready);
|
||||
});
|
||||
Promise.all(promises).then(() => {
|
||||
assert_equals(promises.length, 5, 'Unexpected animation count');
|
||||
verifyPosition('box1', 200); // linear easing
|
||||
verifyPosition('box2', ease());
|
||||
verifyPosition('box3', easeIn());
|
||||
verifyPosition('box4', easeOut());
|
||||
verifyPosition('box5', easeInOut());
|
||||
});
|
||||
}, 'Ensure that transition easing functions are properly applied.');
|
||||
};
|
||||
</script>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="box1" class="box" style="transition-timing-function: linear;"></div>
|
||||
<div id="box2" class="box" style="transition-timing-function: ease;"></div>
|
||||
<div id="box3" class="box" style="transition-timing-function: ease-in;"></div>
|
||||
<div id="box4" class="box" style="transition-timing-function: ease-out;"></div>
|
||||
<div id="box5" class="box" style="transition-timing-function: ease-in-out;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test (Transitions): Transition of large word-spacing value</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1266769">
|
||||
<meta name="assert" content="This should not crash.">
|
||||
|
||||
<div id="d" style="transition-duration: 1s"></div>
|
||||
<script>
|
||||
|
||||
let d = document.getElementById("d");
|
||||
d.offsetTop;
|
||||
d.style.wordSpacing = "100000000000000000000000000000000000000000000000000in";
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=571437">
|
||||
<link rel=help href="https://drafts.csswg.org/css-transforms-2/#interpolation-of-transform-functions">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
transition-properties: transform;
|
||||
transition-duration: 1s;
|
||||
transition-delay: -0.5s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test(() => {
|
||||
target.style.transform = 'translate(50%, 50%)';
|
||||
assert_equals(getComputedStyle(target).transform, 'matrix(1, 0, 0, 1, 50, 100)');
|
||||
target.style.transform = 'translate3D(50%, 50%, 100px)';
|
||||
assert_equals(getComputedStyle(target).transform, 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 50, 1)');
|
||||
}, 'Retargeting transitions on box size relative transitions should work.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Starting transition after animation has ended</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/">
|
||||
<link rel="help" href="https://crbug.com/1261155">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="./support/helper.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { left: 100px }
|
||||
to { left: 200px }
|
||||
}
|
||||
#div {
|
||||
left: 0px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#div.animate {
|
||||
animation: anim 0.1s linear;
|
||||
}
|
||||
#div.transition {
|
||||
left: 300px;
|
||||
transition: left 1000s steps(2, start);
|
||||
}
|
||||
</style>
|
||||
<div id=div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
promise_test(async t => {
|
||||
const watcher = new EventWatcher(t, div, ['animationend']);
|
||||
|
||||
assert_equals(getComputedStyle(div).left, '0px');
|
||||
|
||||
div.classList.toggle('animate');
|
||||
assert_equals(getComputedStyle(div).left, '100px');
|
||||
|
||||
await watcher.wait_for('animationend');
|
||||
assert_equals(getComputedStyle(div).left, '0px');
|
||||
|
||||
div.classList.toggle('transition');
|
||||
assert_equals(getComputedStyle(div).left, '150px');
|
||||
}, 'Starting transition after animation has ended');
|
||||
|
||||
</script>
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
var values = {
|
||||
'none, all' : 'none, all',
|
||||
'all, none' : 'all, none',
|
||||
'none, all' : 'all',
|
||||
'all, none' : 'all',
|
||||
'foobar' : 'foobar',
|
||||
'all, foobar' : 'all, foobar',
|
||||
'foobar, all' : 'foobar, all',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue