OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2015 Google Inc. All rights reserved. | 2 * Copyright (C) 2015 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
111 | 111 |
112 var webAnimationsInterpolation = { | 112 var webAnimationsInterpolation = { |
113 name: 'Web Animations', | 113 name: 'Web Animations', |
114 supportsProperty: function(property) {return property.indexOf('-webkit-') !=
= 0;}, | 114 supportsProperty: function(property) {return property.indexOf('-webkit-') !=
= 0;}, |
115 supportsValue: function(value) {return value !== '';}, | 115 supportsValue: function(value) {return value !== '';}, |
116 setup: function() {}, | 116 setup: function() {}, |
117 nonInterpolationExpectations: function(from, to) { | 117 nonInterpolationExpectations: function(from, to) { |
118 return expectFlip(from, to, 0.5); | 118 return expectFlip(from, to, 0.5); |
119 }, | 119 }, |
120 interpolate: function(property, from, to, at, target) { | 120 interpolate: function(property, from, to, at, target) { |
121 // Convert to camelCase | 121 property = toCamelCase(property); |
122 for (var i = property.length - 2; i > 0; --i) { | |
123 if (property[i] === '-') { | |
124 property = property.substring(0, i) + property[i + 1].toUpperCase() +
property.substring(i + 2); | |
125 } | |
126 } | |
127 this.interpolateKeyframes([ | 122 this.interpolateKeyframes([ |
128 {offset: 0, [property]: from}, | 123 {offset: 0, [property]: from}, |
129 {offset: 1, [property]: to}, | 124 {offset: 1, [property]: to}, |
130 ], at, target); | 125 ], at, target); |
131 }, | 126 }, |
132 interpolateKeyframes: function(keyframes, at, target) { | 127 interpolateKeyframes: function(keyframes, at, target) { |
133 target.animate(keyframes, { | 128 target.animate(keyframes, { |
134 fill: 'forwards', | 129 fill: 'forwards', |
135 duration: 1, | 130 duration: 1, |
136 easing: createEasing(at), | 131 easing: createEasing(at), |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 | 172 |
178 function loadScript(url) { | 173 function loadScript(url) { |
179 return new Promise(function(resolve) { | 174 return new Promise(function(resolve) { |
180 var script = document.createElement('script'); | 175 var script = document.createElement('script'); |
181 script.src = url; | 176 script.src = url; |
182 script.onload = resolve; | 177 script.onload = resolve; |
183 document.head.appendChild(script); | 178 document.head.appendChild(script); |
184 }); | 179 }); |
185 } | 180 } |
186 | 181 |
| 182 function toCamelCase(property) { |
| 183 for (var i = property.length - 2; i > 0; --i) { |
| 184 if (property[i] === '-') { |
| 185 property = property.substring(0, i) + property[i + 1].toUpperCase() + pr
operty.substring(i + 2); |
| 186 } |
| 187 } |
| 188 return property; |
| 189 } |
| 190 |
187 function createTargetContainer(parent, className) { | 191 function createTargetContainer(parent, className) { |
188 var targetContainer = createElement(parent); | 192 var targetContainer = createElement(parent); |
189 targetContainer.classList.add('container'); | 193 targetContainer.classList.add('container'); |
190 var template = document.querySelector('#target-template'); | 194 var template = document.querySelector('#target-template'); |
191 if (template) { | 195 if (template) { |
192 targetContainer.appendChild(template.content.cloneNode(true)); | 196 targetContainer.appendChild(template.content.cloneNode(true)); |
193 } | 197 } |
194 var target = targetContainer.querySelector('.target') || targetContainer; | 198 var target = targetContainer.querySelector('.target') || targetContainer; |
195 target.classList.add('target', className); | 199 target.classList.add('target', className); |
196 target.parentElement.classList.add('parent'); | 200 target.parentElement.classList.add('parent'); |
(...skipping 135 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
332 return compositionTest.expectations.map(function(expectation) { | 336 return compositionTest.expectations.map(function(expectation) { |
333 var actualTargetContainer = createTargetContainer(testContainer, 'actual')
; | 337 var actualTargetContainer = createTargetContainer(testContainer, 'actual')
; |
334 var expectedTargetContainer = createTargetContainer(testContainer, 'expect
ed'); | 338 var expectedTargetContainer = createTargetContainer(testContainer, 'expect
ed'); |
335 expectedTargetContainer.target.style[property] = expectation.is; | 339 expectedTargetContainer.target.style[property] = expectation.is; |
336 var target = actualTargetContainer.target; | 340 var target = actualTargetContainer.target; |
337 target.style[property] = underlying; | 341 target.style[property] = underlying; |
338 target.interpolate = function() { | 342 target.interpolate = function() { |
339 webAnimationsInterpolation.interpolateKeyframes([{ | 343 webAnimationsInterpolation.interpolateKeyframes([{ |
340 offset: 0, | 344 offset: 0, |
341 composite: fromComposite, | 345 composite: fromComposite, |
342 [property]: from, | 346 [toCamelCase(property)]: from, |
343 }, { | 347 }, { |
344 offset: 1, | 348 offset: 1, |
345 composite: toComposite, | 349 composite: toComposite, |
346 [property]: to, | 350 [toCamelCase(property)]: to, |
347 }], expectation.at, target); | 351 }], expectation.at, target); |
348 }; | 352 }; |
349 target.measure = function() { | 353 target.measure = function() { |
350 var actualValue = getComputedStyle(target)[property]; | 354 var actualValue = getComputedStyle(target)[property]; |
351 test(function() { | 355 test(function() { |
352 assert_equals( | 356 assert_equals( |
353 normalizeValue(actualValue), | 357 normalizeValue(actualValue), |
354 normalizeValue(getComputedStyle(expectedTargetContainer.target)[prop
erty])); | 358 normalizeValue(getComputedStyle(expectedTargetContainer.target)[prop
erty])); |
355 }, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]
`); | 359 }, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]
`); |
356 if (rebaselineExpectation) { | 360 if (rebaselineExpectation) { |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
413 loadScript('../../resources/testharness.js').then(function() { | 417 loadScript('../../resources/testharness.js').then(function() { |
414 return loadScript('../../resources/testharnessreport.js'); | 418 return loadScript('../../resources/testharnessreport.js'); |
415 }).then(function() { | 419 }).then(function() { |
416 var asyncHandle = async_test('This test uses interpolation-test.js.') | 420 var asyncHandle = async_test('This test uses interpolation-test.js.') |
417 requestAnimationFrame(function() { | 421 requestAnimationFrame(function() { |
418 runTests(); | 422 runTests(); |
419 asyncHandle.done() | 423 asyncHandle.done() |
420 }); | 424 }); |
421 }); | 425 }); |
422 })(); | 426 })(); |
OLD | NEW |