| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <style> | 4 <style> |
| 5 div { | 5 div { |
| 6 /* This is required so that z-index doesn't compute as auto. */ | 6 /* This is required so that z-index doesn't compute as auto. */ |
| 7 position: relative; | 7 position: relative; |
| 8 } | 8 } |
| 9 </style> | 9 </style> |
| 10 | 10 |
| 11 <div id="animated"></div> | 11 <div id="animated"></div> |
| 12 <div id="reference"></div> | 12 <div id="reference"></div> |
| 13 | 13 |
| 14 <script> | 14 <script> |
| 15 var numberProperties = [ | 15 var numberProperties = [ |
| 16 'flex-grow', | 16 'flex-grow', |
| 17 'flex-shrink', | 17 'flex-shrink', |
| 18 'font-size-adjust', | 18 'font-size-adjust', |
| 19 'line-height', | 19 'line-height', |
| 20 'orphans', | 20 'orphans', |
| 21 'stroke-miterlimit', | 21 'stroke-miterlimit', |
| 22 'widows', | 22 'widows', |
| 23 'z-index', | 23 'z-index', |
| 24 ]; | 24 ]; |
| 25 | 25 |
| 26 var bigNumber = 1e20; | 26 var bigNumber = 1e20; |
| 27 | 27 |
| 28 function toCamelCase(property) { |
| 29 for (var i = property.length - 2; i > 0; --i) { |
| 30 if (property[i] === '-') { |
| 31 property = property.substring(0, i) + property[i + 1].toUpperCase() + prop
erty.substring(i + 2); |
| 32 } |
| 33 } |
| 34 return property; |
| 35 } |
| 36 |
| 28 for (var property of numberProperties) { | 37 for (var property of numberProperties) { |
| 29 test(() => { | 38 test(() => { |
| 30 animated.animate({[property]: bigNumber}, {fill: 'forwards'}); | 39 animated.animate({[toCamelCase(property)]: bigNumber}, {fill: 'forwards'}); |
| 31 reference.style[property] = bigNumber; | 40 reference.style[property] = bigNumber; |
| 32 assert_equals(getComputedStyle(animated)[property], getComputedStyle(referen
ce)[property]); | 41 assert_equals(getComputedStyle(animated)[property], getComputedStyle(referen
ce)[property]); |
| 33 }, `Animations on ${property} should clamp identically to setting inline style
`); | 42 }, `Animations on ${property} should clamp identically to setting inline style
`); |
| 34 } | 43 } |
| 35 </script> | 44 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1771733002:
Web Animations: Use of hyphens is no longer supported (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master