third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-shape-margin-percent.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: left float, inset + shape-margin, % units</title>
   5     <script src="../../../resources/ahem.js"></script>
   6     </head>
   7     <style>
   8         #container {
   9             position: absolute;
  10             left: 25px;
  11             top: 50px;
  12             width: 200px;
  13             height: 200px;
  14             font-family: Ahem;
  15             font-size: 20px;
  16             background-color: red;
  17             color: green;
  18         }
  19         #test-shape {
  20             float: left;
  21             width: 200px;
  22             height: 200px;
  23             shape-margin: 10%;
  24             shape-outside: inset(40px 100px 40px 0px);
  25         }
  26         #static-shape {
  27             position: absolute;
  28             left: 25px;
  29             width: 100px;
  30             height: 120px;
  31             top: 70px;
  32             border: 20px solid green;
  33             background-color: green;
  34         }
  35     </style>
  36     <body>
  37         <p>The test passes if there is a green square and no red.</p>
  38         <div id="container">
  39             <div id="test-shape"></div>
  40             XXXXXXXXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXXXXXXXX
  41         </div>
  42         <div id="static-shape"></div>
  43     </body>
  44 </html>