layout/reftests/bugs/966992-1-ref.html

branch
TOR_BUG_9701
changeset 3
141e0f1194b1
equal deleted inserted replaced
-1:000000000000 0:bf2364ad8e88
1 <!DOCTYPE HTML>
2 <html class="reftest-wait"><head>
3 <meta charset="utf-8">
4 <title>Testcases for overflow-clip-box:content-box</title>
5 <style type="text/css">
6 font-face {
7 font-family: DejaVuSansMono;
8 src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
9 }
10
11 html,body {
12 color:black; background-color:white; font:16px DejaVuSansMono!important; padding:0; margin:7px;
13 }
14
15 input {
16 width: 100px; padding:50px; -moz-appearance:none; overflow-clip-box:padding-box;
17 border: 3px solid black;
18 }
19 textarea, #textarea {
20 width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:padding-box;
21 border: 3px solid black;
22 }
23 #textarea { word-break: break-all; font:14px DejaVuSansMono!important; }
24
25
26 p {
27 position:absolute;
28 margin:0;
29 width:70%;
30 height: 1px;
31 background:magenta;
32 }
33 .rel p { width:200%; }
34 .block {
35 border:1px solid grey; height:50px; width:200px; padding:20px;
36 overflow:auto; overflow-clip-box:padding-box;
37 }
38 .rel { position:relative; }
39 .mask1 { position:absolute; width:20px; background:white; top:0; bottom:0; right:0; }
40 .mask2 { position:absolute; width:20px; background:white; top:0px; bottom:-15px; right:220px; z-index:99; }
41 .mask3 { position:absolute; width:20px; background:white; top:0; bottom:0; left:200px; }
42 .mask4 { position:absolute; height:40px; background:white; top:4px; left:3px; width:210px; z-index:99; }
43 .mask5 { position:absolute; height:40px; background:white; top:3px; right:3px; width:50px; }
44 .button { width:100px; padding:0 50px; overflow:hidden; }
45 </style>
46 <script>
47 function runTest() {
48 // the timeout is for avoiding differences in scrollbar fading
49 document.documentElement.removeAttribute("class");
50 }
51 </script>
52 </head>
53 <body onload="setTimeout(runTest,5000)">
54
55 <div class="rel block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p style="padding-right:20px"></p><div class=mask1></div></div>
56 <div style="float:right">
57
58 <div class="rel block" style="box-sizing:border-box;height:90px"><span style="padding-right:20px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span><div class=mask1></div></div>
59
60 </div>
61
62 <div class="rel block"><span style="padding-right:20px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span><p></p><div class=mask1></div></div>
63 <div id="d1" class="rel block"><span style="padding-right:20px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span><span style="position:relative;"><div class=mask2></div><div class=mask1></div></span><p></p></div>
64 <script>
65 document.getElementById("d1").scrollLeft = "100000";
66 </script>
67 <div class="block"><span style="padding-right:20px"><span style="position:relative;"><div class=mask3></div>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></span><p></p></div>
68
69 <span style="position:relative"><input spellcheck=false type="text" placeholder="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
70 <span style="position:relative"><input spellcheck=false type="text" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span><br>
71 <span style="position:relative"><input spellcheck=false type="password" value="someveryveryveryveryverylongpassword"><div class=mask5></div></span>
72 <span style="position:relative"><input spellcheck=false type="email" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
73 <span style="position:relative"><input spellcheck=false type="blah" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
74 <br>
75 <input spellcheck=false type="button" value="button" class="button" style="overflow-clip-box:initial">
76 <input spellcheck=false type="button" value="button" class="button">
77 <input spellcheck=false type="reset" class="button">
78 <input spellcheck=false type="submit" class="button"><br>
79 <input spellcheck=false type="button" value="" class="button">
80 <input spellcheck=false type="reset" value="" class="button">
81 <input spellcheck=false type="submit" value="" class="button"><br>
82
83 </body>
84 </html>

mercurial