| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <style> | 2 <style> |
| 3 #scroller { | 3 #scroller { |
| 4 overflow: scroll; | 4 overflow: scroll; |
| 5 height: 300px; | 5 height: 300px; |
| 6 width: 300px; | 6 width: 300px; |
| 7 background-color: red; | 7 background-color: red; |
| 8 } | 8 } |
| 9 | 9 |
| 10 #inner { | 10 #scrolled { |
| 11 height: 1000px; | 11 height: 1000px; |
| 12 width: 250px; | 12 width: 250px; |
| 13 background-color: blue; | 13 background-color: green; |
| 14 } | 14 } |
| 15 | 15 |
| 16 #fixed { | 16 #fixed { |
| 17 position: fixed; | 17 position: fixed; |
| 18 height: 100px; | 18 height: 100px; |
| 19 width: 100px; | 19 width: 100px; |
| 20 background-color: green; | 20 background-color: green; |
| 21 top: 400px; | 21 top: 400px; |
| 22 left: 100px; | 22 left: 100px; |
| 23 } | 23 } |
| 24 </style> | 24 </style> |
| 25 <div id="scroller"> | 25 <div id="scroller"> |
| 26 <div id="inner"> | 26 <div id="scrolled"></div> |
| 27 <div id="fixed"></div> | 27 <div id="fixed"></div> |
| 28 </div> | |
| 29 </div> | 28 </div> |
| 30 <script> | 29 <script> |
| 31 function isUsingCompositedScrolling(layer) { | 30 function isUsingCompositedScrolling(layer) { |
| 32 if (layer.bounds[1] == 1000) | 31 if (layer.bounds[1] == 1000) |
| 33 return true; | 32 return true; |
| 34 if (layer.children) { | 33 if (layer.children) { |
| 35 for (var i = 0; i < layer.children.length; i++) { | 34 for (var i = 0; i < layer.children.length; i++) { |
| 36 if (isUsingCompositedScrolling(layer.children[i])) | 35 if (isUsingCompositedScrolling(layer.children[i])) |
| 37 return true; | 36 return true; |
| 38 } | 37 } |
| 39 } | 38 } |
| 40 return false; | 39 return false; |
| 41 } | 40 } |
| 42 | 41 |
| 43 if (window.internals) | 42 if (window.internals) |
| 44 window.internals.settings.setPreferCompositingToLCDTextEnabled(true); | 43 window.internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| 45 | 44 |
| 46 if (window.testRunner) { | 45 if (window.testRunner) { |
| 47 window.testRunner.dumpAsText(); | 46 window.testRunner.dumpAsText(); |
| 48 window.testRunner.waitUntilDone(); | 47 window.testRunner.waitUntilDone(); |
| 49 } | 48 } |
| 50 | 49 |
| 51 var result = ""; | 50 var result = ""; |
| 52 | 51 |
| 53 onload = function() { | 52 onload = function() { |
| 54 if (window.internals) { | 53 if (window.internals) { |
| 55 result += "No clip path descendant (should be using composited scrolling
): "; | 54 result += "No border radius (should be using composited scrolling): "; |
| 56 if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsTe
xt(document)))) | 55 if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsTe
xt(document)))) |
| 57 result += "Pass.\n"; | 56 result += "Pass.\n"; |
| 58 else | 57 else |
| 59 result += "Fail.\n" | 58 result += "Fail.\n" |
| 60 } | 59 } |
| 61 document.getElementById("inner").style.webkitClipPath = "polygon(40px 550px,
432px 302px,409px 237px,46px 156px)"; | 60 document.getElementById("scroller").style.borderRadius = '5px'; |
| 62 requestAnimationFrame(function() { | 61 requestAnimationFrame(function() { |
| 63 if (window.internals) { | 62 if (window.internals) { |
| 64 result += "Has clip path descendant (should not be using composited
scrolling): "; | 63 result += "Has border radius (should not be using composited scrolli
ng): "; |
| 65 if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTre
eAsText(document)))) | 64 if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTre
eAsText(document)))) |
| 66 result += "Pass.\n"; | 65 result += "Pass.\n"; |
| 67 else | 66 else |
| 68 result += "Fail.\n" | 67 result += "Fail.\n" |
| 69 } | 68 } |
| 70 | 69 |
| 71 if (window.testRunner) { | 70 if (window.testRunner) { |
| 72 window.testRunner.setCustomTextOutput(result); | 71 window.testRunner.setCustomTextOutput(result); |
| 73 window.testRunner.notifyDone(); | 72 window.testRunner.notifyDone(); |
| 74 } | 73 } |
| 75 }); | 74 }); |
| 76 }; | 75 }; |
| 77 </script> | 76 </script> |
| OLD | NEW |