Attachment #231874 for bug #131064

View Details Raw Unified Return to Bug 131064

| Differences between



2014-04-01  Javier Fernandez  <jfernandez@igalia.com>

        [CSS Grid Layout] Split the grid-item-margin-auto-columns-rows.html test.
        https://bugs.webkit.org/show_bug.cgi?id=131064

        Reviewed by Benjamin Poulain.

        Splitting the "grid-item-margin-auto-columns-rows" into different writing-modes
        related tests, so besides increasing clarity, it makes it fit in the 800x600 viewport.

        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html: Removed.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Removed.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html: Added.
        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html: Added.

2014-05-21  Jinwoo Song  <jinwoo7.song@samsung.com>

        Unreviewed EFL gardening.



<!DOCTYPE html>
<html>
<style>
.grid {
   display: block;
   background-color: grey;
   width: 200px;
}

.gridLong {
   height: 120px;
}

.gridShort {
   height: 100px;
}

.firstRowFirstColumn {
   background-color: blue;
   position: absolute;
}

.firstRowSecondColumn {
   background-color: lime;
   position: absolute;
}

.secondRowFirstColumn {
   background-color: purple;
   position: absolute;
}

.secondRowSecondColumn {
   background-color: orange;
   position: absolute;
   left: 20px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="top: 20px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 20px;" ></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<style>
.grid {
   display: block;
   background-color: grey;
   width: 200px;
}

.gridLong {
   height: 120px;
}

.gridShort {
   height: 100px;
}

.firstRowFirstColumn {
   background-color: blue;
   position: absolute;
}

.firstRowSecondColumn {
   background-color: lime;
   position: absolute;
}

.secondRowFirstColumn {
   background-color: purple;
   position: absolute;
}

.secondRowSecondColumn {
   background-color: orange;
   position: absolute;
   left: 20px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="top: 20px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    -webkit-grid-template-rows: auto auto;
    -webkit-grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<style>
.grid {
   display: block;
   background-color: grey;
   width: 200px;
}

.gridLong {
   height: 120px;
}

.gridShort {
   height: 100px;
}

.firstRowFirstColumn {
   background-color: blue;
   position: absolute;
}

.firstRowSecondColumn {
   background-color: lime;
   position: absolute;
}

.secondRowFirstColumn {
   background-color: purple;
   position: absolute;
}

.secondRowSecondColumn {
   background-color: orange;
   position: absolute;
   left: 20px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    -webkit-grid-template-rows: auto auto;
    -webkit-grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}

</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
<div class="testContainer">
    <div class="grid directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>



<!DOCTYPE html>
<html>
<style>
.grid {
   display: block;
   background-color: grey;
   width: 200px;
}

.gridLong {
   height: 120px;
}

.gridShort {
   height: 100px;
}

.firstRowFirstColumn {
   background-color: blue;
   position: absolute;
}

.firstRowSecondColumn {
   background-color: lime;
   position: absolute;
}

.secondRowFirstColumn {
   background-color: purple;
   position: absolute;
}

.secondRowSecondColumn {
   background-color: orange;
   position: absolute;
   left: 20px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    -webkit-grid-template-rows: auto auto;
    -webkit-grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}

</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid verticalRL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>



<!DOCTYPE html>
<html>
<style>
.grid {
   display: block;
   background-color: grey;
   width: 200px;
}

.gridLong {
   height: 120px;
}

.gridShort {
   height: 100px;
}

.firstRowFirstColumn {
   background-color: blue;
   position: absolute;
}

.firstRowSecondColumn {
   background-color: lime;
   position: absolute;
}

.secondRowFirstColumn {
   background-color: purple;
   position: absolute;
}

.secondRowSecondColumn {
   background-color: orange;
   position: absolute;
   left: 20px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridLong">
        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid gridShort">
        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 20px;" ></div>
        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
    </div>
</div>



<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    -webkit-grid-template-rows: auto auto;
    -webkit-grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}

</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid verticalRL directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    -webkit-grid-template-rows: auto auto;
    -webkit-grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}

</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<!-- rtl direction -->
<div class="testContainer">
    <div class="grid directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalRL directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem marginBottom secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid verticalLR directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid horizontalBT directionRTL">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

</body>
</html>

Return to Bug 131064

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +21 lines
		1	2014-04-01 Javier Fernandez <jfernandez@igalia.com>
		2
		3	[CSS Grid Layout] Split the grid-item-margin-auto-columns-rows.html test.
		4	https://bugs.webkit.org/show_bug.cgi?id=131064
		5
		6	Reviewed by Benjamin Poulain.
		7
		8	Splitting the "grid-item-margin-auto-columns-rows" into different writing-modes
		9	related tests, so besides increasing clarity, it makes it fit in the 800x600 viewport.
		10
		11	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html: Removed.
		12	* fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Removed.
		13	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html: Added.
		14	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html: Added.
		15	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html: Added.
		16	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html: Added.
		17	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html: Added.
		18	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html: Added.
		19	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html: Added.
		20	* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html: Added.
		21
1	2014-05-21 Jinwoo Song <jinwoo7.song@samsung.com>	22	2014-05-21 Jinwoo Song <jinwoo7.song@samsung.com>
2		23
3	Unreviewed EFL gardening.	24	Unreviewed EFL gardening.

Lines 1-199 a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html_sec1
- a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html -199 lines
1	<!DOCTYPE html>
2	<html>
3	<style>
4	.grid {
5	display: block;
6	background-color: grey;
7	width: 200px;
8	}
9
10	.gridLong {
11	height: 120px;
12	}
13
14	.gridShort {
15	height: 100px;
16	}
17
18	.firstRowFirstColumn {
19	background-color: blue;
20	position: absolute;
21	}
22
23	.firstRowSecondColumn {
24	background-color: lime;
25	position: absolute;
26	}
27
28	.secondRowFirstColumn {
29	background-color: purple;
30	position: absolute;
31	}
32
33	.secondRowSecondColumn {
34	background-color: orange;
35	position: absolute;
36	left: 20px;
37	}
38
39	.gridItem {
40	width: 20px;
41	height: 40px;
42	}
43
44	.testContainer {
45	position: relative;
46	margin-bottom: 20px;
47	}
48	</style>
49	</head>
50	<body>
51
52	<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
53
54	<div class="testContainer">
55	<div class="grid gridLong">
56	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
57	<div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
58	<div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
59	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
60	</div>
61	</div>
62
63	<div class="testContainer">
64	<div class="grid gridShort">
65	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
66	<div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
67	<div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
68	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
69	</div>
70	</div>
71
72	<div class="testContainer">
73	<div class="grid gridLong">
74	<div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></div>
75	<div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>
76	<div class="gridItem secondRowFirstColumn" style="left: 160px;"></div>
77	<div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
78	</div>
79	</div>
80
81	<div class="testContainer">
82	<div class="grid gridShort">
83	<div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></div>
84	<div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>
85	<div class="gridItem secondRowFirstColumn" style="left: 160px;"></div>
86	<div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
87	</div>
88	</div>
89
90	<div class="testContainer">
91	<div class="grid gridLong">
92	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
93	<div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>
94	<div class="gridItem secondRowFirstColumn" style="left: 20px;"></div>
95	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
96	</div>
97	</div>
98
99	<div class="testContainer">
100	<div class="grid gridShort">
101	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
102	<div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>
103	<div class="gridItem secondRowFirstColumn" style="left: 20px;"></div>
104	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
105	</div>
106	</div>
107
108	<div class="testContainer">
109	<div class="grid gridLong">
110	<div class="gridItem firstRowFirstColumn" style="top: 80px;"></div>
111	<div class="gridItem firstRowSecondColumn" style="left: 20px; top: 80px;"></div>
112	<div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
113	<div class="gridItem secondRowSecondColumn" style="top: 20px;"></div>
114	</div>
115	</div>
116
117	<div class="testContainer">
118	<div class="grid gridShort">
119	<div class="gridItem firstRowFirstColumn" style="top: 60px;"></div>
120	<div class="gridItem firstRowSecondColumn" style="left: 20px; top: 40px;"></div>
121	<div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
122	<div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
123	</div>
124	</div>
125
126	<div class="testContainer">
127	<div class="grid gridLong">
128	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
129	<div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
130	<div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
131	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
132	</div>
133	</div>
134
135	<div class="testContainer">
136	<div class="grid gridShort">
137	<div class="gridItem firstRowFirstColumn" style="top: 20px;"></div>
138	<div class="gridItem firstRowSecondColumn" style="left: 20px;"></div>
139	<div class="gridItem secondRowFirstColumn" style="top: 60px;"></div>
140	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
141	</div>
142	</div>
143
144	<div class="testContainer">
145	<div class="grid gridLong">
146	<div class="gridItem firstRowFirstColumn" style="left: 180px;"></div>
147	<div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>
148	<div class="gridItem secondRowFirstColumn" style="left: 160px;"></div>
149	<div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>
150	</div>
151	</div>
152
153	<div class="testContainer">
154	<div class="grid gridShort">
155	<div class="gridItem firstRowFirstColumn" style="left: 180px;"></div>
156	<div class="gridItem firstRowSecondColumn" style="left: 180px; top: 60px;"></div>
157	<div class="gridItem secondRowFirstColumn" style="left: 160px; top: 20px;"></div>
158	<div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
159	</div>
160	</div>
161
162	<div class="testContainer">
163	<div class="grid gridLong">
164	<div class="gridItem firstRowFirstColumn" style="top: 0px;"></div>
165	<div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>
166	<div class="gridItem secondRowFirstColumn" style="left: 20px;"></div>
167	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>
168	</div>
169	</div>
170
171	<div class="testContainer">
172	<div class="grid gridShort">
173	<div class="gridItem firstRowFirstColumn" style="top: 0px;"></div>
174	<div class="gridItem firstRowSecondColumn" style="top: 60px;"></div>
175	<div class="gridItem secondRowFirstColumn" style="left: 20px; top: 20px;" ></div>
176	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
177	</div>
178	</div>
179
180	<div class="testContainer">
181	<div class="grid gridLong">
182	<div class="gridItem firstRowFirstColumn" style="top: 80px;"></div>
183	<div class="gridItem firstRowSecondColumn" style="left: 20px; top: 80px;"></div>
184	<div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
185	<div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>
186	</div>
187	</div>
188
189	<div class="testContainer">
190	<div class="grid gridShort">
191	<div class="gridItem firstRowFirstColumn" style="top: 60px;"></div>
192	<div class="gridItem firstRowSecondColumn" style="left: 20px; top: 40px;"></div>
193	<div class="gridItem secondRowFirstColumn" style="left: 0px;"></div>
194	<div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
195	</div>
196	</div>
197
198	</body>
199	</html>