[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / css3 / calc / transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <style>
3 .transitionTest {
4     background-color: green;
5     height: 100px;
6     -webkit-transition: all 1s linear;
7     -moz-transition: all 1s linear;
8 }
9
10 #startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent {
11     width: calc(10% + 50px);
12     width: -moz-calc(10% + 50px);
13 }
14
15 #startPxEndCalc {
16     width: 100px;
17 }
18
19 #startPercentEndCalc {
20     width: 20%;
21 }
22
23 #startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go {
24     width: calc(100% - 100px);
25     width: -moz-calc(100% - 100px);
26 }
27
28 #startCalcEndPx.go {
29     width: 400px;
30 }
31
32 #startCalcEndPercent.go {
33     width: 80%;
34 }
35 </style>
36
37 This tests that transitions containing calc() expressions transition correctly.
38 <div style="width:500px; border: 1px solid black;">
39     <div class="transitionTest" id="startCalcEndCalc"></div>
40     <div class="transitionTest" id="startPxEndCalc"></div>
41     <div class="transitionTest" id="startPercentEndCalc"></div>
42     <div class="transitionTest" id="startCalcEndPx"></div>
43     <div class="transitionTest" id="startCalcEndPercent"></div>
44 </div>
45 <div id="result"></div>
46
47 <script src="../../transitions/resources/transition-test-helpers.js"></script>
48 <script>
49
50 const tests = ["startCalcEndCalc", "startPxEndCalc", "startPercentEndCalc", "startCalcEndPx", "startCalcEndPercent"];
51
52 expectedValues = [];
53
54 for (var i = 0; i < tests.length; i++) {
55     expectedValues = expectedValues.concat([[0.25, tests[i], 'width', 175, 2]]);
56     expectedValues = expectedValues.concat([[0.5, tests[i], 'width', 250, 2]]);
57     expectedValues = expectedValues.concat([[0.75, tests[i], 'width', 325, 2]]);
58     expectedValues = expectedValues.concat([[1.0, tests[i], 'width', 400, 2]]);
59 }
60
61 function initialize(id)
62 {
63     var expectedStartWidth = 100;
64     var element = document.getElementById(id);
65     var width = element.offsetWidth;
66     if (width == expectedStartWidth)
67         element.innerHTML += 'PASS - "width" property for "' + id +'" element at 0.0s was: ' + width;
68     else
69         element.innerHTML += 'FAIL  - "width" property for "' + id +'" element at 0.0s expected: ' + expectedStartWidth + ' but saw: ' + width;
70     
71     element.className += " go";
72 }
73
74 function setupTest()
75 {
76     for (var i = 0; i < tests.length; i++)
77         initialize(tests[i]);
78 }
79
80 runTransitionTest(expectedValues, setupTest, true, false /* pixel test */);
81
82 </script>