shape-outside-polygon-032.html (3009B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: right float, offset polygon + margin-box + shape-margin</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-polygon"> 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="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> 10 <link rel="match" href="reference/shape-outside-polygon-032-ref.html"> 11 <meta name="flags" content="ahem" /> 12 <meta name="assert" content="The test verifies that text wraps around a 13 right float with a shape-outside defined as 14 an polygon from the margin box with a shape margin. 15 Additionally, the shape-outside: polygon element is 16 offset from its containing block."> 17 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 18 <style> 19 body { 20 margin: 0; 21 } 22 #red { 23 position: absolute; 24 top: 50px; 25 left: 10px; 26 width: 240px; 27 height: 240px; 28 background-color: red; 29 } 30 #container { 31 position: absolute; 32 top: 0px; 33 left: -40px; 34 font-size: 20px; 35 font-family: Ahem; 36 line-height: 20px; 37 width: 240px; 38 height: 240px; 39 padding: 50px; 40 color: green; 41 } 42 #test-shape { 43 float: right; 44 width: 140px; 45 height: 140px; 46 margin: 10px; 47 border: 10px solid transparent; 48 padding: 10px; 49 shape-margin: 20px; 50 shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%); 51 } 52 .ref-shape { 53 position: absolute; 54 background-color: green; 55 } 56 #ref-1 { 57 top: 70px; 58 left: 70px; 59 width: 180px; 60 height: 80px; 61 } 62 #ref-2 { 63 top: 150px; 64 left: 150px; 65 width: 100px; 66 height: 20px; 67 } 68 #ref-3 { 69 top: 170px; 70 left: 130px; 71 width: 120px; 72 height: 60px; 73 } 74 </style> 75 </head> 76 <body> 77 <p>The test passes if there is green square and no red.</p> 78 <div id="red"></div> 79 <div id="container"> 80 <div id="test-shape"></div> 81 XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX 82 </div> 83 <div id="ref-1" class="ref-shape"></div> 84 <div id="ref-2" class="ref-shape"></div> 85 <div id="ref-3" class="ref-shape"></div> 86 </body> 87 </html>