RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/web-animations-js/test/testcases/disabled-test-compositing-order.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+div.anim {
+  position: relative;
+}
+</style>
+<div id="target1" class="anim"></div>
+<div id="target2" class="anim"></div>
+<div id="target3" class="anim"></div>
+<div id="target4" class="anim"></div>
+<script src="../bootstrap.js" nochecks></script>
+<script>
+"use strict";
+var leftToRight = [{left: "100px"}, {left: "200px"}];
+var leftToRightLarge = [{left: "100px"}, {left: "1000px"}];
+var rightToLeft = [{left: "200px"}, {left: "100px"}];
+var noop = {color: "red"};
+// Test that an animation uses the correct compositing order when it has a
+// grandparent that remains active longer than its parent.
+//
+// The first animation should run between times 0.0 and 1.0 and the second
+// between times 2.0 and 3.0. Both use the default fill mode of "forwards", but
+// because the second animation has a later start time, it should be composited
+// second, so the div should end up on the left.
+var target1 = document.getElementById("target1");
+var player = document.timeline.play(new AnimationGroup([
+  new AnimationGroup([
+    new Animation(target1, leftToRight, 1.0),
+  ]),
+  new AnimationSequence([
+    new Animation(target1, noop, 2.0),
+    new Animation(target1, rightToLeft, 1.0),
+  ]),
+]));
+timing_test(function() {
+    at(3.0, function() {assert_equals(getComputedStyle(target1).getPropertyValue("left"), "100px")});
+  }, "First animation should have earlier compositing order");
+// Test that compositing order takes account of playback rate.
+//
+// The start time of the first animation is 0.0. The AnimationSequence has a playback
+// rate of 4.0, so the effective start time of its child animation is 2.0. So
+// the the div should end up on the left at time 3.0.
+var target2 = document.getElementById("target2");
+var player = document.timeline.play(new AnimationGroup([
+  new Animation(target2, leftToRight, 1.0),
+  new AnimationSequence([
+    new Animation(target1, noop, 8.0),
+    new Animation(target2, rightToLeft, 4.0),
+  ], {playbackRate: 4.0}),
+]));
+timing_test(function() {
+    at(3.0, function() {assert_equals(getComputedStyle(target2).getPropertyValue("left"), "100px")});
+  }, "Second animation should have later compositing order");
+// Test compositing order follows AnimationPlayer start time order.
+var target3 = document.getElementById("target3");
+var player1 = document.timeline.play(
+  new Animation(target3, leftToRight, 1.0));
+player1.startTime += 1.0;
+var player2 = document.timeline.play(
+  new Animation(target3, leftToRightLarge, 2.0));
+timing_test(function() {
+    at(2.0, function() {assert_equals(getComputedStyle(target3).getPropertyValue("left"), "200px")});
+  }, "First animation should have latest compositing order");
+// Test compositing order follows tree order.
+var target4 = document.getElementById("target4");
+var player = document.timeline.play(new AnimationGroup([
+  new Animation(target4, leftToRightLarge, 1.0),
+  new AnimationSequence([
+    new Animation(target4, leftToRightLarge, 1.0),
+    new AnimationGroup([
+      new Animation(target4, leftToRightLarge, 1.0),
+      new Animation(target4, leftToRightLarge, 1.0),
+    ]),
+  ]),
+  new AnimationGroup([
+    new Animation(target4, leftToRightLarge, 1.0),
+    new Animation(target4, leftToRight, 1.0),
+  ]),
+]));
+timing_test(function() {
+    at(2.0, function() {assert_equals(getComputedStyle(target4).getPropertyValue("left"), "200px")});
+  }, "Last animation should have latest compositing order");
+</script>

data/app/assets/components/web-animations-js/test/testcases/impl-test-deprecation.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!--
+Copyright 2014 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var useAncient = function(deprecationDate) {
+  _WebAnimationsTestingUtilities._deprecated('Ancient', deprecationDate,
+      'Please use Modern instead.');
+};
+var useOld = function(deprecationDate) {
+  _WebAnimationsTestingUtilities._deprecated('Old', deprecationDate,
+      'Please use New instead.');
+};
+var useSuperseded = function(deprecationDate) {
+  _WebAnimationsTestingUtilities._deprecated('Superseded', deprecationDate,
+      'See Replacement.');
+};
+test(function() {
+  var deprecationDate = new Date();
+  deprecationDate.setDate(deprecationDate.getDate() - 85);
+  var cutoffDate = new Date(deprecationDate);
+  cutoffDate.setMonth(cutoffDate.getMonth() + 3); // 3 months grace period
+  var warnings = [];
+  var savedConsoleWarn = console.warn;
+  try {
+    console.warn = function(message) {
+      warnings.push(message);
+    };
+    var firstExpectedWarning = 'Web Animations: Old is deprecated and will stop working on ' + cutoffDate.toDateString() + '. Please use New instead.';
+    var secondExpectedWarning = 'Web Animations: Superseded is deprecated and will stop working on ' + cutoffDate.toDateString() + '. See Replacement.';
+    useOld(deprecationDate);
+    assert_equals(warnings.length, 1);
+    assert_equals(warnings[0], firstExpectedWarning);
+    useOld(deprecationDate);
+    assert_equals(warnings.length, 1);
+    useSuperseded(deprecationDate);
+    assert_equals(warnings.length, 2);
+    assert_equals(warnings[1], secondExpectedWarning);
+    useSuperseded(deprecationDate);
+    assert_equals(warnings.length, 2);
+  } finally {
+    console.warn = savedConsoleWarn;
+  }
+}, 'Warn the first time each recently deprecated feature is used');
+test(function() {
+  var deprecationDate = new Date(new Date());
+  deprecationDate.setDate(deprecationDate.getDate() - 95);
+  for (var i = 0; i < 2; ++i) {
+    try {
+      useAncient();
+      assert_true(false);
+    } catch (e) {
+      assert_equals(e.message, 'Ancient is no longer supported. Please use Modern instead.');
+    }
+  }
+}, 'Throw each time an anciently deprecated feature is used');
+</script>

data/app/assets/components/web-animations-js/test/testcases/impl-test-from-css-value.html ADDED Viewed

@@ -0,0 +1,219 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+div.anim {
+  position: relative;
+  left: 0px;
+}
+</style>
+<div id="anim" class="anim"></div>
+<script src="../bootstrap.js"></script>
+<script>
+'use strict';
+test(function() {
+function assert_object_equals(actual, expected, message) {
+    assert_equals(JSON.stringify(actual), JSON.stringify(expected), message);
+}
+function assert_shadow_equals(actual, expected, message) {
+  assert_not_equals(typeof actual, 'undefined', 'actual not undefined: ' + message);
+  assert_equals(actual.length, expected.length, 'actual and expected lengths match: ' + message);
+  for (var i = 0; i < expected.length; i++) {
+    var a = actual[i];
+    var e = expected[i];
+    // hOffset and vOffset are always required
+    assert_object_equals(a['hOffset'], e['hOffset'], 'hOffset matches: ' + message);
+    assert_object_equals(a['vOffset'], e['vOffset'], 'vOffset matches: ' + message);
+    // Inset is always set
+    if (typeof e['inset'] != 'undefined')
+      assert_equals(a['inset'], e['inset'], 'inset matches: ' + message);
+    if (typeof e['color'] != 'undefined')
+      assert_array_equals(a['color'], e['color'], 'color matches: ' + message);
+    if (typeof e['blur'] != 'undefined')
+      assert_object_equals(a['blur'], e['blur'], 'blur matches: ' + message);
+    if (typeof e['spread'] != 'undefined')
+      assert_object_equals(a['spread'], e['spread'], 'spread matches: ' + message);
+  }
+}
+var shadowType = window._WebAnimationsTestingUtilities._types['textShadow'];
+// Test all the different color types as part of a shadow
+var expected = [{
+  color: [255, 0, 0, 1.0],
+  hOffset: {px: 10},
+  vOffset: {px: 15},
+  blur: {px: 5},
+  inset: false
+}];
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px red'), expected, '10px 15px 5px red');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(255, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(255, 0, 0, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(100%, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(100%, 0, 0, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(255, 0, 0)'), expected, '10px 15px 5px rgb(255, 0, 0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(100%, 0, 0)'), expected, '10px 15px 5px rgb(100%, 0, 0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsl(0, 100%, 50%)'), expected, '10px 15px 5px hsl(0, 100%, 50%)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsla(0, 100%, 50%, 1.0)'), expected, '10px 15px 5px hsla(0, 100%, 50%, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px #ff0000'), expected, '10px 15px 5px #ff0000');
+assert_shadow_equals(shadowType.fromCssValue('red 10px 15px 5px'), expected, 'red 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgba(255, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(255, 0, 0, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgba(100%, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(100%, 0, 0, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgb(255, 0, 0) 10px 15px 5px'), expected, 'rgb(255, 0, 0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgb(100%, 0, 0) 10px 15px 5px'), expected, 'rgb(100%, 0, 0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('hsl(0, 100%, 50%) 10px 15px 5px'), expected, 'hsl(0, 100%, 50%) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('hsla(0, 100%, 50%, 1.0) 10px 15px 5px'), expected, 'hsla(0, 100%, 50%, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('#ff0000 10px 15px 5px'), expected, '#ff0000 10px 15px 5px');
+// [ <color>? <offset-x> <offset-y> <blur-radius>? ]
+// [ <offset-x> <offset-y> <blur-radius>? <color>? ]
+// [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 15px'), [{hOffset:{px: 10}, vOffset:{px: 15}}],
+ 'just offsets');
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 15px 5px'),
+ [{hOffset:{px: 10}, vOffset:{px: 15}, blur: {px: 5}}],
+ 'no spread');
+// Test some 'real world examples', taken from the MDN documentation
+assert_shadow_equals(
+ shadowType.fromCssValue('1px 2px 3px black, 0 0 1em blue, 0 0 0.2em blue'),
+ [{hOffset:{px: 1}, vOffset:{px: 2}, blur: {px: 3}, color: [0, 0, 0, 1.0]},
+  {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 1}, color: [0, 0, 255, 1.0]},
+  {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 0.2}, color: [0, 0, 255, 1.0]}],
+ 'MDN Example 1');
+assert_shadow_equals(
+ shadowType.fromCssValue('rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px'),
+ [{hOffset:{px: -1}, vOffset:{'': 0}, color: [0, 0, 0, 0.1]},
+  {hOffset:{'': 0}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
+  {hOffset:{px: 1}, vOffset:{'': 0}, color: [255, 255, 255, 0.1]},
+  {hOffset:{'': 0}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]},
+  {hOffset:{px: -1}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
+  {hOffset:{px: 1}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]}],
+ 'MDN Example 2');
+assert_shadow_equals(
+ shadowType.fromCssValue('64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset'),
+ [{hOffset:{px: 64}, vOffset:{px: 64}, blur: {px: 12}, spread: {px: 40}, color: [0, 0, 0, 0.4]},
+  {hOffset:{px: 12}, vOffset:{px: 12}, blur: {px: 0}, spread: {px: 8}, color: [0, 0, 0, 0.4], inset: true}],
+ 'MDN Example 3');
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 10px 5px #888'),
+ [{hOffset:{px: 10}, vOffset:{px: 10}, blur: {px: 5}, color: [136, 136, 136, 1.0]}],
+ 'MDN Example 4');
+}, 'shadowType.cssFromValue');
+test(function() {
+var colorType = window._WebAnimationsTestingUtilities._types.color;
+assert_array_equals(colorType.fromCssValue('#000000'), [0, 0, 0, 1.0], '#000000');
+assert_array_equals(colorType.fromCssValue('#000'), [0, 0, 0, 1.0], '#000');
+assert_array_equals(colorType.fromCssValue('#123456'), [18, 52, 86, 1.0], '#123456');
+assert_array_equals(colorType.fromCssValue('#123'), [17, 34, 51, 1.0], '#123');
+assert_array_equals(colorType.fromCssValue('#ffffff'), [255, 255, 255, 1.0], '#ffffff');
+assert_array_equals(colorType.fromCssValue('#fff'), [255, 255, 255, 1.0], '#fff');
+assert_array_equals(colorType.fromCssValue('#ABCDEF'), [171, 205, 239, 1.0], '#ABCDEF');
+assert_array_equals(colorType.fromCssValue('#ABC'), [170, 187, 204, 1.0], '#ABC');
+assert_array_equals(colorType.fromCssValue('rgb(0, 0, 0)'), [0, 0, 0, 1.0], 'rgb(0, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(0,0,0)'), [0, 0, 0, 1.0], 'rgb(0,0,0)');
+assert_array_equals(colorType.fromCssValue('rgb(0%, 0%, 0%)'), [0, 0, 0, 1.0], 'rgb(0%, 0%, 0%)');
+assert_array_equals(colorType.fromCssValue('rgb(0%,0%,0%)'), [0, 0, 0, 1.0], 'rgb(0%,0%,0%)');
+assert_array_equals(colorType.fromCssValue('rgb(1, 2, 3)'), [1, 2, 3, 1.0], 'rgb(1, 2, 3)');
+assert_array_equals(colorType.fromCssValue('rgb(10%, 20%, 30%)'), [26, 51, 77, 1.0], 'rgb(10%, 20%, 30%)');
+assert_array_equals(colorType.fromCssValue('rgb(255, 255, 255)'), [255, 255, 255, 1.0], 'rgb(255, 255, 255)');
+assert_array_equals(colorType.fromCssValue('rgb(100%, 100%, 100%)'), [255, 255, 255, 1.0], 'rgb(100%, 100%, 100%)');
+// Color cliping or RGB - 4.2.1 - RGB color values - Example 6
+// em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
+// em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
+// em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
+assert_array_equals(colorType.fromCssValue('rgb(300, 0, 0)'), [255, 0, 0, 1.0], 'rgb(255, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(255, -10, 0)'), [255, 0, 0, 1.0], 'rgb(255, -10, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(110%, 0%, 0%)'), [255, 0, 0, 1.0], 'rgb(110%, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgba(0, 0, 0, 0)'), [0, 0, 0, 0.0], 'rgba(0, 0, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgba(0,0,0,0)'), [0, 0, 0, 0.0], 'rgba(0,0,0,0)');
+assert_array_equals(colorType.fromCssValue('rgba(1, 2, 3, 0.4)'), [1, 2, 3, 0.4], 'rgba(1, 2, 3, 0.4)');
+assert_array_equals(colorType.fromCssValue('rgba(1,2,3,0.4)'), [1, 2, 3, 0.4], 'rgba(1,2,3,0.4)');
+assert_array_equals(colorType.fromCssValue('rgba(255, 255, 255, 0.5)'), [255, 255, 255, 0.5], 'rgba(255, 255, 255, 0.5)');
+// hsl and hsla converted to RGB
+var hsl2rgb = window._WebAnimationsTestingUtilities._hsl2rgb;
+assert_array_equals(hsl2rgb(0, 0, 100), [255, 255, 255]);
+assert_array_equals(hsl2rgb(0, 0, 75), [192, 192, 192]);
+assert_array_equals(hsl2rgb(0, 0, 50), [128, 128, 128]);
+assert_array_equals(hsl2rgb(0, 0, 0), [0, 0, 0]);
+assert_array_equals(hsl2rgb(0, 100, 50), [255, 0, 0]);
+assert_array_equals(hsl2rgb(0, 100, 25), [128, 0, 0]);
+assert_array_equals(hsl2rgb(60, 100, 50), [255, 255, 0]);
+assert_array_equals(hsl2rgb(60, 100, 25), [128, 128, 0]);
+assert_array_equals(hsl2rgb(120, 100, 50), [0, 255, 0]);
+assert_array_equals(hsl2rgb(120, 100, 25), [0, 128, 0]);
+assert_array_equals(hsl2rgb(-240, 100, 50), [0, 255, 0]);
+assert_array_equals(hsl2rgb(480, 100, 25), [0, 128, 0]);
+assert_array_equals(hsl2rgb(180, 100, 50), [0, 255, 255]);
+assert_array_equals(hsl2rgb(180, 100, 25), [0, 128, 128]);
+assert_array_equals(hsl2rgb(-180, 100, 50), [0, 255, 255]);
+assert_array_equals(hsl2rgb(540, 100, 25), [0, 128, 128]);
+assert_array_equals(hsl2rgb(240, 100, 50), [0, 0, 255]);
+assert_array_equals(hsl2rgb(240, 100, 25), [0, 0, 128]);
+assert_array_equals(hsl2rgb(300, 100, 50), [255, 0, 255]);
+assert_array_equals(hsl2rgb(300, 100, 25), [128, 0, 128]);
+// hsl
+// * { color: hsl(0, 100%, 50%) }   /* red */
+// * { color: hsl(120, 100%, 50%) } /* lime */
+// * { color: hsl(120, 100%, 25%) } /* dark green */
+// * { color: hsl(120, 100%, 75%) } /* light green */
+// * { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */
+assert_array_equals(colorType.fromCssValue('hsl(0, 0%, 100%)'), [255, 255, 255, 1.0], 'hsl(0, 0%, 100%)');
+assert_array_equals(colorType.fromCssValue('hsl(0,0%,75%)'), [192, 192, 192, 1.0], 'hsl(0,0%,75%)');
+assert_array_equals(colorType.fromCssValue('hsl(-0, 100%, 50%)'), [255, 0, 0, 1.0], 'hsl(0, 100%, 50%)');
+assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 50%, 0.0)'), [0, 255, 0, 0.0], 'hsl(120, 100%, 50%, 0.0)');
+assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 25%, 0.25)'), [0, 128, 0, 0.25], 'hsl(120, 100%, 25%, 0.25)');
+assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 50%, 0.5)'), [0, 255, 255, 0.5], 'hsl(180, 100%, 50%, 0.5)');
+assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 25%, 0.75)'), [0, 128, 128, 0.75], 'hsl(180, 100%, 25%, 0.75)');
+assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 50%, 1.0)'), [0, 0, 255, 1.0], 'hsl(240, 100%, 50%, 1.0)');
+assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 25%, 1.25)'), [0, 0, 128, 1.0], 'hsl(240, 100%, 25%, 1.25)');
+assert_array_equals(colorType.fromCssValue('transparent'), [0, 0, 0, 0], 'transparent');
+assert_equals(colorType.fromCssValue('#00'), undefined);
+assert_equals(colorType.fromCssValue('#0f0g'), undefined);
+assert_equals(colorType.fromCssValue('rgba(0, abc, 0, 0)'), undefined);
+assert_equals(colorType.fromCssValue('asdf(0, 0, 0, 0)'), undefined);
+// currentColor ????
+}, 'colorType.cssFromValue');
+</script>

data/app/assets/components/web-animations-js/test/testcases/impl-test-paced-timing-function.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M0,0 L10,0 L30,0 L60,0 L100,0 L150,0" id="path" stroke="black"
+      stroke-width="1" fill="none" />
+</svg>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var PacedTimingFunction = _WebAnimationsTestingUtilities._pacedTimingFunction;
+var effect =
+    new MotionPathEffect(document.querySelector('#path').pathSegList);
+// Line has 5 segments of lengths 10, 20, 30, 40 and 50, giving a total length
+// of 150.
+var fullRangeTimingFunction = new PacedTimingFunction(effect);
+fullRangeTimingFunction.setRange({min: 0, max: 1});
+// Partial range runs from midpoint of first segment ot midpoint of last
+// segment, giving total length of 5 + 20 + 30 + 40 + 25 = 120.
+var partialRangeTimingFunction = new PacedTimingFunction(effect);
+partialRangeTimingFunction.setRange({min: 0.1, max: 0.9});
+test(function() {
+  assert_equals(fullRangeTimingFunction.scaleTime(0.5), (3 + 15/40) / 5);
+}, 'Full range between bounds');
+test(function() {
+  assert_equals(fullRangeTimingFunction.scaleTime(0), 0);
+}, 'Full range lower bound');
+test(function() {
+  assert_equals(fullRangeTimingFunction.scaleTime(1), 1);
+}, 'Full range upper bound');
+test(function() {
+  assert_equals(fullRangeTimingFunction.scaleTime(-0.5), 0);
+}, 'Full range below lower bound');
+test(function() {
+  assert_equals(fullRangeTimingFunction.scaleTime(1.5), 1);
+}, 'Full range above upper bound');
+test(function() {
+  assert_equals(partialRangeTimingFunction.scaleTime(0.5), (3 + 5/40) / 5);
+}, 'Partial range between bounds');
+test(function() {
+  assert_equals(partialRangeTimingFunction.scaleTime(0), 0.1);
+}, 'Partial range lower bound');
+test(function() {
+  assert_equals(partialRangeTimingFunction.scaleTime(1), 0.9);
+}, 'Partial range upper bound');
+test(function() {
+  assert_equals(partialRangeTimingFunction.scaleTime(-0.5), 0.1);
+}, 'Partial range below lower bound');
+test(function() {
+  assert_equals(partialRangeTimingFunction.scaleTime(1.5), 0.9);
+}, 'Partial range above upper bound');
+</script>