| 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 |
| 19 <style> |
| 20 .anim { |
| 21 fill: lightsteelblue; |
| 22 background-color: lightsteelblue; |
| 23 height: 50px; |
| 24 position: absolute; |
| 25 } |
| 26 |
| 27 #a { |
| 28 width: 50px; |
| 29 } |
| 30 |
| 31 #b { |
| 32 width: 25%; |
| 33 top: 50px; |
| 34 } |
| 35 |
| 36 #c { |
| 37 width: 50px; |
| 38 top: 100px; |
| 39 } |
| 40 |
| 41 #d { |
| 42 width: calc(25px + 12.5%); |
| 43 top: 150px; |
| 44 } |
| 45 |
| 46 #e { |
| 47 width: 50px; |
| 48 top: 200px; |
| 49 } |
| 50 |
| 51 #f { |
| 52 width: 25%; |
| 53 top: 250px; |
| 54 } |
| 55 |
| 56 #g { |
| 57 width: calc(100px - 25%); |
| 58 top: 300px; |
| 59 } |
| 60 |
| 61 .expectation { |
| 62 background-color: red; |
| 63 position: absolute; |
| 64 left: 0px; |
| 65 height: 50px; |
| 66 } |
| 67 |
| 68 .expectation2 { |
| 69 background-color: #F88; |
| 70 position: absolute; |
| 71 top: 0px; |
| 72 left: 0px; |
| 73 width: 400px; |
| 74 height: 350px; |
| 75 } |
| 76 |
| 77 .outer { |
| 78 width: 200px; |
| 79 background-color: green; |
| 80 position: absolute; |
| 81 top: 50px; |
| 82 left: 50px; |
| 83 height: 350px; |
| 84 } |
| 85 |
| 86 .spacer { |
| 87 height: 400px; |
| 88 } |
| 89 |
| 90 </style> |
| 91 |
| 92 Blue lines should all hit the deep red boundary at the same time, then |
| 93 completely cover the light red box when the animation has finished. |
| 94 |
| 95 <div class="outer"> |
| 96 <div class="expectation2"></div> |
| 97 <div class="expectation" style="top: 0px; width: 150px"></div> |
| 98 <div class="anim" id="a"></div> |
| 99 <div class="expectation" style="top: 50px; width: 187.5px"></div> |
| 100 <div class="anim" id="b"></div> |
| 101 <div class="expectation" style="top: 100px; width: 225px"></div> |
| 102 <div class="anim" id="c"></div> |
| 103 <div class="expectation" style="top: 150px; width: 168.75px"></div> |
| 104 <div class="anim" id="d"></div> |
| 105 <div class="expectation" style="top: 200px; width: 168.75px"></div> |
| 106 <div class="anim" id="e"></div> |
| 107 <div class="expectation" style="top: 250px; width: 218.75px"></div> |
| 108 <div class="anim" id="f"></div> |
| 109 <div class="expectation" style="top: 300px; width: 131.25px"></div> |
| 110 <div class="anim" id="g"></div> |
| 111 </div> |
| 112 <div class="spacer"> |
| 113 </div> |
| 114 |
| 115 <script> |
| 116 var expected_failures = { |
| 117 'Auto generated tests at t=0.5s': { |
| 118 firefox: true, |
| 119 msie: true, |
| 120 message: "Floating point issues." |
| 121 } |
| 122 }; |
| 123 </script> |
| 124 <script src="../bootstrap.js"></script> |
| 125 <script> |
| 126 "use strict"; |
| 127 |
| 128 var dt = document.timeline; |
| 129 var timing = {duration: 2, fill: 'forwards'}; |
| 130 |
| 131 dt.play(new Animation(document.querySelector(".outer"), |
| 132 {width: "800px"}, timing)); |
| 133 |
| 134 // 50px -> 0px linear, 0% -> 50% (0px -> 400px quadratic) |
| 135 dt.play(new Animation(document.querySelector("#a"), {width: "50%"}, timing)); |
| 136 // 25% -> 50% (50px -> 400px quadratic) |
| 137 dt.play(new Animation(document.querySelector("#b"), {width: "50%"}, timing)); |
| 138 // 50px -> 400px linear |
| 139 dt.play(new Animation(document.querySelector("#c"), |
| 140 {width: "400px"}, timing)); |
| 141 // 25px -> 0px linear, 12.5% -> 50% (25px -> 400px quadratic) |
| 142 dt.play(new Animation(document.querySelector("#d"), {width: "50%"}, timing)); |
| 143 // 50px -> 100px linear, 0% -> 37.5% (0px -> 300px quadratic) |
| 144 dt.play(new Animation(document.querySelector("#e"), |
| 145 {width: "calc(37.5% + 100px)"}, timing)); |
| 146 // 0px -> 100px linear, 25% -> 37.5% (50px -> 300px quadratic) |
| 147 dt.play(new Animation(document.querySelector("#f"), |
| 148 {width: "calc(37.5% + 100px)"}, timing)); |
| 149 // 100px -> 100px linear, -25% -> 37.5% (-50px -> 300px quadratic) |
| 150 dt.play(new Animation(document.querySelector("#g"), |
| 151 {width: "calc(37.5% + 100px)"}, timing)); |
| 152 |
| 153 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart