[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / css3 / calc / transitions-dependent.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <style>
3 .outerBlock {
4     border: 1px solid black;
5     -webkit-transition: all 1s linear;
6     -moz-transition: all 1s linear;
7 }
8
9 .innerBlock {    
10     background-color: green;
11     height: 100px;
12     -webkit-transition: all 1s linear;
13     -moz-transition: all 1s linear;    
14 }
15
16 #outer {
17     width: 100px;
18 }
19
20 #outer.go {
21     width: 500px;
22 }
23
24 #inner {
25     width: calc(50% + 10px);
26 }
27
28 #innerTransition {
29     width: calc(10% + 10px);
30 }
31
32 #innerTransition.go {
33     width: calc(100% - 10px);
34 }
35
36 </style>
37
38 This tests that calc() expressions depending on transitioning elements behave correctly.
39 <div class="outerBlock" id="outer">
40     <div class="innerBlock" id="inner"></div>
41     <div class="innerBlock" id="innerTransition"></div>
42 </div>
43 <div id="result"></div>
44
45 <script src="../../transitions/resources/transition-test-helpers.js"></script>
46 <script>
47
48 if (window.testRunner)
49     window.testRunner.dumpAsText();
50
51 const transitioningElements = ["outer", "innerTransition"];
52
53 expectedValues = [
54     // time, element, property, expected-value, depends-on
55     [0.00, "inner", 'width', 60, "outer"],
56     [0.25, "inner", 'width', 110, "outer"],
57     [0.50, "inner", 'width', 160, "outer"],
58     [0.75, "inner", 'width', 210, "outer"],
59     [1.00, "inner", 'width', 260, "outer"],
60
61     [0.00, "innerTransition", 'width', 20, "outer"],
62     [0.25, "innerTransition", 'width', 70, "outer"],
63     [0.50, "innerTransition", 'width', 165, "outer"],
64     [0.75, "innerTransition", 'width', 305, "outer"],
65     [1.00, "innerTransition", 'width', 490, "outer"],
66 ];
67
68 function runTest(expected) 
69 {
70     for (var i = 0; i < expected.length; ++i) {
71         var time = expected[i][0];
72         var elementId = expected[i][1];
73         var property = expected[i][2];
74         var expectedValue = expected[i][3];
75         var dependsOn = expected[i][4];
76         pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn));
77         pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId));
78         var actual = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
79         var result = document.getElementById("result");
80         if (actual == expectedValue)
81             result.innerHTML += 'PASS - "' + property + '" property for "' + elementId +'" element at ' + time + 's was: ' + actual + '<br/>';
82         else
83             result.innerHTML += 'FAIL - "' + property + '" property for "' + elementId +'" element at ' + time + 's expected: ' + expectedValue + ' but saw: ' + actual + '<br/>';
84     }
85     if (window.testRunner)
86         testRunner.notifyDone();
87 }
88
89 function loadListener()
90 {
91     waitForAnimationStart(function(){runTest(expectedValues);});
92 }
93
94 for (var i = 0; i < transitioningElements.length; i++) {
95     var element = document.getElementById(transitioningElements[i]);
96     element.className += " go";
97 }
98
99 window.addEventListener("load", loadListener, false);
100 window.testRunner.waitUntilDone();
101
102 </script>