tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

shape-outside-circle-021.html (2401B)

      1 <!DOCTYPE html>
      2 <html>
      3    <head>
      4        <title>CSS Test: left float, circle + farthest-side + padding-box + shape-margin</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/#farthest-side">
      9        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
     10        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
     11        <link rel="match" href="reference/shape-outside-circle-013-ref.html">
     12        <meta name="flags" content="ahem" />
     13        <meta name="assert" content="The test verifies that text wraps around a
     14                                     left float with a shape-outside defined as
     15                                     a circle with a farthest-side radius from the
     16                                     padding box with a shape-margin.">
     17    </head>
     18    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     19    <style>
     20    body {
     21        margin: 0;
     22    }
     23    #container {
     24        position: relative;
     25    }
     26    #test-container {
     27        font: 40px/1 Ahem, sans-serif;
     28        width: 300px;
     29        height: 200px;
     30        color: green;
     31    }
     32    #test-shape {
     33        float: left;
     34        width: 110px;
     35        height: 110px;
     36        margin: 10px;
     37        padding: 15px;
     38        border: 10px solid transparent;
     39        shape-margin: 10px;
     40        shape-outside: padding-box circle(farthest-side at -10px);
     41    }
     42    #line {
     43        position: absolute;
     44        top: 0px;
     45        left: 168px;
     46        width: 2px;
     47        height: 200px;
     48        border-left: 2px solid blue;
     49    }
     50    #failure {
     51        position: absolute;
     52        top: 80px;
     53        left: 170px;
     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 right 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>