|
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 } |
|
13 .rel { position:relative; } |
|
14 .mask1 { position:absolute; width:20px; background:white; top:0; bottom:0; right:0; } |
|
15 mask { |
|
16 display:block; |
|
17 position:absolute; |
|
18 left: -1px; |
|
19 bottom: -1px; |
|
20 height: 25px; |
|
21 width: 80%; |
|
22 background:black; |
|
23 } |
|
24 </style> |
|
25 </head> |
|
26 <body> |
|
27 |
|
28 <div style="position:relative;"> |
|
29 <div contenteditable=true spellcheck=false tabindex=0 id=x class="rel block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<span style="padding-right:20px">X</span><div class=mask1></div></div> |
|
30 <mask></mask> |
|
31 </div> |
|
32 |
|
33 <script> |
|
34 var x = document.getElementById('x'); |
|
35 x.focus(); |
|
36 window.getSelection().collapse(x,0); |
|
37 </script> |
|
38 |
|
39 </body> |
|
40 </html> |