LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: left float, ellipse radii in % units + padding-box</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-ellipse">
   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/#padding-box">
   9         <link rel="match" href="reference/shape-outside-ellipse-013-ref.html">
  10         <meta name="flags" content="ahem" />
  11         <meta name="assert" content="The test verifies that text wraps around a
  12                                      left float with a shape-outside defined as
  13                                      a ellipse from the padding box with the radii
  14                                      in percentage units.">
  15     </head>
  16     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  17     <style>
  18     body {
  19         margin: 0;
  20     }
  21     #container {
  22         position: relative;
  23     }
  24     #test-container {
  25         font: 40px/1 Ahem, sans-serif;
  26         width: 300px;
  27         height: 200px;
  28         color: green;
  29     }
  30     #test-shape {
  31         float: left;
  32         width: 100px;
  33         height: 100px;
  34         margin: 10px;
  35         padding: 25px;
  36         border: 10px solid transparent;
  37         shape-outside: padding-box ellipse(50% 25%);
  38     }
  39     #line {
  40         position: absolute;
  41         top: 0px;
  42         left: 168px;
  43         width: 2px;
  44         height: 200px;
  45         border-left: 2px solid blue;
  46     }
  47     #failure {
  48         position: absolute;
  49         top: 80px;
  50         left: 170px;
  51         width: 40px;
  52         height: 40px;
  53         background-color: red;
  54         z-index: -1;
  55     }
  56     </style>
  57     <body>
  58     <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
  59     <div id="container">
  60         <div id="test-container">
  61             <div id="test-shape"></div>
  62             <br/>
  63             <br/>
  64             X
  65         </div>
  66         <div id="line"></div>
  67         <div id="failure"></div>
  68     </div>
  69     </body>
  70 </html>
  71