|
1 <!DOCTYPE HTML> |
|
2 <html><head> |
|
3 <meta charset="utf-8"> |
|
4 <title>Testcases for overflow-clip-box:content-box</title> |
|
5 <style type="text/css"> |
|
6 html,body { |
|
7 color:black; background-color:white; font:16px monospace; padding:0; margin:7px; |
|
8 } |
|
9 .block { |
|
10 border:1px solid grey; height:50px; width:200px; padding:20px; |
|
11 overflow:auto; overflow-clip-box:padding-box; |
|
12 line-height:1px; |
|
13 } |
|
14 .rel { position:relative; } |
|
15 .mask1 { position:absolute; width:20px; background:white; top:0; bottom:0; right:0; } |
|
16 .mask2 { position:absolute; height:20px; background:white; top:0; left:40px; right:0; } |
|
17 mask { |
|
18 display:block; |
|
19 position:absolute; |
|
20 left: -1px; |
|
21 bottom: -1px; |
|
22 height: 25px; |
|
23 width: 80%; |
|
24 background:black; |
|
25 } |
|
26 </style> |
|
27 </head> |
|
28 <body> |
|
29 |
|
30 <div style="position:relative;"> |
|
31 <div contenteditable=true spellcheck=false tabindex=0 id=x class="rel block"> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<span style="padding-right:20px">X</span><div class=mask2></div><div class=mask1></div></div> |
|
32 <mask></mask> |
|
33 </div> |
|
34 |
|
35 <script> |
|
36 var x = document.getElementById('x'); |
|
37 x.focus(); |
|
38 window.getSelection().collapse(x,0); |
|
39 </script> |
|
40 |
|
41 </body> |
|
42 </html> |