<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Reference File</title> <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> <style type="text/css"> #container { position: absolute; top: 70px; width: 262px; height: 150px; border: 1px solid black; } #failure-container { } #margin-line { position: absolute; top: 100px; width: 263px; border-bottom: 1px solid black; } .fail { position: absolute; height: 15px; background-color: green; z-index: -1; } #bar-1 { top: 7px; left: 2px; width: 255px; } #bar-2 { top: 37px; left: 2px; width: 255px; } #bar-3 { top: 67px; left: 22px; width: 225px; } #bar-4 { top: 97px; left: 122px; width: 135px; } #bar-5 { top: 127px; left: 152px; width: 105px; } .triangle { position: absolute; width: 100px; height: 100px; background-color: lightblue; clip-path: polygon(0% 50%, 50% 100%, 0 100%);; } #triangle-1 { top: 90px; margin-left: 2px; } #triangle-2 { top: 120px; margin-left: 102px; } </style> </head> <body> <p> The test passes if one green bar is inside the top rectangle, four green bars are in the bottom rectangle, and none intersect the triangles. There should be no red. </p> <div id="container"> <div class="fail" id="bar-1"></div> <div class="fail" id="bar-2"></div> <div class="fail" id="bar-3"></div> <div class="fail" id="bar-4"></div> <div class="fail" id="bar-5"></div> </div> <div id="margin-line"></div> <div class="triangle" id="triangle-1"></div> <div class="triangle" id="triangle-2"></div> </body></html>