LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html

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