Attachment #260879 for bug #148070

View Details Raw Unified Return to Bug 148070

| Differences between



2015-08-27  Javier Fernandez  <jfernandez@igalia.com>

        [CSS Grid Layout] Relayout whenever Box Alignment properties change
        https://bugs.webkit.org/show_bug.cgi?id=148070

        Reviewed by NOBODY (OOPS!).

        We were Reattaching the styles to the RenderTree whenever Content Alignment
        properties (align-items and justify-items) changed their values, since the
        Self Alignment properties depend on such values to resolve 'auto' values
        during layout.

        This patch removes such restriction, since we resolve the auto values
        whenever we access the alignment properties. The only thing we need to
        do is to mark a grid item for layout whenever the Default Alignment
        properties change from/to stretch, since it implies a resize of the grid
        items using 'auto' values for the Self Alignment properties.

        Tests: fast/css-grid-layout/relayout-align-items-changed.html
               fast/css-grid-layout/relayout-align-self-changed.html
               fast/css-grid-layout/relayout-justify-items-changed.html
               fast/css-grid-layout/relayout-justify-self-changed.html
               fast/repaint/align-items-change.html
               fast/repaint/align-items-overflow-change.html
               fast/repaint/align-self-change.html
               fast/repaint/align-self-overflow-change.html
               fast/repaint/justify-items-change.html
               fast/repaint/justify-items-legacy-change.html
               fast/repaint/justify-items-overflow-change.html
               fast/repaint/justify-self-change.html
               fast/repaint/justify-self-overflow-change.html

        * rendering/RenderGrid.cpp:
        (WebCore::defaultAlignmentIsStretch):
        (WebCore::RenderGrid::styleDidChange):
        * rendering/RenderGrid.h:
        * rendering/style/RenderStyle.cpp:
        (WebCore::RenderStyle::resolveAlignmentOverflow):
        (WebCore::RenderStyle::changeRequiresLayout):
        * style/StyleResolveTree.cpp:
        (WebCore::Style::determineChange): Deleted.

2015-09-06  Chris Dumez  <cdumez@apple.com>

        dispatchEvent() should throw an InvalidStateError if the event's initialized flag is not set



{
}

static inline bool defaultAlignmentIsStretch(ItemPosition position)
{
    return position == ItemPositionStretch || position == ItemPositionAuto;
}

static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
{
    return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
}

static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
{
    return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
}

static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
{
    return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) != ItemPositionStretch
        && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
}

static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
{
    return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
        && RenderStyle::resolveAlignment(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
}

void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
{
    RenderBlock::styleDidChange(diff, oldStyle);
    if (!oldStyle || diff != StyleDifferenceLayout)
        return;

    const RenderStyle& newStyle = style();
    if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
        // Grid items that were not previously stretched in row-axis need to be relayed out so we can compute new available space.
        // Grid items that were previously stretching in column-axis need to be relayed out so we can compute new available space.
        // This is only necessary for stretching since other alignment values don't change the size of the box.
        for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
            if (child->isOutOfFlowPositioned())
                continue;
            if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style()))
                child->setChildNeedsLayout(MarkOnlyThis);
        }
    }
}

void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
{
    ASSERT(needsLayout());

Lines 49-54 public: a/Source/WebCore/rendering/RenderGrid.h_sec1
- a/Source/WebCore/rendering/RenderGrid.h +1 lines
49		49
50	Element& element() const { return downcast<Element>(nodeForNonAnonymous()); }	50	Element& element() const { return downcast<Element>(nodeForNonAnonymous()); }
51		51
		52	virtual void styleDidChange(StyleDifference, const RenderStyle* oldStyle) override;
52	virtual void layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight = 0) override;	53	virtual void layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight = 0) override;
53		54
54	virtual bool avoidsFloats() const override { return true; }	55	virtual bool avoidsFloats() const override { return true; }

Lines 196-202 ItemPosition RenderStyle::resolveAlignment(const RenderStyle& parentStyle, const a/Source/WebCore/rendering/style/RenderStyle.cpp_sec1
- a/Source/WebCore/rendering/style/RenderStyle.cpp -2 / +4 lines
196		196
197	OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)	197	OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
198	{	198	{
199	return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();	199	return resolveAlignmentData(parentStyle, childStyle, ItemPositionStretch).overflow();
200	}	200	}
201		201
202	ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)	202	ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
Lines 524-530 bool RenderStyle::changeRequiresLayout(const RenderStyle& other, unsigned& chang a/Source/WebCore/rendering/style/RenderStyle.cpp_sec2
524	\|\| rareNonInheritedData->m_alignContent != other.rareNonInheritedData->m_alignContent	524	\|\| rareNonInheritedData->m_alignContent != other.rareNonInheritedData->m_alignContent
525	\|\| rareNonInheritedData->m_alignItems != other.rareNonInheritedData->m_alignItems	525	\|\| rareNonInheritedData->m_alignItems != other.rareNonInheritedData->m_alignItems
526	\|\| rareNonInheritedData->m_alignSelf != other.rareNonInheritedData->m_alignSelf	526	\|\| rareNonInheritedData->m_alignSelf != other.rareNonInheritedData->m_alignSelf
527	\|\| rareNonInheritedData->m_justifyContent != other.rareNonInheritedData->m_justifyContent)	527	\|\| rareNonInheritedData->m_justifyContent != other.rareNonInheritedData->m_justifyContent
		528	\|\| rareNonInheritedData->m_justifyItems != other.rareNonInheritedData->m_justifyItems
		529	\|\| rareNonInheritedData->m_justifySelf != other.rareNonInheritedData->m_justifySelf)
528	return true;	530	return true;
529		531
530	if (!rareNonInheritedData->reflectionDataEquivalent(*other.rareNonInheritedData.get()))	532	if (!rareNonInheritedData->reflectionDataEquivalent(*other.rareNonInheritedData.get()))



    // a separate render region object.
    if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))
        return Detach;
    if (s1.alignItems() != s2.alignItems())
        return Detach;

    if (s1 != s2) {
        if (s1.inheritedNotEqual(&s2))



2015-08-27  Javier Fernandez  <jfernandez@igalia.com>

        [CSS Grid Layout] Relayout whenever Box Alignment properties change
        https://bugs.webkit.org/show_bug.cgi?id=148070

        Reviewed by NOBODY (OOPS!).

        Tests to verify we force a layout of grid container or grid items, as appropriated,
        whenever Box Alignment properties change their value.

        This patch also adds some repaint tests, so we can ensure we generate the correct
        repaint rects as well.

        * fast/css-grid-layout/relayout-align-items-changed-expected.txt: Added.
        * fast/css-grid-layout/relayout-align-items-changed.html: Added.
        * fast/css-grid-layout/relayout-align-self-changed-expected.txt: Added.
        * fast/css-grid-layout/relayout-align-self-changed.html: Added.
        * fast/css-grid-layout/relayout-justify-items-changed-expected.txt: Added.
        * fast/css-grid-layout/relayout-justify-items-changed.html: Added.
        * fast/css-grid-layout/relayout-justify-self-changed-expected.txt: Added.
        * fast/css-grid-layout/relayout-justify-self-changed.html: Added.
        * fast/repaint/align-items-change-expected.txt: Added.
        * fast/repaint/align-items-change.html: Added.
        * fast/repaint/align-items-overflow-change-expected.txt: Added.
        * fast/repaint/align-items-overflow-change.html: Added.
        * fast/repaint/align-self-change-expected.txt: Added.
        * fast/repaint/align-self-change.html: Added.
        * fast/repaint/align-self-overflow-change-expected.txt: Added.
        * fast/repaint/align-self-overflow-change.html: Added.
        * fast/repaint/justify-items-change-expected.txt: Added.
        * fast/repaint/justify-items-change.html: Added.
        * fast/repaint/justify-items-legacy-change-expected.txt: Added.
        * fast/repaint/justify-items-legacy-change.html: Added.
        * fast/repaint/justify-items-overflow-change-expected.txt: Added.
        * fast/repaint/justify-items-overflow-change.html: Added.
        * fast/repaint/justify-self-change-expected.txt: Added.
        * fast/repaint/justify-self-change.html: Added.
        * fast/repaint/justify-self-overflow-change-expected.txt: Added.
        * fast/repaint/justify-self-overflow-change.html: Added.

2015-09-06  Gyuyoung Kim  <gyuyoung.kim@webkit.org>

        Unreviewed, EFL gardening. Many tests have been failed since r188692.



Tests how a align-items style change requires a relayout of the grid and previously stretched items.

The grid bellow had initially 'align-items: end' and was changed to 'stretch'.

PASS
The grid bellow was initially stretched and it has now 'align-items: center'.

PASS



<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
  -webkit-grid: 100px 100px / 150px;
  position: relative;
}
#fromStretch { align-items: stretch; }
#toStretch { align-items: end; }
</style>
<script src="../../resources/check-layout.js"></script>
<p>Tests how a align-items style change requires a relayout of the grid and previously stretched items.</p>
<p>The grid bellow had initially 'align-items: end' and was changed to 'stretch'.</p>
<div id="toStretch" class="grid">
    <div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="150" data-offset-y="0">
        <div style="height: 50px"></div>
    </div>
    <div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="150" data-offset-y="0">
        <div style="height: 100px"></div>
    </div>
</div>
<p>The grid bellow was initially stretched and it has now 'align-items: center'.</p>
<div id="fromStretch" class="grid">
    <div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="50" data-offset-y="50">
        <div style="height: 50px"></div>
    </div>
    <div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="100" data-offset-y="25">
        <div style="height: 100px"></div>
    </div>
</div>
<script>
document.body.offsetLeft;
document.getElementById("toStretch").style.alignItems = "stretch";
document.getElementById("fromStretch").style.alignItems = "center";
checkLayout(".grid");
</script>



Tests how a align-self style change requires a relayout of the grid and previously stretched items.

The grid bellow had initially 'align-self: end' and was changed to 'stretch'.

PASS
The grid bellow was initially stretched and it has now 'align-self: center'.

PASS



<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
  -webkit-grid: 100px 100px / 150px;
  width: 200px;
  position: relative;
}
.toStretch { align-self: end; }
.fromStretch { align-self: stretch; }
</style>
<script src="../../resources/check-layout.js"></script>
<p>Tests how a align-self style change requires a relayout of the grid and previously stretched items.</p>
<p>The grid bellow had initially 'align-self: end' and was changed to 'stretch'.</p>
<div class="grid">
    <div style="width: 50px;" class="toStretch firstRowFirstColumn" data-expected-height="150" data-offset-y="0">
        <div style="height: 50px"></div>
    </div>
    <div style="width: 50px;" class="toStretch firstRowSecondColumn" data-expected-height="150" data-offset-y="0">
        <div style="height: 100px"></div>
    </div>
</div>
<p>The grid bellow was initially stretched and it has now 'align-self: center'.</p>
<div class="grid">
    <div style="width: 50px;" class="fromStretch firstRowFirstColumn" data-expected-height="50" data-offset-y="50">
        <div style="height: 50px"></div>
    </div>
    <div style="width: 50px;" class="fromStretch firstRowSecondColumn" data-expected-height="100" data-offset-y="25">
        <div style="height: 100px"></div>
    </div>
</div>
<script>
document.body.offsetLeft;
document.getElementsByClassName('toStretch')[0].style.alignSelf = 'stretch';
document.getElementsByClassName('toStretch')[1].style.alignSelf = 'stretch';
document.getElementsByClassName('fromStretch')[0].style.alignSelf = 'center';
document.getElementsByClassName('fromStretch')[1].style.alignSelf = 'center';
checkLayout(".grid");
</script>



Tests how a justify-items style change requires a relayout of the grid and previously stretched items.

The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.

PASS
The grid bellow was initially stretched and it has now 'justify-items: center'.

PASS



<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
  -webkit-grid: 150px / 100px 100px;
  width: 150px;
  position: relative;
}
#fromStretch { justify-items: stretch; }
#toStretch { justify-items: end; }
</style>
<script src="../../resources/check-layout.js"></script>
<p>Tests how a justify-items style change requires a relayout of the grid and previously stretched items.</p>
<p>The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.</p>
<div id="toStretch" class="grid">
    <div style="height: 50px;" class="firstRowFirstColumn" data-expected-width="150" data-offset-x="0">
        <div style="width: 50px;"></div>
    </div>
    <div style="height: 50px;" class="secondRowFirstColumn" data-expected-width="150" data-offset-x="0">
        <div style="width: 100px;"></div>
    </div>
</div>
<p>The grid bellow was initially stretched and it has now 'justify-items: center'.</p>
<div id="fromStretch" class="grid">
    <div style="height: 50px;" class="firstRowFirstColumn" data-expected-width="50" data-offset-x="50">
        <div style="width: 50px;"></div>
    </div>
    <div style="height: 50px;" class="secondRowFirstColumn" data-expected-width="100" data-offset-x="25">
        <div style="width: 100px;"></div>
    </div>
</div>
<script>
document.body.offsetLeft;
document.getElementById("toStretch").style.justifyItems = "stretch";
document.getElementById("fromStretch").style.justifyItems = "center";
checkLayout(".grid");
</script>



Tests how a justify-self style change requires a relayout of the grid and previously stretched items.

The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.

PASS
The grid bellow was initially stretched and it has now 'justify-self: center'.

PASS



<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
  -webkit-grid: 150px / 100px 100px;
  width: 150px;
  position: relative;
}
.fromStretch { justify-self: stretch; }
.toStretch { justify-self: end; }
</style>
<script src="../../resources/check-layout.js"></script>
<p>Tests how a justify-self style change requires a relayout of the grid and previously stretched items.</p>
<p>The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.</p>
<div class="grid">
    <div style="height: 50px;" class="toStretch firstRowFirstColumn" data-expected-width="150" data-offset-x="0">
        <div style="width: 50px;"></div>
    </div>
    <div style="height: 50px;" class="toStretch secondRowFirstColumn" data-expected-width="150" data-offset-x="0">
        <div style="width: 100px;"></div>
    </div>
</div>
<p>The grid bellow was initially stretched and it has now 'justify-self: center'.</p>
<div class="grid">
    <div style="height: 50px;" class="fromStretch firstRowFirstColumn" data-expected-width="50" data-offset-x="50">
        <div style="width: 50px;"></div>
    </div>
    <div style="height: 50px;" class="fromStretch secondRowFirstColumn" data-expected-width="100" data-offset-x="25">
        <div style="width: 100px;"></div>
    </div>
</div>
<script>
document.body.offsetLeft;
document.getElementsByClassName('toStretch')[0].style.justifySelf = 'stretch';
document.getElementsByClassName('toStretch')[1].style.justifySelf = 'stretch';
document.getElementsByClassName('fromStretch')[0].style.justifySelf = 'center';
document.getElementsByClassName('fromStretch')[1].style.justifySelf = 'center';
checkLayout(".grid");
</script>



Tests invalidation on align-items style change. Passes if there is no red.

(repaint rects
  (rect 0 52 100 300)
  (rect 0 51 100 1)
  (rect 100 52 100 300)
  (rect 100 51 100 1)
  (rect 0 52 200 300)
)




<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('container').style.alignItems = 'stretch';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: flex;
  align-items: flex-start;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item {
  background-color: green;
  border: solid thin blue;
  width: 100px;
}
</style>
<p style="height: 20px">Tests invalidation on align-items style change. Passes if there is no red.</p>
<div id="container">
  <div class="item">
    <div style="height: 100px"></div>
  </div>
  <div class="item">
    <div style="height: 150px"></div>
  </div>
</div>



Tests invalidation on align-items style change (just overflow). Passes if there is no red.

(repaint rects
  (rect 0 2 200 350)
  (rect 0 52 200 300)
  (rect 0 2 800 14)
)




<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('container').style.alignItems = 'end safe';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 200px / 150px 150px;
  align-items: end true;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  background-color: green;
}
.item2 {
  -webkit-grid-row: 2;
  -webkit-grid-column: 1;
  background-color: green;
}
</style>
<p style="height: 20px">Tests invalidation on align-items style change (just overflow). Passes if there is no red.</p>
<div id="container">
    <div class="item1">
        <div style="height: 200px"></div>
    </div>
    <div class="item2">
        <div style="height: 100px"></div>
    </div>
</div>



Tests invalidation on align-self style change. Passes if there is no red.

(repaint rects
  (rect 0 302 100 300)
  (rect 0 302 100 50)
  (rect 0 52 100 300)
  (rect 100 52 100 300)
)




<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementsByClassName('item1')[0].style.alignSelf = 'stretch';
  document.getElementsByClassName('item2')[0].style.alignSelf = 'stretch';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 100px 100px / 300px;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  align-self: end;
  background-color: green;
}
.item2 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 2;
  align-self: start;
  background-color: green;
}
</style>
<p style="height: 20px">Tests invalidation on align-self style change. Passes if there is no red.</p>
<div id="container">
  <div class="item1">
    <div style="height: 50px"></div>
  </div>
  <div class="item2">
    <div style="height: 50px"></div>
  </div>
</div>



Tests invalidation on align-self style change (just overflow). Passes if there is no red.

(repaint rects
  (rect 0 2 200 200)
  (rect 0 2 200 200)
  (rect 0 52 200 200)
  (rect 0 252 200 100)
  (rect 0 2 200 50)
  (rect 0 2 800 14)
)




<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementsByClassName('item1')[0].style.alignSelf = 'end safe';
  document.getElementsByClassName('item2')[0].style.alignSelf = 'end safe';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 200px / 150px 150px;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  align-self: end true;
  background-color: green;
}
.item2 {
  -webkit-grid-row: 2;
  -webkit-grid-column: 1;
  align-self: end true;
  background-color: green;
</style>
<p style="height: 20px">Tests invalidation on align-self style change (just overflow). Passes if there is no red.</p>
<div id="container">
  <div class="item1">
    <div style="height: 200px"></div>
  </div>
  <div class="item2">
    <div style="height: 100px"></div>
  </div>
</div>

Line 0 a/LayoutTests/fast/repaint/justify-items-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/justify-items-change-expected.txt +7 lines
	1	Tests invalidation on justify-items style change. Passes if there is no red.
	2
	3	(repaint rects
	4	(rect 200 52 150 300)
	5	(rect 0 52 200 300)
	6	)
	7



<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('container').style.justifyItems = 'stretch';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 200px / 300px;
  justify-items: end;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  background-color: green;
}
</style>
<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
<div id="container">
  <div class="item">
    <div style="width: 50px; height: 50px"></div>
  </div>
</div>

Line 0 a/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt +6 lines
	1	Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.
	2
	3	(repaint rects
	4	(rect 0 52 300 400)
	5	)
	6



<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('parentContainer').style.justifyItems = 'legacy center';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#parentContainer {
  justify-items: center;
  background-color: orange;
  width: 300px;
  height: 400px;
}

#container {
  display: -webkit-grid;
  -webkit-grid: 100px 100px / 150px 150px;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  background-color: green;
  border: solid thin blue;
  width: 50px;
}
.item2 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 2;
  background-color: green;
  border: solid thin blue;
  width: 50px;
</style>
<p style="height: 20px">Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.</p>
<div id="parentContainer">
    <div id="container">
        <div class="item1">
            <div style="height: 50px"></div>
        </div>
        <div class="item2">
            <div style="height: 50px"></div>
        </div>
    </div>
</div>



Tests invalidation on justify-items style change. Passes if there is no red.

(repaint rects
  (rect -60 52 260 300)
  (rect 0 52 200 300)
  (rect -60 16 60 336)
  (rect -60 0 60 352)
)




<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('container').style.justifyItems = 'end safe';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 100px 100px / 300px;
  justify-items: end true;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  background-color: green;
  width: 160px;
}
.item2 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 2;
  background-color: green;
  width: 50px;
</style>
<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
<div id="container">
  <div class="item1">
    <div style="height: 50px"></div>
  </div>
  <div class="item2">
    <div style="height: 50px"></div>
  </div>
</div>

Line 0 a/LayoutTests/fast/repaint/justify-self-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/justify-self-change-expected.txt +13 lines
	1	Tests invalidation on justify-self style change. Passes if there is no red.
	2
	3	(repaint rects
	4	(rect 24 52 52 300)
	5	(rect 24 52 100 300)
	6	(rect 24 52 52 300)
	7	(rect 0 52 100 300)
	8	(rect 124 52 52 300)
	9	(rect 124 52 100 300)
	10	(rect 124 52 52 300)
	11	(rect 100 52 100 300)
	12	)
	13



<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementsByClassName('item1')[0].style.justifySelf = 'stretch';
  document.getElementsByClassName('item2')[0].style.justifySelf = 'stretch';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 100px 100px / 300px;
  justify-items: center;
  width: 200px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  background-color: green;
  border: solid thin blue;
}
.item2 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 2;
  background-color: green;
  border: solid thin blue;
</style>
<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
<div id="container">
  <div class="item1">
    <div style="width: 50px; height: 150px"></div>
  </div>
  <div class="item2">
    <div style="width: 50px; height: 100px"></div>
  </div>
</div>

Line 0 a/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt +12 lines
	1	Tests invalidation on justify-self style change. Passes if there is no red.
	2
	3	(repaint rects
	4	(rect -50 52 150 300)
	5	(rect -50 52 150 300)
	6	(rect 0 52 150 300)
	7	(rect 150 52 50 300)
	8	(rect -50 52 50 300)
	9	(rect -50 16 50 336)
	10	(rect -50 0 50 352)
	11	)
	12



<!DOCTYPE HTML>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementsByClassName('item1')[0].style.justifySelf = 'end safe';
  document.getElementsByClassName('item2')[0].style.justifySelf = 'end safe';
}
onload = runRepaintTest;
</script>
<style>
body {
  margin: 0;
}
#container {
  display: -webkit-grid;
  -webkit-grid: 100px 100px / 300px;
  width: 200px;
  height: 300px;
  background-color: red;
}
.item1 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 1;
  justify-self: end true;
  background-color: green;
  width: 150px;
}
.item2 {
  -webkit-grid-row: 1;
  -webkit-grid-column: 2;
  background-color: green;
  justify-self: end true;
  width: 50px;
</style>
<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
<div id="container">
  <div class="item1">
    <div style="height: 150px"></div>
  </div>
  <div class="item2">
    <div style="height: 100px"></div>
  </div>
</div>

Return to Bug 148070

Lines 242-247 RenderGrid::~RenderGrid() a/Source/WebCore/rendering/RenderGrid.cpp_sec1
- a/Source/WebCore/rendering/RenderGrid.cpp +47 lines
242	{	242	{
243	}	243	}
244		244
		245	static inline bool defaultAlignmentIsStretch(ItemPosition position)
		246	{
		247	return position == ItemPositionStretch \|\| position == ItemPositionAuto;
		248	}
		249
		250	static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
		251	{
		252	return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
		253	}
		254
		255	static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
		256	{
		257	return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
		258	}
		259
		260	static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
		261	{
		262	return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) != ItemPositionStretch
		263	&& RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
		264	}
		265
		266	static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
		267	{
		268	return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
		269	&& RenderStyle::resolveAlignment(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
		270	}
		271
		272	void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
		273	{
		274	RenderBlock::styleDidChange(diff, oldStyle);
		275	if (!oldStyle \|\| diff != StyleDifferenceLayout)
		276	return;
		277
		278	const RenderStyle& newStyle = style();
		279	if (defaultAlignmentChangedToStretchInRowAxis(oldStyle, newStyle) \|\| defaultAlignmentChangedFromStretchInColumnAxis(oldStyle, newStyle)) {
		280	// Grid items that were not previously stretched in row-axis need to be relayed out so we can compute new available space.
		281	// Grid items that were previously stretching in column-axis need to be relayed out so we can compute new available space.
		282	// This is only necessary for stretching since other alignment values don't change the size of the box.
		283	for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
		284	if (child->isOutOfFlowPositioned())
		285	continue;
		286	if (selfAlignmentChangedToStretchInRowAxis(oldStyle, newStyle, child->style()) \|\| selfAlignmentChangedFromStretchInColumnAxis(oldStyle, newStyle, child->style()))
		287	child->setChildNeedsLayout(MarkOnlyThis);
		288	}
		289	}
		290	}
		291
245	void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)	292	void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
246	{	293	{
247	ASSERT(needsLayout());	294	ASSERT(needsLayout());

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +42 lines
		1	2015-08-27 Javier Fernandez <jfernandez@igalia.com>
		2
		3	[CSS Grid Layout] Relayout whenever Box Alignment properties change
		4	https://bugs.webkit.org/show_bug.cgi?id=148070
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	We were Reattaching the styles to the RenderTree whenever Content Alignment
		9	properties (align-items and justify-items) changed their values, since the
		10	Self Alignment properties depend on such values to resolve 'auto' values
		11	during layout.
		12
		13	This patch removes such restriction, since we resolve the auto values
		14	whenever we access the alignment properties. The only thing we need to
		15	do is to mark a grid item for layout whenever the Default Alignment
		16	properties change from/to stretch, since it implies a resize of the grid
		17	items using 'auto' values for the Self Alignment properties.
		18
		19	Tests: fast/css-grid-layout/relayout-align-items-changed.html
		20	fast/css-grid-layout/relayout-align-self-changed.html
		21	fast/css-grid-layout/relayout-justify-items-changed.html
		22	fast/css-grid-layout/relayout-justify-self-changed.html
		23	fast/repaint/align-items-change.html
		24	fast/repaint/align-items-overflow-change.html
		25	fast/repaint/align-self-change.html
		26	fast/repaint/align-self-overflow-change.html
		27	fast/repaint/justify-items-change.html
		28	fast/repaint/justify-items-legacy-change.html
		29	fast/repaint/justify-items-overflow-change.html
		30	fast/repaint/justify-self-change.html
		31	fast/repaint/justify-self-overflow-change.html
		32
		33	* rendering/RenderGrid.cpp:
		34	(WebCore::defaultAlignmentIsStretch):
		35	(WebCore::RenderGrid::styleDidChange):
		36	* rendering/RenderGrid.h:
		37	* rendering/style/RenderStyle.cpp:
		38	(WebCore::RenderStyle::resolveAlignmentOverflow):
		39	(WebCore::RenderStyle::changeRequiresLayout):
		40	* style/StyleResolveTree.cpp:
		41	(WebCore::Style::determineChange): Deleted.
		42
1	2015-09-06 Chris Dumez <cdumez@apple.com>	43	2015-09-06 Chris Dumez <cdumez@apple.com>
2		44
3	dispatchEvent() should throw an InvalidStateError if the event's initialized flag is not set	45	dispatchEvent() should throw an InvalidStateError if the event's initialized flag is not set

Lines 97-104 Change determineChange(const RenderStyle& s1, const RenderStyle& s2) a/Source/WebCore/style/StyleResolveTree.cpp_sec1
- a/Source/WebCore/style/StyleResolveTree.cpp -2 lines
97	// a separate render region object.	97	// a separate render region object.
98	if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))	98	if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))
99	return Detach;	99	return Detach;
100	if (s1.alignItems() != s2.alignItems())
101	return Detach;
102		100
103	if (s1 != s2) {	101	if (s1 != s2) {
104	if (s1.inheritedNotEqual(&s2))	102	if (s1.inheritedNotEqual(&s2))

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +40 lines
		1	2015-08-27 Javier Fernandez <jfernandez@igalia.com>
		2
		3	[CSS Grid Layout] Relayout whenever Box Alignment properties change
		4	https://bugs.webkit.org/show_bug.cgi?id=148070
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Tests to verify we force a layout of grid container or grid items, as appropriated,
		9	whenever Box Alignment properties change their value.
		10
		11	This patch also adds some repaint tests, so we can ensure we generate the correct
		12	repaint rects as well.
		13
		14	* fast/css-grid-layout/relayout-align-items-changed-expected.txt: Added.
		15	* fast/css-grid-layout/relayout-align-items-changed.html: Added.
		16	* fast/css-grid-layout/relayout-align-self-changed-expected.txt: Added.
		17	* fast/css-grid-layout/relayout-align-self-changed.html: Added.
		18	* fast/css-grid-layout/relayout-justify-items-changed-expected.txt: Added.
		19	* fast/css-grid-layout/relayout-justify-items-changed.html: Added.
		20	* fast/css-grid-layout/relayout-justify-self-changed-expected.txt: Added.
		21	* fast/css-grid-layout/relayout-justify-self-changed.html: Added.
		22	* fast/repaint/align-items-change-expected.txt: Added.
		23	* fast/repaint/align-items-change.html: Added.
		24	* fast/repaint/align-items-overflow-change-expected.txt: Added.
		25	* fast/repaint/align-items-overflow-change.html: Added.
		26	* fast/repaint/align-self-change-expected.txt: Added.
		27	* fast/repaint/align-self-change.html: Added.
		28	* fast/repaint/align-self-overflow-change-expected.txt: Added.
		29	* fast/repaint/align-self-overflow-change.html: Added.
		30	* fast/repaint/justify-items-change-expected.txt: Added.
		31	* fast/repaint/justify-items-change.html: Added.
		32	* fast/repaint/justify-items-legacy-change-expected.txt: Added.
		33	* fast/repaint/justify-items-legacy-change.html: Added.
		34	* fast/repaint/justify-items-overflow-change-expected.txt: Added.
		35	* fast/repaint/justify-items-overflow-change.html: Added.
		36	* fast/repaint/justify-self-change-expected.txt: Added.
		37	* fast/repaint/justify-self-change.html: Added.
		38	* fast/repaint/justify-self-overflow-change-expected.txt: Added.
		39	* fast/repaint/justify-self-overflow-change.html: Added.
		40
1	2015-09-06 Gyuyoung Kim <gyuyoung.kim@webkit.org>	41	2015-09-06 Gyuyoung Kim <gyuyoung.kim@webkit.org>
2		42
3	Unreviewed, EFL gardening. Many tests have been failed since r188692.	43	Unreviewed, EFL gardening. Many tests have been failed since r188692.

Line 0 a/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt +8 lines
	1	Tests how a align-items style change requires a relayout of the grid and previously stretched items.
	2
	3	The grid bellow had initially 'align-items: end' and was changed to 'stretch'.
	4
	5	PASS
	6	The grid bellow was initially stretched and it has now 'align-items: center'.
	7
	8	PASS

Line 0 a/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html_sec1
- a/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html +36 lines
	1	<!DOCTYPE HTML>
	2	<link href="resources/grid.css" rel="stylesheet">
	3	<style>
	4	.grid {
	5	-webkit-grid: 100px 100px / 150px;
	6	position: relative;
	7	}
	8	#fromStretch { align-items: stretch; }
	9	#toStretch { align-items: end; }
	10	</style>
	11	<script src="../../resources/check-layout.js"></script>
	12	<p>Tests how a align-items style change requires a relayout of the grid and previously stretched items.</p>
	13	<p>The grid bellow had initially 'align-items: end' and was changed to 'stretch'.</p>
	14	<div id="toStretch" class="grid">
	15	<div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="150" data-offset-y="0">
	16	<div style="height: 50px"></div>
	17	</div>
	18	<div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="150" data-offset-y="0">
	19	<div style="height: 100px"></div>
	20	</div>
	21	</div>
	22	<p>The grid bellow was initially stretched and it has now 'align-items: center'.</p>
	23	<div id="fromStretch" class="grid">
	24	<div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="50" data-offset-y="50">
	25	<div style="height: 50px"></div>
	26	</div>
	27	<div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="100" data-offset-y="25">
	28	<div style="height: 100px"></div>
	29	</div>
	30	</div>
	31	<script>
	32	document.body.offsetLeft;
	33	document.getElementById("toStretch").style.alignItems = "stretch";
	34	document.getElementById("fromStretch").style.alignItems = "center";
	35	checkLayout(".grid");
	36	</script>

Line 0 a/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt +8 lines
	1	Tests how a align-self style change requires a relayout of the grid and previously stretched items.
	2
	3	The grid bellow had initially 'align-self: end' and was changed to 'stretch'.
	4
	5	PASS
	6	The grid bellow was initially stretched and it has now 'align-self: center'.
	7
	8	PASS

Line 0 a/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt +8 lines
	1	Tests how a justify-items style change requires a relayout of the grid and previously stretched items.
	2
	3	The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.
	4
	5	PASS
	6	The grid bellow was initially stretched and it has now 'justify-items: center'.
	7
	8	PASS

Line 0 a/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt_sec1
- a/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt +8 lines
	1	Tests how a justify-self style change requires a relayout of the grid and previously stretched items.
	2
	3	The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.
	4
	5	PASS
	6	The grid bellow was initially stretched and it has now 'justify-self: center'.
	7
	8	PASS

Line 0 a/LayoutTests/fast/repaint/align-items-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/align-items-change-expected.txt +10 lines
	1	Tests invalidation on align-items style change. Passes if there is no red.
	2
	3	(repaint rects
	4	(rect 0 52 100 300)
	5	(rect 0 51 100 1)
	6	(rect 100 52 100 300)
	7	(rect 100 51 100 1)
	8	(rect 0 52 200 300)
	9	)
	10

Line 0 a/LayoutTests/fast/repaint/align-items-change.html_sec1
- a/LayoutTests/fast/repaint/align-items-change.html +34 lines
	1	<!DOCTYPE HTML>
	2	<script src="resources/text-based-repaint.js"></script>
	3	<script>
	4	function repaintTest() {
	5	document.getElementById('container').style.alignItems = 'stretch';
	6	}
	7	onload = runRepaintTest;
	8	</script>
	9	<style>
	10	body {
	11	margin: 0;
	12	}
	13	#container {
	14	display: flex;
	15	align-items: flex-start;
	16	width: 200px;
	17	height: 300px;
	18	background-color: red;
	19	}
	20	.item {
	21	background-color: green;
	22	border: solid thin blue;
	23	width: 100px;
	24	}
	25	</style>
	26	<p style="height: 20px">Tests invalidation on align-items style change. Passes if there is no red.</p>
	27	<div id="container">
	28	<div class="item">
	29	<div style="height: 100px"></div>
	30	</div>
	31	<div class="item">
	32	<div style="height: 150px"></div>
	33	</div>
	34	</div>

Line 0 a/LayoutTests/fast/repaint/align-self-change-expected.txt_sec1
- a/LayoutTests/fast/repaint/align-self-change-expected.txt +9 lines
	1	Tests invalidation on align-self style change. Passes if there is no red.
	2
	3	(repaint rects
	4	(rect 0 302 100 300)
	5	(rect 0 302 100 50)
	6	(rect 0 52 100 300)
	7	(rect 100 52 100 300)
	8	)
	9