Skip to content
This repository has been archived by the owner on Aug 4, 2022. It is now read-only.

Commit

Permalink
Bug 1194888 - [css-grid] A line outside the existing grid should be t…
Browse files Browse the repository at this point in the history 
…reated as 'auto' for abs.pos (10.1). r=dholbert
  • Loading branch information
Mats Palmgren committed Aug 25, 2015
1 parent d32cd0a commit d0be40b
Show file tree
Hide file tree
Showing 8 changed files with 352 additions and 82 deletions.
15 changes: 7 additions & 8 deletions layout/generic/nsGridContainerFrame.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -670,7 +670,9 @@ nsGridContainerFrame::ResolveAbsPosLineRange(
if (aEnd.mHasSpan) {
++end;
}
return LineRange(kAutoLine, clamped(end, aGridStart, aGridEnd));
// A line outside the existing grid is treated as 'auto' for abs.pos (10.1).
end = AutoIfOutside(end, aGridStart, aGridEnd);
return LineRange(kAutoLine, end);
}

if (aEnd.IsAuto()) {
Expand All @@ -680,7 +682,8 @@ nsGridContainerFrame::ResolveAbsPosLineRange(
if (aStart.mHasSpan) {
start = std::max(aGridEnd - start, aGridStart);
}
return LineRange(clamped(start, aGridStart, aGridEnd), kAutoLine);
start = AutoIfOutside(start, aGridStart, aGridEnd);
return LineRange(start, kAutoLine);
}

LineRange r = ResolveLineRange(aStart, aEnd, aLineNameList, aAreaStart,
Expand All @@ -693,12 +696,8 @@ nsGridContainerFrame::ResolveAbsPosLineRange(
return LineRange(kAutoLine, kAutoLine);
}

// Clamp definite lines to be within the implicit grid.
// Note that this implies mUntranslatedStart may be equal to mUntranslatedEnd.
r.mUntranslatedStart = clamped(r.mUntranslatedStart, aGridStart, aGridEnd);
r.mUntranslatedEnd = clamped(r.mUntranslatedEnd, aGridStart, aGridEnd);
MOZ_ASSERT(r.mUntranslatedStart <= r.mUntranslatedEnd);
return r;
return LineRange(AutoIfOutside(r.mUntranslatedStart, aGridStart, aGridEnd),
AutoIfOutside(r.mUntranslatedEnd, aGridStart, aGridEnd));
}

uint32_t
Expand Down
14 changes: 14 additions & 0 deletions layout/generic/nsGridContainerFrame.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,20 @@ class nsGridContainerFrame final : public nsContainerFrame
};
};

/**
* Return aLine if it's inside the aMin..aMax range (inclusive),
* otherwise return kAutoLine.
*/
static int32_t
AutoIfOutside(int32_t aLine, int32_t aMin, int32_t aMax)
{
MOZ_ASSERT(aMin <= aMax);
if (aLine < aMin || aLine > aMax) {
return kAutoLine;
}
return aLine;
}

/**
* A GridArea is the area in the grid for a grid item.
* The area is represented by two LineRanges, both of which can be auto
Expand Down
91 changes: 71 additions & 20 deletions layout/reftests/css-grid/grid-abspos-items-001-ref.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,21 @@
.grid {
/*display: grid;*/
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:0px; }

.a {
position: absolute;
left: 13px; top: 51px;
height: 32px; width: 44px;
left: 13px; top: 31px;
height: 12px; width: 44px;
}

.abs {
Expand All @@ -45,23 +44,23 @@
}
.c {
right: 5px; bottom: 1px;
width: 53px; height: 37px;
width: 112px; height: 82px;
}
.d {
left: 1px; top: 37px;
width: 5px; height: 11px;
left: 1px; top: 27px;
width: 5px; height: 1px;
}
.e {
right: 5px; bottom: 1px;
width: 53px; height: 71px;
width: 112px; height: 51px;
}
.f {
right: 5px; top: 3px;
width: 53px; height: 11px;
width: 112px; height: 11px;
}
.g {
left: 14px; top: 37px;
width: 38px; height: 11px;
left: 14px; top: 27px;
width: 38px; height: 1px;
}
.h {
top:3px; left:1px; right:5px; bottom:1px;
Expand All @@ -80,39 +79,85 @@
</head>
<body>

<div style="float:left">

<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>

</div><div style="float:left">

<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>

</div><div style="float:left">

<div class="grid zero-size">
<span class="b abs" style="width:5px">b</span>
<span class="b abs" style="width:12px">b</span>
</div>

<div class="grid auto-size">
<span class="h abs">h</span>
</div>

<div class="grid" style="height:17px">
<div class="grid" style="height:7px">
<span class="i abs">i</span>
</div>

<div class="grid" style="height:17px">
<div class="grid" style="height:7px">
<span class="j abs">j</span>
</div>

Expand All @@ -123,10 +168,16 @@
<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
</div>

<div class="grid" style="width:43px; height:53px; border-width:0;">
<span class="abs" style="right:47px; top:3px; height:11px; width:0px;">b</span>
<span class="abs" style="left:1px; bottom:54px; height:5px; width:5px;">c</span>
<span class="abs" style="right:47px; bottom:54px; height:5px; width:0px;">d</span>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
</div>

</div>

</body>
Expand Down
65 changes: 58 additions & 7 deletions layout/reftests/css-grid/grid-abspos-items-001.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@
.grid {
display: grid;
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:auto; }
Expand Down Expand Up @@ -83,26 +82,72 @@
</head>
<body>

<div style="float:left">

<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>

</div><div style="float:left">

<div class="grid">
<span class="a">a</span>
<div><span class="b abs">b</span></div>
</div>

<div class="grid">
<span class="a">a</span>
<x><span class="c abs">c</span></x>
</div>

<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>

<div class="grid">
<span class="a">a</span>
<div><span class="e abs">e</span></div>
</div>

<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>

<div class="grid">
<span class="a">a</span>
<x><span class="g abs">g</span></x>
</div>

</div><div style="float:left">

<div class="grid zero-size">
<span class="b abs">b</span>
</div>
Expand All @@ -129,9 +174,15 @@
</div>

<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-start:2; grid-row-end:1;">b</span>
<span class="abs" style="grid-column-end:1; grid-row-start:2;">c</span>
<span class="abs" style="grid-column-start:2; grid-row-start:2;">d</span>
<span class="abs" style="grid-column-start:2; grid-row-end:1;"></span>
</div>
<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-end:1; grid-row-start:2;"></span>
</div>
<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-start:2; grid-row-start:2;"></span>
</div>

</div>

</body>
Expand Down
Loading

0 comments on commit d0be40b

Please sign in to comment.