[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / trigger-computed-style.html
1 <!DOCTYPE HTML>
2 <script src="../resources/js-test-pre.js"></script>
3 <p id="description"></p>
4 <div id="console"></div>
5 <script>
6 description("Test the computed style of the -webkit-animation-trigger property.");
7
8 // These have to be global for the test helpers to see them.
9 var stylesheet, triggerStyle, subRule;
10 var styleElement = document.createElement("style");
11 document.head.appendChild(styleElement);
12 stylesheet = styleElement.sheet;
13
14 function testComputedTriggerRule(description, rule, expectedLength, expectedTexts)
15 {
16     debug("");
17     debug(description + " : " + rule);
18
19     stylesheet.insertRule("body { -webkit-animation-trigger: " + rule + "; }", 0);
20
21     triggerStyle = window.getComputedStyle(document.body).getPropertyCSSValue("-webkit-animation-trigger");
22     shouldBe("triggerStyle.length", "" + expectedLength);
23     for (var i = 0; i < expectedLength; i++) {
24         subRule = triggerStyle[i];
25         shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
26     }
27     stylesheet.deleteRule(0);
28 }
29
30 testComputedTriggerRule("Auto",
31                         "auto", 1,
32                         ["auto"]);
33
34 testComputedTriggerRule("One container-scroll value",
35                         "container-scroll(10px)", 1,
36                         ["container-scroll(10px)"]);
37
38 testComputedTriggerRule("One container-scroll value",
39                         "container-scroll(2em)", 1,
40                         ["container-scroll(32px)"]);
41
42 testComputedTriggerRule("One container-scroll value with end value",
43                         "container-scroll(10px, 20px)", 1,
44                         ["container-scroll(10px, 20px)"]);
45
46 testComputedTriggerRule("Two container-scroll values",
47                         "container-scroll(10px), container-scroll(20px)", 2,
48                         ["container-scroll(10px)", "container-scroll(20px)"]);
49
50 testComputedTriggerRule("Many container-scroll values",
51                         "container-scroll(10px), container-scroll(20px), container-scroll(30px), container-scroll(40px), container-scroll(1px)", 5,
52                         ["container-scroll(10px)", "container-scroll(20px)", "container-scroll(30px)", "container-scroll(40px)", "container-scroll(1px)"]);
53
54 testComputedTriggerRule("No value",
55                         "", 1,
56                         ["auto"]);
57
58 testComputedTriggerRule("Bad value",
59                         "banana", 1,
60                         ["auto"]);
61
62 testComputedTriggerRule("Multiple bad values",
63                         "banana, eggs, bacon", 1,
64                         ["auto"]);
65
66 testComputedTriggerRule("Some good, some bad values",
67                         "container-scroll(10), eggs, bacon", 1,
68                         ["auto"]);
69
70 successfullyParsed = true;
71 </script>
72 <script src="../resources/js-test-post.js"></script>