OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2012 Google Inc. All Rights Reserved. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 --> | |
16 | |
17 <!DOCTYPE html><meta charset="UTF-8"> | |
18 <style> | |
19 .anim { | |
20 top: 50px; | |
21 width: 100px; | |
22 height: 100px; | |
23 background-color: lightsteelblue; | |
24 position: absolute; | |
25 } | |
26 | |
27 #a { | |
28 left: 50px | |
29 } | |
30 | |
31 #b { | |
32 left: 150px; | |
33 } | |
34 | |
35 #c { | |
36 left: 250px; | |
37 background-color: green; | |
38 } | |
39 | |
40 #d { | |
41 left: 350px; | |
42 background-color: rgba(0, 0, 0, 0); | |
43 } | |
44 | |
45 #e { | |
46 left: 450px; | |
47 background-color: rgba(255, 0, 255, 0); | |
48 } | |
49 | |
50 #f { | |
51 left: 550px | |
52 } | |
53 | |
54 #g { | |
55 left: 650px | |
56 } | |
57 | |
58 #container { | |
59 position: absolute; | |
60 left: 0px; | |
61 top: 50px; | |
62 width: 800px; | |
63 height: 200px; | |
64 background-color: green; | |
65 } | |
66 | |
67 </style> | |
68 | |
69 All three boxes should end up the same color as the outline. | |
70 | |
71 <div id="container"> | |
72 <div id="a" class="anim"></div> | |
73 <div id="b" class="anim"></div> | |
74 <div id="c" class="anim"></div> | |
75 <div id="d" class="anim"></div> | |
76 <div id="e" class="anim"></div> | |
77 <div id="f" class="anim"></div> | |
78 <div id="g" class="anim"></div> | |
79 </div> | |
80 | |
81 <script> | |
82 var expected_failures = [ | |
83 { | |
84 browser_configurations: [{ msie: true }], | |
85 tests: ['Auto.*'], | |
86 message: 'IE returns rgba always.', | |
87 } | |
88 ]; | |
89 </script> | |
90 <script src="../bootstrap.js"></script> | |
91 <script> | |
92 "use strict"; | |
93 | |
94 var dt = document.timeline; | |
95 var timing = {duration: 2 * 1000, fill: 'forwards'}; | |
96 | |
97 dt.play(new Animation(document.querySelector("#a"), | |
98 [{backgroundColor: "red"}, {backgroundColor: "green"}], timing)); | |
99 dt.play(new Animation(document.querySelector("#b"), | |
100 {backgroundColor: "rgb(0, 128, 0)"}, timing)); | |
101 dt.play(new Animation(document.querySelector("#c"), | |
102 new KeyframeEffect([ | |
103 {offset: 0.25, backgroundColor: "rgb(255, 0, 0)"}, | |
104 {offset: 0.75, backgroundColor: "rgb(0, 0, 255)"}, | |
105 ], 'add'), timing)); | |
106 dt.play(new Animation(document.querySelector("#d"), | |
107 {offset: 0.5, backgroundColor: "white"}, timing)); | |
108 dt.play(new Animation(document.querySelector("#e"), | |
109 {offset: 0.5, backgroundColor: "white"}, timing)); | |
110 | |
111 dt.play(new Animation(document.querySelector("#f"), | |
112 [{backgroundColor: "#000000"}, {backgroundColor: "#ffffff"}], timing)); | |
113 | |
114 dt.play(new Animation(document.querySelector("#g"), | |
115 [{backgroundColor: "#000"}, {backgroundColor: "#fff"}], timing)); | |
116 | |
117 </script> | |
OLD | NEW |