| 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 |