shape-outside-006.html (2979B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: shape-outside with open areas on both the left & right of 5 the float area</title> 6 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> 8 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> 9 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> 10 <link rel="match" href="reference/shape-outside-006-ref.html"/> 11 <meta name="flags" content="ahem"/> 12 <meta name="assert" content="This test verifies that content wraps only on one side of 13 the float even though there is open area on both the left 14 and right sides of the float."/> 15 <!-- This test is derived from Example 4 in this version of the spec: 16 http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> 17 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 18 <style type="text/css"> 19 .container { 20 width: 250px; 21 font-family: Ahem; 22 font-size: 20px; 23 line-height: 1.5em; 24 border: 1px solid black; 25 padding-top: 5px; 26 } 27 #test { 28 color: green; 29 } 30 #test-float-left { 31 shape-outside: polygon(50px 0px, 100px 100px, 0px 100px); 32 float: left; 33 width: 100px; 34 height: 100px; 35 } 36 #failure-container { 37 z-index: -1; 38 } 39 #test, #failure-container { 40 position: absolute; 41 top: 70px; 42 } 43 .fail { 44 position: absolute; 45 height: 20px; 46 background-color: red; 47 } 48 #bar-1 { 49 top: 11px; 50 left: 66px; 51 width: 160px; 52 } 53 #bar-2 { 54 top: 41px; 55 left: 81px; 56 width: 140px; 57 } 58 #bar-3 { 59 top: 71px; 60 left: 96px; 61 width: 120px; 62 } 63 #triangle { 64 position: absolute; 65 top: 70px; 66 width: 100px; 67 height: 100px; 68 background-color: lightblue; 69 clip-path: polygon(50px 0px, 100px 100px, 0px 100px); 70 } 71 72 </style> 73 </head> 74 <body> 75 <p> 76 The test passes if all there are three green horizontal bars to the right of the 77 triangle that are all inside the rectangle and there should be no green to the left 78 of the triangle. There should be no red. 79 </p> 80 <div id="test" class="container"> 81 <div id="test-float-left"></div> 82 XXXXXXXX XXXXXXX XXXXXX 83 </div> 84 <div id="failure-container"> 85 <div id="bar-1" class="fail"></div> 86 <div id="bar-2" class="fail"></div> 87 <div id="bar-3" class="fail"></div> 88 </div> 89 <div id="triangle"></div> 90 </body> 91 </html>