<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>overflow on body should not propagate to the viewport when root is not html:html</title>
  <style>
   html { overflow:visible; }
   body { overflow:scroll; width:10em; height:10em; border:thin solid; color:navy; }
   .filler { color:gray; }
  </style>
  <script>
   window.onload = function() {
     var oldElm = document.documentElement;
     var newElm = document.createElementNS("urn:foo:bogus", "html");
     while (oldElm.firstChild)
       newElm.appendChild(oldElm.firstChild);
     document.replaceChild(newElm, oldElm);
     document.getElementsByTagName("p")[0].firstChild.data = "There should be scrollbars for this box -- not for the viewport.";
   }
  </script>
 </head>
 <body>
  <p>FAIL (script didn't run)</p>
  <p class="filler">This is filler text.</p>
  <p class="filler">This is filler text.</p>
  <p class="filler">This is filler text.</p>
  <p class="filler">This is filler text.</p>
 </body>
</html>