blob: c05d689589999f61435d5003694cb20d58c82e10 [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 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>