|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>glyph clipping (reference)</title> |
|
5 <style> |
|
6 #clip { position: absolute; |
|
7 overflow: hidden; |
|
8 font-size: 16px; |
|
9 width: 500px; |
|
10 height: 300px;} |
|
11 /* Offsets keep the text far enough away from clip boundaries so that |
|
12 cairo knows the text is within the clip. Non-unit alpha color makes |
|
13 the bug show even without antialiasing. */ |
|
14 #text { position: absolute; |
|
15 left: 100px; |
|
16 top: 100px; |
|
17 color: rgba(0,0,0,0.4)} |
|
18 #cover { position: absolute; |
|
19 top: 90px; |
|
20 left: 120px; |
|
21 height: 50px; |
|
22 width: 60px; |
|
23 background: transparent; } |
|
24 #mod { position: absolute; |
|
25 top: 400px; |
|
26 left: 0px; |
|
27 height: 2000px; |
|
28 width: 600px; |
|
29 background: transparent; } |
|
30 </style> |
|
31 </head> |
|
32 <body> |
|
33 <div id="clip"> |
|
34 <div id="text"> |
|
35 Some text that was</br> |
|
36 initially partially covered.</br> |
|
37 </div> |
|
38 </div> |
|
39 <div id="cover"> |
|
40 </div> |
|
41 <div id="mod"> |
|
42 </div> |
|
43 </body> |
|
44 <script> |
|
45 scrollTo(0,1); |
|
46 </script> |
|
47 </html> |