| OLD | NEW |
|---|
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
| 3 | 3 |
| 4 <html lang="en"> | 4 <html lang="en"> |
| 5 <head> | 5 <head> |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 7 <title>Box Transitions coming out from the viewport.</title> | 7 <title>Box Transitions coming out from the viewport.</title> |
| 8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
| 9 | 9 |
| 10 .container { | 10 .container { |
| 11 height: 200px; | 11 height: 200px; |
| 12 width: 200px; | 12 width: 200px; |
| 13 border: 1px solid black; | 13 border: 1px solid black; |
| 14 background-color : red; | 14 background-color : red; |
| 15 -webkit-transition: -webkit-transform 3s; | 15 transition: transform 3s; |
| 16 } | 16 } |
| 17 | 17 |
| 18 </style> | 18 </style> |
| 19 <script type="text/javascript" charset="utf-8"> | 19 <script type="text/javascript" charset="utf-8"> |
| 20 function runTest() | 20 function runTest() |
| 21 { | 21 { |
| 22 var box = document.getElementById("box"); | 22 var box = document.getElementById("box"); |
| 23 | 23 |
| 24 window.setTimeout(function() { | 24 window.setTimeout(function() { |
| 25 box.style.webkitTransform = "translateX(" + window.innerWidth * 2.5 + "p
x)"; | 25 box.style.transform = "translateX(" + window.innerWidth * 2.5 + "px)"; |
| 26 }, 3000); | 26 }, 3000); |
| 27 | 27 |
| 28 window.setTimeout(function() { | 28 window.setTimeout(function() { |
| 29 box.style.webkitTransform = "translateX(0px)"; | 29 box.style.transform = "translateX(0px)"; |
| 30 }, 6000); | 30 }, 6000); |
| 31 | 31 |
| 32 window.setTimeout(function() { | 32 window.setTimeout(function() { |
| 33 box.style.webkitTransform = "translateX(" + window.innerWidth * 2.5 + "p
x)"; | 33 box.style.transform = "translateX(" + window.innerWidth * 2.5 + "px)"; |
| 34 }, 9000); | 34 }, 9000); |
| 35 | 35 |
| 36 window.setTimeout(function() { | 36 window.setTimeout(function() { |
| 37 box.style.webkitTransform = "translateX(0px)"; | 37 box.style.transform = "translateX(0px)"; |
| 38 }, 12000); | 38 }, 12000); |
| 39 } | 39 } |
| 40 window.addEventListener('load', runTest, false) | 40 window.addEventListener('load', runTest, false) |
| 41 </script> | 41 </script> |
| 42 </head> | 42 </head> |
| 43 <body> | 43 <body> |
| 44 <p> | 44 <p> |
| 45 We should be able to see that the red box is going out and coming from the viewp
ort twice. | 45 We should be able to see that the red box is going out and coming from the viewp
ort twice. |
| 46 The reason why the box goes to the viewport's 2.5x distance is that the backing
store cannot create tile only if the GraphicsLayer is out of keepRect. | 46 The reason why the box goes to the viewport's 2.5x distance is that the backing
store cannot create tile only if the GraphicsLayer is out of keepRect. |
| 47 </p> | 47 </p> |
| 48 <div id="box" class="container"> | 48 <div id="box" class="container"> |
| 49 </div> | 49 </div> |
| 50 | 50 |
| 51 </body> | 51 </body> |
| 52 </html> | 52 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2715113003:
CSS manual tests: reduce usage of webkit prefix (Closed)
