summaryrefslogtreecommitdiffstats
path: root/dom/grid
diff options
context:
space:
mode:
Diffstat (limited to 'dom/grid')
-rw-r--r--dom/grid/GridLines.cpp42
-rw-r--r--dom/grid/test/chrome.ini1
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html63
-rw-r--r--dom/grid/test/chrome/test_grid_line_numbers.html101
4 files changed, 189 insertions, 18 deletions
diff --git a/dom/grid/GridLines.cpp b/dom/grid/GridLines.cpp
index fac645c64..898885346 100644
--- a/dom/grid/GridLines.cpp
+++ b/dom/grid/GridLines.cpp
@@ -90,7 +90,9 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
for (uint32_t i = aTrackInfo->mStartFragmentTrack;
i < aTrackInfo->mEndFragmentTrack + 1;
i++) {
- uint32_t line1Index = i + 1;
+ // Since line indexes are 1-based, calculate a 1-based value
+ // for this track to simplify some calculations.
+ const uint32_t line1Index = i + 1;
startOfNextTrack = (i < aTrackInfo->mEndFragmentTrack) ?
aTrackInfo->mPositions[i] :
@@ -127,7 +129,8 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
}
}
- if (i >= aTrackInfo->mRepeatFirstTrack &&
+ if (i >= (aTrackInfo->mRepeatFirstTrack +
+ aTrackInfo->mNumLeadingImplicitTracks) &&
repeatIndex < numRepeatTracks) {
numAddedLines += AppendRemovedAutoFits(aTrackInfo,
aLineInfo,
@@ -139,23 +142,30 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
RefPtr<GridLine> line = new GridLine(this);
mLines.AppendElement(line);
+ MOZ_ASSERT(line1Index > 0, "line1Index must be positive.");
+ bool isBeforeFirstExplicit =
+ (line1Index <= aTrackInfo->mNumLeadingImplicitTracks);
+ // Calculate an actionable line number for this line, that could be used
+ // in a css grid property to align a grid item or area at that line.
+ // For implicit lines that appear before line 1, report a number of 0.
+ // We can't report negative indexes, because those have a different
+ // meaning in the css grid spec (negative indexes are negative-1-based
+ // from the end of the grid decreasing towards the front).
+ uint32_t lineNumber = isBeforeFirstExplicit ? 0 :
+ (line1Index - aTrackInfo->mNumLeadingImplicitTracks + numAddedLines);
+ GridDeclaration lineType =
+ (isBeforeFirstExplicit ||
+ line1Index > (aTrackInfo->mNumLeadingImplicitTracks +
+ aTrackInfo->mNumExplicitTracks + 1))
+ ? GridDeclaration::Implicit
+ : GridDeclaration::Explicit;
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
- )
+ lineNumber,
+ lineType
);
if (i < aTrackInfo->mEndFragmentTrack) {
@@ -215,11 +225,13 @@ GridLines::AppendRemovedAutoFits(const ComputedGridTrackInfo* aTrackInfo,
RefPtr<GridLine> line = new GridLine(this);
mLines.AppendElement(line);
+ uint32_t lineNumber = aTrackInfo->mRepeatFirstTrack +
+ aRepeatIndex + 1;
line->SetLineValues(
aLineNames,
nsPresContext::AppUnitsToDoubleCSSPixels(aLastTrackEdge),
nsPresContext::AppUnitsToDoubleCSSPixels(0),
- aTrackInfo->mRepeatFirstTrack + aRepeatIndex + 1,
+ lineNumber,
GridDeclaration::Explicit
);
diff --git a/dom/grid/test/chrome.ini b/dom/grid/test/chrome.ini
index 2241cf9eb..169fa9b89 100644
--- a/dom/grid/test/chrome.ini
+++ b/dom/grid/test/chrome.ini
@@ -2,6 +2,7 @@
[chrome/test_grid_fragmentation.html]
[chrome/test_grid_implicit.html]
[chrome/test_grid_lines.html]
+[chrome/test_grid_line_numbers.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_implicit.html b/dom/grid/test/chrome/test_grid_implicit.html
index c7782e0e5..1f7142658 100644
--- a/dom/grid/test/chrome/test_grid_implicit.html
+++ b/dom/grid/test/chrome/test_grid_implicit.html
@@ -33,6 +33,11 @@ body {
grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
}
+.template4 {
+ grid-template-columns: 100px 50px 100px;
+ grid-template-rows: 50px;
+}
+
.box {
background-color: #444;
color: #fff;
@@ -50,6 +55,9 @@ body {
.d {
grid-area: areaD;
}
+.e {
+ grid-column: -7 / 5;
+}
</style>
<script>
@@ -78,9 +86,12 @@ function runTests() {
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.");
+ is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit.");
+ is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number.");
+ is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit.");
+ is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number.");
+ is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit.");
+ is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number.");
// 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,
@@ -221,6 +232,48 @@ function runTests() {
}
}
+ // test the fourth grid wrapper
+ wrapper = document.getElementById("wrapper4");
+ grid = wrapper.getGridFragments()[0];
+
+ // test column and row line counts
+ is(grid.cols.lines.length, 8,
+ "Grid.cols.lines property expands properly with implicit columns on both sides."
+ );
+ is(grid.rows.lines.length, 2,
+ "Grid.rows.lines property is as expected"
+ );
+
+ if (grid.cols.lines.length == 8) {
+ // check that all the lines get correct implict/explicit type and number
+ let expectedType = [
+ "implicit",
+ "implicit",
+ "implicit",
+ "explicit",
+ "explicit",
+ "explicit",
+ "explicit",
+ "implicit",
+ ];
+ let expectedNumber = [
+ 0,
+ 0,
+ 0,
+ 1,
+ 2,
+ 3,
+ 4,
+ 5,
+ ];
+
+ for (let i = 0; i < grid.cols.lines.length; i++) {
+ let line = grid.cols.lines[i];
+ is(line.type, expectedType[i], "Line index " + i + " has expected type.");
+ is(line.number, expectedNumber[i], "Line index " + i + " has expected number.");
+ }
+ }
+
SimpleTest.finish();
}
</script>
@@ -246,5 +299,9 @@ function runTests() {
<div id="boxC" class="box c">C</div>
</div>
+ <div id="wrapper4" class="wrapper template4">
+ <div id="boxE" class="box e">E</div>
+ </div>
+
</body>
</html>
diff --git a/dom/grid/test/chrome/test_grid_line_numbers.html b/dom/grid/test/chrome/test_grid_line_numbers.html
new file mode 100644
index 000000000..c8e5226b6
--- /dev/null
+++ b/dom/grid/test/chrome/test_grid_line_numbers.html
@@ -0,0 +1,101 @@
+<!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: 0px;
+ background-color: #f00;
+}
+.wrapper > div {
+ background-color: #444;
+ color: #fff;
+}
+.repeatColumns {
+ width: 600px;
+ grid-auto-columns: 50px;
+ grid-template-columns: repeat(auto-fit, 100px);
+}
+.repeatRows {
+ height: 600px;
+ grid-auto-rows: 50px;
+ grid-template-rows: repeat(auto-fit, 100px);
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function testLines(elementName, lines, expectedValues) {
+ is(lines.count, expectedValues.count, elementName + " has expected number of lines.");
+ for (let i = 0; i < lines.length; i++) {
+ is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number.");
+ }
+}
+
+function runTests() {
+ let grid;
+ let lines;
+ let expectedValues;
+
+ grid = document.getElementById("gridWithColumns").getGridFragments()[0];
+ lines = grid.cols.lines;
+ expectedValues = [
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 1 },
+ { "number": 2 },
+ { "number": 3 },
+ { "number": 4 },
+ { "number": 5 },
+ { "number": 6 },
+ { "number": 7 },
+ { "number": 8 },
+ ];
+ testLines("gridWithColumns", lines, expectedValues);
+
+ grid = document.getElementById("gridWithRows").getGridFragments()[0];
+ lines = grid.rows.lines;
+ expectedValues = [
+ { "number": 0 },
+ { "number": 0 },
+ { "number": 1 },
+ { "number": 2 },
+ { "number": 3 },
+ { "number": 4 },
+ { "number": 5 },
+ { "number": 6 },
+ { "number": 7 },
+ { "number": 8 },
+ ];
+ testLines("gridWithRows", lines, expectedValues);
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div id="gridWithColumns" class="wrapper repeatColumns">
+<div style="grid-column: -9">A</div>
+<div style="grid-column: 4">B</div>
+<div style="grid-column: 7">C</div>
+</div>
+
+<div id="gridWithRows" class="wrapper repeatRows">
+<div style="grid-row: span 3 / 2">A</div>
+<div style="grid-row: 4">B</div>
+<div style="grid-row: 5">C</div>
+<div style="grid-row: span 2 / 8">D</div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-28 13:31:37 +0000