| OLD | NEW |
|---|
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../../resources/run-after-layout-and-paint.js"></script> |
| 1 <script> | 5 <script> |
| 2 if (window.testRunner) | 6 if (window.internals) |
| 3 window.testRunner.dumpAsText(); | 7 internals.runtimeFlags.compositeOpaqueScrollersEnabled = true; |
| 4 | 8 |
| 5 function hasOpaqueCompositedScrollingContentsLayer(layer) { | 9 function hasOpaqueCompositedScrollingContentsLayer(layer) { |
| 6 if (layer.name == "Scrolling Contents Layer") | 10 if (layer.name == "Scrolling Contents Layer") |
| 7 return layer.contentsOpaque; | 11 return layer.contentsOpaque; |
| 8 if (layer.children) { | 12 if (layer.children) { |
| 9 for (var i = 0; i < layer.children.length; i++) { | 13 for (var i = 0; i < layer.children.length; i++) { |
| 10 if (hasOpaqueCompositedScrollingContentsLayer(layer.children[i])) | 14 if (hasOpaqueCompositedScrollingContentsLayer(layer.children[i])) |
| 11 return true; | 15 return true; |
| 12 } | 16 } |
| 13 } | 17 } |
| 14 return false; | 18 return false; |
| 15 } | 19 } |
| 16 | 20 |
| 21 function postChangeTest() { |
| 22 var result = "Should not have opaque composited scrolling contents layer: "; |
| 23 if (!hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.l
ayerTreeAsText(document)))) |
| 24 result += "Pass.\n"; |
| 25 else |
| 26 result += "Fail.\n"; |
| 27 document.getElementById("test-2-output").innerHTML = result; |
| 28 } |
| 29 |
| 17 onload = function() { | 30 onload = function() { |
| 18 if (!window.testRunner || !window.internals) | 31 if (!window.testRunner || !window.internals) |
| 19 return; | 32 return; |
| 20 | 33 |
| 21 var result = ""; | 34 var result = "Should have opaque composited scrolling contents layer: "; |
| 22 result += "Should have opaque composited scrolling contents layer: "; | |
| 23 if (hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.la
yerTreeAsText(document)))) | 35 if (hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.la
yerTreeAsText(document)))) |
| 24 result += "Pass.\n"; | 36 result += "Pass.\n"; |
| 25 else | 37 else |
| 26 result += "Fail.\n"; | 38 result += "Fail.\n"; |
| 27 window.testRunner.setCustomTextOutput(result); | 39 document.getElementById("test-1-output").innerHTML = result; |
| 40 |
| 41 scrollerElement = document.getElementById("scroller"); |
| 42 scrollerElement.style.background = "transparent local content-box"; |
| 43 |
| 44 runAfterLayoutAndPaint(postChangeTest(), false); |
| 28 } | 45 } |
| 29 </script> | 46 </script> |
| 30 <style> | 47 <style> |
| 31 #scroller { | 48 #scroller { |
| 32 background: white local content-box; | 49 background: red local content-box; |
| 33 border: 10px solid rgba(0, 255, 0, 0.5); | 50 border: 10px solid rgba(0, 255, 0, 0.5); |
| 34 overflow: scroll; | 51 overflow: scroll; |
| 35 width: 200px; | 52 width: 200px; |
| 36 height: 200px; | 53 height: 200px; |
| 37 will-change: transform; | |
| 38 } | 54 } |
| 39 .spacer { | 55 .spacer { |
| 40 height: 300px; | 56 height: 300px; |
| 41 } | 57 } |
| 42 </style> | 58 </style> |
| 59 </head> |
| 60 <body> |
| 43 <!-- The scroller's Scrolling Contents Layer should be opaque due to the opaque | 61 <!-- The scroller's Scrolling Contents Layer should be opaque due to the opaque |
| 44 color background. Even though the background has a content-box clip there | 62 color background. Even though the background has a content-box clip there |
| 45 is no gap because the scroller has no padding. This means that we will be | 63 is no gap because the scroller has no padding. This means that we will be |
| 46 able to draw text with subpixel anti-aliasing. | 64 able to draw text with subpixel anti-aliasing. |
| 47 --> | 65 --> |
| 48 <div id="scroller"><div class="spacer"></div></div> | 66 <div id="scroller"><div class="spacer"></div></div> |
| 67 <p>Scroller background should be white</p> |
| 68 <p id="test-1-output"></p> |
| 69 <p id="test-2-output"></p> |
| 70 </body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2259493004:
Fix Compositing of Opaque Scrolling Layers and Add Tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master
