Bug 1286150 - Part 6: Test. r=hiro
authorBoris Chiou <boris.chiou@gmail.com>
Thu, 27 Oct 2016 15:46:35 +0800
changeset 363304 2ba49ae5f6dbb59feacbbbf51ef15f56dec68771
parent 363303 1d839c998bab4f8772b1788d2a74cfb9f92ee02d
child 363305 c28c8e058e17cbdd428172894b53e2b81bec53b4
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-beta@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1286150
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1286150 - Part 6: Test. r=hiro MozReview-Commit-ID: 60HmJf3G2CR
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html.ini
testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -38688,16 +38688,22 @@
           }
         ],
         "secure-contexts/shared-worker-secure-first.https.html": [
           {
             "path": "secure-contexts/shared-worker-secure-first.https.html",
             "url": "/secure-contexts/shared-worker-secure-first.https.html"
           }
         ],
+        "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
+          {
+            "path": "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html",
+            "url": "/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html"
+          }
+        ],
         "webaudio/the-audio-api/the-constantsourcenode-interface/test-constantsourcenode.html": [
           {
             "path": "webaudio/the-audio-api/the-constantsourcenode-interface/test-constantsourcenode.html",
             "url": "/webaudio/the-audio-api/the-constantsourcenode-interface/test-constantsourcenode.html"
           }
         ]
       }
     },
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html.ini
@@ -0,0 +1,3 @@
+[spacing-keyframes-shapes.html]
+  type: testharness
+  prefs: [layout.css.clip-path-shapes.enabled:true]
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>