Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(79)

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/resources/interpolation-test.js

Issue 1771733002: Web Animations: Use of hyphens is no longer supported (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: warn if hyphenated property is present Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698