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