third_party/WebKit/LayoutTests/imported/csswg-test/css-shapes-1/spec-examples/shape-outside-007-expected.html

   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: 260px;
  11           height: 120px;
  12           font-family: Ahem;
  13           font-size: 20px;
  14           line-height: 1.5em;
  15           border: 1px solid black;
  16           padding-left: 2px;
  17         }
  18         #margin-line {
  19           position: absolute;
  20           top: 100px;
  21           width: 263px;
  22           border-bottom: 1px solid black;
  23         }
  24         .bar {
  25             position: absolute;
  26             height: 20px;
  27             background-color: green;
  28         }
  29         #bar-1 {
  30             top: 5px;
  31             width: 240px;
  32         }
  33         #bar-2 {
  34             top: 35px;
  35             width: 240px;
  36         }
  37         #bar-3 {
  38             top: 65px;
  39             left: 22px;
  40             width: 220px;
  41         }
  42         #bar-4 {
  43             top: 95px;
  44             left: 52px;
  45             width: 200px;
  46         }
  47         #triangle {
  48             position: absolute;
  49             top: 90px;
  50             width: 100px;
  51             height: 100px;
  52             background-color: lightblue;
  53             margin-left: 2px;
  54             clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
  55         }
  56     </style>
  57 </head>
  58 <body>
  59     <p>
  60         The test passes if one green bar is inside the top rectangle, three green bars
  61         are in the bottom rectangle, and none intersect the triangle. There should be no red.
  62     </p>
  63     <div id="container">
  64         <div id="bar-1" class="bar"></div>
  65         <div id="bar-2" class="bar"></div>
  66         <div id="bar-3" class="bar"></div>
  67         <div id="bar-4" class="bar"></div>
  68     </div>
  69     <div id="margin-line"></div>
  70     <div id="triangle"></div>
  71 </body>
  72 </html>