| OLD | NEW |
|---|
| 1 <!DOCTYPE> | 1 <!DOCTYPE> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Switching layer in and out of preserve-3d</title> | 4 <title>Switching layer in and out of preserve-3d</title> |
| 5 | 5 |
| 6 <style type="text/css" media="screen"> | 6 <style type="text/css" media="screen"> |
| 7 body { | 7 body { |
| 8 font-family: 'Lucida Grande', Verdana, Arial; | 8 font-family: 'Lucida Grande', Verdana, Arial; |
| 9 font-size: 12px; | 9 font-size: 12px; |
| 10 } | 10 } |
| 11 #container { | 11 #container { |
| 12 position: relative; | 12 position: relative; |
| 13 height: 300px; | 13 height: 300px; |
| 14 width: 300px; | 14 width: 300px; |
| 15 margin: 50px 100px; | 15 margin: 50px 100px; |
| 16 border: 2px solid blue; | 16 border: 2px solid blue; |
| 17 -webkit-perspective: 500; | 17 -webkit-perspective: 500; |
| 18 } | 18 } |
| 19 | 19 |
| 20 #parent { | 20 #parent { |
| 21 margin: 10px; | 21 margin: 10px; |
| 22 width: 280px; | 22 width: 280px; |
| 23 height: 280px; | 23 height: 280px; |
| 24 background-color: yellow; | 24 background-color: yellow; |
| 25 opacity: 0.8; | 25 opacity: 0.8; |
| 26 -webkit-transform-style: preserve-3d; | 26 -webkit-transform-style: preserve-3d; |
| 27 -webkit-transform: rotateX(-60deg) rotateY(40deg); | 27 transform: rotateX(-60deg) rotateY(40deg); |
| 28 } | 28 } |
| 29 | 29 |
| 30 #parent > div { | 30 #parent > div { |
| 31 position: absolute; | 31 position: absolute; |
| 32 top: 40px; | 32 top: 40px; |
| 33 left: 40px; | 33 left: 40px; |
| 34 width: 200px; | 34 width: 200px; |
| 35 height: 200px; | 35 height: 200px; |
| 36 padding: 10px; | 36 padding: 10px; |
| 37 -webkit-box-sizing: border-box; | 37 -webkit-box-sizing: border-box; |
| 38 font-family: monospace; | 38 font-family: monospace; |
| 39 font-size: 12pt; | 39 font-size: 12pt; |
| 40 } | 40 } |
| 41 | 41 |
| 42 #parent > :first-child { | 42 #parent > :first-child { |
| 43 background-color: green; | 43 background-color: green; |
| 44 opacity:0.7; | 44 opacity:0.7; |
| 45 -webkit-transform: translateZ(50px) rotateY(-40deg); | 45 transform: translateZ(50px) rotateY(-40deg); |
| 46 } | 46 } |
| 47 </style> | 47 </style> |
| 48 <script type="text/javascript" charset="utf-8"> | 48 <script type="text/javascript" charset="utf-8"> |
| 49 if (window.testRunner) { | 49 if (window.testRunner) { |
| 50 testRunner.dumpAsText(); | 50 testRunner.dumpAsText(); |
| 51 testRunner.waitUntilDone(); | 51 testRunner.waitUntilDone(); |
| 52 } | 52 } |
| 53 | 53 |
| 54 timeout = 100; | 54 timeout = 100; |
| 55 | 55 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 68 }, timeout); | 68 }, timeout); |
| 69 } | 69 } |
| 70 window.addEventListener('load', startProgram, false) | 70 window.addEventListener('load', startProgram, false) |
| 71 </script> | 71 </script> |
| 72 </head> | 72 </head> |
| 73 <body> | 73 <body> |
| 74 | 74 |
| 75 <p>The green box appear angled out from the yellow box and embedded in it.</p> | 75 <p>The green box appear angled out from the yellow box and embedded in it.</p> |
| 76 <div id="container"> | 76 <div id="container"> |
| 77 <div id="parent"> | 77 <div id="parent"> |
| 78 <div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div> | 78 <div>transform: translateZ(-100px) rotateY(45deg);</div> |
| 79 </div> | 79 </div> |
| 80 <div id="layerTree"></div> | 80 <div id="layerTree"></div> |
| 81 </div> | 81 </div> |
| 82 | 82 |
| 83 </body> | 83 </body> |
| 84 </html> | 84 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637763002:
Unprefix usage of -webkit-transform in tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master