blob: 248d6472a1fba240ef822011e7a37499761b6609 [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../../resources/js-test-pre.js"></script>
<p id="description"></p>
<div id="console"></div>
<script>
description("Test the computed style of the -webkit-animation-trigger property.");
// These have to be global for the test helpers to see them.
var stylesheet, triggerStyle, subRule;
var styleElement = document.createElement("style");
document.head.appendChild(styleElement);
stylesheet = styleElement.sheet;
function testComputedTriggerRule(description, rule, expectedLength, expectedTexts)
{
debug("");
debug(description + " : " + rule);
stylesheet.insertRule("body { -webkit-animation-trigger: " + rule + "; }", 0);
triggerStyle = window.getComputedStyle(document.body).getPropertyCSSValue("-webkit-animation-trigger");
shouldBe("triggerStyle.length", "" + expectedLength);
for (var i = 0; i < expectedLength; i++) {
subRule = triggerStyle[i];
shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
}
stylesheet.deleteRule(0);
}
testComputedTriggerRule("Auto",
"auto", 1,
["auto"]);
testComputedTriggerRule("One container-scroll value",
"container-scroll(10px)", 1,
["container-scroll(10px)"]);
testComputedTriggerRule("One container-scroll value",
"container-scroll(2em)", 1,
["container-scroll(32px)"]);
testComputedTriggerRule("One container-scroll value with end value",
"container-scroll(10px, 20px)", 1,
["container-scroll(10px, 20px)"]);
testComputedTriggerRule("Two container-scroll values",
"container-scroll(10px), container-scroll(20px)", 2,
["container-scroll(10px)", "container-scroll(20px)"]);
testComputedTriggerRule("Many container-scroll values",
"container-scroll(10px), container-scroll(20px), container-scroll(30px), container-scroll(40px), container-scroll(1px)", 5,
["container-scroll(10px)", "container-scroll(20px)", "container-scroll(30px)", "container-scroll(40px)", "container-scroll(1px)"]);
testComputedTriggerRule("No value",
"", 1,
["auto"]);
testComputedTriggerRule("Bad value",
"banana", 1,
["auto"]);
testComputedTriggerRule("Multiple bad values",
"banana, eggs, bacon", 1,
["auto"]);
testComputedTriggerRule("Some good, some bad values",
"container-scroll(10), eggs, bacon", 1,
["auto"]);
successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>