clipping-017.xht (1879B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <!-- Based on http://www.brothercake.com/Ref/clip.html --> 5 <title>CSS Test: Convoluted clip() test</title> 6 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/clipping/017.xml" type="application/xhtml+xml"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> 9 <style type="text/css"> 10 #test-outer { 11 width: 150px; height: 150px; border: 20px solid lime; background-color: teal; 12 position: absolute; left: 60px; top: 60px; clip: rect(0px, 100px, 100px, 0px); 13 } 14 #test-middle { 15 width: 250px; height: 150px; border: 10px solid fuchsia; background-color: red; 16 position: absolute; left: 0px; top: 0px; clip: rect(0px, 50px, 50px, 0px); 17 } 18 #test-inner { 19 width: 150px; height: 250px; border: 10px solid aqua; background-color: yellow; 20 } 21 p { margin: 20px; font: 20px/1 serif; } 22 #control-outer { 23 width: 80px; height: 80px; border: 20px lime; border-style: solid none none solid; background: teal; 24 margin: 20px 0 0 200px; 25 } 26 #control-middle { 27 width: 40px; height: 40px; border: 10px fuchsia; border-style: solid none none solid; background: red; 28 } 29 #control-inner { 30 width: 30px; height: 30px; border: 10px aqua; border-style: solid none none solid; background: yellow; 31 } 32 </style> 33 </head> 34 <body> 35 <p>The following two pictograms should look identical.</p> 36 <div id="test-outer"> 37 <div id="test-middle"> 38 <div id="test-inner"> 39 </div> 40 </div> 41 </div> 42 <div id="control-outer"> 43 <div id="control-middle"> 44 <div id="control-inner"> 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>