1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: clip - auto value</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="author" title="Vasil Dinkov" href="http://www.vadikom.com/">
10 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping">
11 <meta content="dom" name="flags">
12 <meta content="An element must not clip when clip is set to auto." name="assert">
13 <meta http-equiv="Content-Script-Type" content="text/javascript">
14
15 <style type="text/css">
16 #red-overlapped-layer
17 {
18 background-color: red;
19 height: 300px;
20 position: absolute;
21 width: 300px;
22 }
23
24 #red-parent
25 {
26 background-color: red;
27 clip: rect(0, 100px, 100px, 0);
28 height: 200px;
29 position: absolute;
30 width: 200px;
31 }
32
33 #green-child
34 {
35 background-color: green;
36 height: 300px;
37 width: 300px;
38 }
39 </style>
40
41 <script type="text/javascript">
42 function startTest()
43 {
44 document.getElementById("red-parent").style.clip = "auto";
45 }
46 </script>
47
48 </head>
49
50 <body onload="startTest();">
51
52 <p>There should be a big green square and <strong>no red</strong>.</p>
53
54 <div id="red-overlapped-layer"></div>
55
56 <div id="red-parent">
57 <div id="green-child"></div>
58 </div>
59
60 </body>
61 </html>