| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <style type="text/css" media="screen"> | 3 <style type="text/css" media="screen"> |
| 4 .container { | 4 .container { |
| 5 display: inline-block; | 5 display: inline-block; |
| 6 width: 200px; | 6 width: 200px; |
| 7 height: 200px; | 7 height: 200px; |
| 8 overflow: hidden; | 8 overflow: hidden; |
| 9 margin: 10px; | 9 margin: 10px; |
| 10 border: 1px solid black; | 10 border: 1px solid black; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .inner { | 13 .inner { |
| 14 width: 100%; | 14 width: 100%; |
| 15 height: 1000px; | 15 height: 1000px; |
| 16 background-color: blue; | 16 background-color: blue; |
| 17 } | 17 } |
| 18 | 18 |
| 19 .compositing { | 19 .compositing { |
| 20 position: absolute; | 20 position: absolute; |
| 21 top: 20px; | 21 top: 20px; |
| 22 left: 20px; | 22 left: 20px; |
| 23 width: 100px; | 23 width: 100px; |
| 24 height: 100px; | 24 height: 100px; |
| 25 -webkit-transform: translateZ(0); | 25 transform: translateZ(0); |
| 26 } | 26 } |
| 27 | 27 |
| 28 .top { | 28 .top { |
| 29 height: 50%; | 29 height: 50%; |
| 30 width: 100%; | 30 width: 100%; |
| 31 background-color: red; | 31 background-color: red; |
| 32 } | 32 } |
| 33 | 33 |
| 34 .bottom { | 34 .bottom { |
| 35 height: 50%; | 35 height: 50%; |
| (...skipping 28 matching lines...) Expand all Loading... |
| 64 <div class="compositing"></div> | 64 <div class="compositing"></div> |
| 65 | 65 |
| 66 <!-- Test repainting when the graphicsLayer offsetFromRenderer changes --> | 66 <!-- Test repainting when the graphicsLayer offsetFromRenderer changes --> |
| 67 <!-- You should see one green square, and no red --> | 67 <!-- You should see one green square, and no red --> |
| 68 <div class="container" style="position: relative;"> | 68 <div class="container" style="position: relative;"> |
| 69 <div class="inner" style="position: relative;"> | 69 <div class="inner" style="position: relative;"> |
| 70 <div class="top"></div> | 70 <div class="top"></div> |
| 71 <div class="bottom"></div> | 71 <div class="bottom"></div> |
| 72 </div> | 72 </div> |
| 73 </div> | 73 </div> |
| OLD | NEW |