third_party/WebKit/LayoutTests/scrollbars/iframe-scrollbar-becomes-custom.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/js-test.js"></script>
   3 <iframe id="i" frameborder="0" style="margin-top: 10px"></iframe>
   4 <div id="content" style="display: none">
   5   <div id="block1" style='background-color: #ccc'>100% width</div><br>
   6   <div style='background-color: #ddf; width: 400px; height: 300px'></div>
   7 </div>
   8 <script>
   9
  10 var idoc = document.querySelector("#i").contentDocument;
  11 var sheet = idoc.head.appendChild(idoc.createElement("style")).sheet;
  12
  13 idoc.body.style.margin = '0';
  14 idoc.body.innerHTML = document.querySelector('#content').innerHTML;
  15
  16 var block = idoc.querySelector("#block1");
  17 var origWidth = block.offsetWidth;
  18
  19 sheet.insertRule("::-webkit-scrollbar { width: 50px; height: 20px; }", 0);
  20 sheet.insertRule("::-webkit-scrollbar-thumb { background: #cce; }", 1);
  21
  22 var width = block.offsetWidth;
  23
  24 shouldBe("250", String(width));
  25 shouldBeTrue("width < origWidth");
  26
  27 </script>