Attachment #277603 for bug #156623

View Details Raw Unified Return to Bug 156623

| Differences between



2016-04-18  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Fix alignment with content distribution
        https://bugs.webkit.org/show_bug.cgi?id=156623

        Reviewed by Sergio Villar Senin.

        We were only subtracting the distribution offset for items spanning
        several tracks, but not for items in a single cell.
        We should actually subtract the offset in that situation too,
        the same that we do for the grid gaps.

        Test: fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html

        * rendering/RenderGrid.cpp:
        (WebCore::RenderGrid::columnAxisOffsetForChild): Subtract distribution
        offset like we do for gaps.
        (WebCore::RenderGrid::rowAxisOffsetForChild): Ditto.

2016-04-18  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Fix positioned items with content alignment
        https://bugs.webkit.org/show_bug.cgi?id=156597




    case GridAxisCenter: {
        unsigned childEndLine = rowsSpan.endLine();
        LayoutUnit endOfRow = m_rowPositions[childEndLine];
        // m_rowPositions include distribution offset (because of content alignment) and gutters
        // so we need to subtract them to get the actual end position for a given row
        // (this does not have to be done for the last track as there are no more m_rowPositions after it).
        if (childEndLine < m_rowPositions.size() - 1)
            endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
        LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
        // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
        if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
            endOfRow -= m_offsetBetweenRows;
        LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
        return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
    }

    case GridAxisCenter: {
        unsigned childEndLine = columnsSpan.endLine();
        LayoutUnit endOfColumn = m_columnPositions[childEndLine];
        // m_columnPositions include distribution offset (because of content alignment) and gutters
        // so we need to subtract them to get the actual end position for a given column
        // (this does not have to be done for the last track as there are no more m_columnPositions after it).
        if (childEndLine < m_columnPositions.size() - 1)
            endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
        LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
        // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
        if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
            endOfColumn -= m_offsetBetweenColumns;
        LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
        return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
    }



2016-04-18  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Fix alignment with content distribution
        https://bugs.webkit.org/show_bug.cgi?id=156623

        Reviewed by Sergio Villar Senin.

        Created new test and renamed the old one as it was only testing
        items spanning several cells.

        * fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt:
        * fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt:
        Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt.
        * fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html:
        Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment.html.
        * fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:

2016-04-18  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Fix positioned items with content alignment
        https://bugs.webkit.org/show_bug.cgi?id=156597


Lines 1-50 a/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt -5 / +125 lines
1	This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.	1	This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.
2		2
3	direction: LTR \| distribution: 'space-between' \| self-alignment: center	3	direction: LTR \| distribution: 'space-between' \| self-alignment: center
4		4
		5	X
		6	X
		7	X
		8	X
5	PASS	9	PASS
6	direction: LTR \| distribution: 'space-between' \| self-alignment: end	10	direction: LTR \| distribution: 'space-between' \| self-alignment: end
7		11
		12	X
		13	X
		14	X
		15	X
8	PASS	16	PASS
9	direction: LTR \| distribution: 'space-around' \| self-alignment: center	17	direction: LTR \| distribution: 'space-around' \| self-alignment: center
10		18
		19	X
		20	X
		21	X
		22	X
11	PASS	23	PASS
12	direction: LTR \| distribution: 'space-around' \| self-alignment: end	24	direction: LTR \| distribution: 'space-around' \| self-alignment: end
13		25
		26	X
		27	X
		28	X
		29	X
14	PASS	30	PASS
15	direction: LTR \| distribution: 'space-evenly' \| self-alignment: center	31	direction: LTR \| distribution: 'space-evenly' \| self-alignment: center
16		32
		33	X
		34	X
		35	X
		36	X
17	PASS	37	PASS
18	direction: LTR \| distribution: 'space-evenly' \| self-alignment: end	38	direction: LTR \| distribution: 'space-evenly' \| self-alignment: end
19		39
		40	X
		41	X
		42	X
		43	X
20	PASS	44	PASS
21	direction: LTR \| distribution: 'stretch' \| self-alignment: center	45	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-between' \| self-alignment: center
22		46
		47	X
		48	X
		49	X
		50	X
23	PASS	51	PASS
24	direction: LTR \| distribution: 'stretch' \| self-alignment: end	52	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-between' \| self-alignment: end
25		53
		54	X
		55	X
		56	X
		57	X
		58	PASS
		59	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-around' \| self-alignment: center
		60
		61	X
		62	X
		63	X
		64	X
		65	PASS
		66	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-around' \| self-alignment: end
		67
		68	X
		69	X
		70	X
		71	X
		72	PASS
		73	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-evenly' \| self-alignment: center
		74
		75	X
		76	X
		77	X
		78	X
		79	PASS
		80	direction: LTR \| grid-gap: 10px 20px \| distribution: 'space-evenly' \| self-alignment: end
		81
		82	X
		83	X
		84	X
		85	X
26	PASS	86	PASS
27	direction: RTL \| distribution: 'space-between' \| self-alignment: center	87	direction: RTL \| distribution: 'space-between' \| self-alignment: center
28		88
		89	X
		90	X
		91	X
		92	X
29	PASS	93	PASS
30	direction: RTL \| distribution: 'space-between' \| self-alignment: end	94	direction: RTL \| distribution: 'space-between' \| self-alignment: end
31		95
		96	X
		97	X
		98	X
		99	X
32	PASS	100	PASS
33	direction: RTL \| distribution: 'space-around' \| self-alignment: center	101	direction: RTL \| distribution: 'space-around' \| self-alignment: center
34		102
		103	X
		104	X
		105	X
		106	X
35	PASS	107	PASS
36	direction: RTL \| distribution: 'space-around' \| self-alignment: end	108	direction: RTL \| distribution: 'space-around' \| self-alignment: end
37		109
		110	X
		111	X
		112	X
		113	X
38	PASS	114	PASS
39	direction: RTL \| distribution: 'space-evenly' \| self-alignment: center	115	direction: RTL \| distribution: 'space-evenly' \| self-alignment: center
40		116
		117	X
		118	X
		119	X
		120	X
41	PASS	121	PASS
42	direction: RTL \| distribution: 'space-evenly' \| self-alignment: end	122	direction: RTL \| distribution: 'space-evenly' \| self-alignment: end
43		123
		124	X
		125	X
		126	X
		127	X
		128	PASS
		129	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-between' \| self-alignment: center
		130
		131	X
		132	X
		133	X
		134	X
		135	PASS
		136	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-between' \| self-alignment: end
		137
		138	X
		139	X
		140	X
		141	X
		142	PASS
		143	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-around' \| self-alignment: center
		144
		145	X
		146	X
		147	X
		148	X
		149	PASS
		150	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-around' \| self-alignment: end
		151
		152	X
		153	X
		154	X
		155	X
44	PASS	156	PASS
45	direction: RTL \| distribution: 'stretch' \| self-alignment: center	157	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-evenly' \| self-alignment: center
46		158
		159	X
		160	X
		161	X
		162	X
47	PASS	163	PASS
48	direction: RTL \| distribution: 'stretch' \| self-alignment: end	164	direction: RTL \| grid-gap: 10px 20px \| distribution: 'space-evenly' \| self-alignment: end
49		165
		166	X
		167	X
		168	X
		169	X
50	PASS	170	PASS



This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.

direction: LTR | distribution: 'space-between' | self-alignment: center

PASS
direction: LTR | distribution: 'space-between' | self-alignment: end

PASS
direction: LTR | distribution: 'space-around' | self-alignment: center

PASS
direction: LTR | distribution: 'space-around' | self-alignment: end

PASS
direction: LTR | distribution: 'space-evenly' | self-alignment: center

PASS
direction: LTR | distribution: 'space-evenly' | self-alignment: end

PASS
direction: LTR | distribution: 'stretch' | self-alignment: center

PASS
direction: LTR | distribution: 'stretch' | self-alignment: end

PASS
direction: RTL | distribution: 'space-between' | self-alignment: center

PASS
direction: RTL | distribution: 'space-between' | self-alignment: end

PASS
direction: RTL | distribution: 'space-around' | self-alignment: center

PASS
direction: RTL | distribution: 'space-around' | self-alignment: end

PASS
direction: RTL | distribution: 'space-evenly' | self-alignment: center

PASS
direction: RTL | distribution: 'space-evenly' | self-alignment: end

PASS
direction: RTL | distribution: 'stretch' | self-alignment: center

PASS
direction: RTL | distribution: 'stretch' | self-alignment: end

PASS



<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<style>
body {
    margin: 0px;
}

.grid {
    -webkit-grid-auto-columns: 20px;
    -webkit-grid-auto-rows: 40px;
    -webkit-grid-template-areas: "a a b"
                                 "c d b";
    position: relative;
    width: 300px;
    height: 200px;
}
.a {
    -webkit-grid-area: a;
    background-color: blue;
}
.b {
    -webkit-grid-area: b;
    background-color: lime;
}
.c {
    -webkit-grid-area: c;
    background-color: purple;
}
.d {
    -webkit-grid-area: d;
    background-color: orange;
}
.stretchedGrid {
    -webkit-grid-auto-columns: minmax(20px, auto);
    -webkit-grid-auto-rows: minmax(40px, auto);
}


.cell {
    width: 20px;
    height: 40px;
}
</style>
</head>
<body onload="checkLayout('.grid')">

<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
    <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
    <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
    <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
    <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
    <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
    <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
    <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
        <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
    <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
        <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    </div>
</div>

<!-- RTL direction. -->
<div style="position: relative">
    <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
    <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
    <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
    <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
    <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
    <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
    <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
        <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
    <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
        <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    </div>
</div>

<div style="position: relative">
    <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
    <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
        <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
        <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
        <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
        <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
    </div>
</div>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<style>
body {
    margin: 0px;
}

.grid {
    -webkit-grid-template-columns: 200px 100px;
    -webkit-grid-template-rows: 100px 50px;
    width: 500px;
    height: 350px;
    position: relative;
    font: 10px/1 Ahem;
    height: 200px;
}
.a {
    -webkit-grid-area: a;
    background-color: blue;
}
.b {
    -webkit-grid-area: b;
    background-color: lime;
}
.c {
    -webkit-grid-area: c;
    background-color: purple;
}
.d {
    -webkit-grid-area: d;
    background-color: orange;
}
.stretchedGrid {
    -webkit-grid-auto-columns: minmax(20px, auto);
    -webkit-grid-auto-rows: minmax(40px, auto);
}


.gridGaps {
    -webkit-grid-gap: 10px 20px;
    height: 40px;
}

</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">

<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.</p>

<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
<div class="grid contentSpaceBetween itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
<div class="grid contentSpaceBetween itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
<div class="grid contentSpaceAround itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
<div class="grid contentSpaceAround itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid contentSpaceEvenly itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid contentSpaceEvenly itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceBetween itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceBetween itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceAround itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceAround itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceEvenly itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceEvenly itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>

<!-- RTL direction. -->

<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceBetween itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceBetween itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceAround itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceAround itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceEvenly itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceEvenly itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
    <!-- Dummy DIVs to help checking the result visually. -->
    <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
    <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

    <div class="firstRowFirstColumn"
        data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
    <div class="firstRowSecondColumn"
        data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowFirstColumn"
        data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
    <div class="secondRowSecondColumn"
        data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>

</body>
</html>

Return to Bug 156623

Lines 1905-1918 LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const a/Source/WebCore/rendering/RenderGrid.cpp_sec1
- a/Source/WebCore/rendering/RenderGrid.cpp -12 / +8 lines
1905	case GridAxisCenter: {	1905	case GridAxisCenter: {
1906	unsigned childEndLine = rowsSpan.endLine();	1906	unsigned childEndLine = rowsSpan.endLine();
1907	LayoutUnit endOfRow = m_rowPositions[childEndLine];	1907	LayoutUnit endOfRow = m_rowPositions[childEndLine];
1908	// m_rowPositions include gutters so we need to substract them to get the actual end position for a given	1908	// m_rowPositions include distribution offset (because of content alignment) and gutters
1909	// row (this does not have to be done for the last track as there are no more m_rowPositions after it)	1909	// so we need to subtract them to get the actual end position for a given row
		1910	// (this does not have to be done for the last track as there are no more m_rowPositions after it).
1910	if (childEndLine < m_rowPositions.size() - 1)	1911	if (childEndLine < m_rowPositions.size() - 1)
1911	endOfRow -= guttersSize(ForRows, 2);	1912	endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
1912	LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();	1913	LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
1913	// In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
1914	if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
1915	endOfRow -= m_offsetBetweenRows;
1916	LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);	1914	LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
1917	return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);	1915	return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
1918	}	1916	}
Lines 1939-1952 LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox& child) const a/Source/WebCore/rendering/RenderGrid.cpp_sec2
1939	case GridAxisCenter: {	1937	case GridAxisCenter: {
1940	unsigned childEndLine = columnsSpan.endLine();	1938	unsigned childEndLine = columnsSpan.endLine();
1941	LayoutUnit endOfColumn = m_columnPositions[childEndLine];	1939	LayoutUnit endOfColumn = m_columnPositions[childEndLine];
1942	// m_columnPositions include gutters so we need to substract them to get the actual end position for a given	1940	// m_columnPositions include distribution offset (because of content alignment) and gutters
1943	// column (this does not have to be done for the last track as there are no more m_columnPositions after it)	1941	// so we need to subtract them to get the actual end position for a given column
		1942	// (this does not have to be done for the last track as there are no more m_columnPositions after it).
1944	if (childEndLine < m_columnPositions.size() - 1)	1943	if (childEndLine < m_columnPositions.size() - 1)
1945	endOfColumn -= guttersSize(ForColumns, 2);	1944	endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
1946	LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();	1945	LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
1947	// In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
1948	if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
1949	endOfColumn -= m_offsetBetweenColumns;
1950	LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);	1946	LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
1951	return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);	1947	return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
1952	}	1948	}

Lines 1-5 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +19 lines
1	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>	1	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>
2		2
		3	[css-grid] Fix alignment with content distribution
		4	https://bugs.webkit.org/show_bug.cgi?id=156623
		5
		6	Reviewed by Sergio Villar Senin.
		7
		8	We were only subtracting the distribution offset for items spanning
		9	several tracks, but not for items in a single cell.
		10	We should actually subtract the offset in that situation too,
		11	the same that we do for the grid gaps.
		12
		13	Test: fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html
		14
		15	* rendering/RenderGrid.cpp:
		16	(WebCore::RenderGrid::columnAxisOffsetForChild): Subtract distribution
		17	offset like we do for gaps.
		18	(WebCore::RenderGrid::rowAxisOffsetForChild): Ditto.
		19
		20	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>
		21
3	[css-grid] Fix positioned items with content alignment	22	[css-grid] Fix positioned items with content alignment
4	https://bugs.webkit.org/show_bug.cgi?id=156597	23	https://bugs.webkit.org/show_bug.cgi?id=156597
5		24

Lines 1-5 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +17 lines
1	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>	1	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>
2		2
		3	[css-grid] Fix alignment with content distribution
		4	https://bugs.webkit.org/show_bug.cgi?id=156623
		5
		6	Reviewed by Sergio Villar Senin.
		7
		8	Created new test and renamed the old one as it was only testing
		9	items spanning several cells.
		10
		11	* fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt:
		12	* fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt:
		13	Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt.
		14	* fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html:
		15	Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment.html.
		16	* fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
		17
		18	2016-04-18 Manuel Rego Casasnovas <rego@igalia.com>
		19
3	[css-grid] Fix positioned items with content alignment	20	[css-grid] Fix positioned items with content alignment
4	https://bugs.webkit.org/show_bug.cgi?id=156597	21	https://bugs.webkit.org/show_bug.cgi?id=156597
5		22

Line 0 a/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html_sec1
- a/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html +215 lines
		1	<!DOCTYPE html>
		2	<html>
		3	<head>
		4	<link href="resources/grid.css" rel="stylesheet">
		5	<link href="resources/grid-alignment.css" rel="stylesheet">
		6	<script src="../../resources/check-layout.js"></script>
		7	<style>
		8	body {
		9	margin: 0px;
		10	}
		11
		12	.grid {
		13	-webkit-grid-auto-columns: 20px;
		14	-webkit-grid-auto-rows: 40px;
		15	-webkit-grid-template-areas: "a a b"
		16	"c d b";
		17	position: relative;
		18	width: 300px;
		19	height: 200px;
		20	}
		21	.a {
		22	-webkit-grid-area: a;
		23	background-color: blue;
		24	}
		25	.b {
		26	-webkit-grid-area: b;
		27	background-color: lime;
		28	}
		29	.c {
		30	-webkit-grid-area: c;
		31	background-color: purple;
		32	}
		33	.d {
		34	-webkit-grid-area: d;
		35	background-color: orange;
		36	}
		37	.stretchedGrid {
		38	-webkit-grid-auto-columns: minmax(20px, auto);
		39	-webkit-grid-auto-rows: minmax(40px, auto);
		40	}
		41
		42
		43	.cell {
		44	width: 20px;
		45	height: 40px;
		46	}
		47	</style>
		48	</head>
		49	<body onload="checkLayout('.grid')">
		50
		51	<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p>
		52
		53	<div style="position: relative">
		54	<p>direction: LTR \| distribution: 'space-between' \| self-alignment: center</p>
		55	<div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
		56	<div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
		57	<div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
		58	<div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
		59	<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
		60	</div>
		61	</div>
		62
		63	<div style="position: relative">
		64	<p>direction: LTR \| distribution: 'space-between' \| self-alignment: end</p>
65	<div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
66	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
67	<div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
68	<div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
69	<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
70	</div>
71	</div>
72
73	<div style="position: relative">
74	<p>direction: LTR \| distribution: 'space-around' \| self-alignment: center</p>
75	<div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
76	<div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
77	<div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
78	<div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
79	<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
80	</div>
81	</div>
82
83	<div style="position: relative">
84	<p>direction: LTR \| distribution: 'space-around' \| self-alignment: end</p>
85	<div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
86	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
87	<div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
88	<div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
89	<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
90	</div>
91	</div>
92
93	<div style="position: relative">
94	<p>direction: LTR \| distribution: 'space-evenly' \| self-alignment: center</p>
95	<div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
96	<div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
97	<div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
98	<div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
99	<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
100	</div>
101	</div>
102
103	<div style="position: relative">
104	<p>direction: LTR \| distribution: 'space-evenly' \| self-alignment: end</p>
105	<div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
106	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
107	<div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
108	<div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
109	<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
110	</div>
111	</div>
112
113	<div style="position: relative">
114	<p>direction: LTR \| distribution: 'stretch' \| self-alignment: center</p>
115	<div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
116	<div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
117	<div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
118	<div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
119	<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
120	</div>
121	</div>
122
123	<div style="position: relative">
124	<p>direction: LTR \| distribution: 'stretch' \| self-alignment: end</p>
125	<div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
126	<div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
127	<div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
128	<div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
129	<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
130	</div>
131	</div>
132
133	<!-- RTL direction. -->
134	<div style="position: relative">
135	<p>direction: RTL \| distribution: 'space-between' \| self-alignment: center</p>
136	<div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
137	<div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
138	<div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
139	<div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
140	<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
141	</div>
142	</div>
143
144	<div style="position: relative">
145	<p>direction: RTL \| distribution: 'space-between' \| self-alignment: end</p>
146	<div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
147	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
148	<div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
149	<div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
150	<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
151	</div>
152	</div>
153
154	<div style="position: relative">
155	<p>direction: RTL \| distribution: 'space-around' \| self-alignment: center</p>
156	<div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
157	<div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
158	<div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
159	<div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
160	<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
161	</div>
162	</div>
163
164	<div style="position: relative">
165	<p>direction: RTL \| distribution: 'space-around' \| self-alignment: end</p>
166	<div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
167	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
168	<div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
169	<div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
170	<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
171	</div>
172	</div>
173
174	<div style="position: relative">
175	<p>direction: RTL \| distribution: 'space-evenly' \| self-alignment: center</p>
176	<div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
177	<div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
178	<div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
179	<div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
180	<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
181	</div>
182	</div>
183
184	<div style="position: relative">
185	<p>direction: RTL \| distribution: 'space-evenly' \| self-alignment: end</p>
186	<div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
187	<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
188	<div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
189	<div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
190	<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
191	</div>
192	</div>
193
194	<div style="position: relative">
195	<p>direction: RTL \| distribution: 'stretch' \| self-alignment: center</p>
196	<div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
197	<div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
198	<div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
199	<div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
200	<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
201	</div>
202	</div>
203
204	<div style="position: relative">
205	<p>direction: RTL \| distribution: 'stretch' \| self-alignment: end</p>
206	<div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
207	<div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
208	<div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
209	<div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
210	<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
211	</div>
212	</div>
213
214	</body>
215	</html>