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