testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html
author Brad Werth <bwerth@mozilla.com>
Tue, 17 Apr 2018 13:19:36 -0700
changeset 787959 5beab75354125ea6ec905968675171de4fdcf40e
parent 787772 723a9f786923d9d3ca265f09f4bd7900b79e19af
permissions -rw-r--r--
Bug 1265342 Part 10: Update a shape-outside circle test to make it more precise and correct. The test shape-outside-circle-027.html has two issues that prevent it from matching the reference image. For that test to pass, the text must be floated right by 75 pixels. The two issues are: 1) The circle is defined as 35% of 170 pixels, which calculates to 59.5px. Since the shape-margin is 15px, this makes the total offset less than the target of 75px. 2) The circle is offset upwards by 10 pixels, which introduces a slight angle between the block start of the text and the center of the circle. The cosine of this small angle is slightly less than 1, which reduces the offset by some amount. The changes made here specify the circle radius in whole pixels, and move the center of the circle such that it is between the block start and block end of the floated text, ensuring that the full width of the circle + shape-margin will be used for calculating the float area. MozReview-Commit-ID: JQ9Mc3GU4tW

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: right float, circle with radius in % units + shape-margin + margin-box</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-circle">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
        <link rel="match" href="reference/shape-outside-circle-023-ref.html">
        <meta name="flags" content="ahem" />
        <meta name="assert" content="The test verifies that text wraps around a
                                     right float with a shape-outside defined as
                                     a circle positioned from the margin box with a
                                     shape-margin.">
    </head>
    <style>
    body {
        margin: 0;
    }
    #container {
        position: relative;
    }
    #test-container {
        font: 40px/1 Ahem, sans-serif;
        width: 300px;
        height: 200px;
        color: green;
        text-align: right;
    }
    #test-shape {
        float: right;
        width: 110px;
        height: 110px;
        margin: 10px;
        padding: 10px;
        border: 10px solid transparent;
        shape-margin: 15px;
        shape-outside: margin-box circle(60px);
    }
    #line {
        position: absolute;
        top: 0px;
        left: 140px;
        width: 2px;
        height: 200px;
        border-left: 2px solid blue;
    }
    #failure {
        position: absolute;
        top: 80px;
        left: 100px;
        width: 40px;
        height: 40px;
        background-color: red;
        z-index: -1;
    }
    </style>
    <body>
    <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
    <div id="container">
        <div id="test-container">
            <div id="test-shape"></div>
            <br/>
            <br/>
            X
        </div>
        <div id="line"></div>
        <div id="failure"></div>
    </div>
    </body>
</html>