| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 body { |
| 6 margin: 0; |
| 7 background-color: #fff; |
| 8 height: 2000px; |
| 9 } |
| 10 |
| 11 .Box { |
| 12 width: 200px; |
| 13 height: 200px; |
| 14 position: fixed; |
| 15 top: 0; |
| 16 } |
| 17 |
| 18 .Box-opaque { |
| 19 background-color: green; |
| 20 left: 0; |
| 21 } |
| 22 .Box-transparent { |
| 23 background-color: rgba(255, 0, 0, 0.99); |
| 24 left: 250px; |
| 25 } |
| 26 |
| 27 .Box-overflow, .Box-overflowHidden { |
| 28 background-color: green; |
| 29 top: 250px; |
| 30 width: 25px; |
| 31 height: 25px; |
| 32 } |
| 33 .Box-overflow { |
| 34 background-color: red; |
| 35 left: 0; |
| 36 } |
| 37 .Box-overflowHidden { |
| 38 left: 100px; |
| 39 overflow: hidden; |
| 40 } |
| 41 |
| 42 .Box-overflow-child { |
| 43 width: 50px; |
| 44 height: 50px; |
| 45 } |
| 46 </style> |
| 47 |
| 48 <script> |
| 49 window.addEventListener('load', function() { |
| 50 if (window.testRunner && window.internals) { |
| 51 window.testRunner.setCustomTextOutput(window.internals.layerTreeAsText(doc
ument)); |
| 52 } |
| 53 }) |
| 54 </script> |
| 55 </head> |
| 56 <body> |
| 57 <!-- SHOULD composite --> |
| 58 <div class="Box Box-opaque"></div> |
| 59 |
| 60 <!-- This box is slightly transparent; SHOULD not composite --> |
| 61 <div class="Box Box-transparent"></div> |
| 62 |
| 63 <!-- This has text overflow; SHOULD NOT composite --> |
| 64 <div class="Box Box-overflow"> |
| 65 <div class="Box-overflow-child"> |
| 66 This is some overflowing text |
| 67 </div> |
| 68 </div> |
| 69 |
| 70 <!-- This has text overflow but hides it; SHOULD composite --> |
| 71 <div class="Box Box-overflowHidden"> |
| 72 <div class="Box-overflow-child"> |
| 73 This is some overflowing text |
| 74 </div> |
| 75 </div> |
| 76 </body> |
| 77 </html> |
| OLD | NEW |