| <script src="../../resources/js-test-pre.js"></script> |
| <body> |
| <script> |
| |
| description("Test the prefixed or the unprefixed variant of a property allows reading from the CSS OM with both the prefixed and unprefixed variant."); |
| |
| const PREFIX = "-webkit-"; |
| |
| function accessorForProperty(property) |
| { |
| var firstIndexToTranspose = property.indexOf(PREFIX) === 0 ? 2 : 1; |
| return property.split("-").map(function(component, index) { |
| if (index < firstIndexToTranspose) |
| return component; |
| return component.charAt(0).toUpperCase() + component.substr(1); |
| }).join(""); |
| } |
| |
| function testPropertyVariants(shorthandProperty, longhandProperty, initialShorthandValue, finalShorthandValue, longhandValue) |
| { |
| var shorthandAccessor = accessorForProperty(shorthandProperty); |
| var prefixedShorthandProperty = PREFIX + shorthandProperty; |
| var prefixedShorthandAccessor = accessorForProperty(prefixedShorthandProperty); |
| |
| var longhandAccessor = accessorForProperty(shorthandProperty); |
| var prefixedLonghandProperty = PREFIX + longhandProperty; |
| var prefixedLonghandAccessor = accessorForProperty(prefixedLonghandProperty); |
| |
| testProperty(shorthandProperty, shorthandProperty, longhandProperty, shorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| testProperty(shorthandProperty, shorthandProperty, longhandProperty, prefixedShorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| |
| testProperty(prefixedShorthandProperty, shorthandProperty, longhandProperty, shorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| testProperty(prefixedShorthandProperty, shorthandProperty, longhandProperty, prefixedShorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| |
| testProperty(shorthandProperty, shorthandProperty, prefixedLonghandProperty, shorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| testProperty(shorthandProperty, shorthandProperty, prefixedLonghandProperty, prefixedShorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| |
| testProperty(prefixedShorthandProperty, shorthandProperty, prefixedLonghandProperty, shorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| testProperty(prefixedShorthandProperty, shorthandProperty, prefixedLonghandProperty, prefixedShorthandAccessor, initialShorthandValue, finalShorthandValue, longhandValue); |
| } |
| |
| function testProperty(shorthandProperty, unprefixedShorthandProperty, longhandProperty, accessor, initialShorthandValue, finalShorthandValue, longhandValue) |
| { |
| function test(message, actual, expected) { |
| if (actual === expected) |
| testPassed(message); |
| else |
| testFailed(`expected ${message} to be "${expected}" but got "${actual}"`); |
| } |
| |
| var element = document.body.appendChild(document.createElement("div")); |
| element.style.setProperty(shorthandProperty, initialShorthandValue); |
| element.style.setProperty(longhandProperty, longhandValue); |
| |
| debug(`Setting "${shorthandProperty}" to "${initialShorthandValue}" then "${longhandProperty}" to "${longhandValue}" accessing "${accessor}"`); |
| |
| var style = element.style; |
| test(`element.style.${accessorForProperty(shorthandProperty)}`, style[accessorForProperty(shorthandProperty)], finalShorthandValue); |
| test(`element.style.cssText`, element.style.cssText, `${unprefixedShorthandProperty}: ${finalShorthandValue};`, longhandValue); |
| |
| element.remove(); |
| |
| debug(""); |
| } |
| |
| testPropertyVariants("animation", "animation-duration", "2s move", "10s ease 0s 1 normal none running move", "10s"); |
| |
| successfullyParsed = true; |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
