Source/WebCore/ChangeLog

 12015-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
1432015-09-06 Chris Dumez <cdumez@apple.com>
244
345 dispatchEvent() should throw an InvalidStateError if the event's initialized flag is not set

Source/WebCore/rendering/RenderGrid.cpp

@@RenderGrid::~RenderGrid()
242242{
243243}
244244
 245static inline bool defaultAlignmentIsStretch(ItemPosition position)
 246{
 247 return position == ItemPositionStretch || position == ItemPositionAuto;
 248}
 249
 250static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
 251{
 252 return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
 253}
 254
 255static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
 256{
 257 return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
 258}
 259
 260static 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
 266static 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
 272void 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
245292void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
246293{
247294 ASSERT(needsLayout());

Source/WebCore/rendering/RenderGrid.h

@@public:
4949
5050 Element& element() const { return downcast<Element>(nodeForNonAnonymous()); }
5151
 52 virtual void styleDidChange(StyleDifference, const RenderStyle* oldStyle) override;
5253 virtual void layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight = 0) override;
5354
5455 virtual bool avoidsFloats() const override { return true; }

Source/WebCore/rendering/style/RenderStyle.cpp

@@ItemPosition RenderStyle::resolveAlignment(const RenderStyle& parentStyle, const
196196
197197OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
198198{
199  return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
 199 return resolveAlignmentData(parentStyle, childStyle, ItemPositionStretch).overflow();
200200}
201201
202202ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)

@@bool RenderStyle::changeRequiresLayout(const RenderStyle& other, unsigned& chang
524524 || rareNonInheritedData->m_alignContent != other.rareNonInheritedData->m_alignContent
525525 || rareNonInheritedData->m_alignItems != other.rareNonInheritedData->m_alignItems
526526 || 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)
528530 return true;
529531
530532 if (!rareNonInheritedData->reflectionDataEquivalent(*other.rareNonInheritedData.get()))

Source/WebCore/style/StyleResolveTree.cpp

@@Change determineChange(const RenderStyle& s1, const RenderStyle& s2)
9797 // a separate render region object.
9898 if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))
9999 return Detach;
100  if (s1.alignItems() != s2.alignItems())
101  return Detach;
102100
103101 if (s1 != s2) {
104102 if (s1.inheritedNotEqual(&s2))

LayoutTests/ChangeLog

 12015-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
1412015-09-06 Gyuyoung Kim <gyuyoung.kim@webkit.org>
242
343 Unreviewed, EFL gardening. Many tests have been failed since r188692.

LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt

 1Tests how a align-items style change requires a relayout of the grid and previously stretched items.
 2
 3The grid bellow had initially 'align-items: end' and was changed to 'stretch'.
 4
 5PASS
 6The grid bellow was initially stretched and it has now 'align-items: center'.
 7
 8PASS

LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html

 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>
 32document.body.offsetLeft;
 33document.getElementById("toStretch").style.alignItems = "stretch";
 34document.getElementById("fromStretch").style.alignItems = "center";
 35checkLayout(".grid");
 36</script>

LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt

 1Tests how a align-self style change requires a relayout of the grid and previously stretched items.
 2
 3The grid bellow had initially 'align-self: end' and was changed to 'stretch'.
 4
 5PASS
 6The grid bellow was initially stretched and it has now 'align-self: center'.
 7
 8PASS

LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html

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

LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt

 1Tests how a justify-items style change requires a relayout of the grid and previously stretched items.
 2
 3The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.
 4
 5PASS
 6The grid bellow was initially stretched and it has now 'justify-items: center'.
 7
 8PASS

LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html

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

LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt

 1Tests how a justify-self style change requires a relayout of the grid and previously stretched items.
 2
 3The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.
 4
 5PASS
 6The grid bellow was initially stretched and it has now 'justify-self: center'.
 7
 8PASS

LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html

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

LayoutTests/fast/repaint/align-items-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/align-items-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementById('container').style.alignItems = 'stretch';
 6}
 7onload = runRepaintTest;
 8</script>
 9<style>
 10body {
 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>

LayoutTests/fast/repaint/align-items-overflow-change-expected.txt

 1Tests invalidation on align-items style change (just overflow). Passes if there is no red.
 2
 3(repaint rects
 4 (rect 0 2 200 350)
 5 (rect 0 52 200 300)
 6 (rect 0 2 800 14)
 7)
 8

LayoutTests/fast/repaint/align-items-overflow-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementById('container').style.alignItems = 'end safe';
 6}
 7onload = runRepaintTest;
 8</script>
 9<style>
 10body {
 11 margin: 0;
 12}
 13#container {
 14 display: -webkit-grid;
 15 -webkit-grid: 200px / 150px 150px;
 16 align-items: end true;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 background-color: green;
 25}
 26.item2 {
 27 -webkit-grid-row: 2;
 28 -webkit-grid-column: 1;
 29 background-color: green;
 30}
 31</style>
 32<p style="height: 20px">Tests invalidation on align-items style change (just overflow). Passes if there is no red.</p>
 33<div id="container">
 34 <div class="item1">
 35 <div style="height: 200px"></div>
 36 </div>
 37 <div class="item2">
 38 <div style="height: 100px"></div>
 39 </div>
 40</div>

LayoutTests/fast/repaint/align-self-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/align-self-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementsByClassName('item1')[0].style.alignSelf = 'stretch';
 6 document.getElementsByClassName('item2')[0].style.alignSelf = 'stretch';
 7}
 8onload = runRepaintTest;
 9</script>
 10<style>
 11body {
 12 margin: 0;
 13}
 14#container {
 15 display: -webkit-grid;
 16 -webkit-grid: 100px 100px / 300px;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 align-self: end;
 25 background-color: green;
 26}
 27.item2 {
 28 -webkit-grid-row: 1;
 29 -webkit-grid-column: 2;
 30 align-self: start;
 31 background-color: green;
 32}
 33</style>
 34<p style="height: 20px">Tests invalidation on align-self style change. Passes if there is no red.</p>
 35<div id="container">
 36 <div class="item1">
 37 <div style="height: 50px"></div>
 38 </div>
 39 <div class="item2">
 40 <div style="height: 50px"></div>
 41 </div>
 42</div>

LayoutTests/fast/repaint/align-self-overflow-change-expected.txt

 1Tests invalidation on align-self style change (just overflow). Passes if there is no red.
 2
 3(repaint rects
 4 (rect 0 2 200 200)
 5 (rect 0 2 200 200)
 6 (rect 0 52 200 200)
 7 (rect 0 252 200 100)
 8 (rect 0 2 200 50)
 9 (rect 0 2 800 14)
 10)
 11

LayoutTests/fast/repaint/align-self-overflow-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementsByClassName('item1')[0].style.alignSelf = 'end safe';
 6 document.getElementsByClassName('item2')[0].style.alignSelf = 'end safe';
 7}
 8onload = runRepaintTest;
 9</script>
 10<style>
 11body {
 12 margin: 0;
 13}
 14#container {
 15 display: -webkit-grid;
 16 -webkit-grid: 200px / 150px 150px;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 align-self: end true;
 25 background-color: green;
 26}
 27.item2 {
 28 -webkit-grid-row: 2;
 29 -webkit-grid-column: 1;
 30 align-self: end true;
 31 background-color: green;
 32</style>
 33<p style="height: 20px">Tests invalidation on align-self style change (just overflow). Passes if there is no red.</p>
 34<div id="container">
 35 <div class="item1">
 36 <div style="height: 200px"></div>
 37 </div>
 38 <div class="item2">
 39 <div style="height: 100px"></div>
 40 </div>
 41</div>

LayoutTests/fast/repaint/justify-items-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/justify-items-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementById('container').style.justifyItems = 'stretch';
 6}
 7onload = runRepaintTest;
 8</script>
 9<style>
 10body {
 11 margin: 0;
 12}
 13#container {
 14 display: -webkit-grid;
 15 -webkit-grid: 200px / 300px;
 16 justify-items: end;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 background-color: green;
 25}
 26</style>
 27<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
 28<div id="container">
 29 <div class="item">
 30 <div style="width: 50px; height: 50px"></div>
 31 </div>
 32</div>

LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/justify-items-legacy-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementById('parentContainer').style.justifyItems = 'legacy center';
 6}
 7onload = runRepaintTest;
 8</script>
 9<style>
 10body {
 11 margin: 0;
 12}
 13#parentContainer {
 14 justify-items: center;
 15 background-color: orange;
 16 width: 300px;
 17 height: 400px;
 18}
 19
 20#container {
 21 display: -webkit-grid;
 22 -webkit-grid: 100px 100px / 150px 150px;
 23 width: 200px;
 24 height: 300px;
 25 background-color: red;
 26}
 27.item1 {
 28 -webkit-grid-row: 1;
 29 -webkit-grid-column: 1;
 30 background-color: green;
 31 border: solid thin blue;
 32 width: 50px;
 33}
 34.item2 {
 35 -webkit-grid-row: 1;
 36 -webkit-grid-column: 2;
 37 background-color: green;
 38 border: solid thin blue;
 39 width: 50px;
 40</style>
 41<p style="height: 20px">Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.</p>
 42<div id="parentContainer">
 43 <div id="container">
 44 <div class="item1">
 45 <div style="height: 50px"></div>
 46 </div>
 47 <div class="item2">
 48 <div style="height: 50px"></div>
 49 </div>
 50 </div>
 51</div>

LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt

 1Tests invalidation on justify-items style change. Passes if there is no red.
 2
 3(repaint rects
 4 (rect -60 52 260 300)
 5 (rect 0 52 200 300)
 6 (rect -60 16 60 336)
 7 (rect -60 0 60 352)
 8)
 9

LayoutTests/fast/repaint/justify-items-overflow-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementById('container').style.justifyItems = 'end safe';
 6}
 7onload = runRepaintTest;
 8</script>
 9<style>
 10body {
 11 margin: 0;
 12}
 13#container {
 14 display: -webkit-grid;
 15 -webkit-grid: 100px 100px / 300px;
 16 justify-items: end true;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 background-color: green;
 25 width: 160px;
 26}
 27.item2 {
 28 -webkit-grid-row: 1;
 29 -webkit-grid-column: 2;
 30 background-color: green;
 31 width: 50px;
 32</style>
 33<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
 34<div id="container">
 35 <div class="item1">
 36 <div style="height: 50px"></div>
 37 </div>
 38 <div class="item2">
 39 <div style="height: 50px"></div>
 40 </div>
 41</div>

LayoutTests/fast/repaint/justify-self-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/justify-self-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementsByClassName('item1')[0].style.justifySelf = 'stretch';
 6 document.getElementsByClassName('item2')[0].style.justifySelf = 'stretch';
 7}
 8onload = runRepaintTest;
 9</script>
 10<style>
 11body {
 12 margin: 0;
 13}
 14#container {
 15 display: -webkit-grid;
 16 -webkit-grid: 100px 100px / 300px;
 17 justify-items: center;
 18 width: 200px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 background-color: green;
 25 border: solid thin blue;
 26}
 27.item2 {
 28 -webkit-grid-row: 1;
 29 -webkit-grid-column: 2;
 30 background-color: green;
 31 border: solid thin blue;
 32</style>
 33<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
 34<div id="container">
 35 <div class="item1">
 36 <div style="width: 50px; height: 150px"></div>
 37 </div>
 38 <div class="item2">
 39 <div style="width: 50px; height: 100px"></div>
 40 </div>
 41</div>

LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt

 1Tests 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

LayoutTests/fast/repaint/justify-self-overflow-change.html

 1<!DOCTYPE HTML>
 2<script src="resources/text-based-repaint.js"></script>
 3<script>
 4function repaintTest() {
 5 document.getElementsByClassName('item1')[0].style.justifySelf = 'end safe';
 6 document.getElementsByClassName('item2')[0].style.justifySelf = 'end safe';
 7}
 8onload = runRepaintTest;
 9</script>
 10<style>
 11body {
 12 margin: 0;
 13}
 14#container {
 15 display: -webkit-grid;
 16 -webkit-grid: 100px 100px / 300px;
 17 width: 200px;
 18 height: 300px;
 19 background-color: red;
 20}
 21.item1 {
 22 -webkit-grid-row: 1;
 23 -webkit-grid-column: 1;
 24 justify-self: end true;
 25 background-color: green;
 26 width: 150px;
 27}
 28.item2 {
 29 -webkit-grid-row: 1;
 30 -webkit-grid-column: 2;
 31 background-color: green;
 32 justify-self: end true;
 33 width: 50px;
 34</style>
 35<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
 36<div id="container">
 37 <div class="item1">
 38 <div style="height: 150px"></div>
 39 </div>
 40 <div class="item2">
 41 <div style="height: 100px"></div>
 42 </div>
 43</div>