| OLD | NEW |
| 1 <!DOCTYPE> | 1 <!DOCTYPE> |
| 2 | 2 |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 6 <title>Transform-clipping bug</title> | 6 <title>Transform-clipping bug</title> |
| 7 <style type="text/css" media="screen"> | 7 <style type="text/css" media="screen"> |
| 8 body { | 8 body { |
| 9 margin: 0; | 9 margin: 0; |
| 10 } | 10 } |
| 11 | 11 |
| 12 .zero-size-item { | 12 .zero-size-item { |
| 13 position: absolute; | 13 position: absolute; |
| 14 top: 10px; | 14 top: 10px; |
| 15 left: 10px; | 15 left: 10px; |
| 16 height: 0px; | 16 height: 0px; |
| 17 width: 0px; | 17 width: 0px; |
| 18 -webkit-transform-origin: 0 100px; | 18 -webkit-transform-origin: 0 100px; |
| 19 -webkit-transform: scale3d(0.5, 0.5, 1); | 19 transform: scale3d(0.5, 0.5, 1); |
| 20 } | 20 } |
| 21 | 21 |
| 22 .box { | 22 .box { |
| 23 position: absolute; | 23 position: absolute; |
| 24 width: 100px; | 24 width: 100px; |
| 25 height: 100px; | 25 height: 100px; |
| 26 background-color: green; | 26 background-color: green; |
| 27 -webkit-transform: translateZ(10px); | 27 transform: translateZ(10px); |
| 28 } | 28 } |
| 29 | 29 |
| 30 #indicator { | 30 #indicator { |
| 31 position: absolute; | 31 position: absolute; |
| 32 top: 60px; | 32 top: 60px; |
| 33 left: 10px; | 33 left: 10px; |
| 34 width: 50px; | 34 width: 50px; |
| 35 height: 50px; | 35 height: 50px; |
| 36 background-color: red; | 36 background-color: red; |
| 37 } | 37 } |
| 38 </style> | 38 </style> |
| 39 </head> | 39 </head> |
| 40 <body> | 40 <body> |
| 41 | 41 |
| 42 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=29495">29495</a>. You sh
ould see one green box below, with no red.</p> | 42 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=29495">29495</a>. You sh
ould see one green box below, with no red.</p> |
| 43 <div id="indicator"></div> | 43 <div id="indicator"></div> |
| 44 | 44 |
| 45 <div class="zero-size-item"> | 45 <div class="zero-size-item"> |
| 46 <div class="box"></div> | 46 <div class="box"></div> |
| 47 </div> | 47 </div> |
| 48 | 48 |
| 49 </body> | 49 </body> |
| 50 </html> | 50 </html> |
| OLD | NEW |