| Index: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
|
| diff --git a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9f7cfaea1e42df633c26620fe44aa7f7d62ab59e
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
|
| @@ -0,0 +1,152 @@
|
| +<!DOCTYPE html>
|
| +<meta charset=utf-8>
|
| +<title>Keyframe spacing tests on shapes</title>
|
| +<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
|
| +<script src="/resources/testharness.js"></script>
|
| +<script src="/resources/testharnessreport.js"></script>
|
| +<script src="../../testcommon.js"></script>
|
| +<body>
|
| +<div id="log"></div>
|
| +<script>
|
| +"use strict";
|
| +
|
| +// Help function for testing the computed offsets by the distance array.
|
| +function assert_animation_offsets(anim, dist) {
|
| + const frames = anim.effect.getKeyframes();
|
| + const cumDist = dist.reduce( (prev, curr) => {
|
| + prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
|
| + return prev;
|
| + }, []);
|
| +
|
| + const total = cumDist[cumDist.length - 1];
|
| + for (var i = 0; i < frames.length; ++i) {
|
| + assert_equals(frames[i].computedOffset, cumDist[i] / total,
|
| + 'computedOffset of frame ' + i);
|
| + }
|
| +}
|
| +
|
| +test(function(t) {
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'circle(20px)' },
|
| + { clipPath: 'ellipse(10px 20px)' },
|
| + { clipPath: 'polygon(50px 0px, 100px 50px, ' +
|
| + ' 50px 100px, 0px 50px)' },
|
| + { clipPath: 'inset(20px round 10px)' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + const frames = anim.effect.getKeyframes();
|
| + const slots = frames.length - 1;
|
| + for (var i = 0; i < frames.length; ++i) {
|
| + assert_equals(frames[i].computedOffset, i / slots,
|
| + 'computedOffset of frame ' + i);
|
| + }
|
| +}, 'Test falling back to distribute spacing when using different basic shapes');
|
| +
|
| +test(function(t) {
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'circle(10px)' },
|
| + { clipPath: 'circle(20px) content-box' },
|
| + { clipPath: 'circle(70px)' },
|
| + { clipPath: 'circle(10px) padding-box' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + const frames = anim.effect.getKeyframes();
|
| + const slots = frames.length - 1;
|
| + for (var i = 0; i < frames.length; ++i) {
|
| + assert_equals(frames[i].computedOffset, i / slots,
|
| + 'computedOffset of frame ' + i);
|
| + }
|
| +}, 'Test falling back to distribute spacing when using different ' +
|
| + 'reference boxes');
|
| +
|
| +test(function(t) {
|
| + // 1st: circle(calc(20px) at calc(20px + 0%) calc(10px + 0%))
|
| + // 2nd: circle(calc(50px) at calc(10px + 0%) calc(10px + 0%))
|
| + // 3rd: circle(70px at calc(10px + 0%) calc(50px + 0%))
|
| + // 4th: circle(10px at calc(50px + 0%) calc(30px + 0%))
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'circle(calc(10px + 10px) ' +
|
| + ' at 20px 10px)' },
|
| + { clipPath: 'circle(calc(20px + 30px) ' +
|
| + ' at 10px 10px)' },
|
| + { clipPath: 'circle(70px at 10px 50px)' },
|
| + { clipPath: 'circle(10px at 50px 30px)' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + var dist = [ 0,
|
| + Math.sqrt(30 * 30 + 10 * 10),
|
| + Math.sqrt(20 * 20 + 40 * 40),
|
| + Math.sqrt(60 * 60 + 40 * 40 + 20 * 20) ];
|
| + assert_animation_offsets(anim, dist);
|
| +}, 'Test spacing on circle' );
|
| +
|
| +test(function(t) {
|
| + // 1st: ellipse(20px calc(20px) at calc(0px + 50%) calc(0px + 50%))
|
| + // 2nd: ellipse(20px calc(50px) at calc(0px + 50%) calc(0px + 50%))
|
| + // 3rd: ellipse(30px 70px at calc(0px + 50%) calc(0px + 50%))
|
| + // 4th: ellipse(30px 10px at calc(0px + 50%) calc(0px + 50%))
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'ellipse(20px calc(10px + 10px))' },
|
| + { clipPath: 'ellipse(20px calc(20px + 30px))' },
|
| + { clipPath: 'ellipse(30px 70px)' },
|
| + { clipPath: 'ellipse(30px 10px)' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + var dist = [ 0,
|
| + Math.sqrt(30 * 30),
|
| + Math.sqrt(10 * 10 + 20 * 20),
|
| + Math.sqrt(60 * 60) ];
|
| + assert_animation_offsets(anim, dist);
|
| +}, 'Test spacing on ellipse' );
|
| +
|
| +test(function(t) {
|
| + // 1st: polygon(nonzero, 50px 0px, 100px 50px, 50px 100px, 0px 50px)
|
| + // 2nd: polygon(nonzero, 40px 0px, 100px 70px, 10px 100px, 0px 70px)
|
| + // 3rd: polygon(nonzero, 100px 0px, 100px 100px, 10px 80px, 0px 50px)
|
| + // 4th: polygon(nonzero, 100px 100px, -10px 100px, 20px 80px, 20px 50px)
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'polygon(50px 0px, 100px 50px, ' +
|
| + ' 50px 100px, 0px 50px)' },
|
| + { clipPath: 'polygon(40px 0px, 100px 70px, ' +
|
| + ' 10px 100px, 0px 70px)' },
|
| + { clipPath: 'polygon(100px 0px, 100px 100px, ' +
|
| + ' 10px 80px, 0px 50px)' },
|
| + { clipPath: 'polygon(100px 100px, -10px 100px, ' +
|
| + ' 20px 80px, 20px 50px)' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + var dist = [ 0,
|
| + Math.sqrt(10 * 10 + 20 * 20 + 40 * 40 + 20 * 20),
|
| + Math.sqrt(60 * 60 + 30 * 30 + 20 * 20 + 20 * 20),
|
| + Math.sqrt(100 * 100 + 110 * 110 + 10 * 10 + 20 * 20) ];
|
| + assert_animation_offsets(anim, dist);
|
| +}, 'Test spacing on polygon' );
|
| +
|
| +test(function(t) {
|
| + // Note: Rounding corners are 4 CSS pair values and
|
| + // each pair has x & y components.
|
| + // 1st: inset(5px 5px 5px 5px round 40px 30px 20px 5px / 40px 30px 20px 5px)
|
| + // 2nd: inset(10px 5px 10px 5px round 50px 60px / 50px 60px)
|
| + // 3rd: inset(40px 40px 40px 40px round 10px / 10px)
|
| + // 4th: inset(30px 40px 30px 40px round 20px / 20px)
|
| + var anim =
|
| + createDiv(t).animate([ { clipPath: 'inset(5px 5px 5px 5px ' +
|
| + ' round 40px 30px 20px 5px)' },
|
| + { clipPath: 'inset(10px 5px round 50px 60px)' },
|
| + { clipPath: 'inset(40px 40px round 10px)' },
|
| + { clipPath: 'inset(30px 40px round 20px)' } ],
|
| + { spacing: 'paced(clip-path)' });
|
| +
|
| + var dist = [ 0,
|
| + Math.sqrt(5 * 5 * 2 + (50 - 40) * (50 - 40) * 2 +
|
| + (60 - 30) * (60 - 30) * 2 +
|
| + (50 - 20) * (50 - 20) * 2 +
|
| + (60 - 5) * (60 - 5) * 2),
|
| + Math.sqrt(30 * 30 * 2 + 35 * 35 * 2 + (50 - 10) * (50 - 10) * 4 +
|
| + (60 - 10) * (60 - 10) * 4),
|
| + Math.sqrt(10 * 10 * 2 + (20 - 10) * (20 - 10) * 8) ];
|
| + assert_animation_offsets(anim, dist);
|
| +}, 'Test spacing on inset' );
|
| +
|
| +</script>
|
| +</body>
|
|
|
Chromium Code Reviews
Issue 2610243002:
Import wpt@5e1a3b80cea8d36774d2afd78b29a74792e9f15a (Closed)
