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

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