Attachment 232436 Details for Bug 132332 – Patch

[patch] Patch

bug-132332-20140603220609.patch (text/plain), 21.34 KB, created by Manuel Rego Casasnovas on 2014-06-03 13:06:35 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Manuel Rego Casasnovas

Created: 2014-06-03 13:06:35 PDT

Size: 21.34 KB

patch

obsolete

>Subversion Revision: 169545
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 5dca5edbe96e5101208af706c7cfba13aa15f2ab..d4e50bea68028b1fb192cff16394402c5894cf7b 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,39 @@
>+2014-06-03  Manuel Rego Casasnovas  <rego@igalia.com>
>+
>+        [CSS Grid Layout] Grid optimization keeping track of its status
>+        https://bugs.webkit.org/show_bug.cgi?id=132332
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        From Blink r155262 by <jchaffraix@chromium.org>
>+
>+        This patch implements the logic to correctly invalidate m_grid whenever needed marking it as dirty. This makes
>+        grid layout perf tests to run around 29% faster.
>+
>+        Add new layout tests to check changes in grid-template-{rows|columns} and order properties. We already have
>+        tests for the other cases: grid items adittion, removal, etc.
>+
>+        Tests: fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
>+               fast/css-grid-layout/grid-item-change-order-auto-flow.html
>+
>+        * rendering/RenderBox.cpp:
>+        (WebCore::RenderBox::styleDidChange): Invalidate grid if needed.
>+        (WebCore::RenderBox::updateGridPositionAfterStyleChange): Mark grid as dirty if needed.
>+        * rendering/RenderBox.h: Add new method signature.
>+        * rendering/RenderGrid.cpp:
>+        (WebCore::RenderGrid::RenderGrid): By default grid is dirty.
>+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths): Do not need to mark grid as dirty.
>+        (WebCore::RenderGrid::placeItemsOnGrid): Only run if grid is dirty.
>+        (WebCore::RenderGrid::dirtyGrid): Mark grid as dirty and clear it. Renamed from clearGrid().
>+        (WebCore::RenderGrid::layoutGridItems): Do not need to mark grid as dirty.
>+        (WebCore::RenderGrid::addChild): Mark grid as dirty.
>+        (WebCore::RenderGrid::removeChild): Ditto.
>+        (WebCore::RenderGrid::styleDidChange): Mark grid as dirty if needed.
>+        (WebCore::RenderGrid::explicitGridDidResize): Checks if grid size has changed.
>+        (WebCore::RenderGrid::namedGridLinesDefinitionDidChange): Checks if named grid lines have changed.
>+        (WebCore::RenderGrid::clearGrid): Deleted. Renamed to dirtyGrid().
>+        * rendering/RenderGrid.h: Add new member m_gridIsDirty and new methods signatures.
>+
> 2014-06-02  Jeremy Jones  <jeremyj@apple.com>
> 
>         Send external playback properties to fullscreen.
>diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
>index 181a8233e446751cd4b02486bb1eeacaee080f9c..f0932afd5e9cd0af241f4d47f3a70a84f2db9569 100644
>--- a/Source/WebCore/rendering/RenderBox.cpp
>+++ b/Source/WebCore/rendering/RenderBox.cpp
>@@ -48,6 +48,9 @@
> #include "RenderGeometryMap.h"
> #include "RenderInline.h"
> #include "RenderIterator.h"
>+#if ENABLE(CSS_GRID_LAYOUT)
>+#include "RenderGrid.h"
>+#endif
> #include "RenderLayer.h"
> #include "RenderLayerCompositor.h"
> #include "RenderNamedFlowFragment.h"
>@@ -400,7 +403,30 @@ void RenderBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle
>     if ((oldStyle && oldStyle->shapeOutside()) || style().shapeOutside())
>         updateShapeOutsideInfoAfterStyleChange(style(), oldStyle);
> #endif
>+
>+#if ENABLE(CSS_GRID_LAYOUT)
>+    updateGridPositionAfterStyleChange(style(), oldStyle);
>+#endif
>+}
>+
>+#if ENABLE(CSS_GRID_LAYOUT)
>+void RenderBox::updateGridPositionAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
>+{
>+    if (!oldStyle || !parent() || !parent()->isRenderGrid())
>+        return;
>+
>+    if (oldStyle->gridItemColumnStart() == style.gridItemColumnStart()
>+        && oldStyle->gridItemColumnEnd() == style.gridItemColumnEnd()
>+        && oldStyle->gridItemRowStart() == style.gridItemRowStart()
>+        && oldStyle->gridItemRowEnd() == style.gridItemRowEnd()
>+        && oldStyle->order() == style.order())
>+        return;
>+
>+    // It should be possible to not dirty the grid in some cases (like moving an explicitly placed grid item).
>+    // For now, it's more simple to just always recompute the grid.
>+    toRenderGrid(parent())->dirtyGrid();
> }
>+#endif
> 
> #if ENABLE(CSS_SHAPES)
> void RenderBox::updateShapeOutsideInfoAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
>diff --git a/Source/WebCore/rendering/RenderBox.h b/Source/WebCore/rendering/RenderBox.h
>index e33fb9dafd5147d8a5dc8c726a9700f9e52aa76e..ed46dd9e6a7a4dd440f36cfd290bad79ec6acb8f 100644
>--- a/Source/WebCore/rendering/RenderBox.h
>+++ b/Source/WebCore/rendering/RenderBox.h
>@@ -656,6 +656,9 @@ protected:
>     RenderObject* splitAnonymousBoxesAroundChild(RenderObject* beforeChild);
>  
> private:
>+#if ENABLE(CSS_GRID_LAYOUT)
>+    void updateGridPositionAfterStyleChange(const RenderStyle&, const RenderStyle* oldStyle);
>+#endif
> #if ENABLE(CSS_SHAPES)
>     void updateShapeOutsideInfoAfterStyleChange(const RenderStyle&, const RenderStyle* oldStyle);
> #endif
>diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
>index 21bc28e1bb98ba0186dcb1c4bad8410ae5b85ac1..80129feef828d0523d2add2f80bd495ea9ef9601 100644
>--- a/Source/WebCore/rendering/RenderGrid.cpp
>+++ b/Source/WebCore/rendering/RenderGrid.cpp
>@@ -163,6 +163,7 @@ public:
> 
> RenderGrid::RenderGrid(Element& element, PassRef<RenderStyle> style)
>     : RenderBlock(element, std::move(style), 0)
>+    , m_gridIsDirty(true)
>     , m_orderIterator(*this)
> {
>     // All of our children must be block level.
>@@ -234,8 +235,6 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
> 
>         // FIXME: This should add in the scrollbarWidth (e.g. see RenderFlexibleBox).
>     }
>-
>-    const_cast<RenderGrid*>(this)->clearGrid();
> }
> 
> void RenderGrid::computePreferredLogicalWidths()
>@@ -658,11 +657,15 @@ void RenderGrid::insertItemIntoGrid(RenderBox* child, size_t rowTrack, size_t co
> 
> void RenderGrid::placeItemsOnGrid()
> {
>-    ASSERT(!gridWasPopulated());
>-    ASSERT(m_gridItemCoordinate.isEmpty());
>+    if (!gridIsDirty())
>+        return;
> 
>     populateExplicitGridAndOrderIterator();
> 
>+    // We clear the dirty bit here as the grid sizes have been updated, this means
>+    // that we can safely call gridRowCount() / gridColumnCount().
>+    m_gridIsDirty = false;
>+
>     Vector<RenderBox*> autoMajorAxisAutoGridItems;
>     Vector<RenderBox*> specifiedMajorAxisAutoGridItems;
>     GridAutoFlow autoFlow = style().gridAutoFlow();
>@@ -694,6 +697,8 @@ void RenderGrid::placeItemsOnGrid()
> 
>     placeSpecifiedMajorAxisItemsOnGrid(specifiedMajorAxisAutoGridItems);
>     placeAutoMajorAxisItemsOnGrid(autoMajorAxisAutoGridItems);
>+
>+    m_grid.shrinkToFit();
> }
> 
> void RenderGrid::populateExplicitGridAndOrderIterator()
>@@ -789,10 +794,11 @@ RenderGrid::GridTrackSizingDirection RenderGrid::autoPlacementMinorAxisDirection
>     return (flow == AutoFlowColumn) ? ForRows : ForColumns;
> }
> 
>-void RenderGrid::clearGrid()
>+void RenderGrid::dirtyGrid()
> {
>-    m_grid.clear();
>+    m_grid.resize(0);
>     m_gridItemCoordinate.clear();
>+    m_gridIsDirty = true;
> }
> 
> void RenderGrid::layoutGridItems()
>@@ -842,7 +848,6 @@ void RenderGrid::layoutGridItems()
> 
>     // min / max logical height is handled in updateLogicalHeight().
>     setLogicalHeight(logicalHeight() + borderAndPaddingLogicalHeight());
>-    clearGrid();
> }
> 
> GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox* gridItem) const
>@@ -1186,6 +1191,61 @@ const char* RenderGrid::renderName() const
>     return "RenderGrid";
> }
> 
>+void RenderGrid::addChild(RenderObject* newChild, RenderObject* beforeChild)
>+{
>+    RenderBlock::addChild(newChild, beforeChild);
>+
>+    if (gridIsDirty())
>+        return;
>+
>+    // We could avoid to dirty the grid if the new child has definite positions and grid auto-flow property is none.
>+    // In that case we will need to update m_orderIterator manually adding the child.
>+    dirtyGrid();
>+}
>+
>+RenderObject* RenderGrid::removeChild(RenderObject& child)
>+{
>+    RenderObject* nextSibling = RenderBlock::removeChild(child);
>+
>+    if (!gridIsDirty()) {
>+        // We could avoid to dirty the grid if grid auto-flow property is none.
>+        // In that case we will need to update m_orderIterator manually removing the child.
>+        dirtyGrid();
>+    }
>+
>+    return nextSibling;
>+}
>+
>+void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
>+{
>+    RenderBlock::styleDidChange(diff, oldStyle);
>+    if (!oldStyle)
>+        return;
>+
>+    // The following checks could be narrowed down if we kept track of which type of grid items we have:
>+    // - explicit grid size changes impact negative explicitly positioned and auto-placed grid items.
>+    // - named grid lines only impact grid items with named grid lines.
>+    // - auto-flow changes only impacts auto-placed children.
>+
>+    if (explicitGridDidResize(oldStyle)
>+        || namedGridLinesDefinitionDidChange(oldStyle)
>+        || oldStyle->gridAutoFlow() != style().gridAutoFlow())
>+        dirtyGrid();
>+}
>+
>+bool RenderGrid::explicitGridDidResize(const RenderStyle* oldStyle) const
>+{
>+    return oldStyle->gridColumns().size() != style().gridColumns().size()
>+        || oldStyle->gridRows().size() != style().gridRows().size();
>+}
>+
>+bool RenderGrid::namedGridLinesDefinitionDidChange(const RenderStyle* oldStyle) const
>+{
>+    return oldStyle->namedGridRowLines() != style().namedGridRowLines()
>+        || oldStyle->namedGridColumnLines() != style().namedGridColumnLines();
>+}
>+
>+
> } // namespace WebCore
> 
> #endif /* ENABLE(CSS_GRID_LAYOUT) */
>diff --git a/Source/WebCore/rendering/RenderGrid.h b/Source/WebCore/rendering/RenderGrid.h
>index 8184ecfb74262a54b18ed7a6183861650402be47..c8f0fe7781186c7811f5c7915f01c2d78ac035a3 100644
>--- a/Source/WebCore/rendering/RenderGrid.h
>+++ b/Source/WebCore/rendering/RenderGrid.h
>@@ -58,6 +58,8 @@ public:
>     const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
>     const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
> 
>+    void dirtyGrid();
>+
> private:
>     virtual const char* renderName() const override;
>     virtual bool isRenderGrid() const override { return true; }
>@@ -127,21 +129,31 @@ private:
> 
> #ifndef NDEBUG
>     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);
>-    bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }
> #endif
> 
>+    virtual void addChild(RenderObject* newChild, RenderObject* beforeChild = 0) override;
>+    virtual RenderObject* removeChild(RenderObject&) override;
>+
>+    virtual void styleDidChange(StyleDifference, const RenderStyle*) override;
>+
>+    bool explicitGridDidResize(const RenderStyle*) const;
>+    bool namedGridLinesDefinitionDidChange(const RenderStyle*) const;
>+
>+    bool gridIsDirty() const { return m_gridIsDirty; }
>+
>     size_t gridColumnCount() const
>     {
>-        ASSERT(gridWasPopulated());
>+        ASSERT(!gridIsDirty());
>         return m_grid[0].size();
>     }
>     size_t gridRowCount() const
>     {
>-        ASSERT(gridWasPopulated());
>+        ASSERT(!gridIsDirty());
>         return m_grid.size();
>     }
> 
>     Vector<Vector<Vector<RenderBox*, 1>>> m_grid;
>+    bool m_gridIsDirty;
>     Vector<LayoutUnit> m_columnPositions;
>     Vector<LayoutUnit> m_rowPositions;
>     HashMap<const RenderBox*, GridCoordinate> m_gridItemCoordinate;
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index f031d59614c4adeeb55033e2fd5e38bb028d77fb..faba40accf0d337ad78f9e81bdd08441f1e92205 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,19 @@
>+2014-06-03  Manuel Rego Casasnovas  <rego@igalia.com>
>+
>+        [CSS Grid Layout] Grid optimization keeping track of its status
>+        https://bugs.webkit.org/show_bug.cgi?id=132332
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        From Blink r155262 by <jchaffraix@chromium.org>
>+
>+        New layout tests to check changes in grid-template-{rows|columns} and order properties.
>+
>+        * fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt: Added.
>+        * fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html: Added.
>+        * fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt: Added.
>+        * fast/css-grid-layout/grid-item-change-order-auto-flow.html: Added.
>+
> 2014-06-02  Martin Hock  <mhock@apple.com>
> 
>         Unreviewed TestExpectations gardening after r169532.
>diff --git a/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt b/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..3584a61567b55df352e62862b4a2357a58b8da8d
>--- /dev/null
>+++ b/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt
>@@ -0,0 +1,5 @@
>+This test checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items.
>+PASS
>+PASS
>+PASS
>+PASS
>diff --git a/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html b/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..435565f2c1832bac5f2176776a341dac065b4941
>--- /dev/null
>+++ b/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
>@@ -0,0 +1,92 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<script>
>+if (window.testRunner)
>+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
>+</script>
>+<link href="resources/grid.css" rel="stylesheet">
>+<script src="../../resources/check-layout.js"></script>
>+<style>
>+.grid {
>+    -webkit-grid-auto-flow: row;
>+}
>+#firstGridItem {
>+    -webkit-grid-row: auto;
>+    -webkit-grid-column: 1;
>+}
>+
>+#secondGridItem {
>+    -webkit-grid-row: 1;
>+    -webkit-grid-column: auto;
>+}
>+
>+#thirdGridItem {
>+    -webkit-grid-row: auto;
>+    -webkit-grid-column: auto;
>+}
>+</style>
>+<script>
>+function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
>+{
>+    var gridElement = document.getElementsByClassName("grid")[0];
>+    gridElement.style.webkitGridTemplateRows = gridTemplateRows;
>+    gridElement.style.webkitGridTemplateColumns = gridTemplateColumns;
>+
>+    var firstGridItem = document.getElementById("firstGridItem");
>+    firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
>+    firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
>+    firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
>+    firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
>+
>+    var secondGridItem = document.getElementById("secondGridItem");
>+    secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
>+    secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
>+    secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
>+    secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
>+
>+    var thirdGridItem = document.getElementById("thirdGridItem");
>+    thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
>+    thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
>+    thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
>+    thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
>+
>+    checkLayout(".grid");
>+}
>+
>+function testChangingGridDefinitions()
>+{
>+    testGridDefinitions('10px 20px', '10px',
>+        { 'width': '10', 'height': '20', 'x': '0', 'y': '10' },
>+        { 'width': '10', 'height': '10', 'x': '0', 'y': '0' },
>+        { 'width': '10', 'height': '0', 'x': '0', 'y': '30' });
>+    testGridDefinitions('50px', '30px 40px',
>+        { 'width': '30', 'height': '0', 'x': '0', 'y': '50' },
>+        { 'width': '30', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
>+    testGridDefinitions('50px', '60px',
>+        { 'width': '60', 'height': '0', 'x': '0', 'y': '50' },
>+        { 'width': '60', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'width': '60', 'height': '0', 'x': '0', 'y': '50' });
>+    testGridDefinitions('50px 100px 150px', '60px',
>+        { 'width': '60', 'height': '100', 'x': '0', 'y': '50' },
>+        { 'width': '60', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
>+}
>+
>+window.addEventListener("load", testChangingGridDefinitions, false);
>+</script>
>+</head>
>+<body>
>+<div>This test checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items.</div>
>+
>+<div style="position: relative">
>+    <div class="grid">
>+        <div class="sizedToGridArea" id="firstGridItem"></div>
>+        <div class="sizedToGridArea" id="secondGridItem"></div>
>+        <div class="sizedToGridArea" id="thirdGridItem"></div>
>+    </div>
>+</div>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..0f089d6a453504d32eac0d7ebba2d641285d8c96
>--- /dev/null
>+++ b/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt
>@@ -0,0 +1,5 @@
>+This test checks that grid items' 'order' dynamic updates recomputes the positions of automatically placed grid items.
>+PASS
>+PASS
>+PASS
>+PASS
>diff --git a/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html b/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d9554aeaf96396dabe01a3079cc698787c89b797
>--- /dev/null
>+++ b/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html
>@@ -0,0 +1,94 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+<script>
>+if (window.testRunner)
>+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
>+</script>
>+<link href="resources/grid.css" rel="stylesheet">
>+<script src="../../resources/check-layout.js"></script>
>+<style>
>+.grid {
>+    -webkit-grid-auto-flow: row;
>+    -webkit-grid-template-rows: 50px 100px;
>+    -webkit-grid-template-columns: 40px;
>+}
>+
>+#firstGridItem {
>+    -webkit-grid-row: auto;
>+    -webkit-grid-column: 1;
>+}
>+
>+#secondGridItem {
>+    -webkit-grid-row: 1;
>+    -webkit-grid-column: auto;
>+}
>+
>+#thirdGridItem {
>+    -webkit-grid-row: auto;
>+    -webkit-grid-column: auto;
>+}
>+</style>
>+<script>
>+function testGridItemsOrder(firstGridItemData, secondGridItemData, thirdGridItemData)
>+{
>+    var firstGridItem = document.getElementById("firstGridItem");
>+    firstGridItem.style.webkitOrder = firstGridItemData.order;
>+    firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
>+    firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
>+    firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
>+    firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
>+
>+    var secondGridItem = document.getElementById("secondGridItem");
>+    secondGridItem.style.webkitOrder = secondGridItemData.order;
>+    secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
>+    secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
>+    secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
>+    secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
>+
>+    var thirdGridItem = document.getElementById("thirdGridItem");
>+    thirdGridItem.style.webkitOrder = thirdGridItemData.order;
>+    thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
>+    thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
>+    thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
>+    thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
>+
>+    checkLayout(".grid");
>+}
>+
>+function testChangingGridItemsOrder()
>+{
>+    testGridItemsOrder(
>+        { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' },
>+        { 'order': '0', 'width': '40', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
>+    testGridItemsOrder(
>+        { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' },
>+        { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
>+    testGridItemsOrder(
>+        { 'order': '1', 'width': '40', 'height': '0', 'x': '0', 'y': '150' },
>+        { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' });
>+    testGridItemsOrder(
>+        { 'order': '1', 'width': '40', 'height': '100', 'x': '0', 'y': '50' },
>+        { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' },
>+        { 'order': '10', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
>+}
>+
>+window.addEventListener("load", testChangingGridItemsOrder, false);
>+</script>
>+</head>
>+<body>
>+<div>This test checks that grid items' 'order' dynamic updates recomputes the positions of automatically placed grid items.</div>
>+
>+<div style="position: relative">
>+    <div class="grid">
>+        <div class="sizedToGridArea" id="firstGridItem"></div>
>+        <div class="sizedToGridArea" id="secondGridItem"></div>
>+        <div class="sizedToGridArea" id="thirdGridItem"></div>
>+    </div>
>+</div>
>+
>+</body>
>+</html>

Actions: View | Formatted Diff | Diff

Attachments on bug 132332: 230366 | 232075 | 232095 | 232421 | 232436 | 233300