shape-outside-ellipse-052.html (2387B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: left float, offset ellipse + shape-margin in % units</title> 5 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> 8 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> 9 <link rel="match" href="reference/shape-outside-ellipse-052-ref.html"> 10 <meta name="flags" content="ahem" /> 11 <meta name="assert" content="The test verifies that text wraps around a 12 left float with a shape-outside defined as 13 a ellipse with a shape-margin in pixel units. 14 Additionally, the shape-outside: ellipse element 15 is offset from its containing block."> 16 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 17 <style> 18 body { 19 margin: 0; 20 } 21 #container { 22 position: relative; 23 } 24 #test-container { 25 font: 40px/1 Ahem, sans-serif; 26 width: 300px; 27 height: 200px; 28 color: green; 29 padding: 50px; 30 position: absolute; 31 top: -50px; 32 left: -50px; 33 } 34 #test-shape { 35 float: left; 36 width: 140px; 37 height: 140px; 38 margin: 10px; 39 padding: 10px; 40 border: 10px solid transparent; 41 shape-margin: 30px; 42 shape-outside: ellipse(40px 28px); 43 } 44 #line { 45 position: absolute; 46 top: 0px; 47 left: 168px; 48 width: 2px; 49 height: 200px; 50 border-left: 2px solid blue; 51 } 52 #failure { 53 position: absolute; 54 top: 80px; 55 left: 170px; 56 width: 40px; 57 height: 40px; 58 background-color: red; 59 z-index: -1; 60 } 61 </style> 62 </head> 63 <body> 64 <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> 65 <div id="container"> 66 <div id="test-container"> 67 <div id="test-shape"></div> 68 <br/> 69 <br/> 70 X 71 </div> 72 <div id="line"></div> 73 <div id="failure"></div> 74 </div> 75 </body> 76 </html>