Blitz - WPT: shape-outside-ellipse-031.html

wpt / css / css-shapes / shape-outside / supported-shapes / ellipse / shape-outside-ellipse-031.html

/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: left float, ellipse radii in % units</title>
        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
        <link rel="match" href="reference/shape-outside-ellipse-030-ref.html">
        <meta name="flags" content="ahem dom" />
        <meta name="assert" content="The test verifies that text wraps around a
                                     left float with a shape-outside defined as
                                     an ellipse with radii in % units.">
    </head>
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
    body {
        margin: 0;
    }
    .container {
        font: 15px Ahem, sans-serif;
        line-height: 20px;
        width: 400px;
        height: 200px;
        color: green;
    }
    .ellipse {
        width: 160px;
        height: 160px;
        shape-outside: ellipse(50% 25% at 50% 25%);
    }
    </style>
    <body>
    <p>The test passes if all of the squares are green. There should be no red.</p>
    <div class="container">
        X<br/>
        <div style="float: left" class="ellipse"></div>
        <span id="test0">X</span><br/>
        <span id="test1">X</span><br/>
        <span id="test2">X</span><br/>
        <span id="test3">X</span><br/>
        <span id="test4">X
    </div>
      <script src="../support/rounded-rectangle.js"></script>
      <script src="../support/subpixel-utils.js"></script>
      <script src="../support/test-utils.js"></script>
      <script>
        verifyTextPoints({
                roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
                containerWidth: 200,
                containerHeight: 200,
                lineHeight: 20
        }, 9);
     </script>
    </body>
</html>

/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Reference File</title>
        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
    </head>
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
        body {
            margin: 0;
        }
        .container {
            position: relative;
            font: 15px Ahem, sans-serif;
            line-height: 20px;
            width: 200px;
            height: 200px;
            color: green;
        }
        .ellipse {
            z-index: -1;
            width: 160px;
            height: 80px;
            border-radius: 80px;
            background-color: blue;
            overflow: hidden;
        }
        #left-ellipse-outline {
            position: absolute;
            top: 20px;
            left: 0px;
        }
        .left-ellipse-float-line {
            float: left;
            clear: left;
            height: 20px;
        }
    </style>
    <body>
        <p>The test passes if all of the squares are green. There should be no red.</p>
        <div class="container">
        X<br/>
            <div id="left-ellipse-outline"></div>
            <!--  generated left-rounded-rect-float-line divs will be inserted here  -->
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X
        </div>

        <script src="../../support/rounded-rectangle.js"></script>
        <script src="../../support/subpixel-utils.js"></script>
        <script>
        genLeftRoundedRectFloatShapeOutsideRefTest({
            roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
            containerWidth: 200,
            containerHeight: 200,
            lineHeight: 20,
            floatElementClassSuffix: "ellipse-float-line",
            insertElementIdSuffix: "ellipse-outline"
        });
        </script>
    </body>
</html>