LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004.html

   1 <!DOCTYPE html>
   2 <title>CSS Test: rounded rectangle shape-outside on floats with clamped radii values</title>
   3 <link rel="author" title="Adobe" href="http://html.adobe.com/">
   4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
   5 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
   6 <link rel="match" href="shape-outside-floats-rounded-rectangle-004-ref.html">
   7 <meta name="flags" content="ahem">
   8 <style>
   9 .container {
  10     font: 20px/1 Ahem, sans-serif;
  11     line-height: 20px;
  12     width: 160px;
  13     height: 80px;
  14     margin: 5px;
  15 }
  16 .float {
  17     float: left;
  18     width: 80px;
  19     height: 80px;
  20     border: 1px solid blue;
  21     border-radius: 50%;
  22 }
  23 .fixed-units {
  24     -webkit-shape-outside: rectangle(0px, 0px, 80px, 80px, 80px, 80px);
  25 }
  26 .different-units {
  27     -webkit-shape-outside: rectangle(0px, 0px, 80px, 80px, 100%, 100%);
  28 }
  29 .relative-units {
  30     -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em);
  31 }
  32 .edge-case {
  33     -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 50%, 50%);
  34 }
  35 </style>
  36 <body>
  37     <div class="container">
  38         <div class="float fixed-units"></div>
  39         X<br/>
  40         X<br/>
  41         X<br/>
  42         X
  43     </div>
  44     <div class="container">
  45         <div class="float relative-units"></div>
  46         X<br/>
  47         X<br/>
  48         X<br/>
  49         X
  50     </div>
  51     <div class="container">
  52         <div class="float different-units"></div>
  53         X<br/>
  54         X<br/>
  55         X<br/>
  56         X
  57     </div>
  58     <div class="container">
  59         <div class="float edge-case"></div>
  60         X<br/>
  61         X<br/>
  62         X<br/>
  63         X
  64     </div>
  65 </body>