custom-scrollbar-for-iframe-changing-dynamically.html

<!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>

chromium/third_party/blink/web_tests/scrollbars/custom-scrollbar-for-iframe-changing-dynamically.html