Jason Leo
86a22a9ae2
Automatic update from web-platform-tests Interpolate shape-outside when the <shape-box> matches Allow shape-outside path()/shape() values to interpolate when both sides carry the same explicit <shape-box>; mismatched boxes still fall back to discrete. An absent <shape-box> is treated as the spec default margin-box. Bug: 502328208 Change-Id: Ifd2a312a0ecb4affe28f29e418703a994488d8d2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7818874 Reviewed-by: Fredrik Söderquist <fs@opera.com> Commit-Queue: Jason Leo <cgqaq@chromium.org> Cr-Commit-Position: refs/heads/main@{#1627778} -- wpt-commits: 769e5a3f01bdb233898403e223c2271ee3c1864d wpt-pr: 59753
86 lines
2.9 KiB
HTML
86 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<div id='container'>
|
|
<div id='element'></div>
|
|
</div>
|
|
<script>
|
|
|
|
var container = document.getElementById('container');
|
|
var element = document.getElementById('element');
|
|
|
|
test(function() {
|
|
container.style.fontSize = '10px';
|
|
|
|
var keyframes = [
|
|
{shapeOutside: 'circle(10em at 50% 50%)'},
|
|
{shapeOutside: 'circle(10em at 50% 50%)'}
|
|
];
|
|
var player = element.animate(keyframes, 10);
|
|
player.pause();
|
|
player.currentTime = 5;
|
|
|
|
var shapeOutside = getComputedStyle(element).shapeOutside;
|
|
container.style.fontSize = '20px';
|
|
assert_not_equals(getComputedStyle(element).shapeOutside, shapeOutside);
|
|
}, 'shapeOutside responsive to style changes');
|
|
|
|
test(function() {
|
|
var keyframes = [
|
|
{shapeOutside: 'inherit'},
|
|
{shapeOutside: 'circle(200px at 50% 50%)'}
|
|
];
|
|
|
|
container.style.shapeOutside = 'circle(100px at 50% 50%)';
|
|
var player = element.animate(keyframes, 10);
|
|
|
|
player.pause();
|
|
player.currentTime = 5;
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(150px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'inset(100%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'circle(400px at 50% 50%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'circle(800px at 50% 50%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'inset(100%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'circle(800px at 50% 50%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)');
|
|
|
|
container.style.shapeOutside = 'circle(400px at 50% 50%)';
|
|
assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)');
|
|
}, 'shapeOutside responsive to inherited shapeOutside changes');
|
|
|
|
test(() => {
|
|
const target = document.createElement('div');
|
|
document.body.appendChild(target);
|
|
target.style.shapeOutside = 'path("M 10 10 L 20 20 Z") border-box';
|
|
|
|
const animation = target.animate([
|
|
{},
|
|
{shapeOutside: 'path("M 50 50 L 60 60 Z") border-box'},
|
|
], {
|
|
duration: 1000,
|
|
fill: 'both',
|
|
});
|
|
animation.pause();
|
|
animation.currentTime = 500;
|
|
|
|
assert_equals(getComputedStyle(target).shapeOutside,
|
|
'path("M 30 30 L 40 40 Z") border-box');
|
|
|
|
target.style.shapeOutside = 'path("M 10 10 L 20 20 Z") padding-box';
|
|
assert_equals(getComputedStyle(target).shapeOutside,
|
|
'path("M 50 50 L 60 60 Z") border-box');
|
|
|
|
animation.cancel();
|
|
target.remove();
|
|
}, 'Neutral path() keyframes invalidate when the underlying <shape-box> changes');
|
|
</script>
|