| <!DOCTYPE HTML> |
| <script src="../resources/js-test-pre.js"></script> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("Test the parsing of the -webkit-animation-trigger property."); |
| |
| // These have to be global for the test helpers to see them. |
| var stylesheet, cssRule, declaration, triggerRule, subRule; |
| var styleElement = document.createElement("style"); |
| document.head.appendChild(styleElement); |
| stylesheet = styleElement.sheet; |
| |
| function testTriggerRule(description, rule, expectedLength, expectedValue, expectedTexts) |
| { |
| debug(""); |
| debug(description + " : " + rule); |
| |
| stylesheet.insertRule("body { -webkit-animation-trigger: " + rule + "; }", 0); |
| cssRule = stylesheet.cssRules.item(0); |
| |
| shouldBe("cssRule.type", "1"); |
| |
| declaration = cssRule.style; |
| if (!expectedLength || !expectedValue) { |
| shouldBe("declaration.length", "0"); |
| shouldBeEqualToString("declaration.getPropertyValue('-webkit-animation-trigger')", ""); |
| return; |
| } |
| shouldBe("declaration.length", "1"); |
| shouldBe("declaration.getPropertyValue('-webkit-animation-trigger')", "'" + expectedValue + "'"); |
| |
| triggerRule = declaration.getPropertyCSSValue("-webkit-animation-trigger"); |
| if (expectedLength > 1) { |
| shouldBe("triggerRule.length", "" + expectedLength); |
| for (var i = 0; i < expectedLength; i++) { |
| subRule = triggerRule[i]; |
| shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'"); |
| } |
| } else { |
| shouldBe("triggerRule.cssText", "'" + expectedValue + "'"); |
| } |
| |
| stylesheet.deleteRule(0); |
| } |
| |
| debug("") |
| debug("Valid property tests"); |
| debug("") |
| |
| testTriggerRule("Auto", |
| "auto", 1, "auto"); |
| |
| testTriggerRule("Container Scroll", |
| "container-scroll(200px)", 1, "container-scroll(200px)"); |
| |
| testTriggerRule("Container Scroll", |
| "container-scroll(2em)", 1, "container-scroll(2em)"); |
| |
| testTriggerRule("Container Scroll", |
| "container-scroll(30vw)", 1, "container-scroll(30vw)"); |
| |
| testTriggerRule("Container Scroll with end value", |
| "container-scroll(200px, 300px)", 1, "container-scroll(200px, 300px)"); |
| |
| testTriggerRule("Two scroll values", |
| "container-scroll(1px), container-scroll(2px)", 2, "container-scroll(1px), container-scroll(2px)", ["container-scroll(1px)", "container-scroll(2px)"]); |
| |
| testTriggerRule("Many scroll values", |
| "container-scroll(1px), container-scroll(2px), container-scroll(3px), container-scroll(4px), container-scroll(5px), container-scroll(3000px)", |
| 6, |
| "container-scroll(1px), container-scroll(2px), container-scroll(3px), container-scroll(4px), container-scroll(5px), container-scroll(3000px)", |
| ["container-scroll(1px)", "container-scroll(2px)", "container-scroll(3px)", "container-scroll(4px)", "container-scroll(5px)", "container-scroll(3000px)"]); |
| |
| debug("") |
| debug("Invalid property tests"); |
| debug("") |
| |
| testTriggerRule("No value", "", 0, null); |
| testTriggerRule("Bad value", "banana", 0, null); |
| testTriggerRule("Bad list", "container-scroll(1px), orange", 0, null); |
| testTriggerRule("Missing comma", "container-scroll(1px) container-scroll(2px)", 0, null); |
| testTriggerRule("Too many values", "container-scroll(1px, 2px, 3px)", 0, null); |
| |
| successfullyParsed = true; |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
