Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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']
};
/*

View file

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