summaryrefslogtreecommitdiffstats
path: root/dom/grid
diff options
context:
space:
mode:
Diffstat (limited to 'dom/grid')
-rw-r--r--dom/grid/Grid.cpp122
-rw-r--r--dom/grid/Grid.h54
-rw-r--r--dom/grid/GridArea.cpp86
-rw-r--r--dom/grid/GridArea.h63
-rw-r--r--dom/grid/GridDimension.cpp72
-rw-r--r--dom/grid/GridDimension.h59
-rw-r--r--dom/grid/GridLine.cpp88
-rw-r--r--dom/grid/GridLine.h64
-rw-r--r--dom/grid/GridLines.cpp250
-rw-r--r--dom/grid/GridLines.h62
-rw-r--r--dom/grid/GridTrack.cpp80
-rw-r--r--dom/grid/GridTrack.h58
-rw-r--r--dom/grid/GridTracks.cpp134
-rw-r--r--dom/grid/GridTracks.h55
-rw-r--r--dom/grid/moz.build33
-rw-r--r--dom/grid/test/chrome.ini7
-rw-r--r--dom/grid/test/chrome/test_grid_areas.html143
-rw-r--r--dom/grid/test/chrome/test_grid_fragmentation.html88
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html250
-rw-r--r--dom/grid/test/chrome/test_grid_lines.html117
-rw-r--r--dom/grid/test/chrome/test_grid_object.html69
-rw-r--r--dom/grid/test/chrome/test_grid_repeats.html358
-rw-r--r--dom/grid/test/chrome/test_grid_tracks.html85
23 files changed, 2397 insertions, 0 deletions
diff --git a/dom/grid/Grid.cpp b/dom/grid/Grid.cpp
new file mode 100644
index 000000000..d10d8b581
--- /dev/null
+++ b/dom/grid/Grid.cpp
@@ -0,0 +1,122 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "Grid.h"
+
+#include "GridArea.h"
+#include "GridDimension.h"
+#include "mozilla/dom/GridBinding.h"
+#include "nsGridContainerFrame.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(Grid, mParent, mRows, mCols, mAreas)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(Grid)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(Grid)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(Grid)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+Grid::Grid(nsISupports* aParent,
+ nsGridContainerFrame* aFrame)
+ : mParent(do_QueryInterface(aParent))
+ , mRows(new GridDimension(this))
+ , mCols(new GridDimension(this))
+{
+ MOZ_ASSERT(aFrame,
+ "Should never be instantiated with a null nsGridContainerFrame");
+
+ // Construct areas first, because lines may need to reference them
+ // to extract additional names for boundary lines.
+
+ // Add implicit areas first. Track the names that we add here, because
+ // we will ignore future explicit areas with the same name.
+ nsTHashtable<nsStringHashKey> namesSeen;
+ nsGridContainerFrame::ImplicitNamedAreas* implicitAreas =
+ aFrame->GetImplicitNamedAreas();
+ if (implicitAreas) {
+ for (auto iter = implicitAreas->Iter(); !iter.Done(); iter.Next()) {
+ auto& areaInfo = iter.Data();
+ namesSeen.PutEntry(areaInfo.mName);
+ GridArea* area = new GridArea(this,
+ areaInfo.mName,
+ GridDeclaration::Implicit,
+ areaInfo.mRowStart,
+ areaInfo.mRowEnd,
+ areaInfo.mColumnStart,
+ areaInfo.mColumnEnd);
+ mAreas.AppendElement(area);
+ }
+ }
+
+ // Add explicit areas next, as long as they don't have the same name
+ // as the implicit areas, because the implicit values override what was
+ // initially available in the explicit areas.
+ nsGridContainerFrame::ExplicitNamedAreas* explicitAreas =
+ aFrame->GetExplicitNamedAreas();
+ if (explicitAreas) {
+ for (auto& areaInfo : *explicitAreas) {
+ if (!namesSeen.Contains(areaInfo.mName)) {
+ GridArea* area = new GridArea(this,
+ areaInfo.mName,
+ GridDeclaration::Explicit,
+ areaInfo.mRowStart,
+ areaInfo.mRowEnd,
+ areaInfo.mColumnStart,
+ areaInfo.mColumnEnd);
+ mAreas.AppendElement(area);
+ }
+ }
+ }
+
+ // Now construct the tracks and lines.
+ const ComputedGridTrackInfo* rowTrackInfo =
+ aFrame->GetComputedTemplateRows();
+ const ComputedGridLineInfo* rowLineInfo =
+ aFrame->GetComputedTemplateRowLines();
+ mRows->SetTrackInfo(rowTrackInfo);
+ mRows->SetLineInfo(rowTrackInfo, rowLineInfo, mAreas, true);
+
+ const ComputedGridTrackInfo* columnTrackInfo =
+ aFrame->GetComputedTemplateColumns();
+ const ComputedGridLineInfo* columnLineInfo =
+ aFrame->GetComputedTemplateColumnLines();
+ mCols->SetTrackInfo(columnTrackInfo);
+ mCols->SetLineInfo(columnTrackInfo, columnLineInfo, mAreas, false);
+}
+
+Grid::~Grid()
+{
+}
+
+JSObject*
+Grid::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridBinding::Wrap(aCx, this, aGivenProto);
+}
+
+GridDimension*
+Grid::Rows() const
+{
+ return mRows;
+}
+
+GridDimension*
+Grid::Cols() const
+{
+ return mCols;
+}
+
+void
+Grid::GetAreas(nsTArray<RefPtr<GridArea>>& aAreas) const
+{
+ aAreas = mAreas;
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/Grid.h b/dom/grid/Grid.h
new file mode 100644
index 000000000..426f33ec2
--- /dev/null
+++ b/dom/grid/Grid.h
@@ -0,0 +1,54 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_Grid_h
+#define mozilla_dom_Grid_h
+
+#include "GridArea.h"
+#include "mozilla/dom/Element.h"
+#include "nsGridContainerFrame.h"
+#include "nsISupports.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+namespace dom {
+
+class GridDimension;
+
+class Grid : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit Grid(nsISupports* aParent, nsGridContainerFrame* aFrame);
+
+protected:
+ virtual ~Grid();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(Grid)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ Element* GetParentObject()
+ {
+ return mParent;
+ }
+
+ GridDimension* Rows() const;
+ GridDimension* Cols() const;
+ void GetAreas(nsTArray<RefPtr<GridArea>>& aAreas) const;
+
+protected:
+ nsCOMPtr<Element> mParent;
+ RefPtr<GridDimension> mRows;
+ RefPtr<GridDimension> mCols;
+ nsTArray<RefPtr<GridArea>> mAreas;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_Grid_h */
diff --git a/dom/grid/GridArea.cpp b/dom/grid/GridArea.cpp
new file mode 100644
index 000000000..d8a7eca76
--- /dev/null
+++ b/dom/grid/GridArea.cpp
@@ -0,0 +1,86 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridArea.h"
+#include "mozilla/dom/GridBinding.h"
+#include "Grid.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridArea, mParent)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridArea)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridArea)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridArea)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridArea::GridArea(Grid* aParent,
+ const nsString& aName,
+ GridDeclaration aType,
+ uint32_t aRowStart,
+ uint32_t aRowEnd,
+ uint32_t aColumnStart,
+ uint32_t aColumnEnd)
+ : mParent(aParent)
+ , mName(aName)
+ , mType(aType)
+ , mRowStart(aRowStart)
+ , mRowEnd(aRowEnd)
+ , mColumnStart(aColumnStart)
+ , mColumnEnd(aColumnEnd)
+{
+}
+
+GridArea::~GridArea()
+{
+}
+
+JSObject*
+GridArea::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridAreaBinding::Wrap(aCx, this, aGivenProto);
+}
+
+void
+GridArea::GetName(nsString& aName) const
+{
+ aName = mName;
+}
+
+GridDeclaration
+GridArea::Type() const
+{
+ return mType;
+}
+
+uint32_t
+GridArea::RowStart() const
+{
+ return mRowStart;
+}
+
+uint32_t
+GridArea::RowEnd() const
+{
+ return mRowEnd;
+}
+
+uint32_t
+GridArea::ColumnStart() const
+{
+ return mColumnStart;
+}
+
+uint32_t
+GridArea::ColumnEnd() const
+{
+ return mColumnEnd;
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridArea.h b/dom/grid/GridArea.h
new file mode 100644
index 000000000..19b610ca2
--- /dev/null
+++ b/dom/grid/GridArea.h
@@ -0,0 +1,63 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridArea_h
+#define mozilla_dom_GridArea_h
+
+#include "mozilla/dom/GridBinding.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+namespace dom {
+
+class Grid;
+
+class GridArea : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridArea(Grid *aParent,
+ const nsString& aName,
+ GridDeclaration aType,
+ uint32_t aRowStart,
+ uint32_t aRowEnd,
+ uint32_t aColumnStart,
+ uint32_t aColumnEnd);
+
+protected:
+ virtual ~GridArea();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridArea)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ Grid* GetParentObject()
+ {
+ return mParent;
+ }
+
+ void GetName(nsString& aName) const;
+ GridDeclaration Type() const;
+ uint32_t RowStart() const;
+ uint32_t RowEnd() const;
+ uint32_t ColumnStart() const;
+ uint32_t ColumnEnd() const;
+
+protected:
+ RefPtr<Grid> mParent;
+ const nsString mName;
+ const GridDeclaration mType;
+ const uint32_t mRowStart;
+ const uint32_t mRowEnd;
+ const uint32_t mColumnStart;
+ const uint32_t mColumnEnd;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridTrack_h */
diff --git a/dom/grid/GridDimension.cpp b/dom/grid/GridDimension.cpp
new file mode 100644
index 000000000..040f3a380
--- /dev/null
+++ b/dom/grid/GridDimension.cpp
@@ -0,0 +1,72 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridDimension.h"
+
+#include "Grid.h"
+#include "GridLines.h"
+#include "GridTracks.h"
+#include "mozilla/dom/GridBinding.h"
+#include "nsGridContainerFrame.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridDimension, mParent, mLines, mTracks)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridDimension)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridDimension)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridDimension)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridDimension::GridDimension(Grid* aParent)
+ : mParent(aParent)
+ , mLines(new GridLines(this))
+ , mTracks(new GridTracks(this))
+{
+ MOZ_ASSERT(aParent, "Should never be instantiated with a null Grid");
+}
+
+GridDimension::~GridDimension()
+{
+}
+
+JSObject*
+GridDimension::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridDimensionBinding::Wrap(aCx, this, aGivenProto);
+}
+
+GridLines*
+GridDimension::Lines() const
+{
+ return mLines;
+}
+
+GridTracks*
+GridDimension::Tracks() const
+{
+ return mTracks;
+}
+
+void
+GridDimension::SetTrackInfo(const ComputedGridTrackInfo* aTrackInfo)
+{
+ mTracks->SetTrackInfo(aTrackInfo);
+}
+
+void
+GridDimension::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ const nsTArray<RefPtr<GridArea>>& aAreas,
+ bool aIsRow)
+{
+ mLines->SetLineInfo(aTrackInfo, aLineInfo, aAreas, aIsRow);
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridDimension.h b/dom/grid/GridDimension.h
new file mode 100644
index 000000000..7a3373521
--- /dev/null
+++ b/dom/grid/GridDimension.h
@@ -0,0 +1,59 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridDimension_h
+#define mozilla_dom_GridDimension_h
+
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+
+struct ComputedGridTrackInfo;
+
+namespace dom {
+
+class Grid;
+class GridLines;
+class GridTracks;
+
+class GridDimension : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridDimension(Grid* aParent);
+
+protected:
+ virtual ~GridDimension();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridDimension)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ Grid* GetParentObject()
+ {
+ return mParent;
+ }
+
+ GridLines* Lines() const;
+ GridTracks* Tracks() const;
+
+ void SetTrackInfo(const ComputedGridTrackInfo* aTrackInfo);
+ void SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ const nsTArray<RefPtr<GridArea>>& aAreas,
+ bool aIsRow);
+
+protected:
+ RefPtr<Grid> mParent;
+ RefPtr<GridLines> mLines;
+ RefPtr<GridTracks> mTracks;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridDimension_h */
diff --git a/dom/grid/GridLine.cpp b/dom/grid/GridLine.cpp
new file mode 100644
index 000000000..8e1e5ed7c
--- /dev/null
+++ b/dom/grid/GridLine.cpp
@@ -0,0 +1,88 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridLine.h"
+
+#include "GridLines.h"
+#include "mozilla/dom/GridBinding.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridLine, mParent)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridLine)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridLine)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridLine)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridLine::GridLine(GridLines *aParent)
+ : mParent(aParent)
+ , mStart(0.0)
+ , mBreadth(0.0)
+ , mType(GridDeclaration::Implicit)
+ , mNumber(0)
+{
+ MOZ_ASSERT(aParent, "Should never be instantiated with a null GridLines");
+}
+
+GridLine::~GridLine()
+{
+}
+
+void
+GridLine::GetNames(nsTArray<nsString>& aNames) const
+{
+ aNames = mNames;
+}
+
+JSObject*
+GridLine::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridLineBinding::Wrap(aCx, this, aGivenProto);
+}
+
+double
+GridLine::Start() const
+{
+ return mStart;
+}
+
+double
+GridLine::Breadth() const
+{
+ return mBreadth;
+}
+
+GridDeclaration
+GridLine::Type() const
+{
+ return mType;
+}
+
+uint32_t
+GridLine::Number() const
+{
+ return mNumber;
+}
+
+void
+GridLine::SetLineValues(const nsTArray<nsString>& aNames,
+ double aStart,
+ double aBreadth,
+ uint32_t aNumber,
+ GridDeclaration aType)
+{
+ mNames = aNames;
+ mStart = aStart;
+ mBreadth = aBreadth;
+ mNumber = aNumber;
+ mType = aType;
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridLine.h b/dom/grid/GridLine.h
new file mode 100644
index 000000000..858f9d5e0
--- /dev/null
+++ b/dom/grid/GridLine.h
@@ -0,0 +1,64 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridLine_h
+#define mozilla_dom_GridLine_h
+
+#include "mozilla/dom/GridBinding.h"
+#include "nsString.h"
+#include "nsTArray.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+namespace dom {
+
+class GridLines;
+
+class GridLine : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridLine(GridLines* aParent);
+
+protected:
+ virtual ~GridLine();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridLine)
+
+ void GetNames(nsTArray<nsString>& aNames) const;
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ GridLines* GetParentObject()
+ {
+ return mParent;
+ }
+
+ double Start() const;
+ double Breadth() const;
+ GridDeclaration Type() const;
+ uint32_t Number() const;
+
+ void SetLineValues(const nsTArray<nsString>& aNames,
+ double aStart,
+ double aBreadth,
+ uint32_t aNumber,
+ GridDeclaration aType);
+
+protected:
+ RefPtr<GridLines> mParent;
+ nsTArray<nsString> mNames;
+ double mStart;
+ double mBreadth;
+ GridDeclaration mType;
+ uint32_t mNumber;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridLine_h */
diff --git a/dom/grid/GridLines.cpp b/dom/grid/GridLines.cpp
new file mode 100644
index 000000000..fac645c64
--- /dev/null
+++ b/dom/grid/GridLines.cpp
@@ -0,0 +1,250 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridLines.h"
+
+#include "GridDimension.h"
+#include "GridLine.h"
+#include "mozilla/dom/GridBinding.h"
+#include "nsGridContainerFrame.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridLines, mParent, mLines)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridLines)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridLines)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridLines)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridLines::GridLines(GridDimension* aParent)
+ : mParent(aParent)
+{
+ MOZ_ASSERT(aParent,
+ "Should never be instantiated with a null GridDimension");
+}
+
+GridLines::~GridLines()
+{
+}
+
+JSObject*
+GridLines::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridLinesBinding::Wrap(aCx, this, aGivenProto);
+}
+
+uint32_t
+GridLines::Length() const
+{
+ return mLines.Length();
+}
+
+GridLine*
+GridLines::Item(uint32_t aIndex)
+{
+ return mLines.SafeElementAt(aIndex);
+}
+
+GridLine*
+GridLines::IndexedGetter(uint32_t aIndex,
+ bool& aFound)
+{
+ aFound = aIndex < mLines.Length();
+ if (!aFound) {
+ return nullptr;
+ }
+ return mLines[aIndex];
+}
+
+void
+GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ const nsTArray<RefPtr<GridArea>>& aAreas,
+ bool aIsRow)
+{
+ MOZ_ASSERT(aLineInfo);
+ mLines.Clear();
+
+ if (!aTrackInfo) {
+ return;
+ }
+
+ uint32_t trackCount = aTrackInfo->mEndFragmentTrack -
+ aTrackInfo->mStartFragmentTrack;
+
+ // If there is at least one track, line count is one more
+ // than the number of tracks.
+ if (trackCount > 0) {
+ nscoord lastTrackEdge = 0;
+ nscoord startOfNextTrack;
+ uint32_t repeatIndex = 0;
+ uint32_t numRepeatTracks = aTrackInfo->mRemovedRepeatTracks.Length();
+ uint32_t numAddedLines = 0;
+
+ for (uint32_t i = aTrackInfo->mStartFragmentTrack;
+ i < aTrackInfo->mEndFragmentTrack + 1;
+ i++) {
+ uint32_t line1Index = i + 1;
+
+ startOfNextTrack = (i < aTrackInfo->mEndFragmentTrack) ?
+ aTrackInfo->mPositions[i] :
+ lastTrackEdge;
+
+ nsTArray<nsString> lineNames;
+ lineNames = aLineInfo->mNames.SafeElementAt(i, nsTArray<nsString>());
+
+ // Add in names from grid areas where this line is used as a boundary.
+ for (auto area : aAreas) {
+ bool haveNameToAdd = false;
+ nsAutoString nameToAdd;
+ area->GetName(nameToAdd);
+ if (aIsRow) {
+ if (area->RowStart() == line1Index) {
+ haveNameToAdd = true;
+ nameToAdd.AppendLiteral("-start");
+ } else if (area->RowEnd() == line1Index) {
+ haveNameToAdd = true;
+ nameToAdd.AppendLiteral("-end");
+ }
+ } else {
+ if (area->ColumnStart() == line1Index) {
+ haveNameToAdd = true;
+ nameToAdd.AppendLiteral("-start");
+ } else if (area->ColumnEnd() == line1Index) {
+ haveNameToAdd = true;
+ nameToAdd.AppendLiteral("-end");
+ }
+ }
+
+ if (haveNameToAdd && !lineNames.Contains(nameToAdd)) {
+ lineNames.AppendElement(nameToAdd);
+ }
+ }
+
+ if (i >= aTrackInfo->mRepeatFirstTrack &&
+ repeatIndex < numRepeatTracks) {
+ numAddedLines += AppendRemovedAutoFits(aTrackInfo,
+ aLineInfo,
+ lastTrackEdge,
+ repeatIndex,
+ numRepeatTracks,
+ lineNames);
+ }
+
+ RefPtr<GridLine> line = new GridLine(this);
+ mLines.AppendElement(line);
+ line->SetLineValues(
+ lineNames,
+ nsPresContext::AppUnitsToDoubleCSSPixels(lastTrackEdge),
+ nsPresContext::AppUnitsToDoubleCSSPixels(startOfNextTrack -
+ lastTrackEdge),
+ line1Index + numAddedLines,
+ (
+ // Implicit if there are no explicit tracks, or if the index
+ // is before the first explicit track, or after
+ // a track beyond the last explicit track.
+ (aTrackInfo->mNumExplicitTracks == 0) ||
+ (i < aTrackInfo->mNumLeadingImplicitTracks) ||
+ (i > aTrackInfo->mNumLeadingImplicitTracks +
+ aTrackInfo->mNumExplicitTracks) ?
+ GridDeclaration::Implicit :
+ GridDeclaration::Explicit
+ )
+ );
+
+ if (i < aTrackInfo->mEndFragmentTrack) {
+ lastTrackEdge = aTrackInfo->mPositions[i] + aTrackInfo->mSizes[i];
+ }
+ }
+ }
+}
+
+uint32_t
+GridLines::AppendRemovedAutoFits(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ nscoord aLastTrackEdge,
+ uint32_t& aRepeatIndex,
+ uint32_t aNumRepeatTracks,
+ nsTArray<nsString>& aLineNames)
+{
+ // Check to see if lineNames contains ALL of the before line names.
+ bool alreadyHasBeforeLineNames = true;
+ for (const auto& beforeName : aLineInfo->mNamesBefore) {
+ if (!aLineNames.Contains(beforeName)) {
+ alreadyHasBeforeLineNames = false;
+ break;
+ }
+ }
+
+ bool extractedExplicitLineNames = false;
+ nsTArray<nsString> explicitLineNames;
+ uint32_t linesAdded = 0;
+ while (aRepeatIndex < aNumRepeatTracks &&
+ aTrackInfo->mRemovedRepeatTracks[aRepeatIndex]) {
+ // If this is not the very first call to this function, and if we
+ // haven't already added a line this call, pull all the explicit
+ // names to pass along to the next line that will be added after
+ // this function completes.
+ if (aRepeatIndex > 0 &&
+ linesAdded == 0) {
+ // Find the names that didn't match the before or after names,
+ // and extract them.
+ for (const auto& name : aLineNames) {
+ if (!aLineInfo->mNamesBefore.Contains(name) &&
+ !aLineInfo->mNamesAfter.Contains(name)) {
+ explicitLineNames.AppendElement(name);
+ }
+ }
+ for (const auto& extractedName : explicitLineNames) {
+ aLineNames.RemoveElement(extractedName);
+ }
+ extractedExplicitLineNames = true;
+ }
+
+ // If this is the second or later time through, or didn't already
+ // have before names, add them.
+ if (linesAdded > 0 || !alreadyHasBeforeLineNames) {
+ aLineNames.AppendElements(aLineInfo->mNamesBefore);
+ }
+
+ RefPtr<GridLine> line = new GridLine(this);
+ mLines.AppendElement(line);
+ line->SetLineValues(
+ aLineNames,
+ nsPresContext::AppUnitsToDoubleCSSPixels(aLastTrackEdge),
+ nsPresContext::AppUnitsToDoubleCSSPixels(0),
+ aTrackInfo->mRepeatFirstTrack + aRepeatIndex + 1,
+ GridDeclaration::Explicit
+ );
+
+ // No matter what, the next line should have the after names associated
+ // with it. If we go through the loop again, the before names will also
+ // be added.
+ aLineNames = aLineInfo->mNamesAfter;
+ aRepeatIndex++;
+
+ linesAdded++;
+ }
+ aRepeatIndex++;
+
+ if (extractedExplicitLineNames) {
+ // Pass on the explicit names we saved to the next explicit line.
+ aLineNames.AppendElements(explicitLineNames);
+ }
+
+ if (alreadyHasBeforeLineNames && linesAdded > 0) {
+ // If we started with before names, pass them on to the next explicit
+ // line.
+ aLineNames.AppendElements(aLineInfo->mNamesBefore);
+ }
+ return linesAdded;
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridLines.h b/dom/grid/GridLines.h
new file mode 100644
index 000000000..921168204
--- /dev/null
+++ b/dom/grid/GridLines.h
@@ -0,0 +1,62 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridLines_h
+#define mozilla_dom_GridLines_h
+
+#include "nsTArray.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+namespace dom {
+
+class GridDimension;
+class GridLine;
+
+class GridLines : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridLines(GridDimension* aParent);
+
+protected:
+ virtual ~GridLines();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridLines)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ GridDimension* GetParentObject()
+ {
+ return mParent;
+ }
+
+ uint32_t Length() const;
+ GridLine* Item(uint32_t aIndex);
+ GridLine* IndexedGetter(uint32_t aIndex, bool& aFound);
+
+ void SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ const nsTArray<RefPtr<GridArea>>& aAreas,
+ bool aIsRow);
+
+protected:
+ uint32_t AppendRemovedAutoFits(const ComputedGridTrackInfo* aTrackInfo,
+ const ComputedGridLineInfo* aLineInfo,
+ nscoord aLastTrackEdge,
+ uint32_t& aRepeatIndex,
+ uint32_t aNumRepeatTracks,
+ nsTArray<nsString>& aLineNames);
+
+ RefPtr<GridDimension> mParent;
+ nsTArray<RefPtr<GridLine>> mLines;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridLines_h */
diff --git a/dom/grid/GridTrack.cpp b/dom/grid/GridTrack.cpp
new file mode 100644
index 000000000..328af7d5c
--- /dev/null
+++ b/dom/grid/GridTrack.cpp
@@ -0,0 +1,80 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridTrack.h"
+
+#include "GridTracks.h"
+#include "mozilla/dom/GridBinding.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridTrack, mParent)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridTrack)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridTrack)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridTrack)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridTrack::GridTrack(GridTracks* aParent)
+ : mParent(aParent)
+ , mStart(0.0)
+ , mBreadth(0.0)
+ , mType(GridDeclaration::Implicit)
+ , mState(GridTrackState::Static)
+{
+ MOZ_ASSERT(aParent, "Should never be instantiated with a null GridTracks");
+}
+
+GridTrack::~GridTrack()
+{
+}
+
+JSObject*
+GridTrack::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridTrackBinding::Wrap(aCx, this, aGivenProto);
+}
+
+double
+GridTrack::Start() const
+{
+ return mStart;
+}
+
+double
+GridTrack::Breadth() const
+{
+ return mBreadth;
+}
+
+GridDeclaration
+GridTrack::Type() const
+{
+ return mType;
+}
+
+GridTrackState
+GridTrack::State() const
+{
+ return mState;
+}
+
+void
+GridTrack::SetTrackValues(double aStart,
+ double aBreadth,
+ GridDeclaration aType,
+ GridTrackState aState)
+{
+ mStart = aStart;
+ mBreadth = aBreadth;
+ mType = aType;
+ mState = aState;
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridTrack.h b/dom/grid/GridTrack.h
new file mode 100644
index 000000000..d1825c5ad
--- /dev/null
+++ b/dom/grid/GridTrack.h
@@ -0,0 +1,58 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridTrack_h
+#define mozilla_dom_GridTrack_h
+
+#include "mozilla/dom/GridBinding.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+namespace dom {
+
+class GridTracks;
+
+class GridTrack : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridTrack(GridTracks *parent);
+
+protected:
+ virtual ~GridTrack();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridTrack)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ GridTracks* GetParentObject()
+ {
+ return mParent;
+ }
+
+ double Start() const;
+ double Breadth() const;
+ GridDeclaration Type() const;
+ GridTrackState State() const;
+
+ void SetTrackValues(double aStart,
+ double aBreadth,
+ GridDeclaration aType,
+ GridTrackState aState);
+
+protected:
+ RefPtr<GridTracks> mParent;
+ double mStart;
+ double mBreadth;
+ GridDeclaration mType;
+ GridTrackState mState;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridTrack_h */
diff --git a/dom/grid/GridTracks.cpp b/dom/grid/GridTracks.cpp
new file mode 100644
index 000000000..8b607973c
--- /dev/null
+++ b/dom/grid/GridTracks.cpp
@@ -0,0 +1,134 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "GridTracks.h"
+
+#include "GridDimension.h"
+#include "GridTrack.h"
+#include "mozilla/dom/GridBinding.h"
+#include "nsGridContainerFrame.h"
+
+namespace mozilla {
+namespace dom {
+
+NS_IMPL_CYCLE_COLLECTION_WRAPPERCACHE(GridTracks, mParent, mTracks)
+NS_IMPL_CYCLE_COLLECTING_ADDREF(GridTracks)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(GridTracks)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(GridTracks)
+ NS_WRAPPERCACHE_INTERFACE_MAP_ENTRY
+ NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+GridTracks::GridTracks(GridDimension *aParent)
+ : mParent(aParent)
+{
+ MOZ_ASSERT(aParent,
+ "Should never be instantiated with a null GridDimension");
+}
+
+GridTracks::~GridTracks()
+{
+}
+
+JSObject*
+GridTracks::WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto)
+{
+ return GridTracksBinding::Wrap(aCx, this, aGivenProto);
+}
+
+uint32_t
+GridTracks::Length() const
+{
+ return mTracks.Length();
+}
+
+GridTrack*
+GridTracks::Item(uint32_t aIndex)
+{
+ return mTracks.SafeElementAt(aIndex);
+}
+
+GridTrack*
+GridTracks::IndexedGetter(uint32_t aIndex,
+ bool& aFound)
+{
+ aFound = aIndex < mTracks.Length();
+ if (!aFound) {
+ return nullptr;
+ }
+ return mTracks[aIndex];
+}
+
+void
+GridTracks::SetTrackInfo(const ComputedGridTrackInfo* aTrackInfo)
+{
+ // rebuild the tracks based on aTrackInfo
+ mTracks.Clear();
+
+ if (!aTrackInfo) {
+ return;
+ }
+
+ nscoord lastTrackEdge = 0;
+ uint32_t repeatIndex = 0;
+ auto AppendRemovedAutoFits = [this, &aTrackInfo, &lastTrackEdge,
+ &repeatIndex]()
+ {
+ uint32_t numRepeatTracks = aTrackInfo->mRemovedRepeatTracks.Length();
+ // Add in removed auto-fit tracks
+ while (repeatIndex < numRepeatTracks &&
+ aTrackInfo->mRemovedRepeatTracks[repeatIndex]) {
+
+ RefPtr<GridTrack> track = new GridTrack(this);
+ mTracks.AppendElement(track);
+ track->SetTrackValues(
+ nsPresContext::AppUnitsToDoubleCSSPixels(lastTrackEdge),
+ nsPresContext::AppUnitsToDoubleCSSPixels(0),
+ GridDeclaration::Explicit,
+ GridTrackState::Removed
+ );
+ repeatIndex++;
+ }
+ repeatIndex++;
+ };
+
+ for (size_t i = aTrackInfo->mStartFragmentTrack;
+ i < aTrackInfo->mEndFragmentTrack;
+ i++) {
+ if (i >= aTrackInfo->mRepeatFirstTrack) {
+ // Append removed auto-fit tracks, if appropriate. The
+ // AppendRemovedAutoFits function exits early once it has been called
+ // aTrackInfo->mRemovedRepeatTracks.Length() times -- a check we don't
+ // replicate here or at subsequent calling sites.
+ AppendRemovedAutoFits();
+ }
+
+ RefPtr<GridTrack> track = new GridTrack(this);
+ mTracks.AppendElement(track);
+ track->SetTrackValues(
+ nsPresContext::AppUnitsToDoubleCSSPixels(aTrackInfo->mPositions[i]),
+ nsPresContext::AppUnitsToDoubleCSSPixels(aTrackInfo->mSizes[i]),
+ (
+ // Implicit if index is before the first explicit track, or after
+ // the last explicit track.
+ (i < aTrackInfo->mNumLeadingImplicitTracks) ||
+ (i >= aTrackInfo->mNumLeadingImplicitTracks +
+ aTrackInfo->mNumExplicitTracks) ?
+ GridDeclaration::Implicit :
+ GridDeclaration::Explicit
+ ),
+ GridTrackState(aTrackInfo->mStates[i])
+ );
+
+ lastTrackEdge = aTrackInfo->mPositions[i] + aTrackInfo->mSizes[i];
+ }
+
+ // Append any trailing removed auto-fit tracks.
+ AppendRemovedAutoFits();
+}
+
+} // namespace dom
+} // namespace mozilla
diff --git a/dom/grid/GridTracks.h b/dom/grid/GridTracks.h
new file mode 100644
index 000000000..ab7faeacd
--- /dev/null
+++ b/dom/grid/GridTracks.h
@@ -0,0 +1,55 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_GridTracks_h
+#define mozilla_dom_GridTracks_h
+
+#include "nsTArray.h"
+#include "nsWrapperCache.h"
+
+namespace mozilla {
+
+struct ComputedGridTrackInfo;
+
+namespace dom {
+
+class GridDimension;
+class GridTrack;
+
+class GridTracks : public nsISupports
+ , public nsWrapperCache
+{
+public:
+ explicit GridTracks(GridDimension* aParent);
+
+protected:
+ virtual ~GridTracks();
+
+public:
+ NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+ NS_DECL_CYCLE_COLLECTION_SCRIPT_HOLDER_CLASS(GridTracks)
+
+ virtual JSObject* WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto) override;
+ GridDimension* GetParentObject()
+ {
+ return mParent;
+ }
+
+ uint32_t Length() const;
+ GridTrack* Item(uint32_t aIndex);
+ GridTrack* IndexedGetter(uint32_t aIndex, bool& aFound);
+
+ void SetTrackInfo(const mozilla::ComputedGridTrackInfo* aTrackInfo);
+
+protected:
+ RefPtr<GridDimension> mParent;
+ nsTArray<RefPtr<GridTrack>> mTracks;
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif /* mozilla_dom_GridTracks_h */
diff --git a/dom/grid/moz.build b/dom/grid/moz.build
new file mode 100644
index 000000000..96d5c3151
--- /dev/null
+++ b/dom/grid/moz.build
@@ -0,0 +1,33 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+MOCHITEST_CHROME_MANIFESTS += ['test/chrome.ini']
+
+EXPORTS.mozilla.dom += [
+ 'Grid.h',
+ 'GridArea.h',
+ 'GridDimension.h',
+ 'GridLine.h',
+ 'GridLines.h',
+ 'GridTrack.h',
+ 'GridTracks.h',
+]
+
+UNIFIED_SOURCES += [
+ 'Grid.cpp',
+ 'GridArea.cpp',
+ 'GridDimension.cpp',
+ 'GridLine.cpp',
+ 'GridLines.cpp',
+ 'GridTrack.cpp',
+ 'GridTracks.cpp',
+]
+
+LOCAL_INCLUDES += [
+ '/layout/generic',
+]
+
+FINAL_LIBRARY = 'xul'
diff --git a/dom/grid/test/chrome.ini b/dom/grid/test/chrome.ini
new file mode 100644
index 000000000..2241cf9eb
--- /dev/null
+++ b/dom/grid/test/chrome.ini
@@ -0,0 +1,7 @@
+[chrome/test_grid_areas.html]
+[chrome/test_grid_fragmentation.html]
+[chrome/test_grid_implicit.html]
+[chrome/test_grid_lines.html]
+[chrome/test_grid_object.html]
+[chrome/test_grid_repeats.html]
+[chrome/test_grid_tracks.html]
diff --git a/dom/grid/test/chrome/test_grid_areas.html b/dom/grid/test/chrome/test_grid_areas.html
new file mode 100644
index 000000000..2f5d8ea44
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_areas.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ width: 600px;
+ height: 600px;
+ grid-gap: 20px;
+ grid-template-columns: 50px 1fr 50px;
+ grid-template-rows: 1fr 1fr 1fr;
+ grid-template-areas: "areaA areaA ....."
+ "areaB areaC areaC"
+ "areaB areaC areaC";
+ background-color: #f00;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+.a {
+ grid-area: areaA;
+}
+.b {
+ grid-area: areaB;
+}
+.c {
+ grid-area: areaC;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var grid = wrapper.getGridFragments()[0];
+
+ // test existence of property
+ isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");
+
+ if (typeof(grid.areas) != "undefined") {
+ // test that the right number of areas are reported
+ is(grid.areas.length, 3, "3 areas are reported.");
+
+ if (grid.areas.length == 3) {
+ // test area names
+ is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
+ is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
+ is(grid.areas[2].name, "areaC", "Area 2 has proper name.");
+
+ // test area types
+ is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
+ is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
+ is(grid.areas[2].type, "explicit", "Area 2 is explicit.");
+
+ // test numbers of start and end lines
+ is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
+ is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
+ is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
+ is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");
+
+ is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
+ is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
+ is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
+ is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");
+
+ is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
+ is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
+ is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
+ is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");
+
+ // test names of all the row lines
+ isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
+ "Grid row line 1 has the name 'areaA-start'."
+ );
+
+ isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
+ "Grid row line 2 has the name 'areaA-end'."
+ );
+ isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
+ "Grid row line 2 has the name 'areaB-start'."
+ );
+ isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
+ "Grid row line 2 has the name 'areaC-start'."
+ );
+
+ is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
+
+ isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
+ "Grid row line 4 has the name 'areaB-end'."
+ );
+ isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
+ "Grid row line 4 has the name 'areaC-end'."
+ );
+
+ // test names of all the column lines
+ isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
+ "Grid column line 1 has the name 'areaA-start'."
+ );
+ isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
+ "Grid column line 1 has the name 'areaB-start'."
+ );
+
+ isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
+ "Grid column line 2 has the name 'areaB-end'."
+ );
+ isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
+ "Grid column line 2 has the name 'areaC-start'."
+ );
+
+ isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
+ "Grid column line 3 has the name 'areaA-end'."
+ );
+
+ isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
+ "Grid column line 4 has the name 'areaC-end'."
+ );
+ }
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper" class="wrapper">
+ <div id="boxA" class="box a">A</div>
+ <div id="boxB" class="box b">B</div>
+ <div id="boxC" class="box c">C</div>
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_fragmentation.html b/dom/grid/test/chrome/test_grid_fragmentation.html
new file mode 100644
index 000000000..cec03b12c
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_fragmentation.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+ <link rel="match" href="grid-fragmentation-001-ref.html">
+
+ <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+ position:relative;
+ -moz-columns: 5;
+ -ms-columns: 5;
+ -webkit-columns: 5;
+ columns: 5;
+ -moz-column-fill: auto;
+ -ms-column-fill: auto;
+ -webkit-column-fill: auto;
+ column-fill: auto;
+ border: 2px dashed;
+ margin-bottom: 5px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 30px 30px 30px;
+ grid-auto-rows: 50px;
+ grid-gap: 12px;
+ border:5px solid;
+ align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var fragments = wrapper.getGridFragments();
+
+ // test fragments of the grid
+ is(fragments.length, 2, "Grid is split into two fragments.");
+
+ if (fragments.length == 2) {
+ var grid0 = fragments[0];
+ var grid1 = fragments[1];
+
+ // test that both fragments have one row track and two lines
+ is(grid0.rows.tracks.length, 1, "Fragment 0 has one row track.");
+ is(grid0.rows.lines.length, 2, "Fragment 0 has two row lines.");
+ is(grid1.rows.tracks.length, 1, "Fragment 1 has one row track.");
+ is(grid1.rows.lines.length, 2, "Fragment 1 has two row lines.");
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div id="wrapper" class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_implicit.html b/dom/grid/test/chrome/test_grid_implicit.html
new file mode 100644
index 000000000..c7782e0e5
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_implicit.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ grid-gap: 10px;
+ grid-auto-columns: 20px;
+ grid-auto-rows: 20px;
+ background-color: #f00;
+}
+
+.template1 {
+ grid-template-columns: 100px 50px 100px;
+ grid-template-rows: 50px [areaD-start middle] 50px [areaD-end];
+ grid-template-areas: "areaA areaA ....."
+ "..... areaC areaC";
+}
+
+.template2 {
+ grid-template-areas: "..... areaA ......";
+ grid-template-columns: [areaA-start] 50px 50px 50px;
+}
+
+.template3 {
+ grid-template-columns: [areaA-start areaB-end areaC-end areaD-start] 50px [areaA-end areaB-start areaC-start areaD-end];
+ grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
+}
+
+.box {
+ background-color: #444;
+ color: #fff;
+}
+.a {
+ grid-area: areaA;
+}
+.b {
+ grid-row: span got-this-name-implicitly / 2;
+ grid-column: areaA-end / span 2;
+}
+.c {
+ grid-area: areaC;
+}
+.d {
+ grid-area: areaD;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ // test the first grid wrapper
+ let wrapper = document.getElementById("wrapper1");
+ let grid = wrapper.getGridFragments()[0];
+
+ // test column and row line counts
+ is(grid.cols.lines.length, 6,
+ "Grid.cols.lines property has length that respects implicit expansion."
+ );
+ is(grid.rows.lines.length, 4,
+ "Grid.rows.lines property has length that respects implicit expansion."
+ );
+
+ if ((grid.cols.lines.length == 6) &&
+ (grid.rows.lines.length == 4)) {
+
+ // test explicit / implicit lines
+ is(grid.cols.lines[0].type, "explicit", "Grid column line 1 is explicit.");
+ is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
+ is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");
+
+ is(grid.rows.lines[0].type, "implicit", "Grid row line 1 is implicit.");
+ is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit.");
+ is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit.");
+
+ // test that row line 1 gets the name forced on it by placement of item B
+ todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
+ "Grid row line 1 has the name 'got-this-name-implicitly'."
+ );
+
+ // test that row line 3 gets its explicit name
+ isnot(grid.rows.lines[2].names.indexOf("middle"), -1,
+ "Grid row line 3 has the name 'middle'."
+ );
+
+ // test the names of the implicit column lines that were created for area 'areaD'
+ isnot(grid.cols.lines[4].names.indexOf("areaD-start"), -1,
+ "Grid column line 5 has the name 'areaD-start'."
+ );
+ isnot(grid.cols.lines[5].names.indexOf("areaD-end"), -1,
+ "Grid column line 6 has the name 'areaD-end'."
+ );
+ }
+
+ // test column and row track counts
+ is(grid.cols.tracks.length, 5,
+ "Grid.cols.tracks property has length that respects implicit expansion."
+ );
+ is(grid.rows.tracks.length, 3,
+ "Grid.rows.tracks property has length that respects implicit expansion."
+ );
+
+ if ((grid.cols.tracks.length == 5) &&
+ (grid.rows.tracks.length == 3)) {
+
+ // test explicit / implicit tracks
+ is(grid.cols.tracks[0].type, "explicit", "Grid column track 1 is explicit.");
+ is(grid.cols.tracks[3].type, "implicit", "Grid column track 4 is implicit.");
+ is(grid.cols.tracks[4].type, "implicit", "Grid column track 5 is implicit.");
+
+ is(grid.rows.tracks[0].type, "implicit", "Grid row track 1 is implicit.");
+ is(grid.rows.tracks[1].type, "explicit", "Grid row track 2 is explicit.");
+ is(grid.rows.tracks[2].type, "explicit", "Grid row track 3 is explicit.");
+ }
+
+ // test area count
+ is(grid.areas.length, 3,
+ "Grid.areas property has length that respects implicit expansion."
+ );
+
+ for (var i = 0; i < grid.areas.length; i++) {
+ var area = grid.areas[i];
+ if (area.name == "areaD") {
+ is(area.type, "implicit", area.name + " is implicit.");
+
+ // test lines of implicit areas
+ is(area.rowStart, 3, area.name + " has start row line of 3.");
+ is(area.rowEnd, 4, area.name + " has end row line of 4.");
+ is(area.columnStart, 5, area.name + " has start column line of 5.");
+ is(area.columnEnd, 6, area.name + " has end column line of 6.");
+ } else {
+ is(area.type, "explicit", area.name + " is explicit.");
+ }
+ }
+
+
+ // test the second grid wrapper
+ wrapper = document.getElementById("wrapper2");
+ grid = wrapper.getGridFragments()[0];
+
+ // test column and row line counts
+ is(grid.cols.lines.length, 4,
+ "Grid.cols.lines property doesn't expand due to an explicit line declaration."
+ );
+ is(grid.rows.lines.length, 2,
+ "Grid.rows.lines property has length that respects implicit expansion."
+ );
+
+ // test area count
+ is(grid.areas.length, 1,
+ "Grid.areas property has length that respects implicit expansion."
+ );
+
+ for (var i = 0; i < grid.areas.length; i++) {
+ var area = grid.areas[i];
+ if (area.name == "areaA") {
+ is(area.type, "implicit", area.name + " is implicit.");
+
+ // test lines of implicit areas
+ is(area.rowStart, 1, area.name + " has start row line of 1.");
+ is(area.rowEnd, 2, area.name + " has end row line of 2.");
+ is(area.columnStart, 1, area.name + " has start column line of 1.");
+ is(area.columnEnd, 3, area.name + " has end column line of 3.");
+ }
+ }
+
+
+ // test the third grid wrapper
+ wrapper = document.getElementById("wrapper3");
+ grid = wrapper.getGridFragments()[0];
+
+ // test column and row line counts
+ is(grid.cols.lines.length, 2,
+ "Grid.cols.lines property doesn't expand due to an explicit line declaration."
+ );
+ is(grid.rows.lines.length, 2,
+ "Grid.rows.lines property doesn't expand due to an explicit line declaration."
+ );
+
+ if (grid.cols.lines.length == 2 && grid.rows.lines.length == 2) {
+ // check that areaC gets both the explicit line names and the implicit line names
+ isnot(grid.cols.lines[0].names.indexOf("areaC-start"), -1,
+ "Grid row line 1 has the name 'areaC-start'."
+ );
+
+ isnot(grid.cols.lines[0].names.indexOf("areaC-end"), -1,
+ "Grid row line 1 has the name 'areaC-end'."
+ );
+
+ isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
+ "Grid row line 2 has the name 'areaC-start'."
+ );
+
+ isnot(grid.cols.lines[1].names.indexOf("areaC-end"), -1,
+ "Grid row line 2 has the name 'areaC-end'."
+ );
+ }
+
+ // test area count
+ is(grid.areas.length, 4,
+ "Grid.areas property reports 4 areas."
+ );
+
+ for (var i = 0; i < grid.areas.length; i++) {
+ var area = grid.areas[i];
+ if (area.name == "areaC") {
+ // test lines of implicit area
+ is(area.rowStart, 1, area.name + " has start row line of 1.");
+ is(area.rowEnd, 2, area.name + " has end row line of 2.");
+ is(area.columnStart, 1, area.name + " has start column line of 1.");
+ is(area.columnEnd, 2, area.name + " has end column line of 2.");
+ }
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper1" class="wrapper template1">
+ <div id="boxA" class="box a">A</div>
+ <div id="boxB" class="box b">B</div>
+ <div id="boxC" class="box c">C</div>
+ <div id="boxD" class="box d">D</div>
+ </div>
+
+ <br/>
+
+ <div id="wrapper2" class="wrapper template2">
+ <div id="boxA" class="box a">A</div>
+ </div>
+
+ <br/>
+
+ <div id="wrapper3" class="wrapper template3">
+ <div id="boxC" class="box c">C</div>
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_lines.html b/dom/grid/test/chrome/test_grid_lines.html
new file mode 100644
index 000000000..3f98f3ca0
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_lines.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 50px [first] repeat(3, [divider] 100px) [last];
+ grid-template-rows: [top1] repeat(1, [top2] 50px) [bot];
+ background-color: #f00;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var grid = wrapper.getGridFragments()[0];
+
+ // test property existence
+ isnot(typeof(grid.cols.lines), "undefined", "Grid.cols.lines property exists.");
+
+ if (typeof(grid.cols.lines) != "undefined") {
+ // test column line count
+ is(grid.cols.lines.length, 5,
+ "Grid.cols.lines property has length that matches grid-template-columns."
+ );
+
+ if (grid.cols.lines.length == 5) {
+ // test column line position
+ is(grid.cols.lines[1].start, 50, "Grid column line 2 position is as expected.");
+
+ // test column line width
+ is(grid.cols.lines[1].breadth, 10, "Grid column line 2 width is as expected.");
+
+ // test column line number
+ is(grid.cols.lines[3].number, 4, "Grid column line 4 number is as expected.");
+
+ // test column line names
+ is(grid.cols.lines[0].names.length, 0, "Grid column line 1 has no names.");
+
+ is(grid.cols.lines[1].names.length, 2, "Grid column line 2 has 2 names.");
+ isnot(grid.cols.lines[1].names.indexOf("first"), -1,
+ "Grid column line 2 has the name 'first'."
+ );
+ isnot(grid.cols.lines[1].names.indexOf("divider"), -1,
+ "Grid column line 2 has the name 'divider'."
+ );
+
+ is(grid.cols.lines[4].names.length, 1, "Grid column line 5 has 1 name.");
+ isnot(grid.cols.lines[4].names.indexOf("last"), -1,
+ "Grid column line 5 has the name 'last'."
+ );
+ }
+ }
+
+ // test property existence
+ isnot(typeof(grid.rows.lines), "undefined", "Grid.rows.lines property exists.");
+
+ if (typeof(grid.rows.lines) != "undefined") {
+ // test column line count
+ is(grid.rows.lines.length, 3,
+ "Grid.rows.lines property has length that matches grid-template-rows."
+ );
+
+ if (grid.rows.lines.length == 3) {
+ // test row line names
+ is(grid.rows.lines[0].names.length, 2, "Grid row line 1 has 2 names.");
+ isnot(grid.rows.lines[0].names.indexOf("top1"), -1,
+ "Grid row line 1 has the name 'top1'."
+ );
+ isnot(grid.rows.lines[0].names.indexOf("top2"), -1,
+ "Grid row line 1 has the name 'top2'."
+ );
+
+ is(grid.rows.lines[1].names.length, 1, "Grid row line 2 has 1 name.");
+ isnot(grid.rows.lines[1].names.indexOf("bot"), -1,
+ "Grid row line 2 has the name 'bot'."
+ );
+
+ is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
+ }
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper" class="wrapper">
+ <div id="boxA" class="box a">A</div>
+ <div id="boxB" class="box b">B</div>
+ <div id="boxC" class="box c">C</div>
+ <div class="box d">D</div>
+ <div class="box e">E</div>
+ <div class="box f">F</div>
+ <div class="box g">G</div>
+ <div class="box h">H</div>
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_object.html b/dom/grid/test/chrome/test_grid_object.html
new file mode 100644
index 000000000..b68152b61
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_object.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 100px 1fr 1fr 100px;
+ background-color: #f00;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var boxA = document.getElementById("boxA");
+
+ // test function existence
+ is(typeof(wrapper.getGridFragments), "function",
+ "getGridFragments function exists."
+ );
+
+ // test that display:grid elements have grids and display:block elements don't
+ is(boxA.getGridFragments().length, 0, "No grid on display:block styled objects.");
+ is(wrapper.getGridFragments().length, 1,
+ "One grid on an un-fragmented display:grid styled object."
+ );
+
+ if (wrapper.getGridFragments().length == 1) {
+ var grid = wrapper.getGridFragments()[0];
+
+ isnot(typeof(grid.cols), "undefined", "Grid.cols property exists.");
+ isnot(typeof(grid.rows), "undefined", "Grid.rows property exists.");
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper" class="wrapper">
+ <div id="boxA" class="box a">A</div>
+ <div class="box b">B</div>
+ <div class="box c">C</div>
+ <div class="box d">D</div>
+ <div class="box e">E</div>
+ <div class="box f">F</div>
+ <div class="box g">G</div>
+ <div class="box h">H</div>
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_repeats.html b/dom/grid/test/chrome/test_grid_repeats.html
new file mode 100644
index 000000000..34ae7da4e
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_repeats.html
@@ -0,0 +1,358 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ width: 600px;
+ grid-gap: 0px;
+ background-color: #f00;
+}
+.grid1 {
+ grid-template-columns: 50px 0px repeat(auto-fit, 100px);
+}
+.grid2 {
+ grid-template-columns: 50px 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
+}
+.grid3 {
+ grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid4 {
+ grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px);
+}
+.grid5 {
+ grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid6 {
+ grid-template-columns: [first] 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
+}
+.grid7 {
+ grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
+}
+.grid8 {
+ grid-template-columns: [real-before] repeat(auto-fit, [before] 1000px [after]) [real-after];
+}
+.grid9 {
+ grid-template-columns: [real-before] repeat(auto-fit, 100px [after]) [real-after];
+}
+.grid10 {
+ grid-template-columns: [real-before] repeat(auto-fit, [before] 100px) [real-after];
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+.a {
+ grid-column: auto;
+}
+.b {
+ grid-column: 4;
+}
+.c {
+ grid-column: 6;
+}
+.d {
+ grid-column: 7;
+}
+.e {
+ grid-column: 5;
+}
+
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, grid, expectedValues) {
+ for (let i = 0; i < grid.cols.lines.length; i++) {
+ is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
+ is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
+ is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
+ is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
+ }
+}
+
+function runTests() {
+ let wrapper = document.getElementById("wrapper1");
+ let grid = wrapper.getGridFragments()[0];
+
+ // test auto-fit count
+ is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fit columns.");
+
+ // test resolved value of grid-template-columns
+ let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "50px 0px 0px 100px 0px 0px 0px",
+ "Resolved value of grid-template-columns reports removed auto-fits as '0px'.");
+
+ // test starts, breadths, and states
+ let expectedValues = [
+ { "start": 0,
+ "breadth": 50,
+ "state": "static" },
+ { "start": 50,
+ "breadth": 0,
+ "state": "static" },
+ { "start": 50,
+ "breadth": 0,
+ "state": "removed" },
+ { "start": 50,
+ "breadth": 100,
+ "state": "repeat" },
+ { "start": 150,
+ "breadth": 0,
+ "state": "removed" },
+ { "start": 150,
+ "breadth": 0,
+ "state": "removed" },
+ { "start": 150,
+ "breadth": 0,
+ "state": "removed" },
+ ];
+ for (let i = 0; i < grid.cols.tracks.length; i++) {
+ is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start.");
+ is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth.");
+ is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state.");
+ }
+
+
+ wrapper = document.getElementById("wrapper2");
+ grid = wrapper.getGridFragments()[0];
+
+ // test auto-fit count
+ is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fit columns.");
+
+ // test resolved value of grid-template-columns
+ templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "50px 0px [real-before before] 0px [after before] 100px [after before] 0px [after before] 100px [after before] 0px [after real-after] 0px [final]",
+ "Resolved value of grid-template-columns reports lines for removed tracks.");
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "" },
+ { "start": 50,
+ "names": "" },
+ { "start": 50,
+ "names": "real-before,before" },
+ { "start": 50,
+ "names": "after,before" },
+ { "start": 150,
+ "names": "after,before" },
+ { "start": 150,
+ "names": "after,before" },
+ { "start": 250,
+ "names": "after,before" },
+ { "start": 250,
+ "names": "after,real-after" },
+ { "start": 250,
+ "names": "final" },
+ ];
+ testLines("wrapper2", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper3");
+ grid = wrapper.getGridFragments()[0];
+
+ // test resolved value of grid-template-columns
+ templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 0px [after before] 100px [after before] 100px [after real-after]",
+ "Resolved value of grid-template-columns reports lines for removed tracks.");
+
+
+ wrapper = document.getElementById("wrapper4");
+ grid = wrapper.getGridFragments()[0];
+
+ // test auto-fill count of tracks
+ is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns.");
+
+ if (grid.cols.tracks.length == 10) {
+ // test for static and repeat
+ is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static.");
+ is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat.");
+ }
+
+
+ wrapper = document.getElementById("wrapper5");
+ grid = wrapper.getGridFragments()[0];
+
+ // test resolved value of grid-template-columns
+ templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
+ is(templateColumnsText, "[real-before before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after real-after]", "Resolved value of grid-template-columns no longer lists 'none' when all auto-fit tracks are empty.");
+
+
+ wrapper = document.getElementById("wrapper6");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "first" },
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 0,
+ "names": "after,before" },
+ { "start": 0,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper6", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper7");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 0,
+ "names": "after,before" },
+ { "start": 0,
+ "names": "after,before" },
+ { "start": 0,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,before" },
+ { "start": 100,
+ "names": "after,real-after" },
+ { "start": 100,
+ "names": "final" },
+ ];
+ testLines("wrapper7", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper8");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 0,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper8", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper9");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 0,
+ "names": "after" },
+ { "start": 100,
+ "names": "after" },
+ { "start": 200,
+ "names": "after" },
+ { "start": 200,
+ "names": "after,real-after" },
+ ];
+ testLines("wrapper9", grid, expectedValues);
+
+
+ wrapper = document.getElementById("wrapper10");
+ grid = wrapper.getGridFragments()[0];
+
+ // test starts and names
+ expectedValues = [
+ { "start": 0,
+ "names": "real-before,before" },
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "before" },
+ { "start": 0,
+ "names": "before" },
+ { "start": 100,
+ "names": "before" },
+ { "start": 200,
+ "names": "before" },
+ { "start": 200,
+ "names": "real-after" },
+ ];
+ testLines("wrapper10", grid, expectedValues);
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper1" class="wrapper grid1">
+ <div id="boxB" class="box b">B</div>
+ </div>
+
+ <br/>
+ <div id="wrapper2" class="wrapper grid2">
+ <div id="boxB" class="box b">B</div>
+ <div id="boxC" class="box c">C</div>
+ </div>
+
+ <br/>
+ <div id="wrapper3" class="wrapper grid3">
+ <div id="boxB" class="box b">B</div>
+ <div id="boxC" class="box c">C</div>
+ <div id="boxD" class="box d">D</div>
+ </div>
+
+ <br/>
+ <div id="wrapper4" class="wrapper grid4">
+ <div id="boxA" class="box a">A</div>
+ </div>
+
+ <br/>
+ <div id="wrapper5" class="wrapper grid5">
+ </div>
+
+ <br/>
+ <div id="wrapper6" class="wrapper grid6">
+ <div id="boxB" class="box b">B</div>
+ </div>
+
+ <br/>
+ <div id="wrapper7" class="wrapper grid7">
+ <div id="boxB" class="box b">B</div>
+ </div>
+
+ <br/>
+ <div id="wrapper8" class="wrapper grid8">
+ </div>
+
+ <br/>
+ <div id="wrapper9" class="wrapper grid9">
+ <div id="boxB" class="box b">B</div>
+ <div id="boxE" class="box e">E</div>
+ </div>
+
+ <br/>
+ <div id="wrapper10" class="wrapper grid10">
+ <div id="boxB" class="box b">B</div>
+ <div id="boxE" class="box e">E</div>
+ </div>
+
+</body>
+</html>
diff --git a/dom/grid/test/chrome/test_grid_tracks.html b/dom/grid/test/chrome/test_grid_tracks.html
new file mode 100644
index 000000000..9b58cd50d
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_tracks.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+ margin: 40px;
+}
+.wrapper {
+ display: grid;
+ width: 400px;
+ grid-gap: 10px;
+ grid-template-columns: 100px 1fr 1fr 100px;
+ background-color: #f00;
+}
+.box {
+ background-color: #444;
+ color: #fff;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+ var wrapper = document.getElementById("wrapper");
+ var grid = wrapper.getGridFragments()[0];
+ var boxA = document.getElementById("boxA");
+ var boxB = document.getElementById("boxB");
+
+ // test property existence
+ isnot(typeof(grid.cols.tracks), "undefined", "Grid.cols.tracks property exists.");
+ isnot(typeof(grid.rows.tracks), "undefined", "Grid.rows.tracks property exists.");
+
+ if ((typeof(grid.cols.tracks) != "undefined") &&
+ (typeof(grid.rows.tracks) != "undefined")) {
+ // test column and row track counts
+ is(grid.cols.tracks.length, 4,
+ "Grid.cols.tracks property has length that matches grid-template-columns."
+ );
+ is(grid.rows.tracks.length, 2,
+ "Grid.rows.tracks property has length that matches content."
+ );
+
+ if((grid.cols.tracks.length == 4) &&
+ (grid.rows.tracks.length == 2)) {
+ // test column track position
+ is(grid.cols.tracks[1].start, 110, "Grid column track 2 position is as expected.");
+
+ // test column track width
+ is(grid.cols.tracks[0].breadth, boxA.offsetWidth,
+ "Grid column track width (fixed size) matches item width."
+ );
+ is(grid.cols.tracks[1].breadth, boxB.offsetWidth,
+ "Grid column track width (flexible size) matches item width."
+ );
+ is(grid.cols.tracks[1].breadth, grid.cols.tracks[2].breadth,
+ "Grid column track widths with equal proportion flexible size actually are same size."
+ );
+ }
+ }
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+ <div id="wrapper" class="wrapper">
+ <div id="boxA" class="box a">A</div>
+ <div id="boxB" class="box b">B</div>
+ <div class="box c">C</div>
+ <div class="box d">D</div>
+ <div class="box e">E</div>
+ <div class="box f">F</div>
+ <div class="box g">G</div>
+ <div class="box h">H</div>
+ </div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-27 04:35:59 +0000