Bug 1286151 - Part 5: Test. r=hiro
authorBoris Chiou <boris.chiou@gmail.com>
Mon, 14 Nov 2016 11:42:15 +0800
changeset 323444 b42b42b76d0f6cde6ef5f3c24ab683ff51fdd44a
parent 323443 f03eb570c499f03cb03865906f554b08478d396e
child 323445 c177db19fc7af4e9e37f5370a20d84126763ac33
push id21
push usermaklebus@msu.edu
push dateThu, 01 Dec 2016 06:22:08 +0000
reviewershiro
bugs1286151
milestone53.0a1
Bug 1286151 - Part 5: Test. r=hiro MozReview-Commit-ID: wORyuqtfj
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-filters.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -38734,16 +38734,22 @@
           }
         ],
         "uievents/order-of-events/focus-events/focus-automated-blink-webkit.html": [
           {
             "path": "uievents/order-of-events/focus-events/focus-automated-blink-webkit.html",
             "url": "/uievents/order-of-events/focus-events/focus-automated-blink-webkit.html"
           }
         ],
+        "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
+          {
+            "path": "web-animations/animation-model/animation-types/spacing-keyframes-filters.html",
+            "url": "/web-animations/animation-model/animation-types/spacing-keyframes-filters.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"
           }
         ],
         "web-animations/interfaces/KeyframeEffect/copy-contructor.html": [
           {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-filters.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Keyframe spacing tests on filters</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([ { filter: 'blur(1px)'},
+                           { filter: 'none' },  // The default value is 0px.
+                           { filter: 'blur(10px)' },
+                           { filter: 'blur(8px)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, 1, 10, (10 - 8) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on blur' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'brightness(50%)'},
+                           { filter: 'none' },  // The default value is 1.
+                           { filter: 'brightness(2)' },
+                           { filter: 'brightness(175%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on brightness' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'contrast(50%)'},
+                           { filter: 'none' },  // The default value is 1.
+                           { filter: 'contrast(2)' },
+                           { filter: 'contrast(175%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on contrast' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px blue)'},
+                           { filter: 'none' },
+                     // none filter: 'drop-shadow(0, 0, 0, rgba(0, 0, 0, 0))'
+                           { filter: 'drop-shadow(5px 5px 1px black)' },
+                           { filter: 'drop-shadow(20px 20px yellow)' } ],
+                         { spacing: 'paced(filter)' });
+
+  // Blue:   rgba(0, 0, 255, 1.0)   = rgba(  0%,   0%, 100%, 100%).
+  // Black:  rgba(0, 0, 0, 1.0)     = rgba(  0%,   0%,   0%, 100%).
+  // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%,   0%, 100%).
+  var dist = [ 0,
+               Math.sqrt(10 * 10 + 10 * 10 + 10 * 10 + (1 * 1 + 1 * 1)),
+               Math.sqrt(5 * 5 + 5 * 5 + 1 * 1 + (1 * 1)),
+               Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on drop-shadow' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px)'},
+                           { filter: 'drop-shadow(0 0)' },
+                           { filter: 'drop-shadow(5px 5px 1px black)' },
+                           { filter: 'drop-shadow(20px 20px yellow)' } ],
+                         { spacing: 'paced(filter)' });
+
+  // Black:  rgba(0, 0, 0, 1.0)     = rgba(  0%,   0%, 0%, 100%).
+  // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
+  var dist = [ 0,
+               Math.sqrt(10 * 10 + 10 * 10 + 10 * 10),
+               0, // The distance is zero because the 2nd frame uses no-color.
+               Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test getting zero distance when computing distance between ' +
+   'color and no-color on drop-shadow');
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'grayscale(50%)'},
+                           { filter: 'none' },  // The default value is 0.
+                             // Values of grayscale over 100% are clamped to 1.
+                           { filter: 'grayscale(2)' },
+                           { filter: 'grayscale(75%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on grayscale' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'hue-rotate(180deg)'},
+                           { filter: 'none' },  // The default value is 0deg.
+                           { filter: 'hue-rotate(720deg)' },
+                           { filter: 'hue-rotate(-180deg)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, 180, 720, 720 + 180 ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on hue-rotate' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'invert(50%)'},
+                           { filter: 'none' },  // The default value is 0.
+                             // Values of invert over 100% are clamped to 1.
+                           { filter: 'invert(2)' },
+                           { filter: 'invert(75%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on invert' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'opacity(50%)'},
+                           { filter: 'none' },  // The default value is 1.
+                             // Values of opacity over 100% are clamped to 1.
+                           { filter: 'opacity(2)' },
+                           { filter: 'opacity(75%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, (1 - 0.5), (1 - 1), (1.0 - 0.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on opacity' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'saturate(50%)'},
+                           { filter: 'none' },  // The default value is 1.
+                           { filter: 'saturate(2)' },
+                           { filter: 'saturate(175%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on saturate' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'sepia(50%)'},
+                           { filter: 'none' },  // The default value is 0.
+                             // Values of sepia over 100% are clamped to 1.
+                           { filter: 'sepia(2)' },
+                           { filter: 'sepia(75%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on sepia' );
+
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%) blur(5px)' },
+                           { filter: 'none' },
+                     // none filter: 'grayscale(0) opacity(1) blur(0px)'
+                           { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
+                           { filter: 'grayscale(75%) opacity(50%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0,
+               Math.sqrt(0.5 * 0.5 + 5 * 5),
+               Math.sqrt(1 * 1 + 0.5 * 0.5 + 1 * 1),
+               Math.sqrt(0.25 * 0.25 + 1 * 1) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on filter function lists' );
+
+test(function(t) {
+  var anim =
+    createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%)' },
+                           { filter: 'opacity(10%) grayscale(50%)' },
+                           { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
+                           { filter: 'grayscale(75%) opacity(50%)' } ],
+                         { spacing: 'paced(filter)' });
+
+  var dist = [ 0,
+               0,
+               0,
+               Math.sqrt(0.25 * 0.25 + 1 * 1) ];
+  assert_animation_offsets(anim, dist);
+}, 'Test spacing on filter function lists' );
+
+</script>
+</body>