src/third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-015.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: right float, polygon + content-box + shape-margin</title>
   5         <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
   6         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
   7         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
   8         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
   9         <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
  10         <meta name="flags" content="ahem" />
  11         <meta name="assert" content="The test verifies that text wraps around a
  12                                      right float with a shape-outside defined as
  13                                      an polygon from the content box wtih a shape margin.">
  14     </head>
  15     <style>
  16         body {
  17             margin: 0;
  18         }
  19         #container {
  20             position: absolute;
  21             top: 50px;
  22             left: 10px;
  23             font-size: 20px;
  24             font-family: Ahem;
  25             line-height: 20px;
  26             width: 240px;
  27             height: 240px;
  28             background-color: red;
  29             color: green;
  30         }
  31         #test-shape {
  32             float: right;
  33             width: 200px;
  34             height: 200px;
  35             margin: 5px;
  36             border: 10px solid transparent;
  37             padding: 5px;
  38             shape-margin: 20px;
  39             shape-outside: content-box polygon(30% 20%, 100% 20%, 100% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 40%, 30% 40%);
  40         }
  41         .ref-shape {
  42             position: absolute;
  43             background-color: green;
  44         }
  45         #ref-1 {
  46             top: 90px;
  47             left: 70px;
  48             width: 180px;
  49             height: 80px;
  50         }
  51         #ref-2 {
  52             top: 170px;
  53             left: 170px;
  54             width: 80px;
  55             height: 20px;
  56         }
  57         #ref-3 {
  58             top: 190px;
  59             left: 130px;
  60             width: 120px;
  61             height: 60px;
  62         }
  63     </style>
  64     <body>
  65     <p>The test passes if there is green square and no red.</p>
  66     <div id="container">
  67         <div id="test-shape"></div>
  68         XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
  69     </div>
  70     <div id="ref-1" class="ref-shape"></div>
  71     <div id="ref-2" class="ref-shape"></div>
  72     <div id="ref-3" class="ref-shape"></div>
  73     </body>
  74 </html>