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