shape-outside-001-ref.html (2157B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style type="text/css"> 8 body { 9 margin-left: 0; 10 } 11 #container { 12 position: absolute; 13 top: 60px; 14 text-align: center; 15 font-family: Ahem; 16 font-size: 20px; 17 color: green; 18 line-height: 1em; 19 } 20 #level-1 { 21 width: 400px; 22 height: 80px; 23 } 24 #level-2 { 25 width: 200px; 26 height: 40px; 27 margin-left: 100px; 28 } 29 #level-3 { 30 width: 100px; 31 height: 40px; 32 margin-left: 150px; 33 } 34 #level-4 { 35 width: 50px; 36 height: 20px; 37 margin-left: 175px; 38 } 39 #level5 { 40 width: 400px; 41 height: 20px; 42 } 43 #left-triangle, #right-triangle { 44 position: absolute; 45 top: 60px; 46 width: 200px; 47 height: 200px; 48 background-color: lightblue; 49 } 50 #left-triangle { 51 clip-path: polygon(0 0, 200px 200px, 0 200px); 52 } 53 #right-triangle { 54 left: 200px; 55 clip-path: polygon(200px 0, 200px 200px, 0 200px); 56 } 57 </style> 58 </head> 59 <body> 60 <p> 61 The test passes if the green shape does not intersect either of the triangles and 62 there is one green horizontal bar beneath the triangles. There should be no red. 63 </p> 64 <div id="container"> 65 <div id="level-1"> 66 XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX 67 </div> 68 <div id="level-2"> 69 XXXXXXXXX XXXXXXX 70 </div> 71 <div id="level-3"> 72 XXXXX XXX 73 </div> 74 <div id="level-4"> 75 X 76 </div> 77 <br> 78 <div id="level-5"> 79 XXXXXXXXXXXXXXXXX 80 </div> 81 </div> 82 <div id="left-triangle"></div> 83 <div id="right-triangle"></div> 84 </body> 85 </html>