RandomHuman
/
Mypal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS Grid Improvements.

This commit is contained in:
Fedor 2019-12-25 15:42:38 +03:00
parent 7028020b46
commit bddd8ea4b9
51 changed files with 4943 additions and 877 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devtools/shared/css/generated/properties-db.js
View File

@ -779,7 +779,8 @@ exports.CSS_PROPERTIES = {
"column-gap"
],
"supports": [
6
6,
8
],
"values": [
"-moz-calc",
@ -5434,7 +5435,8 @@ exports.CSS_PROPERTIES = {
"column-gap"
],
"supports": [
6
6,
8
],
"values": [
"-moz-calc",

42
dom/grid/GridLines.cpp
View File

@ -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
);

1
dom/grid/test/chrome.ini
View File

@ -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]

63
dom/grid/test/chrome/test_grid_implicit.html
View File

@ -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
View 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>

31
layout/base/LayoutConstants.h Normal file
View File

@ -0,0 +1,31 @@
/* -*- 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/. */
/* constants used throughout the Layout module */
#ifndef LayoutConstants_h___
#define LayoutConstants_h___
#include "nsSize.h" // for NS_MAXSIZE
/**
* Constant used to indicate an unconstrained size.
*/
#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE
// NOTE: There are assumptions all over that these have the same value,
// namely NS_UNCONSTRAINEDSIZE.
#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE
#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE
#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE
// +1 is to avoid clamped huge margin values being processed as auto margins
#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1)
#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN
#endif // LayoutConstants_h___

4
layout/base/moz.build
View File

@ -13,6 +13,9 @@ with Files('Display*'):
with Files('FrameLayerBuilder.*'):
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
with Files('LayoutConstants.*'):
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
with Files('LayerState.*'):
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
@ -63,6 +66,7 @@ EXPORTS += [
'FrameLayerBuilder.h',
'FrameProperties.h',
'LayerState.h',
'LayoutConstants.h',
'LayoutLogging.h',
'nsArenaMemoryStats.h',
'nsBidi.h',

76
layout/base/nsLayoutUtils.cpp
View File

@ -4671,8 +4671,6 @@ GetDefiniteSize(const nsStyleCoord& aStyle,
nscoord pb = aIsInlineAxis ? aPercentageBasis.value().ISize(wm)
: aPercentageBasis.value().BSize(wm);
if (pb == NS_UNCONSTRAINEDSIZE) {
// XXXmats given that we're calculating an intrinsic size here,
// maybe we should back-compute the calc-size using AddPercents?
return false;
}
*aResult = std::max(0, calc->mLength +
@ -4916,12 +4914,9 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
nscoord result = aContentSize;
nscoord min = aContentMinSize;
nscoord coordOutsideSize = 0;
float pctOutsideSize = 0;
float pctTotal = 0.0f;
if (!(aFlags & nsLayoutUtils::IGNORE_PADDING)) {
coordOutsideSize += aOffsets.hPadding;
pctOutsideSize += aOffsets.hPctPadding;
}
coordOutsideSize += aOffsets.hBorder;
@ -4929,21 +4924,15 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
if (aBoxSizing == StyleBoxSizing::Border) {
min += coordOutsideSize;
result = NSCoordSaturatingAdd(result, coordOutsideSize);
pctTotal += pctOutsideSize;
coordOutsideSize = 0;
pctOutsideSize = 0.0f;
}
coordOutsideSize += aOffsets.hMargin;
pctOutsideSize += aOffsets.hPctMargin;
min += coordOutsideSize;
result = NSCoordSaturatingAdd(result, coordOutsideSize);
pctTotal += pctOutsideSize;
const bool shouldAddPercent = aType == nsLayoutUtils::PREF_ISIZE ||
(aFlags & nsLayoutUtils::ADD_PERCENTS);
nscoord size;
if (aType == nsLayoutUtils::MIN_ISIZE &&
(((aStyleSize.HasPercent() || aStyleMaxSize.HasPercent()) &&
@ -4961,18 +4950,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
GetIntrinsicCoord(aStyleSize, aRenderingContext, aFrame,
PROP_WIDTH, size)) {
result = size + coordOutsideSize;
if (shouldAddPercent) {
result = nsLayoutUtils::AddPercents(result, pctOutsideSize);
}
} else {
// NOTE: We could really do a lot better for percents and for some
// cases of calc() containing percent (certainly including any where
// the coefficient on the percent is positive and there are no max()
// expressions). However, doing better for percents wouldn't be
// backwards compatible.
if (shouldAddPercent) {
result = nsLayoutUtils::AddPercents(result, pctTotal);
}
}
nscoord maxSize = aFixedMaxSize ? *aFixedMaxSize : 0;
@ -4980,9 +4957,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
GetIntrinsicCoord(aStyleMaxSize, aRenderingContext, aFrame,
PROP_MAX_WIDTH, maxSize)) {
maxSize += coordOutsideSize;
if (shouldAddPercent) {
maxSize = nsLayoutUtils::AddPercents(maxSize, pctOutsideSize);
}
if (result > maxSize) {
result = maxSize;
}
@ -4993,17 +4967,11 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
GetIntrinsicCoord(aStyleMinSize, aRenderingContext, aFrame,
PROP_MIN_WIDTH, minSize)) {
minSize += coordOutsideSize;
if (shouldAddPercent) {
minSize = nsLayoutUtils::AddPercents(minSize, pctOutsideSize);
}
if (result < minSize) {
result = minSize;
}
}
if (shouldAddPercent) {
min = nsLayoutUtils::AddPercents(min, pctTotal);
}
if (result < min) {
result = min;
}
@ -5020,9 +4988,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
: devSize.width);
// GetMinimumWidgetSize() returns a border-box width.
themeSize += aOffsets.hMargin;
if (shouldAddPercent) {
themeSize = nsLayoutUtils::AddPercents(themeSize, aOffsets.hPctMargin);
}
if (themeSize > result || !canOverride) {
result = themeSize;
}
@ -5267,9 +5232,19 @@ nsLayoutUtils::IntrinsicForAxis(PhysicalAxis aAxis,
min = aFrame->GetMinISize(aRenderingContext);
}
nscoord pmPercentageBasis = NS_UNCONSTRAINEDSIZE;
if (aPercentageBasis.isSome()) {
// The padding/margin percentage basis is the inline-size in the parent's
// writing-mode.
auto childWM = aFrame->GetWritingMode();
pmPercentageBasis =
aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ?
aPercentageBasis->BSize(childWM) :
aPercentageBasis->ISize(childWM);
}
nsIFrame::IntrinsicISizeOffsetData offsets =
MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets()
: aFrame->IntrinsicBSizeOffsets();
MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis)
: aFrame->IntrinsicBSizeOffsets(pmPercentageBasis);
nscoord contentBoxSize = result;
result = AddIntrinsicSizeOffset(aRenderingContext, aFrame, offsets, aType,
boxSizing, result, min, styleISize,
@ -5310,11 +5285,12 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext* aRenderingContext,
}
/* static */ nscoord
nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
nsRenderingContext* aRC,
nsIFrame* aFrame,
IntrinsicISizeType aType,
uint32_t aFlags)
nsIFrame* aFrame,
IntrinsicISizeType aType,
const LogicalSize& aPercentageBasis,
uint32_t aFlags)
{
MOZ_ASSERT(aFrame);
MOZ_ASSERT(aFrame->IsFlexOrGridItem(),
@ -5328,9 +5304,7 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
aWM.IsVertical() ? "vertical" : "horizontal");
#endif
// Note: this method is only meant for grid/flex items which always
// include percentages in their intrinsic size.
aFlags |= nsLayoutUtils::ADD_PERCENTS;
// Note: this method is only meant for grid/flex items.
const nsStylePosition* const stylePos = aFrame->StylePosition();
const nsStyleCoord* style = aAxis == eAxisHorizontal ? &stylePos->mMinWidth
: &stylePos->mMinHeight;
@ -5375,11 +5349,17 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
// wrapping inside of it should not apply font size inflation.
AutoMaybeDisableFontInflation an(aFrame);
PhysicalAxis ourInlineAxis =
aFrame->GetWritingMode().PhysicalAxis(eLogicalAxisInline);
// The padding/margin percentage basis is the inline-size in the parent's
// writing-mode.
auto childWM = aFrame->GetWritingMode();
nscoord pmPercentageBasis =
aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ?
aPercentageBasis.BSize(childWM) :
aPercentageBasis.ISize(childWM);
PhysicalAxis ourInlineAxis = childWM.PhysicalAxis(eLogicalAxisInline);
nsIFrame::IntrinsicISizeOffsetData offsets =
ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets()
: aFrame->IntrinsicBSizeOffsets();
ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis)
: aFrame->IntrinsicBSizeOffsets(pmPercentageBasis);
nscoord result = 0;
nscoord min = 0;

95
layout/base/nsLayoutUtils.h
View File

@ -6,6 +6,7 @@
#ifndef nsLayoutUtils_h__
#define nsLayoutUtils_h__
#include "LayoutConstants.h"
#include "mozilla/MemoryReporting.h"
#include "mozilla/ArrayUtils.h"
#include "mozilla/Maybe.h"
@ -154,6 +155,7 @@ public:
typedef mozilla::ScreenMargin ScreenMargin;
typedef mozilla::LayoutDeviceIntSize LayoutDeviceIntSize;
typedef mozilla::StyleGeometryBox StyleGeometryBox;
typedef mozilla::LogicalSize LogicalSize;
/**
* Finds previously assigned ViewID for the given content element, if any.
@ -1381,7 +1383,8 @@ public:
* variations if that's what matches aAxis) and its padding, border and margin
* in the corresponding dimension.
* @param aPercentageBasis an optional percentage basis (in aFrame's WM).
* Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes.
* If the basis is indefinite in a given axis, pass a size with
* NS_UNCONSTRAINEDSIZE in that component.
* If you pass Nothing() a percentage basis will be calculated from aFrame's
* ancestors' computed size in the relevant axis, if needed.
* @param aMarginBoxMinSizeClamp make the result fit within this margin-box
@ -1395,14 +1398,13 @@ public:
IGNORE_PADDING = 0x01,
BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so
MIN_INTRINSIC_ISIZE = 0x04, // use min-width/height instead of width/height
ADD_PERCENTS = 0x08, // apply AddPercents also for MIN_ISIZE
};
static nscoord
IntrinsicForAxis(mozilla::PhysicalAxis aAxis,
nsRenderingContext* aRenderingContext,
nsIFrame* aFrame,
IntrinsicISizeType aType,
const mozilla::Maybe<mozilla::LogicalSize>& aPercentageBasis = mozilla::Nothing(),
const mozilla::Maybe<LogicalSize>& aPercentageBasis = mozilla::Nothing(),
uint32_t aFlags = 0,
nscoord aMarginBoxMinSizeClamp = NS_MAXSIZE);
/**
@ -1427,31 +1429,18 @@ public:
* calculates the result as if the 'min-' computed value is zero.
* Otherwise, return NS_UNCONSTRAINEDSIZE.
*
* @param aPercentageBasis the percentage basis (in aFrame's WM).
* Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes.
* @note this behavior is specific to Grid/Flexbox (currently) so aFrame
* should be a grid/flex item.
*/
static nscoord MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis,
nsRenderingContext* aRC,
nsIFrame* aFrame,
IntrinsicISizeType aType,
uint32_t aFlags = 0);
/**
* This function increases an initial intrinsic size, 'aCurrent', according
* to the given 'aPercent', such that the size-increase makes up exactly
* 'aPercent' percent of the returned value. If 'aPercent' or 'aCurrent' are
* less than or equal to zero the original 'aCurrent' value is returned.
* If 'aPercent' is greater than or equal to 1.0 the value nscoord_MAX is
* returned.
*/
static nscoord AddPercents(nscoord aCurrent, float aPercent)
{
if (aPercent > 0.0f && aCurrent > 0) {
return MOZ_UNLIKELY(aPercent >= 1.0f) ? nscoord_MAX
: NSToCoordRound(float(aCurrent) / (1.0f - aPercent));
}
return aCurrent;
}
static nscoord
MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis,
nsRenderingContext* aRC,
nsIFrame* aFrame,
IntrinsicISizeType aType,
const LogicalSize& aPercentageBasis,
uint32_t aFlags = 0);
/*
* Convert nsStyleCoord to nscoord when percentages depend on the
@ -2876,6 +2865,62 @@ public:
static nsRect ComputeGeometryBox(nsIFrame* aFrame,
StyleGeometryBox aGeometryBox);
/**
* Resolve a CSS <length-percentage> value to a definite size.
*/
template<bool clampNegativeResultToZero>
static nscoord ResolveToLength(const nsStyleCoord& aCoord,
nscoord aPercentageBasis)
{
NS_WARNING_ASSERTION(aPercentageBasis >= nscoord(0), "nscoord overflow?");
switch (aCoord.GetUnit()) {
case eStyleUnit_Coord:
MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetCoordValue() >= 0,
"This value should have been rejected by the style system");
return aCoord.GetCoordValue();
case eStyleUnit_Percent:
if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) {
return nscoord(0);
}
MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetPercentValue() >= 0,
"This value should have been rejected by the style system");
return NSToCoordFloorClamped(aPercentageBasis *
aCoord.GetPercentValue());
case eStyleUnit_Calc: {
nsStyleCoord::Calc* calc = aCoord.GetCalcValue();
nscoord result;
if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) {
result = calc->mLength;
} else {
result = calc->mLength +
NSToCoordFloorClamped(aPercentageBasis * calc->mPercent);
}
if (clampNegativeResultToZero && result < 0) {
return nscoord(0);
}
return result;
}
default:
MOZ_ASSERT_UNREACHABLE("Unexpected unit!");
return nscoord(0);
}
}
/**
* Resolve a column-gap/row-gap to a definite size.
* @note This method resolves 'normal' to zero.
* Callers who want different behavior should handle 'normal' on their own.
*/
static nscoord ResolveGapToLength(const nsStyleCoord& aGap,
nscoord aPercentageBasis)
{
if (aGap.GetUnit() == eStyleUnit_Normal) {
return nscoord(0);
}
return ResolveToLength<true>(aGap, aPercentageBasis);
}
private:
static uint32_t sFontSizeInflationEmPerLine;
static uint32_t sFontSizeInflationMinTwips;

19
layout/generic/nsColumnSetFrame.cpp
View File

@ -183,18 +183,15 @@ nsColumnSetFrame::GetAvailableContentBSize(const ReflowInput& aReflowInput)
static nscoord
GetColumnGap(nsColumnSetFrame* aFrame,
const nsStyleColumn* aColStyle)
const nsStyleColumn* aColStyle,
nscoord aPercentageBasis)
{
if (eStyleUnit_Normal == aColStyle->mColumnGap.GetUnit())
const auto& columnGap = aColStyle->mColumnGap;
if (columnGap.GetUnit() == eStyleUnit_Normal) {
return aFrame->StyleFont()->mFont.size;
if (eStyleUnit_Coord == aColStyle->mColumnGap.GetUnit()) {
nscoord colGap = aColStyle->mColumnGap.GetCoordValue();
NS_ASSERTION(colGap >= 0, "negative column gap");
return colGap;
}
NS_NOTREACHED("Unknown gap type");
return 0;
return nsLayoutUtils::ResolveGapToLength(columnGap, aPercentageBasis);
}
nsColumnSetFrame::ReflowConfig
@ -227,7 +224,7 @@ nsColumnSetFrame::ChooseColumnStrategy(const ReflowInput& aReflowInput,
colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize());
}
nscoord colGap = GetColumnGap(this, colStyle);
nscoord colGap = GetColumnGap(this, colStyle, aReflowInput.ComputedISize());
int32_t numColumns = colStyle->mColumnCount;
// If column-fill is set to 'balance', then we want to balance the columns.
@ -403,7 +400,7 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext)
// include n-1 column gaps.
colISize = iSize;
iSize *= colStyle->mColumnCount;
nscoord colGap = GetColumnGap(this, colStyle);
nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
iSize += colGap * (colStyle->mColumnCount - 1);
// The multiplication above can make 'width' negative (integer overflow),
// so use std::max to protect against that.
@ -424,7 +421,7 @@ nsColumnSetFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
nscoord result = 0;
DISPLAY_PREF_WIDTH(this, result);
const nsStyleColumn* colStyle = StyleColumn();
nscoord colGap = GetColumnGap(this, colStyle);
nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
nscoord colISize;
if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) {

89
layout/generic/nsFrame.cpp
View File

@ -4515,68 +4515,44 @@ nsIFrame::InlinePrefISizeData::ForceBreak()
mSkipWhitespace = true;
}
static void
AddCoord(const nsStyleCoord& aStyle,
nsIFrame* aFrame,
nscoord* aCoord, float* aPercent,
bool aClampNegativeToZero)
static nscoord
ResolveMargin(const nsStyleCoord& aStyle, nscoord aPercentageBasis)
{
switch (aStyle.GetUnit()) {
case eStyleUnit_Coord: {
NS_ASSERTION(!aClampNegativeToZero || aStyle.GetCoordValue() >= 0,
"unexpected negative value");
*aCoord += aStyle.GetCoordValue();
return;
}
case eStyleUnit_Percent: {
NS_ASSERTION(!aClampNegativeToZero || aStyle.GetPercentValue() >= 0.0f,
"unexpected negative value");
*aPercent += aStyle.GetPercentValue();
return;
}
case eStyleUnit_Calc: {
const nsStyleCoord::Calc *calc = aStyle.GetCalcValue();
if (aClampNegativeToZero) {
// This is far from ideal when one is negative and one is positive.
*aCoord += std::max(calc->mLength, 0);
*aPercent += std::max(calc->mPercent, 0.0f);
} else {
*aCoord += calc->mLength;
*aPercent += calc->mPercent;
}
return;
}
default: {
return;
}
if (aStyle.GetUnit() == eStyleUnit_Auto) {
return nscoord(0);
}
return nsLayoutUtils::ResolveToLength<false>(aStyle, aPercentageBasis);
}
static nscoord
ResolvePadding(const nsStyleCoord& aStyle, nscoord aPercentageBasis)
{
return nsLayoutUtils::ResolveToLength<true>(aStyle, aPercentageBasis);
}
static nsIFrame::IntrinsicISizeOffsetData
IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
IntrinsicSizeOffsets(nsIFrame* aFrame, nscoord aPercentageBasis, bool aForISize)
{
nsIFrame::IntrinsicISizeOffsetData result;
WritingMode wm = aFrame->GetWritingMode();
const nsStyleMargin* styleMargin = aFrame->StyleMargin();
const auto& margin = aFrame->StyleMargin()->mMargin;
bool verticalAxis = aForISize == wm.IsVertical();
AddCoord(verticalAxis ? styleMargin->mMargin.GetTop()
: styleMargin->mMargin.GetLeft(),
aFrame, &result.hMargin, &result.hPctMargin,
false);
AddCoord(verticalAxis ? styleMargin->mMargin.GetBottom()
: styleMargin->mMargin.GetRight(),
aFrame, &result.hMargin, &result.hPctMargin,
false);
if (verticalAxis) {
result.hMargin += ResolveMargin(margin.GetTop(), aPercentageBasis);
result.hMargin += ResolveMargin(margin.GetBottom(), aPercentageBasis);
} else {
result.hMargin += ResolveMargin(margin.GetLeft(), aPercentageBasis);
result.hMargin += ResolveMargin(margin.GetRight(), aPercentageBasis);
}
const nsStylePadding* stylePadding = aFrame->StylePadding();
AddCoord(verticalAxis ? stylePadding->mPadding.GetTop()
: stylePadding->mPadding.GetLeft(),
aFrame, &result.hPadding, &result.hPctPadding,
true);
AddCoord(verticalAxis ? stylePadding->mPadding.GetBottom()
: stylePadding->mPadding.GetRight(),
aFrame, &result.hPadding, &result.hPctPadding,
true);
const auto& padding = aFrame->StylePadding()->mPadding;
if (verticalAxis) {
result.hPadding += ResolvePadding(padding.GetTop(), aPercentageBasis);
result.hPadding += ResolvePadding(padding.GetBottom(), aPercentageBasis);
} else {
result.hPadding += ResolvePadding(padding.GetLeft(), aPercentageBasis);
result.hPadding += ResolvePadding(padding.GetRight(), aPercentageBasis);
}
const nsStyleBorder* styleBorder = aFrame->StyleBorder();
if (verticalAxis) {
@ -4606,22 +4582,21 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
result.hPadding =
presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
: padding.LeftRight());
result.hPctPadding = 0;
}
}
return result;
}
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
nsFrame::IntrinsicISizeOffsets()
nsFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
{
return IntrinsicSizeOffsets(this, true);
return IntrinsicSizeOffsets(this, aPercentageBasis, true);
}
nsIFrame::IntrinsicISizeOffsetData
nsIFrame::IntrinsicBSizeOffsets()
nsIFrame::IntrinsicBSizeOffsets(nscoord aPercentageBasis)
{
return IntrinsicSizeOffsets(this, false);
return IntrinsicSizeOffsets(this, aPercentageBasis, false);
}
/* virtual */ IntrinsicSize

3
layout/generic/nsFrame.h
View File

@ -261,7 +261,8 @@ public:
InlineMinISizeData *aData) override;
virtual void AddInlinePrefISize(nsRenderingContext *aRenderingContext,
InlinePrefISizeData *aData) override;
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
IntrinsicISizeOffsetData
IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) override;
virtual mozilla::IntrinsicSize GetIntrinsicSize() override;
virtual nsSize GetIntrinsicRatio() override;

847
layout/generic/nsGridContainerFrame.cpp
View File

File diff suppressed because it is too large Load Diff

31
layout/generic/nsIFrame.h
View File

@ -25,6 +25,7 @@
#include "CaretAssociationHint.h"
#include "FrameProperties.h"
#include "LayoutConstants.h"
#include "mozilla/layout/FrameChildList.h"
#include "mozilla/Maybe.h"
#include "mozilla/WritingModes.h"
@ -130,30 +131,12 @@ typedef uint32_t nsSplittableType;
#define NS_FRAME_IS_NOT_SPLITTABLE(type)\
(0 == ((type) & NS_FRAME_SPLITTABLE))
#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN
//----------------------------------------------------------------------
#define NS_SUBTREE_DIRTY(_frame) \
(((_frame)->GetStateBits() & \
(NS_FRAME_IS_DIRTY | NS_FRAME_HAS_DIRTY_CHILDREN)) != 0)
/**
* Constant used to indicate an unconstrained size.
*
* @see #Reflow()
*/
#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE
#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE
#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE
// +1 is to avoid clamped huge margin values being processed as auto margins
#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1)
#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE
// NOTE: there are assumptions all over that these have the same value, namely NS_UNCONSTRAINEDSIZE
// if any are changed to be a value other than NS_UNCONSTRAINEDSIZE
// at least update AdjustComputedHeight/Width and test ad nauseum
// 1 million CSS pixels less than our max app unit measure.
// For reflowing with an "infinite" available inline space per [css-sizing].
// (reflowing with an NS_UNCONSTRAINEDSIZE available inline size isn't allowed
@ -2050,23 +2033,27 @@ public:
/**
* Return the horizontal components of padding, border, and margin
* that contribute to the intrinsic width that applies to the parent.
* @param aPercentageBasis the percentage basis to use for padding/margin -
* i.e. the Containing Block's inline-size
*/
struct IntrinsicISizeOffsetData {
nscoord hPadding, hBorder, hMargin;
float hPctPadding, hPctMargin;
IntrinsicISizeOffsetData()
: hPadding(0), hBorder(0), hMargin(0)
, hPctPadding(0.0f), hPctMargin(0.0f)
{}
};
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() = 0;
virtual IntrinsicISizeOffsetData
IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) = 0;
/**
* Return the bsize components of padding, border, and margin
* that contribute to the intrinsic width that applies to the parent.
* @param aPercentageBasis the percentage basis to use for padding/margin -
* i.e. the Containing Block's inline-size
*/
IntrinsicISizeOffsetData IntrinsicBSizeOffsets();
IntrinsicISizeOffsetData
IntrinsicBSizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE);
virtual mozilla::IntrinsicSize GetIntrinsicSize() = 0;

4
layout/generic/test/mochitest.ini
View File

@ -138,3 +138,7 @@ support-files = file_taintedfilters_feDisplacementMap-tainted-1.svg file_tainted
support-files = file_scroll_position_restore.html
[test_scroll_animation_restore.html]
[test_scroll_position_iframe.html]
[test_grid_track_sizing_algo_001.html]
skip-if = debug == true # the test is slow
[test_grid_track_sizing_algo_002.html]
skip-if = debug == true # the test is slow

1641
layout/generic/test/test_grid_track_sizing_algo_001.html Normal file
View File

File diff suppressed because it is too large Load Diff

1641
layout/generic/test/test_grid_track_sizing_algo_002.html Normal file
View File

File diff suppressed because it is too large Load Diff

2
layout/reftests/bugs/403519-2-ref.html
View File

@ -17,7 +17,7 @@ table {
<body>
<table>
<tbody><tr>
<td colspan="2" style="width: 100%;"><div>&nbsp;</div></td>
<td colspan="2"><div>&nbsp;</div></td>
<td>b</td>
</tr>
<tr>

51
layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
View File

@ -65,32 +65,49 @@ b40 {
.h.r {
height: 42px;
width: 42px;
/* This margin-left is 20% of 98px-wide grid area */
margin-left: 19.6px;
/* This padding-bottom is 10% of 98px wide grid area */
/* This padding-left is 30% of 98px wide grid area */
padding: 1px 3px 9.8px 29.4px;
/* 49px is the percentage basis, i.e. the column size */
margin-left: calc(0.2 * 49px);
padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px);
}
.v.r {
height: 42px;
width: 42px;
/* This margin-left is 20% of 54px-wide grid area */
margin-left: 10.8px;
/* This padding-bottom is 10% of 54px wide grid area */
/* This padding-left is 30% of 54px wide grid area */
padding: 1px 3px 5.4px 16.2px;
/* 27px is the percentage basis, i.e. the column size */
margin-left: calc(0.2 * 27px);
padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px);
}
.r { position:relative; }
.t4 { width: 49px;
height: calc(10px /* item min-height */ +
7px /* item margin-top */ +
1px /* item padding-top */ +
1px /* item border-top */ +
calc(0.5 * 49px) /* item margin-bottom */ +
calc(0.1 * 49px) /* item padding-bottom */);
}
.t6 { width:46px; }
.t8 { width:118px; height: 102.5px; }
.t8 { width: 27px;
height: calc(30px /* item min-height */ +
7px /* item margin-top */ +
3px /* item padding-top */ +
1px /* item border-top */ +
calc(0.5 * 27px) /* item margin-bottom */ +
calc(0.1 * 27px) /* item padding-bottom */);
}
xx {
display: block;
background: lime;
padding:32px 32px 16px 32px;
margin: 0 0 32px 16px;
padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px);
margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px);
}
.t9, .t10 {
position: relative;
z-index: 1;
grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px;
}
</style>
</head>
@ -100,15 +117,15 @@ xx {
<div class="grid"><span class="h"><x></x></span></div>
<div class="grid"><span class="h bb"><x></x></span></div>
<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
<div class="grid" style="grid:48px / 122px"><span class="h r"><b40></b40></span></div>
<div class="grid t4"><span class="h r"><b40></b40></span></div>
<br>
<div class="grid"><span class="v"><x></x></span></div>
<div class="grid t6"><span class="v bb"><x></x></span></div>
<div class="grid"><span class="v bb"><x></x></span></div>
<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
<div class="grid t8"><span class="v r"><b40></b40></span></div>
<div class="grid"><xx class="v"></xx></div>
<div class="grid v"><xx class="h"></xx></div>
<div class="grid t9"><xx class="v"></xx></div>
<div class="grid v t10"><xx class="h"></xx></div>
</body>
</html>

2
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html
View File

@ -36,7 +36,7 @@ var coltest = [
"min-height:40%", "min-height:40%; max-width:30px"
];
var results = [
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
"24px", "24px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px",
"24px", "24px", "24px"
];
var item_width = [

2
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html
View File

@ -36,7 +36,7 @@ var rowtest = [
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
];
var results = [
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
];
var item_height = [
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"

10
layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
View File

@ -54,9 +54,9 @@ br { clear:both; }
.c10 { grid-template-columns: minmax(10px,0) 1fr; }
#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
#percent-border .c100 { grid-template-columns: 111px 0; }
#percent-border .c100calc100 { grid-template-columns: 100px 11px; }
#percent-border .c10 { grid-template-columns: minmax(11px,0) 0; }
#percent-border .c100 { grid-template-columns: 100px 0; }
#percent-border .c100calc100 { grid-template-columns: 100px 10px; }
#percent-border .c10 { grid-template-columns: minmax(10px,0) 0; }
#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
#percent-border .c200 { grid-template-columns: 250px; }
</style>
@ -99,7 +99,7 @@ var grids = [
"grid c100",
"grid c100",
"grid",
"grid c200",
"grid c100",
"grid c10",
"grid c100",
"grid c100",
@ -110,7 +110,7 @@ var grids = [
"grid c100",
"grid c100",
"grid",
"grid c200",
"grid c100",
"grid c10",
"grid c100",
"grid c100",

2
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html
View File

@ -36,7 +36,7 @@ var coltest = [
"min-height:40%", "min-height:40%; max-width:30px"
];
var results = [
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px",
"360px", "0px", "0px", "0px", "24px", "360px", "80px", "24px", "20px", "24px",
"6px", "24px", "24px"
];
var item_width = [

2
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html
View File

@ -36,7 +36,7 @@ var rowtest = [
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
];
var results = [
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
];
var item_height = [
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"

15
layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
View File

@ -17,9 +17,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
.c3 { width:10px; margin: 2px 18px 1px 71px; }
span {
display: block;
@ -52,21 +52,22 @@ x { display:inline-block; width:10px; height:18px; }
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
@ -74,13 +75,13 @@ x { display:inline-block; width:10px; height:18px; }
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>

15
layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
View File

@ -21,9 +21,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
.c3 { width:10px; margin: 2px 18px 1px 71px; }
span {
display: block;
@ -56,21 +56,22 @@ x { display:inline-block; width:10px; height:18px; }
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
@ -78,13 +79,13 @@ x { display:inline-block; width:10px; height:18px; }
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>

8
layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
View File

@ -127,10 +127,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
}
.gF {
grid-template-columns: 22px
1px
1px
auto;
grid-template-columns: 2px
20px
2px
0;
}

78
layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
View File

@ -69,67 +69,67 @@ a {
<div style="float:left">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="maxw">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="minw">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left">
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>
<br clear="all">
<div style="float:left" class="maxw">
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="minw">
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>

78
layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
View File

@ -62,71 +62,71 @@ a {
<div style="float:left">
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<br clear="all">
<div style="float:left" class="maxw">
<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:35px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:41px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<br clear="all">
<div style="float:left" class="minw">
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left">
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>
<br clear="all">
<div style="float:left" class="maxw">
<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:35px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:40px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:46px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 46px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="minw">
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>

4
layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
View File

@ -51,8 +51,8 @@ x { display:inline-block; height:10px; width:18px; }
<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div>
-->
<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<!-- TODO: fails due to broken align:stretch
<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div>
<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div>

16
layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
View File

@ -65,7 +65,7 @@ br { clear: both; }
</div>
<div class="float">
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@ -74,7 +74,7 @@ br { clear: both; }
</div>
<div class="inline-grid">
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@ -141,12 +141,12 @@ br { clear: both; }
</div>
</div>
<div class="float" style="margin-top:-50px">
<div class="grid" style="min-width:300%; grid-gap:15px 15px">
<span><x></x></span>
<span style="margin-left:31px; width:30px"><x></x></span>
<span><x></x></span>
<span style="margin-left:31px; width:30px"><x></x></span>
<div class="float" style="margin-top:-50px; width:62px">
<div class="grid" style="padding-left:186px; height:60px; grid-column-gap:calc(186px * 0.2);">
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
</div>
</div>

6
layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
View File

@ -83,12 +83,16 @@ fill,fit {
.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [c]) [d];
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
}
.w50.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
}
.mw50.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d];
}
</style>
</head>
<body>

64
layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html
View File

@ -129,55 +129,55 @@ float { float:left; margin-right:20px; }
<body>
<float>
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c1 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c3 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c1 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c1 t1 x1 p1"><a></a><b></b><f></f></div>
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
<div class="grid c1 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c2 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c3 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div>
<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div>
<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div>
</float>
</body>

22
layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html
View File

@ -146,7 +146,7 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
@ -154,23 +154,23 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
</body>

33
layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html
View File

@ -139,8 +139,7 @@ float { float:left; margin-right:20px; }
.x2 e { left:23px; width:20px; right:auto; }
.c2.x2 e { left:20px; }
.t1.c3.x2 e { width:40px; }
.t1.c3.x2 b { width:63px; }
.t1.c3.x2 e { width:20px; }
.t1.c3.x2 c { width:20px; right:auto;}
.t2.x5 e { left:23px; width:60px; }
@ -159,35 +158,35 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><c></c><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><c></c><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
</body>

34
layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
View File

@ -156,32 +156,32 @@ function testGridTemplateColumns(elem, expected) {
}
}
var a1 = [
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px 3px"
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px"
];
var a2 = [
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 3px"
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
];
function runTest() {
var t1 = document.querySelectorAll('.t1');
@ -195,7 +195,7 @@ function runTest() {
document.documentElement.className='';
}
document.addEventListener('MozReftestInvalidate', runTest, false);
document.addEventListener('MozReftestInvalidate', runTest);
</script>

144
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html Normal file
View File

@ -0,0 +1,144 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: repeat(auto-fit) with removed tracks</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
<style type="text/css">
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
}
.container {
width: 200px;
}
.grid {
position: relative;
display: grid;
grid: 10px / repeat(5, 30px);
grid-auto-columns: 2px;
background: lightgrey;
margin-bottom: 4px;
grid-gap: 5px;
}
.distribute {
grid-gap: 0;
align-content: space-around;
}
span {
background: blue;
height: 10px;
}
.abs {
position: absolute;
top:0; right:0; bottom:0; left:0;
grid-column-end: span 1;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 3" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / auto" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 3" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / auto" class="abs"></span>
</div>
</div>
</body>
</html>

160
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html Normal file
View File

@ -0,0 +1,160 @@
<!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: repeat(auto-fit) with removed tracks</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
<link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
}
.container {
width: 200px;
}
.grid {
position: relative;
display: grid;
grid: 10px / repeat(auto-fit, 30px);
grid-auto-columns: 2px;
background: lightgrey;
margin-bottom: 4px;
grid-gap: 5px;
}
.distribute {
grid-gap: 0;
align-content: space-around;
}
span {
background: blue;
height: 10px;
}
.abs {
position: absolute;
top:0; right:0; bottom:0; left:0;
grid-column-end: span 1;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 3"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2 / 4"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 4 / 5"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 10" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 3"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2 / 4"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 4 / 5"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 10" class="abs"></span>
</div>
</div>
</body>
</html>

116
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html Normal file
View File

@ -0,0 +1,116 @@
<!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 Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title>
<style type="text/css">
body {
margin: 10px;
font-size: 10px;
}
.wrapper {
display: grid;
width: 600px;
background-color: #f00;
}
.wrapper > * {
background-color: #444;
color: #fff;
}
.templateFit {
grid-template-columns: 10px 10px repeat(auto-fill, 40px);
}
.templateFixedFit {
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px);
}
.templateFitFixed {
grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px;
}
.templateFixedFitFixed {
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px;
}
z {
grid-column: 1;
}
z::after {
content: "Z";
}
y {
grid-column: auto;
}
y::after {
content: "Y";
}
b {
grid-column: 3;
}
b::after {
content: "B";
}
c {
grid-column: 4;
}
c::after {
content: "C";
}
d {
grid-column: 5;
}
d::after {
content: "D";
}
e {
grid-column: 6;
}
e::after {
content: "E";
}
f {
grid-column: 7;
}
f::after {
content: "F";
}
</style>
</head>
<body>
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
</body>
</html>

135
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html Normal file
View File

@ -0,0 +1,135 @@
<!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: test placement in repeat auto-fit grids with leading implicit tracks</title>
<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html">
<style type="text/css">
body {
margin: 10px;
font-size: 10px;
}
.wrapper {
display: grid;
width: 600px;
background-color: #f00;
grid-auto-columns: 10px;
grid-auto-flow: row;
}
.wrapper > * {
background-color: #444;
color: #fff;
}
.relative {
position: relative;
}
.absposchild {
z-index: -1;
position: absolute;
grid-column-end: span 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.templateFit {
grid-template-columns: repeat(auto-fit, 40px);
}
.templateFixedFit {
grid-template-columns: 20px repeat(auto-fit, 40px);
}
.templateFitFixed {
grid-template-columns: repeat(auto-fit, 40px) 40px;
}
.templateFixedFitFixed {
grid-template-columns: 20px repeat(auto-fit, 40px) 40px;
}
z {
grid-column: -18;
}
z::after {
content: "Z";
}
y {
grid-column: auto;
}
y::after {
content: "Y";
}
b {
grid-column: 3;
}
b::after {
content: "B";
}
c {
grid-column: 5;
}
c::after {
content: "C";
}
d {
grid-column: 7;
}
d::after {
content: "D";
}
e {
grid-column: 9;
}
e::after {
content: "E";
}
f {
grid-column: 11;
}
f::after {
content: "F";
}
</style>
</head>
<body>
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
</body>
</html>

30
layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
View File

@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: grey;
}
.g1 .d1 {
width: 52px;
width: 0px;
}
.g2 .d1 {
width: 56px;
width: 0px;
}
.g2f .d1 {
width: 69px;
width: 0px;
}
.g3 .d1 {
width: 56px;
width: 0px;
}
.g4 .d1 {
width: 96px;
width: 80px;
}
.g4f .d1 {
width: 69px;
width: 0px;
}
.g5 .d1 {
width: 96px;
width: 80px;
}
.g6 .d1 {
width: 69px;
width: 0px;
}
.g6f .d1 {
width: 69px;
width: 0px;
}
.g7 .d1 {
width: 69px;
width: 0px;
}
.g8 .t {
width: 196px;
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 200px;
}
.g9 .d1 {
width: 69px;
width: 0px;
}
.gA .d1 {
width: 93px;
width: 80px;
}
.gB .d1 {
width: 93px;
width: 80px;
}
.gC .d1 {
width: 93px;
width: 80px;
}
.gD .d1 {
width: 93px;
width: 80px;
}
.t { grid-column: span 1; border:2px solid; }

48
layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
View File

@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: grey;
}
.g1 .d1 {
width: 52px;
width: 0px;
}
.g2 .d1 {
width: 56px;
width: 0px;
}
.g2f .d1 {
width: 69px;
}
.g3 .d1 {
width: 56px;
width: 0px;
}
.g4 .d1 {
width: 96px;
width: 80px;
}
.g4f .d1 {
width: 104px;
}
.g5 .d1 {
width: 96px;
width: 80px;
}
.g6 .d1 {
width: 69px;
width: 0px;
}
.g6f .d1 {
width: 89px;
}
.g7 .d1 {
width: 69px;
width: 0px;
}
.g8 .t {
width: 196px;
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 200px;
}
.g9 .d1 {
width: 69px;
width: 0px;
}
.gA .d1 {
width: 93px;
width: 80px;
}
.gB .d1 {
width: 93px;
width: 80px;
}
.gC .d1 {
width: 93px;
width: 80px;
}
.gD .d1 {
width: 93px;
width: 80px;
}
.d2 {
position: absolute;
@ -84,10 +84,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: blue;
}
.g1 .d2 {
width: 448px;
width: 500px;
}
.g2 .d2 {
width: 444px;
width: 500px;
}
.g2f .d2 {
right: auto;
@ -95,10 +95,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g3 .d2 {
width: 444px;
width: 500px;
}
.g4 .d2 {
width: 404px;
width: 420px;
}
.g4f .d2 {
right: auto;
@ -106,10 +106,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g5 .d2 {
width: 404px;
width: 420px;
}
.g6 .d2 {
width: 431px;
width: 500px;
}
.g6f .d2 {
right: auto;
@ -117,25 +117,25 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g7 .d2 {
width: 431px;
width: 500px;
}
.g8 .d2 {
width: 300px;
}
.g9 .d2 {
width: 431px;
width: 500px;
}
.gA .d2 {
width: 407px;
width: 420px;
}
.gB .d2 {
width: 407px;
width: 420px;
}
.gC .d2 {
width: 407px;
width: 420px;
}
.gD .d2 {
width: 407px;
width: 420px;
}
.t { grid-column: span 1; border:2px solid; }

6
layout/reftests/css-grid/reftest.list
View File

@ -112,9 +112,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976
== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976
== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
@ -184,6 +184,8 @@ skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.htm
== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html
== grid-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html
== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-ref.html
== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html
== grid-fragmentation-001.html grid-fragmentation-001-ref.html
== grid-fragmentation-002.html grid-fragmentation-002-ref.html

16
layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html
View File

@ -13,20 +13,20 @@ div.v, div.h {
display: block;
position: relative;
border: 1px dashed silver;
width:92px;
height:60px;
width:74px;
height:24px;
}
div.h {
width:124px;
height:98px;
width:62px;
height:61.2px;
}
.h span {
margin: 7px 13px 62px 25px;
padding: 1px 3px 12px 37px;
margin: 7px 13px 32px 12px;
padding: 1px 3px 6px 19px;
}
.v span {
margin: 7px 13px 30px 12px;
padding: 1px 3px 6px 18px;
margin: 7px 13px 30px 5px;
padding: 1px 3px 2px 7px;
}
span {

2
layout/style/nsCSSPropList.h
View File

@ -1499,7 +1499,7 @@ CSS_PROP_COLUMN(
CSS_PROPERTY_PARSE_VALUE |
CSS_PROPERTY_VALUE_NONNEGATIVE,
"",
VARIANT_HL | VARIANT_NORMAL | VARIANT_CALC,
VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC,
nullptr,
offsetof(nsStyleColumn, mColumnGap),
eStyleAnimType_Coord)

2
layout/style/nsStyleStruct.h
View File

@ -3495,7 +3495,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleColumn
uint32_t mColumnCount; // [reset] see nsStyleConsts.h
nsStyleCoord mColumnWidth; // [reset] coord, auto
nsStyleCoord mColumnGap; // [reset] coord, normal
nsStyleCoord mColumnGap; // [reset] <length-percentage> | normal
mozilla::StyleComplexColor mColumnRuleColor; // [reset]
uint8_t mColumnRuleStyle; // [reset]

4
layout/style/test/property_database.js
View File

@ -1438,7 +1438,7 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "normal", "1em", "calc(-2em + 3em)" ],
other_values: [ "2px", "4em",
other_values: [ "2px", "1em", "4em", "3%", "calc(3%)", "calc(1em - 3%)",
"calc(2px)",
"calc(-2px)",
"calc(0px)",
@ -1448,7 +1448,7 @@ var gCSSProperties = {
"calc(25px*3)",
"calc(3*25px + 5em)",
],
invalid_values: [ "3%", "-1px", "4" ]
invalid_values: [ "-3%", "-1px", "4" ]
},
"-moz-column-gap": {
domProp: "MozColumnGap",

6
layout/tables/nsTableCellFrame.cpp
View File

@ -796,12 +796,12 @@ nsTableCellFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
}
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
nsTableCellFrame::IntrinsicISizeOffsets()
nsTableCellFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
{
IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets();
IntrinsicISizeOffsetData result =
nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis);
result.hMargin = 0;
result.hPctMargin = 0;
WritingMode wm = GetWritingMode();
result.hBorder = GetBorderWidth(wm).IStartEnd(wm);

3
layout/tables/nsTableCellFrame.h
View File

@ -118,7 +118,8 @@ public:
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis =
NS_UNCONSTRAINEDSIZE) override;
virtual void Reflow(nsPresContext* aPresContext,
ReflowOutput& aDesiredSize,

7
layout/tables/nsTableFrame.cpp
View File

@ -1564,16 +1564,15 @@ nsTableFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
}
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
nsTableFrame::IntrinsicISizeOffsets()
nsTableFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
{
IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets();
IntrinsicISizeOffsetData result =
nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis);
result.hMargin = 0;
result.hPctMargin = 0;
if (IsBorderCollapse()) {
result.hPadding = 0;
result.hPctPadding = 0;
WritingMode wm = GetWritingMode();
LogicalMargin outerBC = GetIncludedOuterBCBorder(wm);

3
layout/tables/nsTableFrame.h
View File

@ -324,7 +324,8 @@ public:
// border to the results of these functions.
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis =
NS_UNCONSTRAINEDSIZE) override;
virtual mozilla::LogicalSize
ComputeSize(nsRenderingContext* aRenderingContext,