blob: a8298f63e4f7d53cf616e4af7d6f459ed1cb9bcd [file] [log] [blame]
<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>