1<!DOCTYPE html>
2
3<html>
4<head>
5 <style type="text/css" media="screen">
6
7 .box {
8 width: 100px;
9 height: 100px;
10 margin: 10px;
11 border: 1px solid black;
12 -webkit-transition: background-color 1s linear;
13 -moz-transition: background-color 1s linear;
14 }
15
16 #one {
17 background-color: transparent;
18 }
19
20 #one.changed {
21 background-color: green;
22 }
23
24 #two {
25 background-color: rgba(0, 255, 0, 0);
26 }
27
28 #two.changed {
29 background-color: rgba(0, 0, 255, 1);
30 }
31 </style>
32 <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
33 <script type="text/javascript" charset="utf-8">
34 const expectedValues = [
35 // [time, element-id, property, expected-value, tolerance]
36 [0.5, 'one', 'background-color', [0, 127, 0], 2],
37 [0.5, 'two', 'background-color', [0, 0, 255], 2]
38 ];
39
40 function setupTest()
41 {
42 document.getElementById('one').className = 'box changed';
43 document.getElementById('two').className = 'box changed';
44 }
45
46 runTransitionTest(expectedValues, setupTest, true);
47 </script>
48</head>
49<body>
50
51 <div class="box" id="one">
52 </div>
53
54 <div class="box" id="two">
55 </div>
56
57 <div id="result">
58 </div>
59
60</body>
61</html>