shape-outside-polygon-008.html (2168B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: left float, polygon, args in % units</title> 5 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> 8 <link rel="match" href="reference/shape-outside-polygon-007-ref.html"> 9 <meta name="flags" content="ahem" /> 10 <meta name="assert" content="The test verifies that text wraps around a 11 left float with a shape-outside defined as 12 an polygon with the args in px units."> 13 </head> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 body { 17 margin: 0; 18 } 19 #container { 20 position: absolute; 21 top: 50px; 22 left: 10px; 23 font-size: 20px; 24 font-family: Ahem; 25 line-height: 20px; 26 width: 200px; 27 height: 200px; 28 background-color: red; 29 color: green; 30 } 31 #test-shape { 32 float: left; 33 width: 200px; 34 height: 200px; 35 shape-outside: polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%); 36 } 37 .ref-shape { 38 position: absolute; 39 background-color: green; 40 left: 10px; 41 height: 40px; 42 } 43 #ref-1 { 44 top: 90px; 45 width: 120px; 46 } 47 #ref-2 { 48 top: 130px; 49 width: 80px; 50 } 51 #ref-3 { 52 top: 170px; 53 width: 160px; 54 } 55 </style> 56 <body> 57 <p>The test passes if there is green square and no red.</p> 58 <div id="container"> 59 <div id="test-shape"></div> 60 XXXXXXXXXX XXXXXXXXXX XXXX XXXX XXXXXX XXXXXX XX XX XXXXXXXXXX XXXXXXXXXX 61 </div> 62 <div id="ref-1" class="ref-shape"></div> 63 <div id="ref-2" class="ref-shape"></div> 64 <div id="ref-3" class="ref-shape"></div> 65 </body> 66 </html>