Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-color.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-color.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-color.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..23f3ba084c02767867eecfe5f7b986c6d6e08b13 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/auto-test-color.html |
@@ -0,0 +1,116 @@ |
+<!-- |
+Copyright 2012 Google Inc. All Rights Reserved. |
+ |
+Licensed under the Apache License, Version 2.0 (the "License"); |
+you may not use this file except in compliance with the License. |
+You may obtain a copy of the License at |
+ |
+ http://www.apache.org/licenses/LICENSE-2.0 |
+ |
+Unless required by applicable law or agreed to in writing, software |
+distributed under the License is distributed on an "AS IS" BASIS, |
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
+See the License for the specific language governing permissions and |
+limitations under the License. |
+--> |
+ |
+<!DOCTYPE html><meta charset="UTF-8"> |
+<style> |
+.anim { |
+ top: 50px; |
+ width: 100px; |
+ height: 100px; |
+ background-color: lightsteelblue; |
+ position: absolute; |
+} |
+ |
+#a { |
+ left: 50px |
+} |
+ |
+#b { |
+ left: 150px; |
+} |
+ |
+#c { |
+ left: 250px; |
+ background-color: green; |
+} |
+ |
+#d { |
+ left: 350px; |
+ background-color: rgba(0, 0, 0, 0); |
+} |
+ |
+#e { |
+ left: 450px; |
+ background-color: rgba(255, 0, 255, 0); |
+} |
+ |
+#f { |
+ left: 550px |
+} |
+ |
+#g { |
+ left: 650px |
+} |
+ |
+#container { |
+ position: absolute; |
+ left: 0px; |
+ top: 50px; |
+ width: 800px; |
+ height: 200px; |
+ background-color: green; |
+} |
+ |
+</style> |
+ |
+All three boxes should end up the same color as the outline. |
+ |
+<div id="container"> |
+ <div id="a" class="anim"></div> |
+ <div id="b" class="anim"></div> |
+ <div id="c" class="anim"></div> |
+ <div id="d" class="anim"></div> |
+ <div id="e" class="anim"></div> |
+ <div id="f" class="anim"></div> |
+ <div id="g" class="anim"></div> |
+</div> |
+ |
+<script> |
+var expected_failures = { |
+ '/Auto .*/': { |
+ msie: true, |
+ message: "IE returns rgba always." |
+ } |
+}; |
+</script> |
+<script src="../bootstrap.js"></script> |
+<script> |
+"use strict"; |
+ |
+var dt = document.timeline; |
+var timing = {duration: 2, fill: 'forwards'}; |
+ |
+dt.play(new Animation(document.querySelector("#a"), |
+ [{backgroundColor: "red"}, {backgroundColor: "green"}], timing)); |
+dt.play(new Animation(document.querySelector("#b"), |
+ {backgroundColor: "rgb(0, 128, 0)"}, timing)); |
+dt.play(new Animation(document.querySelector("#c"), |
+ new KeyframeEffect([ |
+ {offset: 0.25, backgroundColor: "rgb(255, 0, 0)"}, |
+ {offset: 0.75, backgroundColor: "rgb(0, 0, 255)"}, |
+ ], 'add'), timing)); |
+dt.play(new Animation(document.querySelector("#d"), |
+ {offset: 0.5, backgroundColor: "white"}, timing)); |
+dt.play(new Animation(document.querySelector("#e"), |
+ {offset: 0.5, backgroundColor: "white"}, timing)); |
+ |
+dt.play(new Animation(document.querySelector("#f"), |
+ [{backgroundColor: "#000000"}, {backgroundColor: "#ffffff"}], timing)); |
+ |
+dt.play(new Animation(document.querySelector("#g"), |
+ [{backgroundColor: "#000"}, {backgroundColor: "#fff"}], timing)); |
+ |
+</script> |