iframe-scrollbar-becomes-custom.html

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<iframe frameborder="0" style="margin-top: 10px"></iframe>
<div id="content" style="display: none">
  <div id="block1" style='background-color: #ccc'>100% width</div><br>
  <div style='background-color: #ddf; width: 400px; height: 300px'></div>
</div>
<script>
test(function() {
    var iframedoc = document.querySelector("iframe").contentDocument;
    var sheet = iframedoc.head.appendChild(iframedoc.createElement("style")).sheet;


    iframedoc.body.style.margin = "0";
    iframedoc.body.innerHTML = document.querySelector("#content").innerHTML;


    var block = iframedoc.querySelector("#block1");
    var origWidth = block.offsetWidth;


    sheet.insertRule("::-webkit-scrollbar { width: 50px; height: 20px; }", 0);
    sheet.insertRule("::-webkit-scrollbar-thumb { background: #cce; }", 1);

    var width = block.offsetWidth;

    assert_equals(250, width);
    assert_less_than(width, origWidth);
});
</script>

chromium/third_party/blink/web_tests/scrollbars/iframe-scrollbar-becomes-custom.html