Changeset 152904 in webkit


Ignore:
Timestamp:
Jul 19, 2013 10:40:53 AM (11 years ago)
Author:
zoltan@webkit.org
Message:

[CSS Shapes][CSS Regions] Modify existing tests to test overflow also when padding is applied on the container
​https://bugs.webkit.org/show_bug.cgi?id=117881

Reviewed by David Hyatt.

Currently, we don't have tests which test the overflow behavior when there is padding applied on the container.
I modified the existing tests to cover these cases as well and increase our test coverage.

  • fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html:
  • fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions.html:
  • fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes-expected.html:
  • fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes.html:
  • fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes-expected.html:
  • fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes.html:
Location:
trunk/LayoutTests
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r152902 r152904  
     12013-07-19  Zoltan Horvath  <zoltan@webkit.org>
     2
     3        [CSS Shapes][CSS Regions] Modify existing tests to test overflow also when padding is applied on the container
     4        https://bugs.webkit.org/show_bug.cgi?id=117881
     5
     6        Reviewed by David Hyatt.
     7
     8        Currently, we don't have tests which test the overflow behavior when there is padding applied on the container.
     9        I modified the existing tests to cover these cases as well and increase our test coverage.
     10
     11        * fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html:
     12        * fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions.html:
     13        * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes-expected.html:
     14        * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes.html:
     15        * fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes-expected.html:
     16        * fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes.html:
     17
    1182013-07-19  Frédéric Wang  <fred.wang@free.fr>
    219

  • trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes-expected.html

    r151570 r152904  
    1111            height: 200px;
    1212            border: 2px solid green;
     13            padding: 10px;
    1314        }
    1415        #region2 { margin-top: 10px; }
    1516        #border1 {
    1617            position: absolute;
    17             top: 108px;
    18             left: 58px;
     18            top: 118px;
     19            left: 68px;
    1920            width: 100px;
    2021            height: 100px;
    … …  
    2324        #border2 {
    2425            position: absolute;
    25             top: 322px;
    26             left: 33px;
     26            top: 352px;
     27            left: 43px;
    2728            width: 140px;
    2829            height: 100px;
    … …  
    3132        #overflow {
    3233            width: 200px;
    33             margin-left: 2px;
    34             margin-top: -2px;
     34            margin-left: 12px;
     35            margin-top: -12px;
    3536        }
    3637    </style>
    … …  
    4445        <div id="overflow">X X X X X X X</div>
    4546    </div>
    46     <p style="margin-top: 12px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box.</p>
     47    <p style="margin-top: 22px;">Requires Ahem font. There are two regions (10px padding is applied to the regions) with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, which means the overflow should start just below the last regions's shape, 10px above the green border box.</p>
    4748    <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
    4849</body>

  • trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes.html

    r151570 r152904  
    1717            height: 200px;
    1818            border: 2px solid green;
     19            padding: 10px;
    1920        }
    2021        #region1 { -webkit-shape-inside: rectangle(50px, 100px, 100px, 100px); }
    … …  
    2526        #border1 {
    2627            position: absolute;
    27             top: 108px;
    28             left: 58px;
     28            top: 118px;
     29            left: 68px;
    2930            width: 100px;
    3031            height: 100px;
    … …  
    3334        #border2 {
    3435            position: absolute;
    35             top: 322px;
    36             left: 33px;
     36            top: 352px;
     37            left: 43px;
    3738            width: 140px;
    3839            height: 100px;
    … …  
    5253        <div id="region2" class="region"></div>
    5354    </div>
    54     <p style="margin-top: 50px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box.</p>
     55    <p style="margin-top: 50px;">Requires Ahem font. There are two regions (10px padding is applied to the regions) with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, which means the overflow should start just below the last regions's shape, 10px above the green border box.</p>
    5556    <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
    5657</body>

  • trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes-expected.html

    r151570 r152904  
    1111            height: 200px;
    1212            border: 2px solid green;
     13            padding: 10px;
    1314        }
    1415        #region2 { margin-top: 10px; }
    1516        #border1 {
    1617            position: absolute;
    17             top: 108px;
    18             left: 58px;
     18            top: 118px;
     19            left: 68px;
    1920            width: 100px;
    2021            height: 100px;
    … …  
    2324        #border2 {
    2425            position: absolute;
    25             top: 322px;
    26             left: 33px;
     26            top: 352px;
     27            left: 43px;
    2728            width: 140px;
    2829            height: 100px;
    … …  
    3132        #overflow {
    3233            width: 200px;
    33             margin-left: 2px;
    34             margin-top: -2px;
     34            margin-left: 12px;
     35            margin-top: -12px;
    3536        }
    3637    </style>
    … …  
    4445        <div id="overflow">X X X X X X X</div>
    4546    </div>
    46     <p style="margin-top: 12px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box</p>
     47    <p style="margin-top: 22px;">Requires Ahem font. There are two regions (10px padding is applied to the regions) with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, which means the overflow should start just below the last regions's shape, 10px above the green border box.</p>
    4748    <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
    4849</body>

  • trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-bottom-positioned-multiple-shapes.html

    r151570 r152904  
    1717            height: 200px;
    1818            border: 2px solid green;
     19            padding: 10px;
    1920        }
    2021        #region1 { -webkit-shape-inside: rectangle(50px, 100px, 100px, 100px); }
    … …  
    2526        #border1 {
    2627            position: absolute;
    27             top: 108px;
    28             left: 58px;
     28            top: 118px;
     29            left: 68px;
    2930            width: 100px;
    3031            height: 100px;
    … …  
    3334        #border2 {
    3435            position: absolute;
    35             top: 322px;
    36             left: 33px;
     36            top: 352px;
     37            left: 43px;
    3738            width: 140px;
    3839            height: 100px;
    … …  
    5253        <div id="region2" class="region"></div>
    5354    </div>
    54     <p style="margin-top: 50px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box</p>
     55    <p style="margin-top: 50px;">Requires Ahem font. There are two regions (10px padding is applied to the regions) with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, which means the overflow should start just below the last regions's shape, 10px above the green border box.</p>
    5556    <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
    5657</body>

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html

    r152800 r152904  
    66    font: 20px Ahem, sans-serif;
    77    line-height: 20px;
    8     border: 2px solid blue;
    9     border-bottom: 30px solid yellow;
    108    position: relative;
     9    border-bottom: 55px solid yellow;
    1110    width: 200px;
    1211    height: 200px;
    13     margin-bottom: 60px;
     12}
     13#shape-inside {
     14    background-color: green;
     15    padding-top: 15px;
     16    padding-bottom: 10px;
     17    height: 200px;
    1418}
    1519#border {
    1620    position: absolute;
    17     margin-top: -2px;
     21    margin-top: 13px;
    1822    left: 48px;
    1923    width: 100px;
    2024    height: 40px;
    21     border: 2px solid green;
     25    border: 2px solid blue;
    2226}
    2327.spacer {
    … …  
    3539            X X X X X X
    3640        </div>
    37         <div style="padding-top: 160px;">
     41        <div style="margin-top: -10px">
    3842            X X X X X X X X X X
    3943        </div>
    4044    </div>
    41     <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
     45    <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start 10px above the yellow bottom border. <br/>
    4246    <p>Bug <a href="http://webkit.org/b/114526">114526</a>: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
    4347</body>

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions.html

    r152800 r152904  
    1010    font: 20px Ahem, sans-serif;
    1111    line-height: 20px;
    12     border: 2px solid blue;
    13     border-bottom: 30px solid yellow;
    1412    position: relative;
    15     width: 200px;
    16     height: 200px;
    17     margin-bottom: 60px;
    1813}
    1914#shape-inside {
    2015    width: 200px;
    2116    height: 200px;
     17    background-color: green;
    2218    border-bottom: 30px solid yellow;
     19    padding-top: 15px;
     20    padding-bottom: 10px;
    2321    -webkit-shape-inside: rectangle(50px, 0px, 100px, 50px);
    2422}
    2523#border {
    2624    position: absolute;
    27     margin-top: -2px;
     25    margin-top: 13px;
    2826    left: 48px;
    2927    width: 100px;
    3028    height: 40px;
    31     border: 2px solid green;
     29    border: 2px solid blue;
    3230}
    3331</style>
    … …  
    4038        </div>
    4139    </div>
    42     <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
     40    <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start 10px above the yellow bottom border. <br/>
    4341    <p>Bug <a href="http://webkit.org/b/114526">114526</a>: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
    4442</body>
Note: See TracChangeset for help on using the changeset viewer.