| 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>Opacity-Transform Clipping</title> | 7 <title>Opacity-Transform Clipping</title> |
| 8 | 8 |
| 9 <style type="text/css" media="screen"> | 9 <style type="text/css" media="screen"> |
| 10 .container { | 10 .container { |
| 11 position: absolute; | 11 position: absolute; |
| 12 width: 100px; | 12 width: 100px; |
| 13 height: 100px; | 13 height: 100px; |
| 14 left: 100px; | 14 left: 100px; |
| 15 top: 150px; | 15 top: 150px; |
| 16 outline: 1px solid black; | 16 outline: 1px solid black; |
| 17 opacity: 0.9; | 17 opacity: 0.9; |
| 18 } | 18 } |
| 19 | 19 |
| 20 .box { | 20 .box { |
| 21 width: 10px; | 21 width: 10px; |
| 22 height: 10px; | 22 height: 10px; |
| 23 outline: 12px solid blue; | 23 outline: 12px solid blue; |
| 24 -webkit-transform: translate(50px, 50px); | 24 transform: translate(50px, 50px); |
| 25 } | 25 } |
| 26 | 26 |
| 27 .inner { | 27 .inner { |
| 28 position: absolute; | 28 position: absolute; |
| 29 width: 100px; | 29 width: 100px; |
| 30 height: 100px; | 30 height: 100px; |
| 31 background-color: green; | 31 background-color: green; |
| 32 } | 32 } |
| 33 | 33 |
| 34 #underlay { | 34 #underlay { |
| (...skipping 13 matching lines...) Expand all Loading... |
| 48 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22026">https://bugs.webkit.o
rg/show_bug.cgi?id=22026</a></p> | 48 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22026">https://bugs.webkit.o
rg/show_bug.cgi?id=22026</a></p> |
| 49 <p>Test that elements with transform and opacity on a parent are not clipped. Yo
u should see no red below.</p> | 49 <p>Test that elements with transform and opacity on a parent are not clipped. Yo
u should see no red below.</p> |
| 50 <div class="container"> | 50 <div class="container"> |
| 51 <div class="box"> | 51 <div class="box"> |
| 52 <div class="inner"></div> | 52 <div class="inner"></div> |
| 53 </div> | 53 </div> |
| 54 </div> | 54 </div> |
| 55 | 55 |
| 56 </body> | 56 </body> |
| 57 </html> | 57 </html> |
| OLD | NEW |