<!DOCTYPE HTML> <html class="reftest-wait"><head> <meta charset="utf-8"> <title>Testcases for overflow-clip-box:content-box</title> <style type="text/css"> font-face { font-family: DejaVuSansMono; src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff); } html,body { color:black; background-color:white; font:16px DejaVuSansMono!important; padding:0; margin:7px; } input { width: 100px; padding:50px; -moz-appearance:none; overflow-clip-box:content-box; border: 3px solid black; background-color: white; } textarea { width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:content-box; border: 3px solid black;font:14px DejaVuSansMono!important; } p { position:absolute; margin:0; width:70%; height: 1px; background:magenta; } .rel p { width:200%; } .block { border:1px solid grey; height:50px; width:200px; padding:20px; overflow:auto; overflow-clip-box:content-box; } .rel { position:relative; } .button { width:0px; padding:0 50px; overflow:hidden; } .pb { overflow-clip-box:padding-box; } .cb { overflow-clip-box:content-box; } </style> <script> function runTest() { // the timeout is for avoiding differences in scrollbar fading document.documentElement.removeAttribute("class"); } </script> </head> <body onload="setTimeout(runTest,5000)"> <div class="rel block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p></div> <div style="float:right"> <div class="block" style="-moz-box-sizing:border-box;height:90px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> </div> <div class="rel block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p></div> <div id="d1" class="rel block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p></div> <script> document.getElementById("d1").scrollLeft = "100000"; </script> <div class="block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p></div> <input spellcheck=false type="text" placeholder="someveryveryveryveryverylongvalue"> <input spellcheck=false type="text" value="someveryveryveryveryverylongvalue"><br> <input spellcheck=false type="password" value="someveryveryveryveryverylongpassword"> <input spellcheck=false type="email" value="someveryveryveryveryverylongvalue"> <input spellcheck=false type="blah" value="someveryveryveryveryverylongvalue"><br> <input spellcheck=false type="button" value="button" class="button" style="overflow-clip-box:initial"> <input spellcheck=false type="button" value="button" class="button pb"> <input spellcheck=false type="reset" class="button pb"> <input spellcheck=false type="submit" class="button pb"><br> <input spellcheck=false type="button" value="button" class="button cb"> <input spellcheck=false type="reset" class="button cb"> <input spellcheck=false type="submit" class="button cb"><br> </body> </html>