Bug 1402170 - Consistently use KeyframeEffect constructor for testing in processing-a-keyframes-argument.html; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Fri, 22 Sep 2017 11:03:35 +0900
changeset 668832 e544f0ab7a74188d5d123386764f3eacb6271f85
parent 668831 c8b8b85ea5fedf67817e807c83322d3b48911d00
child 668833 b6be6aab2239a622d006e6fc1ce780dfa99fa75f
push id81132
push userbbirtles@mozilla.com
push dateFri, 22 Sep 2017 02:57:12 +0000
reviewershiro
bugs1402170
milestone58.0a1
Bug 1402170 - Consistently use KeyframeEffect constructor for testing in processing-a-keyframes-argument.html; r?hiro KeyframeEffectReadOnly may disappear (see [1]) and is only needed for CSS Animations and CSS Transitions so in that sense KeyframeEffect is more basic (despite being a subclass of KeyframeEffectReadOnly) so we should prefer it to KeyframeEffectReadOnly. Furthermore, as the comment at the start of the file suggests, we should consistently use the same method for testing these procedures. We currently use the KeyframeEffect constructor because it is more direct and basic. [1] https://github.com/w3c/web-animations/issues/185 MozReview-Commit-ID: LBrlfzyn2Ch
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
@@ -7,18 +7,18 @@
 <script src="../../testcommon.js"></script>
 <script src="../../resources/keyframe-utils.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
-// This file only tests the KeyframeEffectReadOnly constructor since it is
-// assumed that the implementation of the KeyframeEffect constructor,
+// This file only tests the KeyframeEffect constructor since it is
+// assumed that the implementation of the KeyframeEffectReadOnly constructor,
 // Animatable.animate() method, and KeyframeEffect.setKeyframes() method will
 // all share common machinery and it is not necessary to test each method.
 
 // Test that only animatable properties are accessed
 
 var gNonAnimatableProps = [
   'animation', // Shorthands where all the longhand sub-properties are not
                // animatable, are also not animatable.
@@ -56,39 +56,39 @@ function TestKeyframe(testProp) {
 function GetTestKeyframeSequence(testProp) {
   return [ new TestKeyframe(testProp) ]
 }
 
 gNonAnimatableProps.forEach(function(prop) {
   test(function(t) {
     var testKeyframe = new TestKeyframe(prop);
 
-    new KeyframeEffectReadOnly(null, testKeyframe);
+    new KeyframeEffect(null, testKeyframe);
 
     assert_equals(testKeyframe.propAccessCount, 0, 'Accessor not called');
   }, 'non-animatable property \'' + prop + '\' is not accessed when using'
      + ' a property-indexed keyframe object');
 });
 
 gNonAnimatableProps.forEach(function(prop) {
   test(function(t) {
     var testKeyframes = GetTestKeyframeSequence(prop);
 
-    new KeyframeEffectReadOnly(null, testKeyframes);
+    new KeyframeEffect(null, testKeyframes);
 
     assert_equals(testKeyframes[0].propAccessCount, 0, 'Accessor not called');
   }, 'non-animatable property \'' + prop + '\' is not accessed when using'
      + ' a keyframe sequence');
 });
 
 // Test equivalent forms of property indexed and sequenced keyframe syntax
 
 function assertEquivalentKeyframeSyntax(keyframesA, keyframesB) {
-  var processedKeyframesA = new KeyframeEffectReadOnly(null, keyframesA).getKeyframes();
-  var processedKeyframesB = new KeyframeEffectReadOnly(null, keyframesB).getKeyframes();
+  var processedKeyframesA = new KeyframeEffect(null, keyframesA).getKeyframes();
+  var processedKeyframesB = new KeyframeEffect(null, keyframesB).getKeyframes();
   assert_frame_lists_equal(processedKeyframesA, processedKeyframesB);
 }
 
 var gEquivalentSyntaxTests = [
   {
     description: 'two properties with one value',
     indexedKeyframes: {
       left: '100px',
@@ -264,65 +264,73 @@ test(() => {
 test(function(t) {
   var keyframe = {};
   Object.defineProperty(keyframe, 'width', {value: '200px'});
   Object.defineProperty(keyframe, 'height', {
     value: '100px',
     enumerable: true});
   assert_equals(keyframe.width, '200px', 'width of keyframe is readable');
   assert_equals(keyframe.height, '100px', 'height of keyframe is readable');
-  var anim = createDiv(t).animate([keyframe, {height: '200px'}], 1);
-  assert_frame_lists_equal(anim.effect.getKeyframes(), [
-      {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
-      {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
+
+  const effect = new KeyframeEffect(null, [keyframe, {height: '200px'}]);
+
+  assert_frame_lists_equal(effect.getKeyframes(), [
+    {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
+    {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
   ]);
 }, 'Only enumerable properties on keyframes are considered');
 
 test(function(t) {
   var KeyframeParent = function() { this.width = '100px'; };
   KeyframeParent.prototype = { height: '100px' };
   var Keyframe = function() { this.top = '100px'; };
   Keyframe.prototype = Object.create(KeyframeParent.prototype);
   Object.defineProperty(Keyframe.prototype, 'left', {
     value: '100px',
     enumerable: 'true'});
   var keyframe = new Keyframe();
-  var anim = createDiv(t).animate([keyframe, {top: '200px'}], 1);
-  assert_frame_lists_equal(anim.effect.getKeyframes(), [
-      {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
-      {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
+
+  const effect = new KeyframeEffect(null, [keyframe, {top: '200px'}]);
+
+  assert_frame_lists_equal(effect.getKeyframes(), [
+    {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
+    {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
   ]);
 }, 'Only properties defined directly on keyframes are considered');
 
 test(function(t) {
   var keyframes = {};
   Object.defineProperty(keyframes, 'width', ['100px', '200px']);
   Object.defineProperty(keyframes, 'height', {
     value: ['100px', '200px'],
     enumerable: true});
-  var anim = createDiv(t).animate(keyframes, 1);
-  assert_frame_lists_equal(anim.effect.getKeyframes(), [
-      {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
-      {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
+
+  const effect = new KeyframeEffect(null, keyframes);
+
+  assert_frame_lists_equal(effect.getKeyframes(), [
+    {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
+    {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
   ]);
 }, 'Only enumerable properties on property indexed keyframes are considered');
 
 test(function(t) {
   var KeyframesParent = function() { this.width = '100px'; };
   KeyframesParent.prototype = { height: '100px' };
   var Keyframes = function() { this.top = ['100px', '200px']; };
   Keyframes.prototype = Object.create(KeyframesParent.prototype);
   Object.defineProperty(Keyframes.prototype, 'left', {
     value: ['100px', '200px'],
     enumerable: 'true'});
   var keyframes = new Keyframes();
-  var anim = createDiv(t).animate(keyframes, 1);
-  assert_frame_lists_equal(anim.effect.getKeyframes(), [
-      {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
-      {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
+
+  const effect = new KeyframeEffect(null, keyframes);
+
+  assert_frame_lists_equal(effect.getKeyframes(), [
+    {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
+    {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
   ]);
 }, 'Only properties defined directly on property indexed keyframes are considered');
 
 // FIXME: Test that properties are accessed in ascending order by Unicode
 //        codepoint
 //        (There is an existing test for this in
 //        keyframe-effect/constructor.html that should be moved here.)