mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-26 02:17:34 +09:00
Merge remote-tracking branch 'origin/master' into custom
This commit is contained in:
Roy Tam
commit
e4a4b3aee3
76 changed files with 5872 additions and 988 deletions
|
|
@ -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
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
101
dom/grid/test/chrome/test_grid_line_numbers.html
Normal file
101
dom/grid/test/chrome/test_grid_line_numbers.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue