Upstream keyframe-properties.html from Blink (#3321)

* Upstream keyframe-properties.html from Blink

Import
https://chromium.googlesource.com/chromium/src/+/3035c93dea581354140f512b4357c795c7ca310b/third_party/WebKit/LayoutTests/web-animations-api/w3c/keyframe-properties.html

* Clean up opening of files

- body tags
- use strict

* Standardize quote style (use single quotes)

* Add div dynamically with createDiv

* Rewrite to use getKeyframes

* Move test and add property indexed keyframe versions

web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html

@@ -261,7 +261,65 @@
   ]);
 }, 'Custom iterator with value list in keyframe should give bizarre string representation of list.');
 
-// FIXME: Test that non-enumerable properties are not accessed
+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'},
+  ]);
+}, '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'},
+  ]);
+}, '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'},
+  ]);
+}, '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'},
+  ]);
+}, 'Only properties defined directly on property indexed keyframes are considered');
 
 // FIXME: Test that properties are accessed in ascending order by Unicode
 //        codepoint