| <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 testPropertyVariants(property, value) { |
| |
| 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(""); |
| } |
| |
| var accessor = accessorForProperty(property); |
| var prefixedProperty = PREFIX + property; |
| var prefixedAccessor = accessorForProperty(prefixedProperty); |
| |
| testProperty(property, property, prefixedProperty, accessor, prefixedAccessor, value); |
| testProperty(prefixedProperty, property, prefixedProperty, accessor, prefixedAccessor, value); |
| } |
| |
| function testProperty(propertyToSet, unprefixedProperty, prefixedProperty, unprefixedAccessor, prefixedAccessor, value) { |
| |
| function test(message, actual, expected) { |
| expected = expected || value; |
| 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(propertyToSet, value); |
| |
| debug(`Setting "${propertyToSet}" to "${value}"`); |
| |
| var style = element.style; |
| test(`element.style.${unprefixedAccessor}`, style[unprefixedAccessor]); |
| test(`element.style.${prefixedAccessor}`, style[prefixedAccessor]); |
| test(`element.style.getPropertyValue("${unprefixedProperty}")`, style.getPropertyValue(unprefixedProperty)); |
| test(`element.style.getPropertyValue("${prefixedProperty}")`, style.getPropertyValue(prefixedProperty)); |
| test(`element.style.getPropertyCSSValue("${unprefixedProperty}")`, style.getPropertyCSSValue(unprefixedProperty).cssText); |
| test(`element.style.getPropertyCSSValue("${prefixedProperty}")`, style.getPropertyCSSValue(prefixedProperty).cssText); |
| |
| var computedStyle = window.getComputedStyle(element); |
| test(`getComputedStyle(element).${unprefixedAccessor}`, computedStyle[unprefixedAccessor]); |
| test(`getComputedStyle(element).${prefixedAccessor}`, computedStyle[prefixedAccessor]); |
| test(`getComputedStyle(element).getPropertyValue("${unprefixedProperty}")`, computedStyle.getPropertyValue(unprefixedProperty)); |
| test(`getComputedStyle(element).getPropertyValue("${prefixedProperty}")`, computedStyle.getPropertyValue(prefixedProperty)); |
| test(`getComputedStyle(element).getPropertyCSSValue("${unprefixedProperty}")`, computedStyle.getPropertyCSSValue(unprefixedProperty).cssText); |
| test(`getComputedStyle(element).getPropertyCSSValue("${prefixedProperty}")`, computedStyle.getPropertyCSSValue(prefixedProperty).cssText); |
| |
| test(`element.style.cssText`, element.style.cssText, `${unprefixedProperty}: ${value};`); |
| |
| element.remove(); |
| |
| debug(""); |
| } |
| |
| testPropertyVariants("transition-property", "width"); |
| testPropertyVariants("transition-duration", "1s"); |
| testPropertyVariants("transition-timing-function", "linear"); |
| testPropertyVariants("transition-delay", "0.5s"); |
| |
| testPropertyVariants("animation-name", "foo"); |
| testPropertyVariants("animation-duration", "1s"); |
| testPropertyVariants("animation-timing-function", "linear"); |
| testPropertyVariants("animation-iteration-count", "5"); |
| testPropertyVariants("animation-direction", "reverse"); |
| testPropertyVariants("animation-play-state", "paused"); |
| testPropertyVariants("animation-delay", "0.5s"); |
| testPropertyVariants("animation-fill-mode", "forwards"); |
| |
| testPropertyVariants("transform", "matrix(1, 0, 0, 1, 1, 1)"); |
| |
| successfullyParsed = true; |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
