layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-032.html
author Brad Werth <bwerth@mozilla.com>
Tue, 12 Jun 2018 11:28:38 -0700
changeset 807792 df2ae5c3a841bad2b5e99e1b6e3b59d792b60d7e
parent 799792 bf4762f10b8d3076d6862e88ca61f90271291508
child 807951 5056d42de0e907fe27844ccce974b45100241c4d
permissions -rw-r--r--
Bug 1466231 Part 4: Correct the size of an element in a submitted WPT test, that was only passing due to this bug. This reftest was submitted by me with an incorrect size for the shape element. It was only passing in Firefox due to a related bug, which is now fixed. The updated size makes this test construct a polygon similar to the one in the shape-outside-polygon-012 test, which was the original intent. MozReview-Commit-ID: CuXe2vTmjS0

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: right float, offset polygon + margin-box + shape-margin</title>
        <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
        <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/#margin-box">
        <link rel="match" href="shape-outside-polygon-032-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
                                     an polygon from the margin box with a shape margin.
                                     Additionally, the shape-outside: polygon element is
                                     offset from its containing block.">
    </head>
    <style>
        @font-face {
            font-family: Ahem;
            src: url(support/Ahem.ttf);
        }
        body {
            margin: 0;
        }
        #red {
            position: absolute;
            top: 50px;
            left: 10px;
            width: 240px;
            height: 240px;
            background-color: red;
        }
        #container {
            position: absolute;
            top: 0px;
            left: -40px;
            font-size: 20px;
            font-family: Ahem;
            line-height: 20px;
            width: 240px;
            height: 240px;
            padding: 50px;
            color: green;
        }
        #test-shape {
            float: right;
            width: 140px;
            height: 140px;
            margin: 10px;
            border: 10px solid transparent;
            padding: 10px;
            shape-margin: 20px;
            shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
        }
        .ref-shape {
            position: absolute;
            background-color: green;
        }
        #ref-1 {
            top: 70px;
            left: 70px;
            width: 180px;
            height: 80px;
        }
        #ref-2 {
            top: 150px;
            left: 150px;
            width: 100px;
            height: 20px;
        }
        #ref-3 {
            top: 170px;
            left: 130px;
            width: 120px;
            height: 60px;
        }
    </style>
    <body>
    <p>The test passes if there is green square and no red.</p>
    <div id="red"></div>
    <div id="container">
        <div id="test-shape"></div>
        XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
    </div>
    <div id="ref-1" class="ref-shape"></div>
    <div id="ref-2" class="ref-shape"></div>
    <div id="ref-3" class="ref-shape"></div>
    </body>
</html>