shape-outside-008-ref.html (2202B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reference File</title> 5 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> 6 <style type="text/css"> 7 #container { 8 position: absolute; 9 top: 70px; 10 width: 262px; 11 height: 150px; 12 border: 1px solid black; 13 } 14 #failure-container { 15 16 } 17 #margin-line { 18 position: absolute; 19 top: 100px; 20 width: 263px; 21 border-bottom: 1px solid black; 22 } 23 .fail { 24 position: absolute; 25 height: 15px; 26 background-color: green; 27 z-index: -1; 28 } 29 #bar-1 { 30 top: 7px; 31 left: 2px; 32 width: 255px; 33 } 34 #bar-2 { 35 top: 37px; 36 left: 2px; 37 width: 255px; 38 } 39 #bar-3 { 40 top: 67px; 41 left: 22px; 42 width: 225px; 43 } 44 #bar-4 { 45 top: 97px; 46 left: 122px; 47 width: 135px; 48 } 49 #bar-5 { 50 top: 127px; 51 left: 152px; 52 width: 105px; 53 } 54 .triangle { 55 position: absolute; 56 width: 100px; 57 height: 100px; 58 background-color: lightblue; 59 clip-path: polygon(0% 50%, 50% 100%, 0 100%);; 60 61 } 62 #triangle-1 { 63 top: 90px; 64 margin-left: 2px; 65 } 66 #triangle-2 { 67 top: 120px; 68 margin-left: 102px; 69 } 70 </style> 71 </head> 72 <body> 73 <p> 74 The test passes if one green bar is inside the top rectangle, four green bars 75 are in the bottom rectangle, and none intersect the triangles. There should be no 76 red. 77 </p> 78 <div id="container"> 79 <div id="bar-1" class="fail"></div> 80 <div id="bar-2" class="fail"></div> 81 <div id="bar-3" class="fail"></div> 82 <div id="bar-4" class="fail"></div> 83 <div id="bar-5" class="fail"></div> 84 </div> 85 <div id="margin-line"></div> 86 <div id="triangle-1" class="triangle"></div> 87 <div id="triangle-2" class="triangle"></div> 88 </body> 89 </html>