1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: CSS clipping test</title>
5 <link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping">
7 <style type="text/css">
8 .green {
9 width: 100px;
10 height: 200px;
11 background-color: green;
12 border: 10px solid red;
13 }
14
15 .clip {
16 clip: rect(10px 110px 110px 10px);
17 }
18
19 .positioned {
20 position: absolute;
21 overflow: scroll;
22 }
23
24 .tall {
25 height: 1000px;
26 }
27 p
28 {
29 height: 40px;
30 }
31 </style>
32 </head>
33 <body>
34 <p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p>
35
36 <!-- This test is checking to make sure clip applies to the element itself,
37 starts from the border edge, and clips out scrollbars. The bottom
38 of the scrolling mechanism should be clipped. -->
39
40 <div class="clip green positioned">
41 <div class="tall"></div>
42 </div>
43 </body>
44 </html>