mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>AnimationEffect.getKeyframes() for CSS transitions of the width and height properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
|
||||
.animated-div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'width 10s';
|
||||
getComputedStyle(div).width;
|
||||
div.style.width = '200px';
|
||||
|
||||
const keyframes = div.getAnimations()[0].effect.getKeyframes();
|
||||
assert_equals(keyframes[0].width, "100px", 'from keyframe value');
|
||||
assert_equals(keyframes[1].width, "200px", 'to keyframe value');
|
||||
}, 'getKeyframes() output for a width transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'height 10s';
|
||||
getComputedStyle(div).height;
|
||||
div.style.height = '200px';
|
||||
|
||||
const keyframes = div.getAnimations()[0].effect.getKeyframes();
|
||||
assert_equals(keyframes[0].height, "100px", 'from keyframe value');
|
||||
assert_equals(keyframes[1].height, "200px", 'to keyframe value');
|
||||
}, 'getKeyframes() output for a height transition');
|
||||
|
||||
</script>
|
|
@ -41,6 +41,6 @@ async_test(t => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<img src="support/cat.png?pipe=trickle(d100)" id="cat">
|
||||
<img src="support/cat.png?pipe=trickle(d1)" id="cat">
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Don't crash when mutating style attribute with non-initial transition</title>
|
||||
<link rel="help" href="https://crbug.com/1313554">
|
||||
<style>
|
||||
#foo { transition: --unset 1s linear; }
|
||||
</style>
|
||||
<div id=foo style="background-color:red">PASS if no crash</div>
|
||||
<script>
|
||||
foo.offsetTop;
|
||||
foo.style.backgroundColor = 'green';
|
||||
foo.offsetTop;
|
||||
</script>
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="color: black; background-color: white">
|
||||
<div><div>PASS if black on white</div></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html id="html" class="reftest-wait">
|
||||
<title>Verifies that 'background-color' from a transition inherits explicitly down if requested</title>
|
||||
<link rel="help" href="https://crbug.com/1325340">
|
||||
<link rel="match" href="inherit-background-color-transition-ref.html">
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
body { transition: background-color 1s; color: white; background-color: black; }
|
||||
.light { color: black; background-color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div style="background-color: inherit">
|
||||
<div style="background-color: inherit">PASS if black on white</div>
|
||||
</div>
|
||||
<script>
|
||||
body.offsetTop;
|
||||
|
||||
async function run() {
|
||||
let transitionEnd = new Promise((resolve) => {
|
||||
body.addEventListener('transitionend', resolve);
|
||||
});
|
||||
|
||||
// Trigger transition:
|
||||
body.classList.toggle('light');
|
||||
|
||||
const transition = body.getAnimations()[0];
|
||||
await transition.ready;
|
||||
await waitForFrame();
|
||||
|
||||
// Expedite transition, but let it finish naturally.
|
||||
transition.currentTime = transition.effect.getTiming().duration - 1;
|
||||
await transitionEnd;
|
||||
|
||||
await waitForFrame();
|
||||
}
|
||||
|
||||
run().then(() => html.classList.toggle('reftest-wait'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -14,6 +14,11 @@
|
|||
<script>
|
||||
// <single-transition> = [ none | <single-transition-property> ] ||
|
||||
// <time> || <easing-function> || <time>
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(document.getElementById('target')).transition, "all 0s ease 0s");
|
||||
}, "Default transition value");
|
||||
|
||||
test_computed_value("transition", "1s", "all 1s ease 0s");
|
||||
test_computed_value("transition", "cubic-bezier(0, -2, 1, 3)", "all 0s cubic-bezier(0, -2, 1, 3) 0s");
|
||||
test_computed_value("transition", "1s -3s", "all 1s ease -3s");
|
||||
|
|
|
@ -17,6 +17,16 @@ test_invalid_value("transition-property", 'none, one');
|
|||
|
||||
test_invalid_value("transition-property", 'initial, top');
|
||||
test_invalid_value("transition-property", 'top, initial');
|
||||
test_invalid_value("transition-property", 'inherit, top');
|
||||
test_invalid_value("transition-property", 'top, inherit');
|
||||
test_invalid_value("transition-property", 'unset, top');
|
||||
test_invalid_value("transition-property", 'top, unset');
|
||||
test_invalid_value("transition-property", 'default, top');
|
||||
test_invalid_value("transition-property", 'top, default');
|
||||
test_invalid_value("transition-property", 'revert, top');
|
||||
test_invalid_value("transition-property", 'top, revert');
|
||||
test_invalid_value("transition-property", 'revert-layer, top');
|
||||
test_invalid_value("transition-property", 'top, revert-layer');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,5 +2,5 @@
|
|||
<title>CSS Transitions Test: No color transition from initial to blocking stylesheet value</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#style-change-event">
|
||||
<link rel="match" href="no-transition-from-ua-to-blocking-stylesheet-ref.html">
|
||||
<link rel="stylesheet" href="support/a-green-transition.css">
|
||||
<link rel="stylesheet" href="../support/a-green-transition.css">
|
||||
<div class="a">This text should be green on load.</div>
|
|
@ -152,6 +152,13 @@ var values = {
|
|||
'static to absolute': ['none', 'block', {discrete: true}],
|
||||
'block to inline-block': ['block', 'inline-block', {discrete: true}]
|
||||
};
|
||||
},
|
||||
'object-view-box': function() {
|
||||
return {
|
||||
inset: ['inset(10% 10% 20% 20%)', 'inset(20% 20% 30% 30%)'],
|
||||
rect: ['rect(10px 20px 30px 40px)', 'rect(20px 30px 40px 50px)'],
|
||||
xywh: ['xywh(10px 20px 30px 40px)', 'xywh(20px 30px 40px 50px)'],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -267,7 +274,8 @@ var unspecified_properties = {
|
|||
'outline-radius-bottomright': ['length', 'percentage'],
|
||||
'outline-radius-bottomleft': ['length', 'percentage'],
|
||||
'display': ['display'],
|
||||
'position': ['position']
|
||||
'position': ['position'],
|
||||
'object-view-box': ['object-view-box']
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
|
@ -5,11 +5,11 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
font-size: 10px;
|
||||
font-size: 20px;
|
||||
transition: font-size steps(2, start) 10s;
|
||||
}
|
||||
:root.change {
|
||||
font-size: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#target1 {
|
||||
|
@ -22,6 +22,6 @@
|
|||
test(() => {
|
||||
let unused = getComputedStyle(document.documentElement).getPropertyValue('font-size');
|
||||
document.documentElement.className = 'change';
|
||||
assert_equals(getComputedStyle(target1).getPropertyValue('width'), '15px');
|
||||
assert_equals(getComputedStyle(target1).getPropertyValue('width'), '25px');
|
||||
}, 'Transitioning font-size on root affects rem units');
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue