| <!DOCTYPE HTML> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| /* Let's get this party started */ |
| ::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| |
| /* Track */ |
| ::-webkit-scrollbar-track { |
| -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
| -webkit-border-radius: 10px; |
| border-radius: 10px; |
| } |
| |
| /* Handle */ |
| ::-webkit-scrollbar-thumb { |
| -webkit-border-radius: 10px; |
| border-radius: 10px; |
| background: rgba(255,0,0,0.8); |
| -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); |
| } |
| |
| </style> |
| <iframe src="resources/scrollable-iframe.html"></iframe> |
| <iframe src="resources/scrollable-iframe.html"></iframe> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| var styleElement = document.createElement("style"); |
| var sheet = document.head.appendChild(styleElement).sheet; |
| function addStyle() { |
| function addRule(selector, css){ |
| var propText = Object.keys(css).map(function(p){ |
| return p+":"+css[p] |
| }).join(";"); |
| sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length); |
| }; |
| addRule("::-webkit-scrollbar", {width: "20px",height: "25px"}); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| runAfterLayoutAndPaint(addStyle); |
| </script> |