Changeset 175721 in webkit


Ignore:
Timestamp:
Nov 6, 2014 3:20:53 PM (9 years ago)
Author:
Bem Jones-Bey
Message:

[CSS Shapes] the spec-examples reftests are off by a few pixels
​https://bugs.webkit.org/show_bug.cgi?id=135927

Reviewed by Zoltan Horvath.

Import new versions of the spec example tests that are js tests
instead of ref tests so that they can properly handle the small pixel
differences in rendering between platforms.

  • TestExpectations:
  • css3/shapes/spec-examples/shape-outside-010-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-010-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-010.html:
  • css3/shapes/spec-examples/shape-outside-011-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-011-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-011.html:
  • css3/shapes/spec-examples/shape-outside-012-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-012-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-012.html:
  • css3/shapes/spec-examples/shape-outside-013-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-013-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-013.html:
  • css3/shapes/spec-examples/shape-outside-014-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-014-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-014.html:
  • css3/shapes/spec-examples/shape-outside-015-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-015-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-015.html:
  • css3/shapes/spec-examples/shape-outside-016-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-016-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-016.html:
  • css3/shapes/spec-examples/shape-outside-017-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-017-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-017.html:
  • css3/shapes/spec-examples/shape-outside-018-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-018-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-018.html:
  • css3/shapes/spec-examples/shape-outside-019-expected.html: Removed.
  • css3/shapes/spec-examples/shape-outside-019-expected.txt: Added.
  • css3/shapes/spec-examples/shape-outside-019.html:
  • css3/shapes/spec-examples/support/spec-example-utils.js: Added.

(.runTest):
(approxShapeTest):

  • css3/shapes/spec-examples/support/w3c-import.log:
  • css3/shapes/spec-examples/w3c-import.log:
Location:
trunk/LayoutTests
Files:
11 added
10 deleted
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r175716 r175721  
     12014-11-06  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [CSS Shapes] the spec-examples reftests are off by a few pixels
     4        https://bugs.webkit.org/show_bug.cgi?id=135927
     5
     6        Reviewed by Zoltan Horvath.
     7
     8        Import new versions of the spec example tests that are js tests
     9        instead of ref tests so that they can properly handle the small pixel
     10        differences in rendering between platforms.
     11
     12        * TestExpectations:
     13        * css3/shapes/spec-examples/shape-outside-010-expected.html: Removed.
     14        * css3/shapes/spec-examples/shape-outside-010-expected.txt: Added.
     15        * css3/shapes/spec-examples/shape-outside-010.html:
     16        * css3/shapes/spec-examples/shape-outside-011-expected.html: Removed.
     17        * css3/shapes/spec-examples/shape-outside-011-expected.txt: Added.
     18        * css3/shapes/spec-examples/shape-outside-011.html:
     19        * css3/shapes/spec-examples/shape-outside-012-expected.html: Removed.
     20        * css3/shapes/spec-examples/shape-outside-012-expected.txt: Added.
     21        * css3/shapes/spec-examples/shape-outside-012.html:
     22        * css3/shapes/spec-examples/shape-outside-013-expected.html: Removed.
     23        * css3/shapes/spec-examples/shape-outside-013-expected.txt: Added.
     24        * css3/shapes/spec-examples/shape-outside-013.html:
     25        * css3/shapes/spec-examples/shape-outside-014-expected.html: Removed.
     26        * css3/shapes/spec-examples/shape-outside-014-expected.txt: Added.
     27        * css3/shapes/spec-examples/shape-outside-014.html:
     28        * css3/shapes/spec-examples/shape-outside-015-expected.html: Removed.
     29        * css3/shapes/spec-examples/shape-outside-015-expected.txt: Added.
     30        * css3/shapes/spec-examples/shape-outside-015.html:
     31        * css3/shapes/spec-examples/shape-outside-016-expected.html: Removed.
     32        * css3/shapes/spec-examples/shape-outside-016-expected.txt: Added.
     33        * css3/shapes/spec-examples/shape-outside-016.html:
     34        * css3/shapes/spec-examples/shape-outside-017-expected.html: Removed.
     35        * css3/shapes/spec-examples/shape-outside-017-expected.txt: Added.
     36        * css3/shapes/spec-examples/shape-outside-017.html:
     37        * css3/shapes/spec-examples/shape-outside-018-expected.html: Removed.
     38        * css3/shapes/spec-examples/shape-outside-018-expected.txt: Added.
     39        * css3/shapes/spec-examples/shape-outside-018.html:
     40        * css3/shapes/spec-examples/shape-outside-019-expected.html: Removed.
     41        * css3/shapes/spec-examples/shape-outside-019-expected.txt: Added.
     42        * css3/shapes/spec-examples/shape-outside-019.html:
     43        * css3/shapes/spec-examples/support/spec-example-utils.js: Added.
     44        (.runTest):
     45        (approxShapeTest):
     46        * css3/shapes/spec-examples/support/w3c-import.log:
     47        * css3/shapes/spec-examples/w3c-import.log:
     48
    1492014-11-06  Dean Jackson  <dino@apple.com>
    250

  • trunk/LayoutTests/TestExpectations

    r175641 r175721  
    137137webkit.org/b/135923 css3/shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html [ ImageOnlyFailure ]
    138138webkit.org/b/135923 css3/shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html [ ImageOnlyFailure ]
    139 
    140 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-010.html [ ImageOnlyFailure ]
    141 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-011.html [ ImageOnlyFailure ]
    142 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-012.html [ ImageOnlyFailure ]
    143 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-013.html [ ImageOnlyFailure ]
    144 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-014.html [ ImageOnlyFailure ]
    145 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-015.html [ ImageOnlyFailure ]
    146 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-016.html [ ImageOnlyFailure ]
    147 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-017.html [ ImageOnlyFailure ]
    148 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-018.html [ ImageOnlyFailure ]
    149 webkit.org/b/135927 css3/shapes/spec-examples/shape-outside-019.html [ ImageOnlyFailure ]
    150139
    151140webkit.org/b/137788 css3/shapes/shape-outside/shape-image/shape-image-010.html [ ImageOnlyFailure ]

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-010.html

    r172733 r175721  
    44    <title>CSS Test: Shape from image - url(), alpha channel, opacity 0</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-010-ref.html"/>
    9     <meta name="flags" content="ahem"/>
    10     <meta name="assert" content="This test verifies that the content flows around the
     9    <meta name="flags" content="ahem dom"/>
     10    <meta name="assert" content="This test verifies that the content flows around the
    1111                                 shape defined in the images alpha channel that is completely
    1212                                 transparent."/>
    … …  
    1515    <style type="text/css">
    1616        .container {
    17           position: absolute;
    18           top: 70px;
    1917          font-family: Ahem;
    2018          font-size: 20px;
    … …  
    2927            -webkit-shape-outside: url("support/circle-no-shadow.png");
    3028        }
    31         #failure {
    32             width: 300px;
    33             color: red;
    34             z-index: -1;
    35         }
    36         #line-1, #line-5 { margin-left: 182px; }
    37         #line-2, #line-4 { margin-left: 199px; }
    38         #line-3 { margin-left: 201px; }
    3929    </style>
     30    <script src="../../../resources/testharness.js"></script>
     31    <script src="../../../resources/testharnessreport.js"></script>
     32    <script src="support/spec-example-utils.js"></script>
    4033</head>
    4134<body>
    … …  
    4437        the long green bar is beneath the circle, and no bars intersect the circle. There
    4538        should be no red.
    46     </p>   
     39    </p>
    4740    <div id="test" class="container">
    4841        <img id="image" src="support/circle-no-shadow.png"/>
    49         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    50     </div>
    51     <div id="failure" class="container">
     42        <span id="line-0">XXXXXX</span>
    5243        <span id="line-1">XXXXXX</span>
    5344        <span id="line-2">XXXXXX</span>
    5445        <span id="line-3">XXXXXX</span>
    5546        <span id="line-4">XXXXXX</span>
    56         <span id="line-5">XXXXXX</span>
    57         XXXXXXXXXXXXXXX
     47        <span id="line-5">XXXXXXXXXXXXXXX</span>
    5848    </div>
     49    <div id="log"></div>
     50    <script>
     51        approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]);
     52    </script>
    5953</body>
    6054</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-011.html

    r172733 r175721  
    44    <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-011-ref.html"/>
    9     <meta name="flags" content="ahem"/>
    10     <meta name="assert" content="This test verifies that the content flows around the
     9    <meta name="flags" content="ahem dom"/>
     10    <meta name="assert" content="This test verifies that the content flows around the
    1111                                 shape defined in the images alpha channel that has some
    1212                                 opacity."/>
    … …  
    1515    <style type="text/css">
    1616        .container {
    17           position: absolute;
    18           top: 70px;
    1917          width: 400px;
    2018          font-family: Ahem;
    … …  
    2927            -webkit-shape-outside: url("support/circle-shadow.png");
    3028        }
    31         #failure {
    32             width: 300px;
    33             color: red;
    34             z-index: -1;
    35         }
    36         #line-1, #line-5 { margin-left: 218px; }
    37         #line-2, #line-4 { margin-left: 236px; }
    38         #line-3 { margin-left: 238px; }
    39         #line-6 { margin-left: 160px; }
    4029    </style>
     30    <script src="../../../resources/testharness.js"></script>
     31    <script src="../../../resources/testharnessreport.js"></script>
     32    <script src="support/spec-example-utils.js"></script>
    4133</head>
    4234<body>
    … …  
    4436        The test passes if the green horizontal bars are to the right of the circle,
    4537        and no bars intersect the circle's shadow. There should be no red.
    46     </p>   
     38    </p>
    4739    <div id="test" class="container">
    4840        <img id="image" src="support/circle-shadow.png"/>
    49         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
    50     </div>
    51     <div id="failure" class="container">
     41        <span id="line-0">XXXXXX</span>
    5242        <span id="line-1">XXXXXX</span>
    5343        <span id="line-2">XXXXXX</span>
    … …  
    5545        <span id="line-4">XXXXXX</span>
    5646        <span id="line-5">XXXXXX</span>
    57         <div id="line-6">XXXXXX</div>
    5847    </div>
     48    <div id="log"></div>
     49    <script>
     50        approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
     51    </script>
    5952</body>
    6053</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-012.html

    r172733 r175721  
    44    <title>CSS Test: Shape from image - shape-image-threshold - 0.9</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    89    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
    910    <link rel="match" href="reference/shape-outside-012-ref.html"/>
    10     <meta name="flags" content="ahem"/>
    11     <meta name="assert" content="This test verifies content flows around a shape that is 
    12                                  defined in the image's alpha channel and adjusted by the 
     11    <meta name="flags" content="ahem dom"/>
     12    <meta name="assert" content="This test verifies content flows around a shape that is
     13                                 defined in the image's alpha channel and adjusted by the
    1314                                 image-threshold" />
    1415    <!--  This test is derived from Example 7 in this version of the spec:
    … …  
    1617    <style type="text/css">
    1718        .container {
    18           position: absolute;
    19           top: 70px;
    2019          width: 400px;
    21           height: 105px;
    2220          font-family: Ahem;
    2321          font-size: 20px;
    … …  
    3230            -webkit-shape-image-threshold: 0.9;
    3331        }
    34         #failure {
    35             width: 300px;
    36             color: red;
    37             z-index: -1;
    38         }
    39         #line-1, #line-5 { margin-left: 181px; }
    40         #line-2, #line-4 { margin-left: 199px; }
    41         #line-3 { margin-left: 201px; }
    4232    </style>
     33    <script src="../../../resources/testharness.js"></script>
     34    <script src="../../../resources/testharnessreport.js"></script>
     35    <script src="support/spec-example-utils.js"></script>
    4336</head>
    4437<body>
    4538    <p>
    46         The test passes if the short green horizontal bars are the right of the circle, all 
    47         intersect the shadow, none intersect the circle and the long green bar is beneath the 
     39        The test passes if the short green horizontal bars are the right of the circle, all
     40        intersect the shadow, none intersect the circle and the long green bar is beneath the
    4841        circle. There should be no red.
    4942    </p>
    5043    <div id="test" class="container">
    5144        <img id="test-image" src="support/circle-shadow.png"/>
    52         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    53     </div>
    54     <div id="failure" class="container">
     45        <span id="line-0">XXXXXX</span>
    5546        <span id="line-1">XXXXXX</span>
    5647        <span id="line-2">XXXXXX</span>
    5748        <span id="line-3">XXXXXX</span>
    5849        <span id="line-4">XXXXXX</span>
    59         <span id="line-5">XXXXXX</span>
    60         XXXXXXXXXXXXXXX
     50        <span id="line-5">XXXXXXXXXXXXXXX</span>
    6151    </div>
     52    <div id="log"></div>
     53    <script>
     54        approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]);
     55    </script>
    6256</body>
    6357</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-013.html

    r172733 r175721  
    44    <title>CSS Test: Shape from image - shape-margin</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-013-ref.html"/>
    9     <meta name="flags" content="ahem"/>
    10     <meta name="assert" content="This test verifies that the content flows around the
    11                                  shape defined in the images alpha channel and adjusted by
     9    <meta name="flags" content="ahem dom"/>
     10    <meta name="assert" content="This test verifies that the content flows around the
     11                                 shape defined in the images alpha channel and adjusted by
    1212                                 the shape-margin."/>
    1313    <!--  This test is derived from Example 7 in this version of the spec:
    1414         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1515    <style type="text/css">
    16         .container {
    17           position: absolute;
    18           top: 85px;
    19           left: 25px;
    20           font-family: Ahem;
    21           font-size: 20px;
    22           line-height: 2em;
    23         }
    2416        #test {
     17            position: relative;
    2518            width: 400px;
    2619            color: green;
     20            font-family: Ahem;
     21            font-size: 20px;
     22            line-height: 2em;
    2723        }
    2824        #test-image {
    … …  
    3329        #margin-circle {
    3430            position: absolute;
    35             top: 70px;
    36             left: 10px;
     31            top: -15px;
     32            left: -15px;
    3733            width: 230px;
    3834            height: 230px;
    3935            background-color: blue;
    4036            border-radius: 150px;
    41         }
    42         #failure {
    43             width: 300px;
    44             color: red;
    4537            z-index: -1;
    4638        }
    47         #line-1, #line-5 { margin-left: 200px; }
    48         #line-2, #line-4 { margin-left: 214px; }
    49         #line-3 { margin-left: 216px; }
    50         #line-6 { margin-left: 158px; }
    5139    </style>
     40    <script src="../../../resources/testharness.js"></script>
     41    <script src="../../../resources/testharnessreport.js"></script>
     42    <script src="support/spec-example-utils.js"></script>
    5243</head>
    5344<body>
    … …  
    5748        should be no red.
    5849    </p>
    59     <div id="margin-circle"></div>
    60     <div id="test" class="container">
     50    <div id="test">
    6151        <img id="test-image" src="support/circle-no-shadow.png"/>
    62         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXX
    63     </div>
    64     <div id="failure" class="container">
     52        <div id="margin-circle"></div>
     53        <span id="line-0">XXXXXX</span>
    6554        <span id="line-1">XXXXXX</span>
    6655        <span id="line-2">XXXXXX</span>
    … …  
    6857        <span id="line-4">XXXXXX</span>
    6958        <span id="line-5">XXXXXX</span>
    70         <span id="line-6">XXXXXX</span>
    71         XXXXXXXXXXXXX
     59        <span id="line-6">XXXXXXXXXXXXX</span>
    7260    </div>
     61    <div id="log"></div>
     62    <script>
     63        approxShapeTest('test', 'line-', 2, [200, 214, 216, 214, 200, 158, 0]);
     64    </script>
    7365</body>
    7466</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-014.html

    r172733 r175721  
    44    <title>CSS Test: Shape from box value - margin-box</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-014-ref.html"/>
    9     <meta name="flags" content="ahem"/>
     9    <meta name="flags" content="ahem dom"/>
    1010    <meta name="assert" content="This test verifies that content wraps around a shape
    1111                                 defined by its margin box."/>
    … …  
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16             position: absolute;
    17             top: 70px;
     15        #test {
     16            color: green;
     17            position: relative;
    1818            width: 400px;
    1919            font-family: Ahem;
    2020            font-size: 20px;
    2121            line-height: 2em;
    22         }
    23         #test {
    24             color: green;
    2522        }
    2623        #box {
    … …  
    3431        }
    3532        #border-shape {
     33            position: absolute;
     34            top: 0px;
     35            left: 0px;
    3636            width: 160px;
    3737            height: 160px;
    … …  
    4141            z-index: -1;
    4242        }
    43         #failure {
    44             color: red;
    45             z-index: -2;
    46         }
    47         #line-1, #line-5 { margin-left: 180px; }
    48         #line-2, #line-4 { margin-left: 198px; }
    49         #line-3 { margin-left: 200px; }
    50        
    5143    </style>
     44    <script src="../../../resources/testharness.js"></script>
     45    <script src="../../../resources/testharnessreport.js"></script>
     46    <script src="support/spec-example-utils.js"></script>
    5247</head>
    5348<body>
    … …  
    5853    <div id="test" class="container">
    5954        <div id="box"></div>
    60         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    61     </div>
    62     <div id="border-shape" class="container"></div>
    63     <div id="failure" class="container">
     55        <div id="border-shape"></div>
     56        <span id="line-0">XXXXXX</span>
    6457        <span id="line-1">XXXXXX</span>
    6558        <span id="line-2">XXXXXX</span>
    6659        <span id="line-3">XXXXXX</span>
    6760        <span id="line-4">XXXXXX</span>
    68         <span id="line-5">XXXXXX</span>
    69         XXXXXXXXXXXXXXX
     61        <span id="line-5">XXXXXXXXXXXXXXX</span>
    7062    </div>
     63    <div id="log"></div>
     64    <script>
     65        approxShapeTest('test', 'line-', 3, [182, 198, 200, 198, 182, 0]);
     66    </script>
    7167</body>
    7268</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-015.html

    r172733 r175721  
    44    <title>CSS Test: Shape from box value - border-box</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-015-ref.html"/>
    9     <meta name="flags" content="ahem"/>
     9    <meta name="flags" content="ahem dom"/>
    1010    <meta name="assert" content="This test verifies that content wraps around a shape
    1111                                 defined by its border box."/>
    … …  
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16             position: absolute;
    17             top: 70px;
     15        #test {
    1816            width: 400px;
     17            color: green;
    1918            font-family: Ahem;
    2019            font-size: 20px;
    2120            line-height: 2em;
    22         }
    23         #test {
    24             color: green;
    2521        }
    2622        #box {
    … …  
    3329            -webkit-shape-outside: border-box;
    3430        }
    35         #failure {
    36             color: red;
    37             z-index: -2;
    38         }
    39         #line-1, #line-5 { margin-left: 185px; }
    40         #line-2, #line-4 { margin-left: 199px; }
    41         #line-3 { margin-left: 200px; }
    42 
    4331    </style>
     32    <script src="../../../resources/testharness.js"></script>
     33    <script src="../../../resources/testharnessreport.js"></script>
     34    <script src="support/spec-example-utils.js"></script>
    4435</head>
    4536<body>
    … …  
    4839        the long green bar is beneath it, and no bars intersect it. There should be no red.
    4940    </p>
    50     <div id="test" class="container">
     41    <div id="test">
    5142        <div id="box"></div>
    52         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    53     </div>
    54     <div id="failure" class="container">
     43        <span id="line-0">XXXXXX</span>
    5544        <span id="line-1">XXXXXX</span>
    5645        <span id="line-2">XXXXXX</span>
    5746        <span id="line-3">XXXXXX</span>
    5847        <span id="line-4">XXXXXX</span>
    59         <span id="line-5">XXXXXX</span>
    60         XXXXXXXXXXXXXXX
     48        <span id="line-5">XXXXXXXXXXXXXXX</span>
    6149    </div>
     50    <div id="log"></div>
     51    <script>
     52        approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
     53    </script>
    6254</body>
    6355</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-016.html

    r172733 r175721  
    44    <title>CSS Test: Shape from box value - padding-box</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-015-ref.html"/>
    9     <meta name="flags" content="ahem"/>
     9    <meta name="flags" content="ahem dom"/>
    1010    <meta name="assert" content="This test verifies that content wraps around a shape
    1111                                 defined by its padding box."/>
    … …  
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16             position: absolute;
    17             top: 70px;
     15        #test {
     16            color: green;
    1817            width: 400px;
    1918            font-family: Ahem;
    2019            font-size: 20px;
    2120            line-height: 2em;
    22         }
    23         #test {
    24             color: green;
    2521        }
    2622        #box {
    … …  
    3329            -webkit-shape-outside: padding-box;
    3430        }
    35         #failure {
    36             color: red;
    37             z-index: -2;
    38         }
    39         #line-1, #line-5 { margin-left: 185px; }
    40         #line-2, #line-4 { margin-left: 199px; }
    41         #line-3 { margin-left: 200px; }
    4231    </style>
     32    <script src="../../../resources/testharness.js"></script>
     33    <script src="../../../resources/testharnessreport.js"></script>
     34    <script src="support/spec-example-utils.js"></script>
    4335</head>
    4436<body>
    … …  
    4739        the long green bar is beneath it, and no bars intersect it. There should be no red.
    4840    </p>
    49     <div id="test" class="container">
     41    <div id="test">
    5042        <div id="box"></div>
    51         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    52     </div>
    53     <div id="failure" class="container">
     43        <span id="line-0">XXXXXX</span>
    5444        <span id="line-1">XXXXXX</span>
    5545        <span id="line-2">XXXXXX</span>
    5646        <span id="line-3">XXXXXX</span>
    5747        <span id="line-4">XXXXXX</span>
    58         <span id="line-5">XXXXXX</span>
    59         XXXXXXXXXXXXXXX
     48        <span id="line-5">XXXXXXXXXXXXXXX</span>
    6049    </div>
     50    <div id="log"></div>
     51    <script>
     52        approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
     53    </script>
    6154</body>
    6255</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-017.html

    r172733 r175721  
    44    <title>CSS Test: Shape from box value - content-box</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-015-ref.html"/>
    9     <meta name="flags" content="ahem"/>
     9    <meta name="flags" content="ahem dom"/>
    1010    <meta name="assert" content="This test verifies that content wraps around a shape
    1111                                 defined by its content box."/>
    … …  
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16             position: absolute;
    17             top: 70px;
     15        #test {
     16            color: green;
    1817            width: 400px;
    1918            font-family: Ahem;
    2019            font-size: 20px;
    2120            line-height: 2em;
    22         }
    23         #test {
    24             color: green;
    2521        }
    2622        #box {
    … …  
    3228            -webkit-shape-outside: content-box;
    3329        }
    34         #failure {
    35             color: red;
    36             z-index: -2;
    37         }
    38         #line-1, #line-5 { margin-left: 185px; }
    39         #line-2, #line-4 { margin-left: 199px; }
    40         #line-3 { margin-left: 200px; }
    41 
    4230    </style>
     31    <script src="../../../resources/testharness.js"></script>
     32    <script src="../../../resources/testharnessreport.js"></script>
     33    <script src="support/spec-example-utils.js"></script>
    4334</head>
    4435<body>
    … …  
    4738        the long green bar is beneath it, and no bars intersect it. There should be no red.
    4839    </p>
    49     <div id="test" class="container">
     40    <div id="test">
    5041        <div id="box"></div>
    51         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    52     </div>
    53     <div id="failure" class="container">
     42        <span id="line-0">XXXXXX</span>
    5443        <span id="line-1">XXXXXX</span>
    5544        <span id="line-2">XXXXXX</span>
    5645        <span id="line-3">XXXXXX</span>
    5746        <span id="line-4">XXXXXX</span>
    58         <span id="line-5">XXXXXX</span>
    59         XXXXXXXXXXXXXXX
     47        <span id="line-5">XXXXXXXXXXXXXXX</span>
    6048    </div>
     49    <div id="log"></div>
     50    <script>
     51        approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
     52    </script>
    6153</body>
    6254</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-018.html

    r172733 r175721  
    44    <title>CSS Test: shape-margin offset from a polygonal shape-outside</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-018-ref.html"/>
    9     <meta name="flags" content="ahem"/>
     9    <meta name="flags" content="ahem dom"/>
    1010    <meta name="assert" content="This test verifies that that content flows around the shape-margin
    1111                                 defined on a polygonal shape-outside."/>
    … …  
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16             position: absolute;
    17             top: 70px;
     15        #test {
     16            position: relative;
     17            color: green;
    1818            width: 300px;
    1919            font-family: Ahem;
    2020            font-size: 20px;
    2121            line-height: 2em;
    22         }
    23         #test {
    24             color: green;
    2522        }
    2623        #shape-box {
    … …  
    3330        img {
    3431            position: absolute;
    35             top: 70px;
     32            top: 0px;
     33            left: 0px;
    3634            z-index: -1;
    3735        }
    38         #failure {
    39             color: red;
    40             z-index: -2;
    41         }
    42         #line-1 { margin-left: 48px; }
    43         #line-2 { margin-left: 88px; }
    44         #line-3 { margin-left: 128px; }
    45         #line-4 { margin-left: 168px; }
    46         #line-5 { margin-left: 180px; }
    4736    </style>
     37    <script src="../../../resources/testharness.js"></script>
     38    <script src="../../../resources/testharnessreport.js"></script>
     39    <script src="support/spec-example-utils.js"></script>
    4840</head>
    4941<body>
    5042    <p>
    51         The test passes if the longest green horizontal bar is beneath the triangle and the 
     43        The test passes if the longest green horizontal bar is beneath the triangle and the
    5244        rest of them are to its right and none intersect it. There should be no red.
    5345    </p>
    54     <div id="test" class="container">
     46    <div id="test">
    5547        <div id="shape-box"></div>
    56         XXXXXXXXXX XXXXXXXX XXXXXX XXXX XXX XXXXXXXXXXXX
     48        <img src="support/rounded-triangle.svg">
     49        <span id="line-0">XXXXXXXXXX</span>
     50        <span id="line-1">XXXXXXXX</span>
     51        <span id="line-2">XXXXXX</span>
     52        <span id="line-3">XXXX</span>
     53        <span id="line-4">XXX</span>
     54        <span id="line-5">XXXXXXXXXXXX</span>
    5755    </div>
    58     <img src="support/rounded-triangle.svg">
    59     <div id="failure" class="container">
    60         <span id="line-1">XXXXXXXXXX</span>
    61         <span id="line-2">XXXXXXXX</span>
    62         <span id="line-3">XXXXXX</span>
    63         <span id="line-4">XXXX</span>
    64         <span id="line-5">XXX</span>
    65         XXXXXXXXXXXX
    66     </div>
     56    <div id="log"></div>
     57    <script>
     58        approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]);
     59    </script>
    6760</body>
    6861</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/shape-outside-019.html

    r172733 r175721  
    44    <title>CSS Test: Shape from image - alpha channel, opacity > 0 + shape-margin</title>
    55    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
     6    <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
    67    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
    78    <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
    8     <link rel="match" href="reference/shape-outside-019-ref.html"/>
    9     <meta name="flags" content="ahem"/>
    10     <meta name="assert" content="This test verifies that the content flows around the
     9    <meta name="flags" content="ahem dom"/>
     10    <meta name="assert" content="This test verifies that the content flows around the
    1111                                 shape defined in the images alpha channel and the shape-margin."/>
    1212    <!--  This test is derived from Example 11 in this version of the spec:
    1313         http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/  -->
    1414    <style type="text/css">
    15         .container {
    16           position: absolute;
    17           top: 70px;
    18           width: 400px;
    19           font-family: Ahem;
    20           font-size: 20px;
    21           line-height: 2em;
    22         }
    2315        #test {
     16            position: relative;
    2417            color: green;
     18            width: 400px;
     19            font-family: Ahem;
     20            font-size: 20px;
     21            line-height: 2em;
    2522        }
    2623        #image {
    … …  
    3128        #margin-circle {
    3229            position: absolute;
    33             top: 70px;
    34             left: 10px;
     30            top: 0px;
     31            left: 0px;
    3532            width: 300px;
    3633            height: 300px;
    3734            background-color: black;
    38             -webkit-clip-path: ellipse(115px 100px at 140px 100px);
     35            -webkit-clip-path: ellipse(141px 127px at 115px 100px);
    3936            z-index: -1;
    4037        }
    41         #failure {
    42             width: 300px;
    43             color: red;
    44             z-index: -2;
    45         }
    46         #line-1, #line-5 { margin-left: 242px; }
    47         #line-2, #line-4 { margin-left: 256px; }
    48         #line-3 { margin-left: 258px; }
    49         #line-6 { margin-left: 204px; }
    5038    </style>
     39    <script src="../../../resources/testharness.js"></script>
     40    <script src="../../../resources/testharnessreport.js"></script>
     41    <script src="support/spec-example-utils.js"></script>
    5142</head>
    5243<body>
    … …  
    5546        of circle, the long green bar is beneath it, and no bars intersect the black.
    5647        There should be no red.
    57     </p>   
    58     <div id="test" class="container">
     48    </p>
     49    <div id="test">
    5950        <img id="image" src="support/circle-shadow.png"/>
    60         XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXXXXX
    61     </div>
    62     <div id="margin-circle"></div>
    63     <div id="failure" class="container">
     51        <div id="margin-circle"></div>
     52        <span id="line-0">XXXXXX</span>
    6453        <span id="line-1">XXXXXX</span>
    6554        <span id="line-2">XXXXXX</span>
    … …  
    6756        <span id="line-4">XXXXXX</span>
    6857        <span id="line-5">XXXXXX</span>
    69         <span id="line-6">XXXXXX</span>
    70         <div id="line-7">XXXXXXXXXXXXXXX</div>
     58        <span id="line-6">XXXXXXXXXXXXXXX</span>
    7159    </div>
     60    <div id="log"></div>
     61    <script>
     62        approxShapeTest('test', 'line-', 2, [242, 256, 258, 256, 242, 204, 0]);
     63    </script>
    7264</body>
    7365</html>

  • trunk/LayoutTests/css3/shapes/spec-examples/support/w3c-import.log

    r175255 r175721  
    1111
    1212------------------------------------------------------------------------
    13 Last Import: 2014-10-27 11:23
     13Last Import: 2014-11-06 09:44
    1414------------------------------------------------------------------------
    1515Properties requiring vendor prefixes:
    … …  
    1919------------------------------------------------------------------------
    2020List of files:
    21 /LayoutTests/css3/shapes/spec-examples/support/circle-no-shadow.png
    22 /LayoutTests/css3/shapes/spec-examples/support/circle-shadow.png
    23 /LayoutTests/css3/shapes/spec-examples/support/rounded-triangle.svg
     21/LayoutTests/w3c/css-shapes-1/spec-examples/support/circle-no-shadow.png
     22/LayoutTests/w3c/css-shapes-1/spec-examples/support/circle-shadow.png
     23/LayoutTests/w3c/css-shapes-1/spec-examples/support/rounded-triangle.svg
     24/LayoutTests/w3c/css-shapes-1/spec-examples/support/spec-example-utils.js

  • trunk/LayoutTests/css3/shapes/spec-examples/w3c-import.log

    r175255 r175721  
    1111
    1212------------------------------------------------------------------------
    13 Last Import: 2014-10-27 11:23
     13Last Import: 2014-11-06 09:44
    1414------------------------------------------------------------------------
    1515Properties requiring vendor prefixes:
    … …  
    2222------------------------------------------------------------------------
    2323List of files:
    24 /LayoutTests/css3/shapes/spec-examples/shape-outside-001-expected.html
    25 /LayoutTests/css3/shapes/spec-examples/shape-outside-001.html
    26 /LayoutTests/css3/shapes/spec-examples/shape-outside-002-expected.html
    27 /LayoutTests/css3/shapes/spec-examples/shape-outside-002.html
    28 /LayoutTests/css3/shapes/spec-examples/shape-outside-003-expected.html
    29 /LayoutTests/css3/shapes/spec-examples/shape-outside-003.html
    30 /LayoutTests/css3/shapes/spec-examples/shape-outside-004-expected.html
    31 /LayoutTests/css3/shapes/spec-examples/shape-outside-004.html
    32 /LayoutTests/css3/shapes/spec-examples/shape-outside-005-expected.html
    33 /LayoutTests/css3/shapes/spec-examples/shape-outside-005.html
    34 /LayoutTests/css3/shapes/spec-examples/shape-outside-006-expected.html
    35 /LayoutTests/css3/shapes/spec-examples/shape-outside-006.html
    36 /LayoutTests/css3/shapes/spec-examples/shape-outside-007-expected.html
    37 /LayoutTests/css3/shapes/spec-examples/shape-outside-007.html
    38 /LayoutTests/css3/shapes/spec-examples/shape-outside-008-expected.html
    39 /LayoutTests/css3/shapes/spec-examples/shape-outside-008.html
    40 /LayoutTests/css3/shapes/spec-examples/shape-outside-010-expected.html
    41 /LayoutTests/css3/shapes/spec-examples/shape-outside-010.html
    42 /LayoutTests/css3/shapes/spec-examples/shape-outside-011-expected.html
    43 /LayoutTests/css3/shapes/spec-examples/shape-outside-011.html
    44 /LayoutTests/css3/shapes/spec-examples/shape-outside-012-expected.html
    45 /LayoutTests/css3/shapes/spec-examples/shape-outside-012.html
    46 /LayoutTests/css3/shapes/spec-examples/shape-outside-013-expected.html
    47 /LayoutTests/css3/shapes/spec-examples/shape-outside-013.html
    48 /LayoutTests/css3/shapes/spec-examples/shape-outside-014-expected.html
    49 /LayoutTests/css3/shapes/spec-examples/shape-outside-014.html
    50 /LayoutTests/css3/shapes/spec-examples/shape-outside-015-expected.html
    51 /LayoutTests/css3/shapes/spec-examples/shape-outside-015.html
    52 /LayoutTests/css3/shapes/spec-examples/shape-outside-016-expected.html
    53 /LayoutTests/css3/shapes/spec-examples/shape-outside-016.html
    54 /LayoutTests/css3/shapes/spec-examples/shape-outside-017-expected.html
    55 /LayoutTests/css3/shapes/spec-examples/shape-outside-017.html
    56 /LayoutTests/css3/shapes/spec-examples/shape-outside-018-expected.html
    57 /LayoutTests/css3/shapes/spec-examples/shape-outside-018.html
    58 /LayoutTests/css3/shapes/spec-examples/shape-outside-019-expected.html
    59 /LayoutTests/css3/shapes/spec-examples/shape-outside-019.html
     24/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-001-expected.html
     25/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-001.html
     26/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-002-expected.html
     27/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-002.html
     28/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-003-expected.html
     29/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-003.html
     30/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-004-expected.html
     31/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-004.html
     32/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-005-expected.html
     33/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-005.html
     34/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-006-expected.html
     35/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-006.html
     36/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-007-expected.html
     37/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-007.html
     38/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-008-expected.html
     39/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-008.html
     40/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-010.html
     41/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-011.html
     42/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-012.html
     43/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-013.html
     44/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-014.html
     45/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-015.html
     46/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-016.html
     47/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-017.html
     48/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-018.html
     49/LayoutTests/w3c/css-shapes-1/spec-examples/shape-outside-019.html
Note: See TracChangeset for help on using the changeset viewer.