roytam1/palemoon27
1
0
Fork 0
mirror of https://github.com/roytam1/palemoon27.git synced 2026-05-26 14:18:48 +00:00
Code Issues Projects Releases Wiki Activity

import changes from `dev' branch of rmottola/Arctic-Fox:

Browse Source 
- Bug 1176681 - Make character buffer allocations in the HTML5 tree builder fallible. r=wchen. (f289384f90)
- Bug 1142400 - Separate padding calculation in Get{Min,Pref}ISize and Reflow of nsBulletFrame. r=dbaron (e08bee6a1d)
- Bug 1187432 - Avoid scheduling main-thread paints for scrolls handled by apz. r=tn (422d9e0c64)
- Bug 1172450 - Size and position the dropdown arrow properly in vertical writing modes. r=smontagu (73c1464a6b)
- Bug 1201529 - Ensure that zoomable scrollframes return true from WantAsyncScroll(). r=botond (7adb05b491)
- Bug 1174553 part 1 - Add a new flag (BAIL_IF_REFLOW_NEEDED) for IntrinsicForWM() that makes it return early with a NS_INTRINSIC_WIDTH_UNKNOWN result if a reflow is needed to determine the child's correct BSize. r=dholbert (221b586fe0)
- Bug 1174546 part 1 - Introduce nsLayoutUtils::MinSizeContributionForAxis which calculates an intrinsic size contribution from aFrame's 'min-width' property (or 'min-height' if the given axis is vertical) and the corresponding border, padding and margin values. r=jfkthame (c81d0b5aae)
- Bug 1174553 part 2 - Move the AddPercents function into a static method in the nsLayoutUtils class. r=dholbert (18b1153de7)
- Bug 1151212 part 1 - [css-grid] Introduce a few local structs (GridReflowState, Tracks, TrackSizingFunctions) to make it easier to pass around data. r=dholbert (10d9a635a6)
- Bug 1151212 part 2 - [css-grid] Introduce a local GridItemInfo struct for holding a grid item's GridArea and other things. Put two nsTArrays of those in the grid container frame, one for normal flow items and one for abs.pos. grid-aligned descendants. Add a GridItemIndex method on the grid item iterator to return the index for the current item. r=dholbert (f4df44e43c)
- Bug 1161038 - [css-grid] Make kAutoLine not clash with translated grid lines. r=dholbert (a467a13270)
- Bug 1174546 part 2 - [css-grid] Implement the 'auto' min-sizing function in Grid layout. r=jfkthame (bf6d3ab2b3)
- Bug 1174553 part 3 - [css-grid] Implement the 'min-content' / 'max-content' sizing functions in layout. r=dholbert (152e139615)
- Bug 1151212 part 3 - [css-grid] Implement the "Resolve Intrinsic Track Sizes" algorithm. r=dholbert (710657b5c2)
- Bug 1176619 - [css-grid] Implement the "Maximize Tracks" algorithm. r=dholbert (882da4b57e)
- Bug 1176621 - [css-grid] Implement "Stretch Flexible Tracks" and associated algorithms. r=dholbert (5737f5fb47)
- Bug 1174574 part 1 - [css-grid] Move the guts of nsGridContainerFrame::CalculateTrackSizes into a Tracks method. r=dholbert (871ca8dca6)
- Bug 1174574 part 2 - [css-grid] Implement intrinsic sizing for grid containers (aka GetMinISize/GetPrefISize). r=dholbert (0958f2ad77)
- Bug 1174553 part 5 - [css-grid] Replace the ambiguous Dimension with LogicalAxis. r=dholbert (15afa20c61)
- Bug 1194892 - [css-grid] "span * / span *" should be treated as "auto / auto" for abs.pos. grid items. r=dholbert (9b229d7e07)
- Bug 1194888 - [css-grid] A line outside the existing grid should be treated as 'auto' for abs.pos (10.1). r=dholbert (7bd2426be2)
- Bug 1204585 part 2 - [css-grid] abs.pos. child position reftests. (fbf2d4e37a)
- Bug 1206703 - [css-grid] In an empty grid all lines should be treated as 'auto' for abs.pos. items, i.e. snap to the padding edge. r=dholbert (42aeeb368f)
- Bug 1204585 part 1 - [css-grid] Use the grid area's size when converting to physical coordinates for abs.pos. items. r=dholbert (ad68e0bab1)
- Bug 1164918 - Allow multiple '.' per cell in grid-template-areas. r=dholbert (db6420ebc5)
- [css-grid] Use a smaller font-size to make sure the rendering fits within the reftest snapshot area. (minor test changes only, no bug, r=me) (4868bd81c9)
- Bug 1151212 part 4 - [css-grid] Tests for intrinsic track sizing and intrinsic grid container sizing (bug 1174574). (3b60858334)
- Bug 1176621 part 2 - [css-grid] Tests for flex track sizing. (fb507cae8e)
- Bug 1151212 - [css-grid] Tests for <flex> min-sizing. (a74a1bf328)
- Bug 1174504 - Logical-coordinate versions of nsIFrame::SetSize should maintain the frame's logical position. r=smontagu (f053a277bf)
This commit is contained in:
roytam1
2022-05-12 10:27:29 +08:00
parent 5628de57cc
commit e8d74fa3c4
114 changed files with 8237 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gfx/layers/apz/test/helper_bug982141.html
+2 -1
View File
@@ -5,6 +5,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=982141
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no">
<title>Test for Bug 982141, helper page</title>
<script type="application/javascript" src="apz_test_utils.js"></script>
<script type="application/javascript">
@@ -87,7 +88,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=982141
}
</script>
</head>
<body style="overflow: hidden;"><!-- Make sure the root frame is not scrollable -->
<body style="overflow: hidden;"><!-- This combined with the user-scalable=no ensures the root frame is not scrollable -->
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=982141">Mozilla Bug 982141</a>
<!-- A scrollable subframe, with enough content to make it have a nonzero scroll range -->
<div style="height: 50px; width: 50px; overflow: scroll">
gfx/tests/reftest/1143303-1.svg
+5
View File
@@ -4,6 +4,11 @@
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%">
<!-- There is a bug with MultiTiledContentClient that causes improper painting;
bug 1204076 is on file for this issue. As a temporary workaround, we set
user-scalable=no here so that WantAsyncZoom() returns false and we don't
use a MultiTiledContentClient. Once bug 1204076 is fixed, we can remove this. -->
<meta xmlns="http://www.w3.org/1999/xhtml" name="viewport" content="user-scalable=no"/>
<title>Testcase for small circles</title>
<!--From https://bugzilla.mozilla.org/show_bug.cgi?id=1143303 -->
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 770 B

After

Width:  |  Height:  |  Size: 1.2 KiB

layout/base/FrameLayerBuilder.cpp
+2 -2
View File
@@ -3744,7 +3744,7 @@ GetScrollClipIntersection(nsDisplayListBuilder* aBuilder, const nsIFrame* aAnima
continue;
}
const DisplayItemClip* clip = scrollFrame->ComputeScrollClip(aIsCaret);
Maybe<DisplayItemClip> clip = scrollFrame->ComputeScrollClip(aIsCaret);
if (clip) {
resultClip.IntersectWith(*clip);
}
@@ -4656,7 +4656,7 @@ ContainerState::SetupScrollingMetadata(NewLayerEntry* aEntry)
}
FrameMetrics& metrics = info->metrics;
const DisplayItemClip* clip = info->clip;
Maybe<DisplayItemClip> clip = info->clip;
if (clip &&
clip->HasClip() &&
layout/base/ZoomConstraintsClient.cpp
+8
View File
@@ -187,6 +187,14 @@ ZoomConstraintsClient::RefreshZoomConstraints()
}
}
// We only ever create a ZoomConstraintsClient for an RCD, so the RSF of
// the presShell must be the RCD-RSF (if it exists).
MOZ_ASSERT(mPresShell->GetPresContext()->IsRootContentDocument());
if (nsIScrollableFrame* rcdrsf = mPresShell->GetRootScrollFrameAsScrollable()) {
ZCC_LOG("Notifying RCD-RSF that it is zoomable: %d\n", zoomConstraints.mAllowZoom);
rcdrsf->SetZoomableByAPZ(zoomConstraints.mAllowZoom);
}
ScrollableLayerGuid newGuid(0, presShellId, viewId);
if (mGuid && mGuid.value() != newGuid) {
ZCC_LOG("Clearing old constraints in %p for { %u, %" PRIu64 " }\n",
layout/base/nsLayoutUtils.cpp
+70 -21
View File
@@ -1080,6 +1080,10 @@ nsLayoutUtils::SetDisplayPortMargins(nsIContent* aContent,
return false;
}
if (currentData && currentData->mMargins == aMargins) {
return true;
}
aContent->SetProperty(nsGkAtoms::DisplayPortMargins,
new DisplayPortMarginsPropertyData(
aMargins, aPriority),
@@ -4100,21 +4104,6 @@ nsLayoutUtils::IsViewportScrollbarFrame(nsIFrame* aFrame)
IsProperAncestorFrame(rootScrolledFrame, aFrame));
}
static nscoord AddPercents(nsLayoutUtils::IntrinsicISizeType aType,
nscoord aCurrent, float aPercent)
{
nscoord result = aCurrent;
if (aPercent > 0.0f && aType == nsLayoutUtils::PREF_ISIZE) {
// XXX Should we also consider percentages for min widths, up to a
// limit?
if (aPercent >= 1.0f)
result = nscoord_MAX;
else
result = NSToCoordRound(float(result) / (1.0f - aPercent));
}
return result;
}
// Use only for widths/heights (or their min/max), since it clamps
// negative calc() results to 0.
static bool GetAbsoluteCoord(const nsStyleCoord& aStyle, nscoord& aResult)
@@ -4401,7 +4390,8 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
if (GetAbsoluteCoord(aStyleSize, size) ||
GetIntrinsicCoord(aStyleSize, aRenderingContext, aFrame,
PROP_WIDTH, size)) {
result = AddPercents(aType, size + coordOutsideSize, pctOutsideSize);
result = nsLayoutUtils::AddPercents(aType, size + coordOutsideSize,
pctOutsideSize);
} else if (aType == nsLayoutUtils::MIN_ISIZE &&
// The only cases of coord-percent-calc() units that
// GetAbsoluteCoord didn't handle are percent and calc()s
@@ -4416,14 +4406,15 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
// the coefficient on the percent is positive and there are no max()
// expressions). However, doing better for percents wouldn't be
// backwards compatible.
result = AddPercents(aType, result, pctTotal);
result = nsLayoutUtils::AddPercents(aType, result, pctTotal);
}
nscoord maxSize = aFixedMaxSize ? *aFixedMaxSize : 0;
if (aFixedMaxSize ||
GetIntrinsicCoord(aStyleMaxSize, aRenderingContext, aFrame,
PROP_MAX_WIDTH, maxSize)) {
maxSize = AddPercents(aType, maxSize + coordOutsideSize, pctOutsideSize);
maxSize = nsLayoutUtils::AddPercents(aType, maxSize + coordOutsideSize,
pctOutsideSize);
if (result > maxSize) {
result = maxSize;
}
@@ -4433,13 +4424,14 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
if (aFixedMinSize ||
GetIntrinsicCoord(aStyleMinSize, aRenderingContext, aFrame,
PROP_MIN_WIDTH, minSize)) {
minSize = AddPercents(aType, minSize + coordOutsideSize, pctOutsideSize);
minSize = nsLayoutUtils::AddPercents(aType, minSize + coordOutsideSize,
pctOutsideSize);
if (result < minSize) {
result = minSize;
}
}
min = AddPercents(aType, min, pctTotal);
min = nsLayoutUtils::AddPercents(aType, min, pctTotal);
if (result < min) {
result = min;
}
@@ -4456,7 +4448,8 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
: devSize.width);
// GetMinimumWidgetSize() returns a border-box width.
themeSize += aOffsets.hMargin;
themeSize = AddPercents(aType, themeSize, aOffsets.hPctMargin);
themeSize = nsLayoutUtils::AddPercents(aType, themeSize,
aOffsets.hPctMargin);
if (themeSize > result || !canOverride) {
result = themeSize;
@@ -4565,6 +4558,9 @@ nsLayoutUtils::IntrinsicForAxis(PhysicalAxis aAxis,
#endif
if (MOZ_UNLIKELY(aAxis != ourInlineAxis)) {
// We need aFrame's block-dir size.
if (aFlags & BAIL_IF_REFLOW_NEEDED) {
return NS_INTRINSIC_WIDTH_UNKNOWN;
}
// XXX Unfortunately, we probably don't know this yet, so this is wrong...
// but it's not clear what we should do. If aFrame's inline size hasn't
// been determined yet, we can't necessarily figure out its block size
@@ -4716,6 +4712,59 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext* aRenderingContext,
return IntrinsicForAxis(axis, aRenderingContext, aFrame, aType, aFlags);
}
/* static */ nscoord
nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
nsRenderingContext* aRC,
nsIFrame* aFrame,
IntrinsicISizeType aType,
uint32_t aFlags)
{
NS_PRECONDITION(aFrame, "null frame");
NS_PRECONDITION(aFrame->GetParent(),
"MinSizeContributionForAxis called on frame not in tree");
#ifdef DEBUG_INTRINSIC_WIDTH
nsFrame::IndentBy(stderr, gNoiseIndent);
static_cast<nsFrame*>(aFrame)->ListTag(stderr);
printf_stderr(" %s min-isize for %s WM:\n",
aType == MIN_ISIZE ? "min" : "pref",
aWM.IsVertical() ? "vertical" : "horizontal");
#endif
// If aFrame is a container for font size inflation, then shrink
// wrapping inside of it should not apply font size inflation.
AutoMaybeDisableFontInflation an(aFrame);
PhysicalAxis ourInlineAxis =
aFrame->GetWritingMode().PhysicalAxis(eLogicalAxisInline);
nsIFrame::IntrinsicISizeOffsetData offsets =
ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets()
: aFrame->IntrinsicBSizeOffsets();
nscoord result = 0;
nscoord min = 0;
const nsStylePosition* stylePos = aFrame->StylePosition();
uint8_t boxSizing = stylePos->mBoxSizing;
const nsStyleCoord& style = aAxis == eAxisHorizontal ? stylePos->mMinWidth
: stylePos->mMinHeight;
nscoord minSize;
nscoord* fixedMinSize = nullptr;
if (GetAbsoluteCoord(style, minSize)) {
fixedMinSize = &minSize;
}
result = AddIntrinsicSizeOffset(aRC, aFrame, offsets, aType, boxSizing,
result, min, style, fixedMinSize,
style, fixedMinSize, style, aFlags, aAxis);
#ifdef DEBUG_INTRINSIC_WIDTH
nsFrame::IndentBy(stderr, gNoiseIndent);
static_cast<nsFrame*>(aFrame)->ListTag(stderr);
printf_stderr(" %s min-isize is %d twips.\n",
aType == MIN_ISIZE ? "min" : "pref", result);
#endif
return result;
}
/* static */ nscoord
nsLayoutUtils::ComputeCBDependentValue(nscoord aPercentBasis,
const nsStyleCoord& aCoord)
layout/base/nsLayoutUtils.h
+36 -3
View File
@@ -79,8 +79,8 @@ struct RectCornerRadii;
} // namespace gfx
namespace layers {
class Layer;
}
}
} // namespace layers
} // namespace mozilla
namespace mozilla {
@@ -1308,7 +1308,8 @@ public:
*/
enum IntrinsicISizeType { MIN_ISIZE, PREF_ISIZE };
enum {
IGNORE_PADDING = 0x01
IGNORE_PADDING = 0x01,
BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so
};
static nscoord IntrinsicForAxis(mozilla::PhysicalAxis aAxis,
nsRenderingContext* aRenderingContext,
@@ -1323,6 +1324,38 @@ public:
IntrinsicISizeType aType,
uint32_t aFlags = 0);
/**
* Get the contribution of aFrame for the given physical axis.
* This considers the child's 'min-width' property (or 'min-height' if the
* given axis is vertical), and its padding, border, and margin in the
* corresponding dimension.
*/
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' is 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.
* (We don't increase the size if MIN_ISIZE is passed in, though.)
*/
static nscoord AddPercents(IntrinsicISizeType aType, nscoord aCurrent,
float aPercent)
{
if (aPercent > 0.0f && aType == nsLayoutUtils::PREF_ISIZE) {
// XXX Should we also consider percentages for min widths, up to a
// limit?
return MOZ_UNLIKELY(aPercent >= 1.0f) ? nscoord_MAX
: NSToCoordRound(float(aCurrent) / (1.0f - aPercent));
}
return aCurrent;
}
/*
* Convert nsStyleCoord to nscoord when percentages depend on the
* containing block size.
layout/forms/nsComboboxControlFrame.cpp
+4 -4
View File
@@ -733,7 +733,7 @@ nsComboboxControlFrame::GetIntrinsicISize(nsRenderingContext* aRenderingContext,
nsIScrollableFrame* scrollable = do_QueryFrame(mListControlFrame);
NS_ASSERTION(scrollable, "List must be a scrollable frame");
scrollbarWidth = scrollable->GetNondisappearingScrollbarWidth(
presContext, aRenderingContext);
presContext, aRenderingContext, GetWritingMode());
}
nscoord displayISize = 0;
@@ -848,6 +848,7 @@ nsComboboxControlFrame::Reflow(nsPresContext* aPresContext,
// Get the width of the vertical scrollbar. That will be the inline
// size of the dropdown button.
WritingMode wm = aReflowState.GetWritingMode();
nscoord buttonISize;
const nsStyleDisplay *disp = StyleDisplay();
if ((IsThemed(disp) && !aPresContext->GetTheme()->ThemeNeedsComboboxDropmarker()) ||
@@ -858,7 +859,7 @@ nsComboboxControlFrame::Reflow(nsPresContext* aPresContext,
nsIScrollableFrame* scrollable = do_QueryFrame(mListControlFrame);
NS_ASSERTION(scrollable, "List must be a scrollable frame");
buttonISize = scrollable->GetNondisappearingScrollbarWidth(
PresContext(), aReflowState.rendContext);
PresContext(), aReflowState.rendContext, wm);
if (buttonISize > aReflowState.ComputedISize()) {
buttonISize = 0;
}
@@ -869,8 +870,7 @@ nsComboboxControlFrame::Reflow(nsPresContext* aPresContext,
nsBlockFrame::Reflow(aPresContext, aDesiredSize, aReflowState, aStatus);
// The button should occupy the same space as a scrollbar
WritingMode wm = aReflowState.GetWritingMode();
nsSize containerSize = aReflowState.ComputedSizeAsContainerIfConstrained();
nsSize containerSize = aDesiredSize.PhysicalSize();
LogicalRect buttonRect = mButtonFrame->GetLogicalRect(containerSize);
buttonRect.IStart(wm) =
layout/generic/nsBlockFrame.cpp
+3 -2
View File
@@ -1632,7 +1632,8 @@ nsBlockFrame::ComputeFinalSize(const nsHTMLReflowState& aReflowState,
aMetrics.SetSize(wm, finalSize);
#ifdef DEBUG_blocks
if (CRAZY_SIZE(aMetrics.Width()) || CRAZY_SIZE(aMetrics.Height())) {
if ((CRAZY_SIZE(aMetrics.Width()) || CRAZY_SIZE(aMetrics.Height())) &&
!GetParent()->IsCrazySizeAssertSuppressed()) {
ListTag(stdout);
printf(": WARNING: desired:%d,%d\n", aMetrics.Width(), aMetrics.Height());
}
@@ -4462,7 +4463,7 @@ nsBlockFrame::PlaceLine(nsBlockReflowState& aState,
}
#ifdef DEBUG
{
if (!GetParent()->IsCrazySizeAssertSuppressed()) {
static nscoord lastHeight = 0;
if (CRAZY_SIZE(aLine->BStart())) {
lastHeight = aLine->BStart();
layout/generic/nsBlockReflowContext.cpp
+3 -2
View File
@@ -302,8 +302,9 @@ nsBlockReflowContext::ReflowBlock(const LogicalRect& aSpace,
#ifdef DEBUG
if (!NS_INLINE_IS_BREAK_BEFORE(aFrameReflowStatus)) {
if (CRAZY_SIZE(mMetrics.ISize(mWritingMode)) ||
CRAZY_SIZE(mMetrics.BSize(mWritingMode))) {
if ((CRAZY_SIZE(mMetrics.ISize(mWritingMode)) ||
CRAZY_SIZE(mMetrics.BSize(mWritingMode))) &&
!mFrame->GetParent()->IsCrazySizeAssertSuppressed()) {
printf("nsBlockReflowContext: ");
nsFrame::ListTag(stdout, mFrame);
printf(" metrics=%d,%d!\n",
layout/generic/nsBulletFrame.cpp
+21 -16
View File
@@ -515,20 +515,22 @@ nsBulletFrame::GetListItemText(nsAString& aResult)
#define MIN_BULLET_SIZE 1
void
nsBulletFrame::AppendSpacingToPadding(nsFontMetrics* aFontMetrics)
nsBulletFrame::AppendSpacingToPadding(nsFontMetrics* aFontMetrics,
LogicalMargin* aPadding)
{
mPadding.IEnd(GetWritingMode()) += aFontMetrics->EmHeight() / 2;
aPadding->IEnd(GetWritingMode()) += aFontMetrics->EmHeight() / 2;
}
void
nsBulletFrame::GetDesiredSize(nsPresContext* aCX,
nsRenderingContext *aRenderingContext,
nsHTMLReflowMetrics& aMetrics,
float aFontSizeInflation)
float aFontSizeInflation,
LogicalMargin* aPadding)
{
// Reset our padding. If we need it, we'll set it below.
WritingMode wm = GetWritingMode();
mPadding.SizeTo(wm, 0, 0, 0, 0);
aPadding->SizeTo(wm, 0, 0, 0, 0);
LogicalSize finalSize(wm);
const nsStyleList* myList = StyleList();
@@ -550,7 +552,7 @@ nsBulletFrame::GetDesiredSize(nsPresContext* aCX,
mIntrinsicSize.BSize(wm));
aMetrics.SetSize(wm, finalSize);
AppendSpacingToPadding(fm);
AppendSpacingToPadding(fm, aPadding);
AddStateBits(BULLET_FRAME_IMAGE_LOADING);
@@ -581,10 +583,10 @@ nsBulletFrame::GetDesiredSize(nsPresContext* aCX,
ascent = fm->MaxAscent();
bulletSize = std::max(nsPresContext::CSSPixelsToAppUnits(MIN_BULLET_SIZE),
NSToCoordRound(0.8f * (float(ascent) / 2.0f)));
mPadding.BEnd(wm) = NSToCoordRound(float(ascent) / 8.0f);
aPadding->BEnd(wm) = NSToCoordRound(float(ascent) / 8.0f);
finalSize.ISize(wm) = finalSize.BSize(wm) = bulletSize;
aMetrics.SetBlockStartAscent(bulletSize + mPadding.BEnd(wm));
AppendSpacingToPadding(fm);
aMetrics.SetBlockStartAscent(bulletSize + aPadding->BEnd(wm));
AppendSpacingToPadding(fm, aPadding);
break;
}
@@ -594,12 +596,12 @@ nsBulletFrame::GetDesiredSize(nsPresContext* aCX,
bulletSize = std::max(
nsPresContext::CSSPixelsToAppUnits(MIN_BULLET_SIZE),
NSToCoordRound(0.75f * ascent));
mPadding.BEnd(wm) = NSToCoordRound(0.125f * ascent);
aPadding->BEnd(wm) = NSToCoordRound(0.125f * ascent);
finalSize.ISize(wm) = finalSize.BSize(wm) = bulletSize;
if (!wm.IsVertical()) {
aMetrics.SetBlockStartAscent(bulletSize + mPadding.BEnd(wm));
aMetrics.SetBlockStartAscent(bulletSize + aPadding->BEnd(wm));
}
AppendSpacingToPadding(fm);
AppendSpacingToPadding(fm, aPadding);
break;
default:
@@ -629,7 +631,8 @@ nsBulletFrame::Reflow(nsPresContext* aPresContext,
SetFontSizeInflation(inflation);
// Get the base size
GetDesiredSize(aPresContext, aReflowState.rendContext, aMetrics, inflation);
GetDesiredSize(aPresContext, aReflowState.rendContext,
aMetrics, inflation, &mPadding);
// Add in the border and padding; split the top/bottom between the
// ascent and descent to make things look nice
@@ -663,8 +666,9 @@ nsBulletFrame::GetMinISize(nsRenderingContext *aRenderingContext)
WritingMode wm = GetWritingMode();
nsHTMLReflowMetrics metrics(wm);
DISPLAY_MIN_WIDTH(this, metrics.ISize(wm));
GetDesiredSize(PresContext(), aRenderingContext, metrics, 1.0f);
metrics.ISize(wm) += mPadding.IStartEnd(wm);
LogicalMargin padding(wm);
GetDesiredSize(PresContext(), aRenderingContext, metrics, 1.0f, &padding);
metrics.ISize(wm) += padding.IStartEnd(wm);
return metrics.ISize(wm);
}
@@ -674,8 +678,9 @@ nsBulletFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
WritingMode wm = GetWritingMode();
nsHTMLReflowMetrics metrics(wm);
DISPLAY_PREF_WIDTH(this, metrics.ISize(wm));
GetDesiredSize(PresContext(), aRenderingContext, metrics, 1.0f);
metrics.ISize(wm) += mPadding.IStartEnd(wm);
LogicalMargin padding(wm);
GetDesiredSize(PresContext(), aRenderingContext, metrics, 1.0f, &padding);
metrics.ISize(wm) += padding.IStartEnd(wm);
return metrics.ISize(wm);
}
layout/generic/nsBulletFrame.h
+4 -2
View File
@@ -113,11 +113,13 @@ public:
protected:
nsresult OnSizeAvailable(imgIRequest* aRequest, imgIContainer* aImage);
void AppendSpacingToPadding(nsFontMetrics* aFontMetrics);
void AppendSpacingToPadding(nsFontMetrics* aFontMetrics,
mozilla::LogicalMargin* aPadding);
void GetDesiredSize(nsPresContext* aPresContext,
nsRenderingContext *aRenderingContext,
nsHTMLReflowMetrics& aMetrics,
float aFontSizeInflation);
float aFontSizeInflation,
mozilla::LogicalMargin* aPadding);
void GetLoadGroup(nsPresContext *aPresContext, nsILoadGroup **aLoadGroup);
nsIDocument* GetOurCurrentDoc() const;
layout/generic/nsContainerFrame.h
+8
View File
@@ -455,6 +455,14 @@ public:
NS_DECLARE_FRAME_PROPERTY_FRAMELIST(OverflowContainersProperty)
NS_DECLARE_FRAME_PROPERTY_FRAMELIST(ExcessOverflowContainersProperty)
#ifdef DEBUG
// Use this to suppress the CRAZY_SIZE assertions.
NS_DECLARE_FRAME_PROPERTY(DebugReflowingWithInfiniteISize, nullptr)
bool IsCrazySizeAssertSuppressed() const {
return Properties().Get(DebugReflowingWithInfiniteISize()) != nullptr;
}
#endif
protected:
explicit nsContainerFrame(nsStyleContext* aContext) : nsSplittableFrame(aContext) {}
~nsContainerFrame();
layout/generic/nsGfxScrollFrame.cpp
+61 -22
View File
@@ -1041,34 +1041,38 @@ ScrollFrameHelper::GetDesiredScrollbarSizes(nsBoxLayoutState* aState)
}
nscoord
ScrollFrameHelper::GetNondisappearingScrollbarWidth(nsBoxLayoutState* aState)
ScrollFrameHelper::GetNondisappearingScrollbarWidth(nsBoxLayoutState* aState,
WritingMode aWM)
{
NS_ASSERTION(aState && aState->GetRenderingContext(),
"Must have rendering context in layout state for size "
"computations");
bool verticalWM = aWM.IsVertical();
if (LookAndFeel::GetInt(LookAndFeel::eIntID_UseOverlayScrollbars) != 0) {
// We're using overlay scrollbars, so we need to get the width that
// non-disappearing scrollbars would have.
nsITheme* theme = aState->PresContext()->GetTheme();
if (theme &&
theme->ThemeSupportsWidget(aState->PresContext(),
mVScrollbarBox,
verticalWM ? mHScrollbarBox
: mVScrollbarBox,
NS_THEME_SCROLLBAR_NON_DISAPPEARING)) {
LayoutDeviceIntSize size;
bool canOverride = true;
theme->GetMinimumWidgetSize(aState->PresContext(),
mVScrollbarBox,
verticalWM ? mHScrollbarBox
: mVScrollbarBox,
NS_THEME_SCROLLBAR_NON_DISAPPEARING,
&size,
&canOverride);
if (size.width) {
return aState->PresContext()->DevPixelsToAppUnits(size.width);
}
return aState->PresContext()->
DevPixelsToAppUnits(verticalWM ? size.height : size.width);
}
}
return GetDesiredScrollbarSizes(aState).LeftRight();
nsMargin sizes(GetDesiredScrollbarSizes(aState));
return verticalWM ? sizes.TopBottom() : sizes.LeftRight();
}
void
@@ -1103,9 +1107,26 @@ static bool IsFocused(nsIContent* aContent)
}
#endif
void
ScrollFrameHelper::SetZoomableByAPZ(bool aZoomable)
{
if (mZoomableByAPZ != aZoomable) {
// We might be changing the result of WantAsyncScroll() so schedule a
// paint to make sure we pick up the result of that change.
mZoomableByAPZ = aZoomable;
mOuter->SchedulePaint();
}
}
bool
ScrollFrameHelper::WantAsyncScroll() const
{
// If zooming is allowed, and this is a frame that's allowed to zoom, then
// we want it to be async-scrollable or zooming will not be permitted.
if (mZoomableByAPZ) {
return true;
}
ScrollbarStyles styles = GetScrollbarStylesFromFrame();
uint32_t directions = mOuter->GetScrollTargetFrame()->GetPerceivedScrollingDirections();
bool isVScrollable = !!(directions & nsIScrollableFrame::VERTICAL) &&
@@ -1801,8 +1822,6 @@ ScrollFrameHelper::ScrollFrameHelper(nsContainerFrame* aOuter,
, mResolution(1.0)
, mScrollPosForLayerPixelAlignment(-1, -1)
, mLastUpdateImagesPos(-1, -1)
, mAncestorClip(nullptr)
, mAncestorClipForCaret(nullptr)
, mNeverHasVerticalScrollbar(false)
, mNeverHasHorizontalScrollbar(false)
, mHasVerticalScrollbar(false)
@@ -1828,6 +1847,7 @@ ScrollFrameHelper::ScrollFrameHelper(nsContainerFrame* aOuter,
, mIgnoreMomentumScroll(false)
, mScaleToResolution(false)
, mTransformingByAPZ(false)
, mZoomableByAPZ(false)
, mVelocityQueue(aOuter->PresContext())
{
if (LookAndFeel::GetInt(LookAndFeel::eIntID_UseOverlayScrollbars) != 0) {
@@ -2225,7 +2245,7 @@ void ScrollFrameHelper::MarkRecentlyScrolled()
}
}
void ScrollFrameHelper::ScrollVisual(nsPoint aOldScrolledFramePos)
void ScrollFrameHelper::ScrollVisual()
{
// Mark this frame as having been scrolled. If this is the root
// scroll frame of a content document, then IsAlwaysActive()
@@ -2244,7 +2264,6 @@ void ScrollFrameHelper::ScrollVisual(nsPoint aOldScrolledFramePos)
MarkRecentlyScrolled();
}
mOuter->SchedulePaint();
}
/**
@@ -2418,15 +2437,35 @@ ScrollFrameHelper::ScrollToImpl(nsPoint aPt, const nsRect& aRange, nsIAtom* aOri
mListeners[i]->ScrollPositionWillChange(pt.x, pt.y);
}
nsPoint oldScrollFramePos = mScrolledFrame->GetPosition();
nsRect oldDisplayPort;
nsLayoutUtils::GetDisplayPort(mOuter->GetContent(), &oldDisplayPort);
oldDisplayPort.MoveBy(-mScrolledFrame->GetPosition());
// Update frame position for scrolling
mScrolledFrame->SetPosition(mScrollPort.TopLeft() - pt);
mLastScrollOrigin = aOrigin;
mLastSmoothScrollOrigin = nullptr;
mScrollGeneration = ++sScrollGenerationCounter;
// We pass in the amount to move visually
ScrollVisual(oldScrollFramePos);
ScrollVisual();
if (LastScrollOrigin() == nsGkAtoms::apz) {
// If this was an apz scroll and the displayport (relative to the
// scrolled frame) hasn't changed, then this won't trigger
// any painting, so no need to schedule one.
nsRect displayPort;
DebugOnly<bool> usingDisplayPort =
nsLayoutUtils::GetDisplayPort(mOuter->GetContent(), &displayPort);
NS_ASSERTION(usingDisplayPort, "Must have a displayport for apz scrolls!");
displayPort.MoveBy(-mScrolledFrame->GetPosition());
if (!displayPort.IsEqualEdges(oldDisplayPort)) {
mOuter->SchedulePaint();
}
} else {
mOuter->SchedulePaint();
}
if (mOuter->ChildrenHavePerspective()) {
// The overflow areas of descendants may depend on the scroll position,
@@ -2762,8 +2801,8 @@ ScrollFrameHelper::BuildDisplayList(nsDisplayListBuilder* aBuilder,
}
// Clear the scroll port clip that was set during the last paint.
mAncestorClip = nullptr;
mAncestorClipForCaret = nullptr;
mAncestorClip = Nothing();
mAncestorClipForCaret = Nothing();
// We put non-overlay scrollbars in their own layers when this is the root
// scroll frame and we are a toplevel content document. In this situation,
@@ -3004,7 +3043,7 @@ ScrollFrameHelper::BuildDisplayList(nsDisplayListBuilder* aBuilder,
// Capture the clip state of the parent scroll frame. This will be saved
// on FrameMetrics for layers with this frame as their animated geoemetry
// root.
mAncestorClipForCaret = aBuilder->ClipState().GetCurrentCombinedClip(aBuilder);
mAncestorClipForCaret = ToMaybe(aBuilder->ClipState().GetCurrentCombinedClip(aBuilder));
// Add the non-caret content box clip here so that it gets picked up by
// mAncestorClip.
@@ -3017,7 +3056,7 @@ ScrollFrameHelper::BuildDisplayList(nsDisplayListBuilder* aBuilder,
clipStateNonCaret->ClipContainingBlockDescendants(*contentBoxClipForNonCaretContent);
}
}
mAncestorClip = aBuilder->ClipState().GetCurrentCombinedClip(aBuilder);
mAncestorClip = ToMaybe(aBuilder->ClipState().GetCurrentCombinedClip(aBuilder));
// If we are using a display port, then ignore any pre-existing clip
// passed down from our parents. The pre-existing clip would just defeat
@@ -3097,12 +3136,12 @@ ScrollFrameHelper::BuildDisplayList(nsDisplayListBuilder* aBuilder,
scrolledContent.MoveTo(aLists);
}
const DisplayItemClip*
Maybe<DisplayItemClip>
ScrollFrameHelper::ComputeScrollClip(bool aIsForCaret) const
{
const DisplayItemClip* ancestorClip = aIsForCaret ? mAncestorClipForCaret : mAncestorClip;
const Maybe<DisplayItemClip>& ancestorClip = aIsForCaret ? mAncestorClipForCaret : mAncestorClip;
if (!mShouldBuildScrollableLayer || mIsScrollableLayerInRootContainer) {
return nullptr;
return Nothing();
}
return ancestorClip;
@@ -3124,7 +3163,7 @@ ScrollFrameHelper::ComputeFrameMetrics(Layer* aLayer,
needsParentLayerClip = false;
}
const DisplayItemClip* ancestorClip = aIsForCaret ? mAncestorClipForCaret : mAncestorClip;
const Maybe<DisplayItemClip>& ancestorClip = aIsForCaret ? mAncestorClipForCaret : mAncestorClip;
nsPoint toReferenceFrame = mOuter->GetOffsetToCrossDoc(aContainerReferenceFrame);
bool isRootContent = mIsRoot && mOuter->PresContext()->IsRootContentDocument();
layout/generic/nsGfxScrollFrame.h
+24 -12
View File
@@ -222,7 +222,7 @@ public:
* @note This method might destroy the frame, pres shell and other objects.
*/
void ScrollToImpl(nsPoint aScrollPosition, const nsRect& aRange, nsIAtom* aOrigin = nullptr);
void ScrollVisual(nsPoint aOldScrolledFramePosition);
void ScrollVisual();
/**
* @note This method might destroy the frame, pres shell and other objects.
*/
@@ -304,7 +304,8 @@ public:
}
nsMargin GetActualScrollbarSizes() const;
nsMargin GetDesiredScrollbarSizes(nsBoxLayoutState* aState);
nscoord GetNondisappearingScrollbarWidth(nsBoxLayoutState* aState);
nscoord GetNondisappearingScrollbarWidth(nsBoxLayoutState* aState,
mozilla::WritingMode aVerticalWM);
bool IsLTR() const;
bool IsScrollbarOnRight() const;
bool IsScrollingActive(nsDisplayListBuilder* aBuilder) const;
@@ -359,6 +360,8 @@ public:
bool IsTransformingByAPZ() const {
return mTransformingByAPZ;
}
void SetZoomableByAPZ(bool aZoomable);
bool UsesContainerScrolling() const;
void ScheduleSyntheticMouseMove();
@@ -381,7 +384,7 @@ public:
Layer* aLayer, nsIFrame* aContainerReferenceFrame,
const ContainerLayerParameters& aParameters,
bool aIsForCaret) const;
virtual const mozilla::DisplayItemClip* ComputeScrollClip(bool aIsForCaret) const;
virtual mozilla::Maybe<mozilla::DisplayItemClip> ComputeScrollClip(bool aIsForCaret) const;
// nsIScrollbarMediator
void ScrollByPage(nsScrollbarFrame* aScrollbar, int32_t aDirection,
@@ -460,9 +463,9 @@ public:
FrameMetrics::ViewID mScrollParentID;
// The scroll port clip. Only valid during painting.
const DisplayItemClip* mAncestorClip;
const DisplayItemClip* mAncestorClipForCaret;
// The scroll port clip.
Maybe<DisplayItemClip> mAncestorClip;
Maybe<DisplayItemClip> mAncestorClipForCaret;
bool mNeverHasVerticalScrollbar:1;
bool mNeverHasHorizontalScrollbar:1;
@@ -533,6 +536,9 @@ public:
// (as best as we can tell on the main thread, anyway).
bool mTransformingByAPZ:1;
// True if the APZ is allowed to zoom this scrollframe.
bool mZoomableByAPZ:1;
mozilla::layout::ScrollVelocityQueue mVelocityQueue;
protected:
@@ -691,9 +697,9 @@ public:
return GetDesiredScrollbarSizes(&bls);
}
virtual nscoord GetNondisappearingScrollbarWidth(nsPresContext* aPresContext,
nsRenderingContext* aRC) override {
nsRenderingContext* aRC, mozilla::WritingMode aWM) override {
nsBoxLayoutState bls(aPresContext, aRC, 0);
return mHelper.GetNondisappearingScrollbarWidth(&bls);
return mHelper.GetNondisappearingScrollbarWidth(&bls, aWM);
}
virtual nsRect GetScrolledRect() const override {
return mHelper.GetScrolledRect();
@@ -844,7 +850,7 @@ public:
{
return mHelper.ComputeFrameMetrics(aLayer, aContainerReferenceFrame, aParameters, aIsForCaret);
}
virtual const mozilla::DisplayItemClip* ComputeScrollClip(bool aIsForCaret) const
virtual mozilla::Maybe<mozilla::DisplayItemClip> ComputeScrollClip(bool aIsForCaret) const override
{
return mHelper.ComputeScrollClip(aIsForCaret);
}
@@ -921,6 +927,9 @@ public:
bool IsTransformingByAPZ() const override {
return mHelper.IsTransformingByAPZ();
}
void SetZoomableByAPZ(bool aZoomable) override {
mHelper.SetZoomableByAPZ(aZoomable);
}
#ifdef DEBUG_FRAME_DUMP
virtual nsresult GetFrameName(nsAString& aResult) const override;
@@ -1095,9 +1104,9 @@ public:
return GetDesiredScrollbarSizes(&bls);
}
virtual nscoord GetNondisappearingScrollbarWidth(nsPresContext* aPresContext,
nsRenderingContext* aRC) override {
nsRenderingContext* aRC, mozilla::WritingMode aWM) override {
nsBoxLayoutState bls(aPresContext, aRC, 0);
return mHelper.GetNondisappearingScrollbarWidth(&bls);
return mHelper.GetNondisappearingScrollbarWidth(&bls, aWM);
}
virtual nsRect GetScrolledRect() const override {
return mHelper.GetScrolledRect();
@@ -1244,7 +1253,7 @@ public:
{
return mHelper.ComputeFrameMetrics(aLayer, aContainerReferenceFrame, aParameters, aIsForCaret);
}
virtual const mozilla::DisplayItemClip* ComputeScrollClip(bool aIsForCaret) const
virtual mozilla::Maybe<mozilla::DisplayItemClip> ComputeScrollClip(bool aIsForCaret) const override
{
return mHelper.ComputeScrollClip(aIsForCaret);
}
@@ -1329,6 +1338,9 @@ public:
bool IsTransformingByAPZ() const override {
return mHelper.IsTransformingByAPZ();
}
void SetZoomableByAPZ(bool aZoomable) override {
mHelper.SetZoomableByAPZ(aZoomable);
}
#ifdef DEBUG_FRAME_DUMP
virtual nsresult GetFrameName(nsAString& aResult) const override;
layout/generic/nsGridContainerFrame.cpp
+1388 -186
View File
File diff suppressed because it is too large Load Diff
layout/generic/nsGridContainerFrame.h
+133 -39
View File
@@ -9,6 +9,7 @@
#ifndef nsGridContainerFrame_h___
#define nsGridContainerFrame_h___
#include "mozilla/TypeTraits.h"
#include "nsContainerFrame.h"
#include "nsHashKeys.h"
#include "nsTHashtable.h"
@@ -32,6 +33,9 @@ public:
nsHTMLReflowMetrics& aDesiredSize,
const nsHTMLReflowState& aReflowState,
nsReflowStatus& aStatus) override;
nscoord GetMinISize(nsRenderingContext* aRenderingContext) override;
nscoord GetPrefISize(nsRenderingContext* aRenderingContext) override;
void MarkIntrinsicISizesDirty() override;
virtual nsIAtom* GetType() const override;
void BuildDisplayList(nsDisplayListBuilder* aBuilder,
@@ -50,8 +54,35 @@ public:
static const nsRect& GridItemCB(nsIFrame* aChild);
struct TrackSize {
void Initialize(nscoord aPercentageBasis,
const nsStyleCoord& aMinCoord,
const nsStyleCoord& aMaxCoord);
bool IsFrozen() const { return mState & eFrozen; }
#ifdef DEBUG
void Dump() const;
#endif
enum StateBits : uint16_t {
eAutoMinSizing = 0x1,
eMinContentMinSizing = 0x2,
eMaxContentMinSizing = 0x4,
eMinOrMaxContentMinSizing = eMinContentMinSizing | eMaxContentMinSizing,
eIntrinsicMinSizing = eMinOrMaxContentMinSizing | eAutoMinSizing,
eFlexMinSizing = 0x8,
eAutoMaxSizing = 0x10,
eMinContentMaxSizing = 0x20,
eMaxContentMaxSizing = 0x40,
eAutoOrMaxContentMaxSizing = eAutoMaxSizing | eMaxContentMaxSizing,
eIntrinsicMaxSizing = eAutoOrMaxContentMaxSizing | eMinContentMaxSizing,
eFlexMaxSizing = 0x80,
eFrozen = 0x100,
eSkipGrowUnlimited1 = 0x200,
eSkipGrowUnlimited2 = 0x400,
eSkipGrowUnlimited = eSkipGrowUnlimited1 | eSkipGrowUnlimited2,
};
nscoord mBase;
nscoord mLimit;
StateBits mState;
};
// @see nsAbsoluteContainingBlock::Reflow about this magic number
@@ -67,10 +98,18 @@ protected:
typedef mozilla::LogicalRect LogicalRect;
typedef mozilla::WritingMode WritingMode;
typedef mozilla::css::GridNamedArea GridNamedArea;
typedef nsLayoutUtils::IntrinsicISizeType IntrinsicISizeType;
class GridItemCSSOrderIterator;
struct TrackSizingFunctions;
struct Tracks;
struct GridReflowState;
friend nsContainerFrame* NS_NewGridContainerFrame(nsIPresShell* aPresShell,
nsStyleContext* aContext);
explicit nsGridContainerFrame(nsStyleContext* aContext) : nsContainerFrame(aContext) {}
explicit nsGridContainerFrame(nsStyleContext* aContext)
: nsContainerFrame(aContext)
, mCachedMinISize(NS_INTRINSIC_WIDTH_UNKNOWN)
, mCachedPrefISize(NS_INTRINSIC_WIDTH_UNKNOWN)
{}
/**
* A LineRange can be definite or auto - when it's definite it represents
@@ -145,6 +184,11 @@ protected:
*/
void ToPositionAndLength(const nsTArray<TrackSize>& aTrackSizes,
nscoord* aPos, nscoord* aLength) const;
/**
* Given an array of track sizes, return the length of the tracks in this
* line range.
*/
nscoord ToLength(const nsTArray<TrackSize>& aTrackSizes) const;
/**
* Given an array of track sizes and a grid origin coordinate, adjust the
* abs.pos. containing block along an axis given by aPos and aLength.
@@ -170,8 +214,38 @@ protected:
uint32_t mEnd;
int32_t mUntranslatedEnd;
};
protected:
LineRange() {}
};
/**
* Helper class to construct a LineRange from translated lines.
* The ctor only accepts translated definite line numbers.
*/
struct TranslatedLineRange : public LineRange {
TranslatedLineRange(uint32_t aStart, uint32_t aEnd)
{
MOZ_ASSERT(aStart < aEnd && aEnd <= kTranslatedMaxLine);
mStart = aStart;
mEnd = aEnd;
}
};
/**
* Return aLine if it's inside the aMin..aMax range (inclusive), otherwise
* return kAutoLine. If the range is empty (aMin == aMax, i.e. there are
* no tracks in the grid) then aLine is outside.
*/
static int32_t
AutoIfOutside(int32_t aLine, int32_t aMin, int32_t aMax)
{
MOZ_ASSERT(aMin <= aMax);
if (aLine < aMin || aLine > aMax || aMin == aMax) {
return kAutoLine;
}
return aLine;
}
/**
* A GridArea is the area in the grid for a grid item.
* The area is represented by two LineRanges, both of which can be auto
@@ -207,6 +281,23 @@ protected:
nsTArray<nsTArray<Cell>> mCells;
};
struct GridItemInfo {
explicit GridItemInfo(const GridArea& aArea)
: mArea(aArea)
{
mIsFlexing[0] = false;
mIsFlexing[1] = false;
}
GridArea mArea;
bool mIsFlexing[2]; // does the item span a flex track? (LogicalAxis index)
static_assert(mozilla::eLogicalAxisBlock == 0, "unexpected index value");
static_assert(mozilla::eLogicalAxisInline == 1, "unexpected index value");
#ifdef DEBUG
nsIFrame* mFrame;
#endif
};
enum LineRangeSide {
eLineRangeSideStart, eLineRangeSideEnd
};
@@ -352,11 +443,8 @@ protected:
* Place all child frames into the grid and expand the (implicit) grid as
* needed. The allocated GridAreas are stored in the GridAreaProperty
* frame property on the child frame.
* @param aIter a grid item iterator
* @param aStyle the StylePosition() for the grid container
*/
void PlaceGridItems(GridItemCSSOrderIterator& aIter,
const nsStylePosition* aStyle);
void PlaceGridItems(GridReflowState& aState);
/**
* Initialize the end lines of the Explicit Grid (mExplicitGridCol[Row]End).
@@ -382,10 +470,9 @@ protected:
/**
* Calculate track sizes.
*/
void CalculateTrackSizes(const mozilla::LogicalSize& aPercentageBasis,
const nsStylePosition* aStyle,
nsTArray<TrackSize>& aColSizes,
nsTArray<TrackSize>& aRowSizes);
void CalculateTrackSizes(GridReflowState& aState,
const mozilla::LogicalSize& aContentBox,
IntrinsicISizeType aConstraint);
/**
* Helper method for ResolveLineRange.
@@ -420,57 +507,53 @@ protected:
return areas && areas->Contains(aName);
}
NS_DECLARE_FRAME_PROPERTY(GridAreaProperty, DeleteValue<GridArea>)
/**
* A convenience method to get the stored GridArea* for a frame.
*/
static GridArea* GetGridAreaForChild(nsIFrame* aChild) {
return static_cast<GridArea*>(aChild->Properties().Get(GridAreaProperty()));
}
/**
* Return the containing block for a grid item occupying aArea.
* @param aColSizes column track sizes
* @param aRowSizes row track sizes
*/
LogicalRect ContainingBlockFor(const WritingMode& aWM,
const GridArea& aArea,
const nsTArray<TrackSize>& aColSizes,
const nsTArray<TrackSize>& aRowSizes) const;
LogicalRect ContainingBlockFor(const GridReflowState& aState,
const GridArea& aArea) const;
/**
* Return the containing block for an abs.pos. grid item occupying aArea.
* Any 'auto' lines in the grid area will be aligned with grid container
* containing block on that side.
* @param aColSizes column track sizes
* @param aRowSizes row track sizes
* @param aGridOrigin the origin of the grid
* @param aGridCB the grid container containing block (its padding area)
*/
LogicalRect ContainingBlockForAbsPos(const WritingMode& aWM,
const GridArea& aArea,
const nsTArray<TrackSize>& aColSizes,
const nsTArray<TrackSize>& aRowSizes,
const LogicalPoint& aGridOrigin,
const LogicalRect& aGridCB) const;
LogicalRect ContainingBlockForAbsPos(const GridReflowState& aState,
const GridArea& aArea,
const LogicalPoint& aGridOrigin,
const LogicalRect& aGridCB) const;
/**
* Reflow and place our children.
*/
void ReflowChildren(GridItemCSSOrderIterator& aIter,
const LogicalRect& aContentArea,
const nsTArray<TrackSize>& aColSizes,
const nsTArray<TrackSize>& aRowSizes,
nsHTMLReflowMetrics& aDesiredSize,
const nsHTMLReflowState& aReflowState,
nsReflowStatus& aStatus);
void ReflowChildren(GridReflowState& aState,
const LogicalRect& aContentArea,
nsHTMLReflowMetrics& aDesiredSize,
nsReflowStatus& aStatus);
/**
* Helper for GetMinISize / GetPrefISize.
*/
nscoord IntrinsicISize(nsRenderingContext* aRenderingContext,
IntrinsicISizeType aConstraint);
#ifdef DEBUG
void SanityCheckAnonymousGridItems() const;
#endif // DEBUG
private:
/**
* Info about each (normal flow) grid item.
*/
nsTArray<GridItemInfo> mGridItems;
/**
* Info about each grid-aligned abs.pos. child.
*/
nsTArray<GridItemInfo> mAbsPosItems;
/**
* State for each cell in the grid.
*/
@@ -501,6 +584,12 @@ private:
uint32_t mExplicitGridOffsetCol;
uint32_t mExplicitGridOffsetRow;
/**
* Cached values to optimize GetMinISize/GetPrefISize.
*/
nscoord mCachedMinISize;
nscoord mCachedPrefISize;
/**
* True iff the normal flow children are already in CSS 'order' in the
* order they occur in the child frame list.
@@ -508,4 +597,9 @@ private:
bool mIsNormalFlowInCSSOrder : 1;
};
namespace mozilla {
template <>
struct IsPod<nsGridContainerFrame::TrackSize> : TrueType {};
}
#endif /* nsGridContainerFrame_h___ */
layout/generic/nsIFrame.h
+28 -4
View File
@@ -149,6 +149,12 @@ typedef uint32_t nsSplittableType;
// 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
// and leads to assertions)
#define INFINITE_ISIZE_COORD nscoord(NS_MAXSIZE - (1000000*60))
//----------------------------------------------------------------------
enum nsSelectionAmount {
@@ -737,21 +743,39 @@ public:
}
/**
* Set this frame's size from a logical size in its own writing direction
* Set this frame's size from a logical size in its own writing direction.
* This leaves the frame's logical position unchanged, which means its
* physical position may change (for right-to-left modes).
*/
void SetSize(const mozilla::LogicalSize& aSize) {
SetSize(GetWritingMode(), aSize);
}
/*
* Set this frame's size from a logical size in a different writing direction
* Set this frame's size from a logical size in a different writing direction.
* This leaves the frame's logical position in the given mode unchanged,
* which means its physical position may change (for right-to-left modes).
*/
void SetSize(mozilla::WritingMode aWritingMode,
const mozilla::LogicalSize& aSize) {
SetSize(aSize.GetPhysicalSize(aWritingMode));
const mozilla::LogicalSize& aSize)
{
if ((!aWritingMode.IsVertical() && !aWritingMode.IsBidiLTR()) ||
aWritingMode.IsVerticalRL()) {
nscoord oldWidth = mRect.width;
SetSize(aSize.GetPhysicalSize(aWritingMode));
mRect.x -= mRect.width - oldWidth;
} else {
SetSize(aSize.GetPhysicalSize(aWritingMode));
}
}
/**
* Set this frame's physical size. This leaves the frame's physical position
* (topLeft) unchanged.
*/
void SetSize(const nsSize& aSize) {
SetRect(nsRect(mRect.TopLeft(), aSize));
}
void SetPosition(const nsPoint& aPt) { mRect.MoveTo(aPt); }
void SetPosition(mozilla::WritingMode aWritingMode,
const mozilla::LogicalPoint& aPt,
layout/generic/nsIScrollableFrame.h
+13 -6
View File
@@ -11,6 +11,7 @@
#define nsIScrollFrame_h___
#include "nsCoord.h"
#include "DisplayItemClip.h"
#include "ScrollbarStyles.h"
#include "mozilla/Maybe.h"
#include "mozilla/gfx/Point.h"
@@ -32,15 +33,14 @@ class nsDisplayListBuilder;
namespace mozilla {
struct ContainerLayerParameters;
class DisplayItemClip;
namespace layers {
class Layer;
}
} // namespace layers
struct FrameMetricsAndClip
{
layers::FrameMetrics metrics;
const DisplayItemClip* clip;
mozilla::Maybe<DisplayItemClip> clip;
};
} // namespace mozilla
@@ -107,8 +107,10 @@ public:
/**
* Return the width for non-disappearing scrollbars.
*/
virtual nscoord GetNondisappearingScrollbarWidth(nsPresContext* aPresContext,
nsRenderingContext* aRC) = 0;
virtual nscoord
GetNondisappearingScrollbarWidth(nsPresContext* aPresContext,
nsRenderingContext* aRC,
mozilla::WritingMode aWM) = 0;
/**
* GetScrolledRect is designed to encapsulate deciding which
* directions of overflow should be reachable by scrolling and which
@@ -442,12 +444,17 @@ public:
virtual void SetTransformingByAPZ(bool aTransforming) = 0;
virtual bool IsTransformingByAPZ() const = 0;
/**
* Notify this scroll frame that it can be zoomed by APZ.
*/
virtual void SetZoomableByAPZ(bool aZoomable) = 0;
/**
* Whether or not this frame uses containerful scrolling.
*/
virtual bool UsesContainerScrolling() const = 0;
virtual const mozilla::DisplayItemClip* ComputeScrollClip(bool aIsForCaret) const = 0;
virtual mozilla::Maybe<mozilla::DisplayItemClip> ComputeScrollClip(bool aIsForCaret) const = 0;
};
#endif
layout/generic/nsLineLayout.cpp
+11 -6
View File
@@ -160,12 +160,14 @@ nsLineLayout::BeginLineReflow(nscoord aICoord, nscoord aBCoord,
"very large sizes, not attempts at intrinsic width "
"calculation");
#ifdef DEBUG
if ((aISize != NS_UNCONSTRAINEDSIZE) && CRAZY_SIZE(aISize)) {
if ((aISize != NS_UNCONSTRAINEDSIZE) && CRAZY_SIZE(aISize) &&
!LineContainerFrame()->GetParent()->IsCrazySizeAssertSuppressed()) {
nsFrame::ListTag(stdout, mBlockReflowState->frame);
printf(": Init: bad caller: width WAS %d(0x%x)\n",
aISize, aISize);
}
if ((aBSize != NS_UNCONSTRAINEDSIZE) && CRAZY_SIZE(aBSize)) {
if ((aBSize != NS_UNCONSTRAINEDSIZE) && CRAZY_SIZE(aBSize) &&
!LineContainerFrame()->GetParent()->IsCrazySizeAssertSuppressed()) {
nsFrame::ListTag(stdout, mBlockReflowState->frame);
printf(": Init: bad caller: height WAS %d(0x%x)\n",
aBSize, aBSize);
@@ -327,13 +329,15 @@ nsLineLayout::UpdateBand(WritingMode aWM,
#endif
#ifdef DEBUG
if ((availSpace.ISize(lineWM) != NS_UNCONSTRAINEDSIZE) &&
CRAZY_SIZE(availSpace.ISize(lineWM))) {
CRAZY_SIZE(availSpace.ISize(lineWM)) &&
!LineContainerFrame()->GetParent()->IsCrazySizeAssertSuppressed()) {
nsFrame::ListTag(stdout, mBlockReflowState->frame);
printf(": UpdateBand: bad caller: ISize WAS %d(0x%x)\n",
availSpace.ISize(lineWM), availSpace.ISize(lineWM));
}
if ((availSpace.BSize(lineWM) != NS_UNCONSTRAINEDSIZE) &&
CRAZY_SIZE(availSpace.BSize(lineWM))) {
CRAZY_SIZE(availSpace.BSize(lineWM)) &&
!LineContainerFrame()->GetParent()->IsCrazySizeAssertSuppressed()) {
nsFrame::ListTag(stdout, mBlockReflowState->frame);
printf(": UpdateBand: bad caller: BSize WAS %d(0x%x)\n",
availSpace.BSize(lineWM), availSpace.BSize(lineWM));
@@ -1045,8 +1049,9 @@ nsLineLayout::ReflowFrame(nsIFrame* aFrame,
// Note: break-before means ignore the reflow metrics since the
// frame will be reflowed another time.
if (!NS_INLINE_IS_BREAK_BEFORE(aReflowStatus)) {
if (CRAZY_SIZE(metrics.ISize(lineWM)) ||
CRAZY_SIZE(metrics.BSize(lineWM))) {
if ((CRAZY_SIZE(metrics.ISize(lineWM)) ||
CRAZY_SIZE(metrics.BSize(lineWM))) &&
!LineContainerFrame()->GetParent()->IsCrazySizeAssertSuppressed()) {
printf("nsLineLayout: ");
nsFrame::ListTag(stdout, aFrame);
printf(" metrics=%d,%d!\n", metrics.Width(), metrics.Height());
layout/reftests/css-grid/grid-abspos-items-001-ref.html
+96 -32
View File
@@ -15,22 +15,21 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
.grid {
/*display: grid;*/
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:0px; }
.a {
position: absolute;
left: 13px; top: 51px;
height: 32px; width: 44px;
left: 13px; top: 31px;
height: 12px; width: 44px;
}
.abs {
@@ -45,28 +44,33 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
}
.c {
right: 5px; bottom: 1px;
width: 53px; height: 37px;
width: 112px; height: 82px;
}
.d {
left: 1px; top: 37px;
width: 5px; height: 11px;
left: 1px; top: 27px;
width: 5px; height: 1px;
}
.e {
right: 5px; bottom: 1px;
width: 53px; height: 71px;
width: 112px; height: 51px;
}
.f {
right: 5px; top: 3px;
width: 53px; height: 11px;
width: 112px; height: 11px;
}
.g {
left: 14px; top: 37px;
width: 38px; height: 11px;
left: 14px; top: 27px;
width: 38px; height: 1px;
}
.h {
top:3px; left:1px; right:5px; bottom:1px;
width:auto; height:auto;
}
.i, .j {
top:3px; left:1px; right:5px; bottom:1px;
border:none;
width:auto; height:auto;
}
span {
background: lime;
border: 1px solid;
@@ -75,45 +79,105 @@ span {
</head>
<body>
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
<span class="g abs">g</span>
</div>
<div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid zero-size">
<span class="b abs" style="width:5px">b</span>
<span class="b abs" style="width:12px">b</span>
</div>
<div class="grid auto-size">
<span class="h abs">h</span>
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
<div class="grid" style="height:7px">
<span class="i abs">i</span>
</div>
<div class="grid" style="height:7px">
<span class="j abs">j</span>
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; top:3px; height:22px; width:12px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="left:1px; bottom:57px; height:22px; width:12px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
</div>
<div class="grid" style="width:43px; height:53px; border-width:0;">
<span class="abs" style="right:47px; top:3px; height:11px; width:0px;">b</span>
<span class="abs" style="left:1px; bottom:54px; height:5px; width:5px;">c</span>
<span class="abs" style="right:47px; bottom:54px; height:5px; width:0px;">d</span>
</div>
</body>
layout/reftests/css-grid/grid-abspos-items-001.html
+86 -15
View File
@@ -15,14 +15,13 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
.grid {
display: grid;
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:auto; }
@@ -65,6 +64,16 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
grid-column: auto / auto;
grid-row: auto / auto;
}
.i {
grid-column: span 1 / span 2;
grid-row: span 2 / span A;
background: lime;
}
.j {
grid-column: span A / span 2;
grid-row: span 2 / span 1;
background: lime;
}
span {
background: lime;
border: 1px solid;
@@ -73,26 +82,72 @@ span {
</head>
<body>
<div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
<span class="g abs">g</span>
</div>
<div class="grid">
<span class="a">a</span>
<div><span class="b abs">b</span></div>
<x><span class="c abs">c</span></x>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
<div><span class="e abs">e</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid">
<span class="a">a</span>
<div><span class="b abs">b</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<x><span class="c abs">c</span></x>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<div><span class="e abs">e</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<x><span class="g abs">g</span></x>
</div>
</div><div style="float:left">
<div class="grid zero-size">
<span class="b abs">b</span>
</div>
@@ -101,6 +156,16 @@ span {
<span class="h abs">h</span>
</div>
<div class="grid" style="height:auto">
<div style="grid-column: 1 / span 3"></div>
<div class="i abs">i</div>
</div>
<div class="grid" style="height:auto">
<div style="grid-column: 1 / span 3"></div>
<div class="j abs">j</div>
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
@@ -109,9 +174,15 @@ span {
</div>
<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-start:2; grid-row-end:1;">b</span>
<span class="abs" style="grid-column-end:1; grid-row-start:2;">c</span>
<span class="abs" style="grid-column-start:2; grid-row-start:2;">d</span>
<span class="abs" style="grid-column-start:2; grid-row-end:1;"></span>
</div>
<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-end:1; grid-row-start:2;"></span>
</div>
<div class="grid" style="width:0px; height:0px; border-width:0;">
<span class="abs" style="grid-column-start:2; grid-row-start:2;"></span>
</div>
</div>
</body>
layout/reftests/css-grid/grid-abspos-items-002-ref.html
+87 -27
View File
@@ -16,22 +16,21 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
/*display: grid;*/
position: relative;
top:2px; left:1px;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:0px; }
.a {
position: absolute;
left: 13px; top: 51px;
height: 32px; width: 44px;
left: 13px; top: 31px;
height: 12px; width: 44px;
}
.abs {
@@ -46,28 +45,33 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
}
.c {
right: 5px; bottom: 1px;
width: 53px; height: 37px;
width: 112px; height: 82px;
}
.d {
left: 1px; top: 37px;
width: 5px; height: 11px;
left: 1px; top: 27px;
width: 5px; height: 1px;
}
.e {
right: 5px; bottom: 1px;
width: 53px; height: 71px;
width: 112px; height: 51px;
}
.f {
right: 5px; top: 3px;
width: 53px; height: 11px;
width: 112px; height: 11px;
}
.g {
left: 14px; top: 37px;
width: 38px; height: 11px;
left: 14px; top: 27px;
width: 38px; height: 1px;
}
.h {
top:3px; left:1px; right:5px; bottom:1px;
width:auto; height:auto;
}
.i, .j {
top:3px; left:1px; right:5px; bottom:1px;
border:none;
width:auto; height:auto;
}
span {
background: lime;
border: 1px solid;
@@ -76,39 +80,95 @@ span {
</head>
<body>
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
<span class="g abs">g</span>
</div>
<div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid zero-size">
<span class="b abs" style="width:5px">b</span>
<span class="b abs" style="width:12px">b</span>
</div>
<div class="grid auto-size">
<span class="h abs">h</span>
</div>
<div class="grid" style="height:7px">
<span class="i abs">i</span>
</div>
<div class="grid" style="height:7px">
<span class="j abs">j</span>
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
</div>
</div>
</body>
layout/reftests/css-grid/grid-abspos-items-002.html
+79 -12
View File
@@ -15,14 +15,13 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
.grid {
display: grid;
transform: translate(1px,2px);
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
grid-auto-rows: 7px;
padding: 17px 7px 11px 13px;
width: 100px;
height: 100px;
height: 60px;
}
.zero-size { width:0; height:0; }
.auto-size { width:auto; height:auto; }
@@ -65,6 +64,16 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
grid-column: auto / auto;
grid-row: auto / auto;
}
.i {
grid-column: span 1 / span 2;
grid-row: span 2 / span A;
background: lime;
}
.j {
grid-column: span A / span 2;
grid-row: span 2 / span 1;
background: lime;
}
span {
background: lime;
border: 1px solid;
@@ -73,26 +82,72 @@ span {
</head>
<body>
<div style="float:left">
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
<span class="g abs">g</span>
</div>
<div class="grid">
<span class="a">a</span>
<div><span class="b abs">b</span></div>
<x><span class="c abs">c</span></x>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
<div><span class="e abs">e</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<span class="g abs">g</span>
</div>
</div><div style="float:left">
<div class="grid">
<span class="a">a</span>
<div><span class="b abs">b</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<x><span class="c abs">c</span></x>
</div>
<div class="grid">
<span class="a">a</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a">a</span>
<div><span class="e abs">e</span></div>
</div>
<div class="grid">
<span class="a">a</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="a">a</span>
<x><span class="g abs">g</span></x>
</div>
</div><div style="float:left">
<div class="grid zero-size">
<span class="b abs">b</span>
</div>
@@ -101,6 +156,16 @@ span {
<span class="h abs">h</span>
</div>
<div class="grid" style="height:auto">
<div style="grid-column: 1 / span 3"></div>
<div class="i abs">i</div>
</div>
<div class="grid" style="height:auto">
<div style="grid-column: 1 / span 3"></div>
<div class="j abs">j</div>
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
@@ -108,5 +173,7 @@ span {
<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
</div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-003-ref.html
+71
View File
@@ -0,0 +1,71 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 55px;
block-size: 43px;
}
abs1,abs2 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
abs2 { background:white; }
.hl abs2 { top:13px;left:11px; height:23px; width:31px; }
.hr abs2 { top:13px;right:11px; height:23px; width:31px; }
.vl abs2 { top:11px;left:13px; height:31px; width:23px; }
.vr abs2 { top:11px;right:13px; height:31px; width:23px; }
.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; }
.vrl abs2 { top:11px;right:13px; height:31px; width:23px; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-003.html
+69
View File
@@ -0,0 +1,69 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-003-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-004-ref.html
+73
View File
@@ -0,0 +1,73 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 11px 13px 15px 17px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 55px;
block-size: 43px;
}
abs1,abs2 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
margin:11px 13px 15px 17px;
}
abs2 { background:white; }
.hl abs2 { top:13px;left:11px; height:23px; width:31px; }
.hr abs2 { top:13px;right:11px; height:23px; width:31px; }
.vl abs2 { top:11px;left:13px; height:31px; width:23px; }
.vr abs2 { top:11px;right:13px; height:31px; width:23px; }
.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; }
.vrl abs2 { top:11px;right:13px; height:31px; width:23px; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-004.html
+70
View File
@@ -0,0 +1,70 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-004-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 11px 13px 15px 17px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-005-ref.html
+74
View File
@@ -0,0 +1,74 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 65px;
block-size: 43px;
}
abs1,abs2 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
margin:1px;
margin-inline-end:11px;
}
abs2 { background:white; }
.hl abs2 { top:13px;left:11px; height:23px; width:31px; }
.hr abs2 { top:13px;right:11px; height:23px; width:31px; }
.vl abs2 { top:11px;left:13px; height:31px; width:23px; }
.vr abs2 { top:11px;right:13px; height:31px; width:23px; }
.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; }
.vrl abs2 { top:11px;right:13px; height:31px; width:23px; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-005.html
+71
View File
@@ -0,0 +1,71 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-004-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 65px;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-006-ref.html
+71
View File
@@ -0,0 +1,71 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 55px;
block-size: 57px;
}
abs1,abs2 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
margin-block-end:14px;
}
abs2 { background:white; }
.hl abs2 { top:13px;left:11px; height:23px; width:31px; }
.hr abs2 { top:13px;right:11px; height:23px; width:31px; }
.vl abs2 { top:11px;left:13px; height:31px; width:23px; }
.vr abs2 { top:11px;right:13px; height:31px; width:23px; }
.vlr abs2 { bottom:11px;left:13px; height:31px; width:23px; }
.vrl abs2 { top:11px;right:13px; height:31px; width:23px; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-006.html
+70
View File
@@ -0,0 +1,70 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-006-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
block-size: 57px;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-007-ref.html
+61
View File
@@ -0,0 +1,61 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
inline-size: 55px;
block-size: 43px;
margin-right: 4px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-007.html
+62
View File
@@ -0,0 +1,62 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-007-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-008-ref.html
+62
View File
@@ -0,0 +1,62 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 11px 13px 15px 17px;
border-block-start-color: blue;
border-inline-start-color: lime;
inline-size: 55px;
block-size: 43px;
margin-right: 4px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-008.html
+63
View File
@@ -0,0 +1,63 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-008-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 11px 13px 15px 17px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-009-ref.html
+63
View File
@@ -0,0 +1,63 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px;
border-block-start-color: blue;
border-inline-start-color: lime;
inline-size: 55px;
block-size: 43px;
margin-right: 4px;
block-size: 57px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-009.html
+64
View File
@@ -0,0 +1,64 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-009-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
block-size: 57px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-010-ref.html
+62
View File
@@ -0,0 +1,62 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: block;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
inline-size: 65px;
block-size: 43px;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-010.html
+63
View File
@@ -0,0 +1,63 @@
<!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: abs pos areas</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-010-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border-style: solid;
border-width: 1px 3px 5px 7px;
border-block-start-color: blue;
border-inline-start-color: lime;
grid-template: 11px 31px 13px / 13px 23px 7px;
margin-right: 4px;
inline-size: 65px;
}
abs1 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: grey;
}
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
</style>
</head>
<body>
<script>
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
for (var i = 0; i < wm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
var div = document.createElement("div");
div.className = "grid " + wm[i];
div.appendChild(document.createElement("abs1"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
</script>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-011-ref.html
+54
View File
@@ -0,0 +1,54 @@
<!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: abs pos areas in empty grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
<style type="text/css">
div {
display: block;
position: relative;
float: left;
width: 20px;
height: 20px;
background: red;
}
span {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lime;
}
</style>
</head>
<body>
There should be no red areas.
<br clear="all">
<div><span class="cs"></span></div>
<div><span class="ce"></span></div>
<div><span class="rs"></span></div>
<div><span class="rs"></span></div>
<div><span class="cs ce"></span></div>
<div><span class="cs rs"></span></div>
<div><span class="cs re"></span></div>
<div><span class="ce rs"></span></div>
<div><span class="ce re"></span></div>
<div><span class="rs re"></span></div>
<div><span class="cs ce rs"></span></div>
<div><span class="cs ce re"></span></div>
<div><span class="rs re cs"></span></div>
<div><span class="rs re ce"></span></div>
<div><span class="cs ce rs re"></span></div>
</body>
</html>
layout/reftests/css-grid/grid-abspos-items-011.html
+61
View File
@@ -0,0 +1,61 @@
<!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: abs pos areas in empty grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-011-ref.html">
<style type="text/css">
div {
display: grid;
position: relative;
float: left;
width: 20px;
height: 20px;
background: red;
}
span {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lime;
}
.cs { grid-column-start: 1; }
.ce { grid-column-end: 1; }
.rs { grid-row-start: 1; }
.re { grid-row-end: 1; }
</style>
</head>
<body>
There should be no red areas.
<br clear="all">
<div><span class="cs"></span></div>
<div><span class="ce"></span></div>
<div><span class="rs"></span></div>
<div><span class="rs"></span></div>
<div><span class="cs ce"></span></div>
<div><span class="cs rs"></span></div>
<div><span class="cs re"></span></div>
<div><span class="ce rs"></span></div>
<div><span class="ce re"></span></div>
<div><span class="rs re"></span></div>
<div><span class="cs ce rs"></span></div>
<div><span class="cs ce re"></span></div>
<div><span class="rs re cs"></span></div>
<div><span class="rs re ce"></span></div>
<div><span class="cs ce rs re"></span></div>
</body>
</html>
layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
border: dashed blue;
float:left;
clear:left;
}
.c1 { min-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; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<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="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="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="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; 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>
</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>
</div>
</body>
</html>
layout/reftests/css-grid/grid-col-max-sizing-max-content-001.html
+90
View File
@@ -0,0 +1,90 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-col-max-sizing-max-content-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: minmax(min-content,max-content);
border: dashed blue;
float:left;
clear:left;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
+92
View File
@@ -0,0 +1,92 @@
<!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: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
float:left;
clear:left;
}
.wrap {
border: dashed blue;
overflow:hidden;
clear:left;
}
.c1 { min-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; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="wrap"><div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid">
<span class="c1" style="margin-right:54px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<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="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="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="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; 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>
</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>
</div></div>
</body>
</html>
layout/reftests/css-grid/grid-col-max-sizing-max-content-002.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing track max-sizing 'max-content'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-col-max-sizing-max-content-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: minmax(min-content,max-content);
border: dashed blue;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) 400px;">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(min-content,max-content) minmax(min-content,500px);">
<span class="c1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x>&nbsp;</x></span>
<span class="c3"><x>&nbsp;</x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-flex-min-sizing-001-ref.html
+336
View File
@@ -0,0 +1,336 @@
<!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: flex min-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
float: left;
min-width:100px;
}
.fixed .grid {
width:140px;
}
.g1 {
grid-template-columns: minmax(0,min-content)
minmax(0,0)
minmax(0,0)
1fr;
}
.g2 {
grid-template-columns: minmax(0,max-content)
minmax(0,0)
minmax(0,0)
1fr;
}
.g3 {
grid-template-columns: minmax(0,auto)
minmax(0,0)
minmax(0,0)
1fr;
}
.g4 {
grid-template-columns: minmax(0,0)
minmax(0,0)
minmax(0,0)
1fr;
}
.g5 {
grid-template-columns: minmax(20px,0)
minmax(0,0)
minmax(0,0)
1fr;
}
.g6 {
grid-template-columns: minmax(0,0)
minmax(0,0)
minmax(0,0)
20px;
}
.g7 {
grid-template-columns: minmax(20px,1fr)
minmax(0,0)
minmax(0,0)
20px;
}
.g8 {
grid-template-columns: minmax(0,1fr)
minmax(0,0)
minmax(0,0)
20px;
}
.g9 {
grid-template-columns: 20px
30px
minmax(0,0)
10px;
}
.gA {
grid-template-columns: minmax(0,0)
minmax(min-content,40px)
minmax(0,0)
20px;
}
.gB {
grid-template-columns: minmax(0,0)
minmax(auto,40px)
minmax(0,0)
20px;
}
.gC {
grid-template-columns: minmax(0,20px)
minmax(auto,40px)
minmax(0,0)
20px;
}
.gD {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(0,0)
min-content;
}
.gE {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(0,20px)
auto;
}
.gF {
grid-template-columns: minmax(auto,20px)
minmax(min-content,max-content)
minmax(0,40px)
auto;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<span class="fixed">
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</span>
</body>
</html>
layout/reftests/css-grid/grid-flex-min-sizing-001.html
+338
View File
@@ -0,0 +1,338 @@
<!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: flex min-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax">
<link rel="match" href="grid-flex-min-sizing-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
float: left;
min-width:100px;
}
.fixed .grid {
width:140px;
}
.g1 {
grid-template-columns: minmax(1fr,min-content)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g2 {
grid-template-columns: minmax(1fr,max-content)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g3 {
grid-template-columns: minmax(1fr,auto)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g4 {
grid-template-columns: minmax(1fr,0)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g5 {
grid-template-columns: minmax(20px,0)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g6 {
grid-template-columns: minmax(1fr,0)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g7 {
grid-template-columns: minmax(20px,1fr)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g8 {
grid-template-columns: minmax(1fr,1fr)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g9 {
grid-template-columns: 20px
30px
minmax(1fr,0)
10px;
}
.gA {
grid-template-columns: minmax(1fr,0)
minmax(min-content,40px)
minmax(1fr,0)
20px;
}
.gB {
grid-template-columns: minmax(1fr,0)
minmax(auto,40px)
minmax(1fr,0)
20px;
}
.gC {
grid-template-columns: minmax(1fr,20px)
minmax(auto,40px)
minmax(1fr,0)
20px;
}
.gD {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(1fr,0)
min-content;
}
.gE {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(1fr,20px)
auto;
}
.gF {
grid-template-columns: minmax(auto,20px)
minmax(min-content,max-content)
minmax(1fr,40px)
auto;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<span class="fixed">
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<br clear="all" style="margin-top:100px">
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</span>
</body>
</html>
layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
+272
View File
@@ -0,0 +1,272 @@
<!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: flex min-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
float: left;
}
.g0 {
display: grid;
grid-template-columns: minmax(min-content,min-content);
border:1px solid;
float: left;
margin-right: 20px;
}
.g1 {
grid-template-columns: minmax(min-content,min-content)
minmax(min-content,0)
minmax(min-content,0)
1fr;
}
.g2 {
grid-template-columns: minmax(min-content,max-content)
minmax(min-content,0)
minmax(min-content,0)
1fr;
}
.g3 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,0)
minmax(min-content,0)
1fr;
}
.g4 {
grid-template-columns: minmax(0,0)
minmax(0,0)
minmax(0,0)
1fr;
min-width:24px;
}
.g5 {
grid-template-columns: minmax(20px,0)
minmax(0,0)
minmax(0,0)
4px;
}
.g6 {
grid-template-columns: minmax(0,0)
minmax(0,0)
minmax(0,0)
20px;
min-width:44px;
}
.g7 {
grid-template-columns: minmax(20px,1fr)
minmax(min-content,0)
minmax(min-content,0)
20px;
}
.g8 {
grid-template-columns: minmax(min-content,1fr)
minmax(min-content,0)
minmax(min-content,0)
20px;
}
.g9 {
grid-template-columns: 20px
30px
minmax(min-content,0)
10px;
}
.gA {
grid-template-columns: minmax(min-content,0)
minmax(min-content,40px)
minmax(min-content,0)
20px;
}
.gB {
grid-template-columns: minmax(min-content,0)
minmax(auto,40px)
minmax(0,0)
20px;
}
.gC {
grid-template-columns: minmax(min-content,20px)
minmax(auto,40px)
minmax(0,0)
20px;
}
.gD {
grid-template-columns: minmax(min-content,20px)
minmax(auto,40px)
minmax(0,0)
min-content;
}
.gE {
grid-template-columns: minmax(min-content,20px)
minmax(min-content,40px)
minmax(7px,20px)
auto;
}
.gF {
grid-template-columns: minmax(min-content,20px)
minmax(0,max-content)
minmax(0,40px)
auto;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g0">
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g0">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g0">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-flex-min-sizing-002.html
+272
View File
@@ -0,0 +1,272 @@
<!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: flex min-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax">
<link rel="match" href="grid-flex-min-sizing-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
float: left;
}
.g0 {
display: grid;
grid-template-columns: minmax(min-content,min-content);
border:1px solid;
float: left;
margin-right: 20px;
}
.g1 {
grid-template-columns: minmax(1fr,min-content)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g2 {
grid-template-columns: minmax(1fr,max-content)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g3 {
grid-template-columns: minmax(1fr,auto)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g4 {
grid-template-columns: minmax(1fr,0)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g5 {
grid-template-columns: minmax(20px,0)
minmax(1fr,0)
minmax(1fr,0)
1fr;
}
.g6 {
grid-template-columns: minmax(1fr,0)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g7 {
grid-template-columns: minmax(20px,1fr)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g8 {
grid-template-columns: minmax(1fr,1fr)
minmax(1fr,0)
minmax(1fr,0)
20px;
}
.g9 {
grid-template-columns: 20px
30px
minmax(1fr,0)
10px;
}
.gA {
grid-template-columns: minmax(1fr,0)
minmax(min-content,40px)
minmax(1fr,0)
20px;
}
.gB {
grid-template-columns: minmax(1fr,0)
minmax(auto,40px)
minmax(1fr,0)
20px;
}
.gC {
grid-template-columns: minmax(1fr,20px)
minmax(auto,40px)
minmax(1fr,0)
20px;
}
.gD {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(1fr,0)
min-content;
}
.gE {
grid-template-columns: minmax(auto,20px)
minmax(auto,40px)
minmax(1fr,20px)
auto;
}
.gF {
grid-template-columns: minmax(auto,20px)
minmax(min-content,max-content)
minmax(1fr,40px)
auto;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g0">
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g0">
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<br clear="all" style="margin-top:100px">
<div class="g0">
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gE grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
<div class="g0">
<div class="gF grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
<div class="d3"></div>
</div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-001-ref.html
+90
View File
@@ -0,0 +1,90 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
border: dashed blue;
float: left;
clear: left;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
span {
display: block;
float: left;
clear: left;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1" style="width:73px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:46px"><x></x></span>
<span class="r1" style="margin-left:41px; width:82px"><x></x></span>
<span class="c3" style="margin-left:77px; "><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1" style="width:73px"><x></x></span>
<span class="r1" style="width:73px"><x></x></span>
<span class="r1" style="width:73px"><x></x></span>
</div>
<div class="grid" style="">
<span class="c1" style="width:410px"><x></x></span>
<span class="r1" style="margin-left:41px; width:446px"><x></x></span>
<span class="c3" style="margin-left:441px;"><x></x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="width:224px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
</div>
<div class="grid" style="">
<span class="c1" style="width:510px"><x></x></span>
<span class="r1" style="margin-left:41px; width:546px"><x></x></span>
<span class="c3" style="margin-left:541px;"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x></x></span>
<span class="r1" style="margin-left:114px; width:300px"><x></x></span>
<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
<span class="r1" style="margin-left:114px; width:300px; border-sizing:border-box"><x></x></span>
<span class="c3" style="margin-left:222px; width:83px"><x></x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-001.html
+90
View File
@@ -0,0 +1,90 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: minmax(0,1fr);
border: dashed blue;
float: left;
clear: left;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x></x></span>
<span class="r1" style="min-width:10px"><x></x></span>
<span class="r1" style="min-width:30px"><x></x></span>
<span class="r1" style="min-width:10px"><x></x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x></x></span>
<span class="r1" style="width:300px"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
<span class="c3"><x></x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-002-ref.html
+90
View File
@@ -0,0 +1,90 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: block;
border: dashed blue;
clear: left;
}
.c1 { grid-column: 1 / span 2; min-width:40px; margin-top:1px; }
.r1 { grid-column: 2 / span 3; min-width:70px; margin-left:38px; }
.c3 { grid-column: 3 / span 1; min-width:0; margin-left:138px; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 2px 5px 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1" style="width:371px"><x></x></span>
<span class="r1" style="margin-left:204px;"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:371px"><x></x></span>
<span class="r1" style="margin-left:204px;"><x></x></span>
<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:371px"><x></x></span>
<span class="r1" style="margin-left:204px;"><x></x></span>
<span class="r1" style="margin-left:204px;"><x></x></span>
<span class="r1" style="margin-left:204px;"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:505px"><x></x></span>
<span class="r1" style="margin-left:136px;"><x></x></span>
<span class="c3" style="margin-left:536px; width:106px"><x></x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="width:224px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
<span class="r1" style="margin-left:130px; width:349px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:572px"><x></x></span>
<span class="r1" style="margin-left:103px;"><x></x></span>
<span class="c3" style="margin-left:603px; width:72px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x></x></span>
<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x></x></span>
<span class="r1" style="margin-left:204px; width:300px"><x></x></span>
<span class="c3" style="margin-left:402px; width:173px"><x></x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-002.html
+89
View File
@@ -0,0 +1,89 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: grid;
grid-auto-columns: minmax(0,1fr);
border: dashed blue;
}
.c1 { grid-column: 1 / span 2; min-width:40px; }
.r1 { grid-column: 2 / span 3; min-width:70px; }
.c3 { grid-column: 3 / span 1; min-width:0; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; width:10px; height:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) 400px;">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px"><x></x></span>
<span class="r1" style="min-width:10px"><x></x></span>
<span class="r1" style="min-width:30px"><x></x></span>
<span class="r1" style="min-width:10px"><x></x></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,500px);">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px"><x></x></span>
<span class="r1" style="width:300px"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="width:100px; border-sizing:border-box"><x></x></span>
<span class="r1" style="width:300px; border-sizing:border-box"><x></x></span>
<span class="c3"><x></x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-003-ref.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: block;
border: 3px dashed blue;
width: 794px;
}
.c1 { min-height:40px; margin-top:1px; }
.r1 { min-height:70px; margin-top:38px; }
.c3 { min-height:0; margin-top:138px; }
.gc1 { grid-row: 1 / span 2; min-height:40px; }
.gr1 { grid-row: 2 / span 3; min-height:70px; }
.gc3 { grid-row: 3 / span 1; min-height:0; }
span {
display: block;
background: gray;
border-style: solid;
border-height: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
td {
vertical-align:top;
}
x { display:inline-block; height:10px; width:18px; }
</style>
</head>
<body>
<div class="grid">
<table cellpadding="0" cellspacing="0"><tr>
<td><span class="c1" style="height:43px"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:28px;margin-left:5px"><x>&nbsp;</x></span>
</tr></table>
</div>
<div class="grid">
<table cellpadding="0" cellspacing="0"><tr>
<td><span class="c1" style="display:inline-block; margin-left:5px; height:43px"><x>&nbsp;</x></span>
<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:27px;"><x>&nbsp;</x></span>
<tr><td><span class="c3" style="margin-left:5px; margin-top:-52px; height:17px"><x>&nbsp;</x></span>
</tr></table>
</div>
<div class="grid">
<table cellpadding="0" cellspacing="0"><tr>
<td><span class="c1" style="height:44px"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:28px;"><x>&nbsp;</x></span>
</tr></table>
</div>
<div class="grid" style="height:100px;">
<table cellpadding="0" cellspacing="0"><tr>
<td><span class="c1" style="height:40px"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:26px; min-height:65px;"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
<td><span class="r1" style="margin-top:26px; min-height:65px"><x>&nbsp;</x></span>
</tr></table>
</div>
<div class="grid">
<table cellpadding="0" cellspacing="0"><tr>
<td><span class="c1" style="display:inline-block; margin-left:5px; height:40px"><x>&nbsp;</x></span>
<td rowspan="2"><span class="r1" style="margin-left:5px; margin-top:28px;"><x>&nbsp;</x></span>
<tr><td><span class="c3" style="margin-left:5px; margin-top:-53px; height:17px"><x>&nbsp;</x></span>
</tr></table>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-003.html
+72
View File
@@ -0,0 +1,72 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-003-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: grid;
grid-auto-rows: minmax(0,1fr);
border: 3px dashed blue;
}
.c1 { grid-row: 1 / span 2; min-height:40px; }
.r1 { grid-row: 2 / span 3; min-height:70px; }
.c3 { grid-row: 3 / span 1; min-height:0; }
span {
background: gray;
border-style: solid;
border-height: 1px 3px 5px 7px;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
x { display:inline-block; height:10px; width:18px; }
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="c3"><x></x></span>
</div>
<div class="grid">
<span class="c1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
<span class="r1"><x></x></span>
</div>
<div class="grid" style="height:100px;">
<span class="c1" style="min-height:20px"><x></x></span>
<span class="r1" style="min-height:10px"><x></x></span>
<span class="r1" style="min-height:30px"><x></x></span>
<span class="r1" style="min-height:10px"><x></x></span>
</div>
<div class="grid">
<span class="c1" style="height:30px; border-sizing:border-box"><x></x></span>
<span class="r1" style="height:40px; border-sizing:border-box"><x></x></span>
<span class="c3"><x></x></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
+120
View File
@@ -0,0 +1,120 @@
<!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: Testing track sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: block;
border: 3px dashed blue;
margin-bottom:20px;
float: left;
clear: left;
position:relative;
}
.c1 { min-height:20px; min-width:10px; }
.c2 { min-height:20px; min-width:10px; }
.c3 { min-height:0; min-width:20px; }
.r1 { min-height:10px; }
.x1 { min-height:10px; min-width:0px; border-style:none; }
span {
display: block;
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
justify-self: flex-start;
}
x { display:inline-block; height:10px; width:18px; }
</style>
</head>
<body>
<div class="grid flex" style="width:0;height:0;"></div>
<div class="grid flex" style="width:1px;height:1px;"></div>
<div class="grid mm" style="width:0;height:0;"></div>
<div class="grid mm" style="width:1px;height:1px;"></div>
<div class="grid zero" style="width:0;height:0;"></div>
<div class="grid zero" style="width:1px;height:1px;"></div>
<!-- TODO: fails due to broken align:stretch
<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2" style="position:relative;top:0px;width:0;min-height:0;height:1px;min-width:0;border-width:0 0 0 10px;z-index:1;"><x></x></span></div>
<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>
<!-- 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>
-->
<div class="grid flex">
<span class="c1 r1"><x></x></span>
</div>
<div class="grid flex10">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.010px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.020px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.040px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.15px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.18px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:0.19px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:1px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:2px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:3px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:4px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:5px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:6px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:7px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:8px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:9px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:10px; clear:none;">
<span class="x1"></span></div>
<div class="grid flex10" style="width:11px; clear:none;">
<span class="x1"></span></div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-004.html
+174
View File
@@ -0,0 +1,174 @@
<!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: Testing track sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing">
<link rel="match" href="grid-max-sizing-flex-004-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: grid;
border: 3px dashed blue;
margin-bottom:20px;
float: left;
clear: left;
}
.flex {
grid-auto-rows: minmax(0,1fr);
grid-auto-columns: minmax(0,1fr);
}
.flex10 {
grid-auto-rows: minmax(0,1fr);
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
minmax(0,1fr) minmax(0,1fr);
}
.mm {
grid-auto-rows: minmax(min-content,max-content);
grid-auto-columns: minmax(min-content,max-content);
}
.zero {
grid-auto-rows: minmax(0,0);
grid-auto-columns: minmax(0,0);
}
.c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px; }
.c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; }
.c3 { grid-column: 3 / span 1; min-height:0; min-width:20px; }
.r1 { grid-row: 1; }
.x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; }
span {
background: gray;
border-style: solid;
border-width: 1px 3px 5px 7px;
justify-self: flex-start;
}
x { display:inline-block; height:10px; width:18px; }
</style>
</head>
<body>
<div class="grid flex" style="width:0;height:0;"></div>
<div class="grid flex" style="width:1px;height:1px;"></div>
<div class="grid mm" style="width:0;height:0;"></div>
<div class="grid mm" style="width:1px;height:1px;"></div>
<div class="grid zero" style="width:0;height:0;"></div>
<div class="grid zero" style="width:1px;height:1px;"></div>
<!-- TODO: fails due to broken align:stretch
<div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
<div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
-->
<div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
<div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><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><span class="c2"><x></x></span></div>
<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
-->
<div class="grid flex">
<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
<span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
</div>
<div class="grid flex10">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.010px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.020px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.040px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.15px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.18px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:0.19px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:1px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:2px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:3px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:4px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:5px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:6px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:7px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:8px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:9px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:10px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
<div class="grid flex10" style="width:11px; clear:none;">
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
<span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-005-ref.html
+109
View File
@@ -0,0 +1,109 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-005-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-rows: 12px;
border: 3px dashed blue;
width: 720px;
}
.c1 { grid-column: 1 / span 2; }
.r1 { grid-column: 2 / span 3; }
.c3 { grid-column: 3 / span 1; }
span {
min-height:8px;
background: gray;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
</style>
</head>
<body>
<div class="grid" style="grid-template-columns: 80px 160px 240px 160px 80px;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 72px 144px 216px 144px 72px;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 400px 80px 120px 80px 40px;">
<span class="c1"></span>
<span class="c1"></span>
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 400px 320px 0 0 0;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 0 400px 0 0 322px;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: 0 0 0 0 722px;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<!-- test some extreme flex values: -->
<div class="grid" style="grid-template-columns: minmax(10px,0fr);">
<span class="c1"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(10px,1fr);">
<span class="c1"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:794px; grid-template-columns: minmax(10px,1fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:794px; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
<span class="c1"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-005.html
+109
View File
@@ -0,0 +1,109 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-005-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
body { width: 800px; }
.grid {
display: grid;
grid-auto-rows: minmax(0,1fr);
border: 3px dashed blue;
width: 720px;
}
.c1 { grid-column: 1 / span 2; min-height:8px; }
.r1 { grid-column: 2 / span 3; }
.c3 { grid-column: 3 / span 1; }
span {
background: gray;
padding: 1px 3px;
margin: 1px 5px;
justify-self: flex-start;
}
</style>
</head>
<body>
<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="c1"></span>
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(400px,1fr) minmax(320px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(400px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(322px,1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(722px,1fr) ;">
<span class="c1"></span>
<span class="r1"></span>
<span class="c3"></span>
</div>
<!-- test some extreme flex values: -->
<div class="grid" style="grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
<span class="c1"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
<span class="c1"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:auto; grid-template-columns: minmax(10px,9999999999999999999999999999999999999999999999999999999fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:auto; grid-template-columns: minmax(10px,99999999999999999999999999999999999fr);">
<span class="c1"></span>
</div>
<div class="grid" style="width:auto; grid-template-columns: minmax(10px,0.000000000000000000000000001fr);">
<span class="c1"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-006-ref.html
+81
View File
@@ -0,0 +1,81 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: 40px;
border: 3px dashed blue;
width: 720px;
}
.c1 { grid-row: 1 / span 2; }
.c2 { grid-row: 2 / span 3; }
.c3 { grid-row: 3 / span 1; }
span {
background: gray;
padding: 1px 3px;
margin: 1px 5px;
min-height: 5px;
justify-self: flex-start;
}
</style>
</body>
<head>
<div class="grid" style="grid-template-rows: 3px 6px 9px 6px 3px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 0.9px 1.8px 2.7px 1.8px 0.9px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
<span class="c1"></span>
<span class="c1"></span>
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-max-sizing-flex-006.html
+83
View File
@@ -0,0 +1,83 @@
<!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: Testing track flex max-sizing</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks">
<link rel="match" href="grid-max-sizing-flex-006-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
grid-auto-columns: 40px;
border: 3px dashed blue;
width: 720px;
}
.c1 { grid-row: 1 / span 2; }
.c2 { grid-row: 2 / span 3; }
.c3 { grid-row: 3 / span 1; }
span {
background: gray;
padding: 1px 3px;
margin: 1px 5px;
min-height: 5px;
justify-self: flex-start;
}
</style>
</body>
<head>
<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.2fr) minmax(0,0.1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(9px,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="c1"></span>
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(18px,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(9px,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="grid" style="grid-template-rows: minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(18px,1fr) ;">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-min-max-content-sizing-001-ref.html
+98
View File
@@ -0,0 +1,98 @@
<!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: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: block;
border: 2px solid green;
overflow: hidden;
clear: both;
}
.float { float:left; clear:both; border: 2px dashed blue;}
span {
background: lime;
border-style: solid;
border-width: 1px 3px 5px 7px;
float: left;
}
x10 { display:inline-block; width:10px; height:10px; background:yellow; }
x30 { display:inline-block; width:30px; height:30px; background:cyan; }
.c2,.r2 { width:20px; height:20px; background: silver; }
.r2 { background: pink; }
.c1 { margin: 1px 3px 5px 7px; }
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
<div class="grid float v">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2" style="background:pink"></span>
<span class="r2" style="clear:left;background:silver"></span>
</div>
<div class="grid float v">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2" style="background:pink"></span>
<span class="r2" style="clear:left;background:silver"></span>
</div>
<div class="grid float v" style="padding-bottom:4px">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left;"></span>
</div>
<div class="grid" style="position:relative">
<span class="c1 v" style="min-width:100px;"><x10>X</x10><x30>y</x30><x10 style="visibility:hidden">z</x10></span>
<span class="c1" style="min-width:50px;margin-left:-113px; border:none; padding:1px 3px 5px 7px; background:none"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:10px;max-width:10px;margin-left:-113px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="clear:left"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-min-max-content-sizing-001.html
+105
View File
@@ -0,0 +1,105 @@
<!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: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-min-max-content-sizing-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
border: 2px solid green;
grid-template-columns: minmax(min-content,max-content) 30px;
grid-template-rows: minmax(min-content,max-content);
clear: both;
}
.float { float:left; clear:both; border: 2px dashed blue; }
.flex-min {
grid-template-columns: minmax(1fr,max-content) 30px;
grid-template-rows: minmax(1fr,max-content);
}
span {
background: lime;
border-style: solid;
border-width: 1px 3px 5px 7px;
grid-row: 1;
}
x10 { display:inline-block; width:10px; height:10px; background:yellow; }
x30 { display:inline-block; width:30px; height:30px; background:cyan; }
.c2,.r2 { width:20px; height:20px; background: silver; }
.r2 { background: pink; }
.c1 { margin: 1px 3px 5px 7px; grid-column:1; }
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid flex-min">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float flex-min">
<span class="c1"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid flex-min">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float flex-min">
<span class="c1 v"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid float v">
<span class="c1 zv"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
<div class="grid" style="grid-template-columns: minmax(auto,max-content) 47px;">
<span class="c1 v" style="min-width:100px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:50px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c1" style="min-width:10px;max-width:10px"><x10>X</x10><x30>y</x30><x10>z</x10></span>
<span class="c2"></span>
<span class="r2" style="grid-row:2"></span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
+1
View File
@@ -12,6 +12,7 @@
height: 60px;
border: 1px solid green;
position: relative;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-order-placement-auto-001.html
+1
View File
@@ -19,6 +19,7 @@
grid-auto-flow: row;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-order-placement-definite-001-ref.html
+1 -1
View File
@@ -8,7 +8,7 @@
<title>CSS Test: Testing definite placement of grid items with 'order'</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
/*display: grid;*/
layout/reftests/css-grid/grid-order-placement-definite-001.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
<link rel="match" href="grid-order-placement-definite-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
display: grid;
layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html
+47 -20
View File
@@ -15,47 +15,46 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
.grid {
/*display: grid;*/
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
padding: 17px 7px 11px 13px;
grid-auto-rows: 7px;
padding: 1px 7px 3px 13px;
width: 200px;
height: 200px;
height: 60px;
}
.a {
position: absolute;
left: 59px; top: 68px;
height: 32px; width: 44px;
left: 59px; top: 22px;
height: 12px; width: 44px;
}
.abs {
position: absolute;
opacity: 0.7;
width: 21px;
height: 15px;
height: 5px;
}
.b {
left: 14px; top: 3px; bottom: 1px;
width: 61px; height: auto;
left: 1px; top: 3px; bottom: 1px;
width: 74px; height: auto;
}
.c {
left: 14px; top: 20px;
width: 38px; height: 11px;
left: 1px; top: 3px;
width: 51px; height: 2px;
}
.d {
left: 1px; top: 54px;
width: 5px; height: 11px;
left: 1px; top: 18px;
width: 212px; height: 1px;
}
.e {
right: 5px; bottom: 1px;
width: 199px; height: 205px;
width: 212px; height: 58px;
}
.f {
right: 5px; top: 3px;
width: 199px; height: 11px;
right: 5px; bottom: 1px;
width: 212px; height: 58px;
}
span {
background: lime;
@@ -66,19 +65,47 @@ span {
<body>
<div class="grid">
<span class="a">a</span>
<span class="a"></span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="a"></span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="a"></span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="a"></span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="a"></span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="b abs" style="width:38px">b</span>
<span class="b abs" style="width:212px">b</span>
</div>
<div class="grid">
<span class="c abs">c</span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="d abs" style="height:58px;top:3px">d</span>
</div>
<div class="grid">
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="f abs">f</span>
</div>
layout/reftests/css-grid/grid-placement-abspos-implicit-001.html
+41 -7
View File
@@ -15,14 +15,13 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
.grid {
display: grid;
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
border: 1px solid;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
padding: 17px 7px 11px 13px;
grid-auto-rows: 7px;
padding: 1px 7px 3px 13px;
width: 200px;
height: 200px;
height: 60px;
}
span.negative {
@@ -72,23 +71,58 @@ span {
<div class="grid">
<span class="negative"></span>
<span class="a">a</span>
<span class="a"></span>
<span class="b abs">b</span>
</div>
<div class="grid">
<span class="negative"></span>
<span class="a"></span>
<span class="c abs">c</span>
</div>
<div class="grid">
<span class="negative"></span>
<span class="a"></span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="negative"></span>
<span class="a"></span>
<span class="e abs">e</span>
</div>
<div class="grid">
<span class="negative"></span>
<span class="a"></span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="negative"></span>
<div><span class="b abs">b</span></div>
</div>
<div class="grid">
<span class="negative"></span>
<x><span class="c abs">c</span></x>
</div>
<div class="grid">
<span class="negative"></span>
<span class="d abs">d</span>
</div>
<div class="grid">
<span class="negative"></span>
<div><span class="e abs">e</span></div>
</div>
<div class="grid">
<span class="negative"></span>
<span class="f abs">f</span>
</div>
</body>
</html>
layout/reftests/css-grid/grid-placement-auto-col-dense-001-ref.html
+1
View File
@@ -7,6 +7,7 @@
height: 60px;
border: 1px solid green;
position: relative;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-col-dense-001.html
+1
View File
@@ -11,6 +11,7 @@
grid-auto-flow: dense column;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-col-sparse-001-ref.html
+1
View File
@@ -7,6 +7,7 @@
height: 60px;
border: 1px solid green;
position: relative;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-col-sparse-001.html
+1
View File
@@ -11,6 +11,7 @@
grid-auto-flow: column;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html
+1 -1
View File
@@ -8,7 +8,7 @@
<title>CSS Test: Testing placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
border: 1px solid blue;
layout/reftests/css-grid/grid-placement-auto-implicit-001.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
<link rel="match" href="grid-placement-auto-implicit-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
display: grid;
layout/reftests/css-grid/grid-placement-auto-row-dense-001-ref.html
+1
View File
@@ -7,6 +7,7 @@
height: 60px;
border: 1px solid green;
position: relative;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-row-dense-001.html
+1
View File
@@ -11,6 +11,7 @@
grid-auto-flow: dense row;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-row-sparse-001-ref.html
+1
View File
@@ -7,6 +7,7 @@
height: 60px;
border: 1px solid green;
position: relative;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-auto-row-sparse-001.html
+1
View File
@@ -11,6 +11,7 @@
grid-auto-flow: row;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size: 12px;
}
span {
layout/reftests/css-grid/grid-placement-definite-001-ref.html
+1
View File
@@ -8,6 +8,7 @@
height: 60px;
border: 10px solid green;
position: relative;
font-size:12px;
}
span {
layout/reftests/css-grid/grid-placement-definite-001.html
+2 -1
View File
@@ -3,7 +3,7 @@
<meta charset="utf-8">
<title></title>
<style type="text/css">
.grid {
display: grid;
grid-template-areas:
@@ -17,6 +17,7 @@
grid-auto-flow: column dense;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
font-size:12px;
}
span {
layout/reftests/css-grid/grid-placement-definite-002-ref.html
+1 -1
View File
@@ -4,7 +4,7 @@
<title></title>
<style type="text/css">
html,body {
font-size:16px;
font-size:12px;
font-family:monospace;
}
.grid {
layout/reftests/css-grid/grid-placement-definite-002.html
+1 -1
View File
@@ -4,7 +4,7 @@
<title></title>
<style type="text/css">
html,body {
font-size:16px;
font-size:12px;
font-family:monospace;
}
.grid {
layout/reftests/css-grid/grid-placement-definite-003-ref.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body {
font-size:12px;
font-family:monospace;
}
.grid {
height: 60px;
border: 1px solid green;
position: relative;
}
span {
position: absolute;
background: lime;
border: 1px solid black;
box-sizing: border-box;
}
.test1 span {
top: 0;
left: 40px;
width: 100px;
height: 20px;
}
.test2 .a {
top: 0;
left: 0;
width: 60px;
height: 40px;
}
.test2 .b {
top: 40px;
left: 20px;
width: 60px;
height: 20px;
}
.test2 .c {
top: 0;
left: 60px;
width: 60px;
height: 20px;
}
.test3 span {
top: 0;
left: 40px;
width: 100px;
height: 20px;
}
.test4 span {
top: 0;
left: 40px;
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<div class="grid test1"><span>a</span></div>
<div class="grid test2">
<span class="a">a</span>
<span class="b">b</span>
<span class="c">c</span>
</div>
<div class="grid test3"><span>a</span></div>
<div class="grid test4"><span>a</span></div>
</body>
</html>
layout/reftests/css-grid/grid-placement-definite-003.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body {
font-size:12px;
font-family:monospace;
}
.grid {
display: grid;
border: 1px solid green;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px 20px 20px;
grid-auto-flow: row;
grid-auto-columns: 20px;
grid-auto-rows: 20px;
}
span {
background: lime;
border: 1px solid;
}
.test1 { grid-template-areas:'.. a a-start-.'; }
.test1 span { grid-column: a-start- / 8; }
.test2 {
grid-template-areas:
'a a a ... . .'
'a a a . . ..'
'.-b b . . ...'
;
}
.test2 .a {
grid-area: a;
}
.test2 .b {
grid-column: 2 / span 3;
grid-row: b;
}
.test2 .c {
grid-column: auto / span 3;
}
.test3 {
grid-template-areas:'.a.';
grid-template-columns: [a-start] 20px 20px [a-start-start] 20px [a-start-end];
}
.test3 span { grid-column: a-start / 8; }
.test4 {
grid-template-areas:'. .... .-a';
grid-template-columns: 20px [-a-start] 20px [-a-start] 20px [-a-end] 20px ;
}
.test4 span { grid-column: -a-start 2 / 8; }
</style>
</head>
<body>
<div class="grid test1"><span>a</span></div>
<div class="grid test2">
<span class="a">a</span>
<span class="b">b</span>
<span class="c">c</span>
</div>
<div class="grid test3"><span>a</span></div>
<div class="grid test4"><span>a</span></div>
</body>
</html>
layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html
+1 -1
View File
@@ -8,7 +8,7 @@
<title>CSS Test: Testing placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
border: 1px solid blue;
layout/reftests/css-grid/grid-placement-definite-implicit-001.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
<link rel="match" href="grid-placement-definite-implicit-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
display: grid;
layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html
+139
View File
@@ -0,0 +1,139 @@
<!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: Distribute space beyond growth limits</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: block;
border: 1px solid;
width: 500px;
}
.grid div.c1 {
display: table-row;
}
.grid div {
display: table-cell;
}
.c1 { }
x { display:block; width:396px; border:2px solid; }
.c2 { background: grey; }
.c3 { background: blue; }
.h10 { height:10px; }
</style>
</head>
<body>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5</x></td>
</tr><tr>
<td class="c2 h10"></td>
<td class="c3 h10"></td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
</tr><tr>
<td class="c2 h10"></td>
<td class="c3 h10"></td>
</tr></table>
</div>
<div class="grid t1">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:-webkit-max-content;width:-moz-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
</tr><tr>
<td class="c2"></td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
</tr><tr>
<td class="c3 h10" colspan="2"></td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<div class="grid t2">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
</tr><tr>
<td class="c2">&nbsp;</td>
<td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-001.html
+101
View File
@@ -0,0 +1,101 @@
<!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: Distribute space beyond growth limits</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#distribute-extra-space">
<link rel="match" href="grid-track-intrinsic-sizing-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid;
width: 500px;
}
.t1 {
grid-template-columns: minmax(max-content,200px) minmax(max-content,200px);
}
.t2 {
grid-template-columns: minmax(0,auto) minmax(max-content,auto);
}
.c1 { grid-column: span 2; border:2px solid; min-width:0; }
.c2 { background: grey; min-height:10px; min-width:0; }
.c3 { background: blue; min-width:0;}
</style>
</head>
<body>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t1">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3"></div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
<div class="grid t2">
<span class="c1">1 2 3 4 5</span>
<div class="c2">&nbsp;</div>
<div class="c3">&nbsp;</div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
+166
View File
@@ -0,0 +1,166 @@
<!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: Intrinsic track sizing (w/o span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px dashed;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 52px;
}
.g3 .d1 {
width: 56px;
}
.g4 .d1 {
width: 96px;
}
.g4f .d1 {
width: 92px;
}
.g5 .d1 {
width: 96px;
}
.g6 .d1 {
width: 69px;
}
.g6f .d1 {
width: 77px;
}
.g7 .d1 {
width: 69px;
}
.g8 .t {
width: 196px;
}
.g8 .d1 {
width: 200px;
}
.g9 .d1 {
width: 69px;
}
.gA .d1 {
width: 93px;
}
.gB .d1 {
width: 93px;
}
.gC .d1 {
width: 93px;
}
.gD .d1 {
width: 93px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-002.html
+190
View File
@@ -0,0 +1,190 @@
<!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: Intrinsic track sizing (w/o span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px dashed;
width: 500px;
}
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content);
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content);
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content);
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content);
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content);
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(1fr,max-content)
minmax(min-content,max-content);
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6f {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(1fr,auto);
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto);
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content);
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto);
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content);
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content);
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content);
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content);
}
.t { grid-column: span 3; border:2px solid; }
.c1 { grid-column: 1; }
.d1 { grid-column: 1 / span 2; background: grey; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
+220
View File
@@ -0,0 +1,220 @@
<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px dashed;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 56px;
}
.g3 .d1 {
width: 56px;
}
.g4 .d1 {
width: 96px;
}
.g4f .d1 {
width: 104px;
}
.g5 .d1 {
width: 96px;
}
.g6 .d1 {
width: 69px;
}
.g6f .d1 {
width: 89px;
}
.g7 .d1 {
width: 69px;
}
.g8 .t {
width: 196px;
}
.g8 .d1 {
width: 200px;
}
.g9 .d1 {
width: 69px;
}
.gA .d1 {
width: 93px;
}
.gB .d1 {
width: 93px;
}
.gC .d1 {
width: 93px;
}
.gD .d1 {
width: 93px;
}
.d2 {
position: absolute;
bottom: 0;
right: 0;
background: blue;
}
.g1 .d2 {
width: 448px;
}
.g2 .d2 {
width: 444px;
}
.g2f .d2 {
width: 448px;
}
.g3 .d2 {
width: 444px;
}
.g4 .d2 {
width: 404px;
}
.g4f .d2 {
width: 396px;
}
.g5 .d2 {
width: 404px;
}
.g6 .d2 {
width: 431px;
}
.g6f .d2 {
width: 423px;
}
.g7 .d2 {
width: 431px;
}
.g8 .d2 {
width: 300px;
}
.g9 .d2 {
width: 431px;
}
.gA .d2 {
width: 407px;
}
.gB .d2 {
width: 407px;
}
.gC .d2 {
width: 407px;
}
.gD .d2 {
width: 407px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-003.html
+206
View File
@@ -0,0 +1,206 @@
<!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: Intrinsic track sizing (w/o span:1, with flex)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-003-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px dashed;
width: 500px;
}
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content)
1fr;
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content)
1fr;
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content)
1fr;
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content)
1fr;
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content)
1fr;
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(1fr,max-content)
1fr;
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto)
1fr;
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto)
1fr;
}
.g6f {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(1fr,auto)
1fr;
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto)
1fr;
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content)
1fr;
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto)
1fr;
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content)
1fr;
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content)
1fr;
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content)
1fr;
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content)
1fr;
}
.t { grid-column: span 3; border:2px solid; }
.d1 { grid-column: 1 / span 2; background: grey; }
.d3 { grid-column: 3 / span 2; background: blue; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d3"></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-004-ref.html
+247
View File
@@ -0,0 +1,247 @@
<!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: Intrinsic track sizing (with span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
position: relative;
display: grid;
border: 1px solid black;
width: 500px;
grid-template-columns: auto;
padding-bottom:10px;
}
.d1 {
position: absolute;
bottom: 0;
background: grey;
}
.g1 .d1 {
width: 52px;
}
.g2 .d1 {
width: 56px;
}
.g2f .d1 {
width: 52px;
}
.g3 .d1 {
left: 41px;
width: 2px;
}
.g4 .d1 {
left: 81px;
width: 2px;
}
.g4f .d1 {
left: 83px;
width: 0px;
}
.g5 .d1 {
left: 81px;
width: 2px;
}
.g6 .d1 {
left: 28px;
width: 28px;
}
.g6f .d1 {
left: 27px;
width: 28px;
}
.g7 .d1 {
left: 28px;
width: 28px;
}
.g8 .t {
width: 216px;
}
.g8 .d1 {
left:0;
width: 200px;
}
.g9 .d1 {
left: 28px;
width: 28px;
}
.gA .d1 {
left: 80px;
width: 2px;
}
.gB .d1 {
left: 0;
width: 82px;
}
.gC .d1 {
left: 0;
width: 82px;
}
.gD .d1 {
left: 0;
width: 82px;
}
.d2 {
position: absolute;
bottom: 0;
background: blue;
}
.g1 .d2 {
width: 104px;
left: 0;
}
.g2 .d2 {
width: 102px;
left: 2px;
}
.g2f .d2 {
width: 104px;
}
.g3 .d2 {
width: 61px;
left: 43px;
}
.g4 .d2 {
width: 21px;
left: 83px;
}
.g4f .d2 {
width: 22px;
left: 82px;
}
.g5 .d2 {
width: 21px;
left: 83px;
}
.g6 .d2 {
width: 48px;
left: 56px;
}
.g6f .d2 {
width: 49px;
left: 55px;
}
.g7 .d2 {
width: 48px;
left: 56px;
}
.g8 .d2 {
width: 20px;
left: 200px;
}
.g9 .d2 {
width: 48px;
left: 56px;
}
.gA .d2 {
width: 22px;
left: 82px;
}
.gB .d2 {
width: 22px;
left: 82px;
}
.gC .d2 {
width: 22px;
left: 82px;
}
.gD .d2 {
width: 22px;
left: 82px;
}
.t { grid-column: span 1; border:2px solid; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="d1"></div><div class="d2"></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-track-intrinsic-sizing-004.html
+223
View File
@@ -0,0 +1,223 @@
<!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: Intrinsic track sizing (with span:1)</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
<link rel="match" href="grid-track-intrinsic-sizing-004-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
border: 1px solid black;
width: 500px;
}
.float { width:auto; float:left; }
.g1 {
grid-template-columns: minmax(0,auto)
minmax(max-content,auto)
minmax(max-content,max-content);
}
.g2 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,auto)
minmax(max-content,max-content);
}
.g2f {
grid-template-columns: minmax(max-content,auto)
minmax(1fr,auto)
minmax(max-content,max-content);
}
.g3 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(max-content,max-content);
}
.g4 {
grid-template-columns: minmax(max-content,max-content)
minmax(min-content,max-content)
minmax(min-content,max-content);
}
.g4f {
grid-template-columns: minmax(max-content,max-content)
minmax(1fr,max-content)
minmax(min-content,max-content);
}
.g5 {
grid-template-columns: minmax(max-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g6f {
grid-template-columns: minmax(1fr,auto)
minmax(min-content,max-content)
minmax(min-content,auto);
}
.g7 {
grid-template-columns: minmax(min-content,auto)
minmax(min-content,auto)
minmax(min-content,auto);
}
.g8 {
grid-template-columns: minmax(auto,min-content)
minmax(200px,min-content)
minmax(min-content,min-content);
}
.g9 {
grid-template-columns: minmax(auto,auto)
minmax(auto,auto)
minmax(auto,auto);
}
.gA {
grid-template-columns: minmax(auto,auto)
minmax(min-content,min-content)
minmax(min-content,min-content);
}
.gB {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,min-content);
}
.gC {
grid-template-columns: minmax(auto,auto)
minmax(max-content,min-content)
minmax(min-content,max-content);
}
.gD {
grid-template-columns: minmax(auto,auto)
minmax(max-content,max-content)
minmax(min-content,max-content);
}
.t { grid-column: span 3; border:2px solid; }
.c1 { grid-column: 1; height:10px; }
.c2 { grid-column: 2; background: grey; height:10px; }
.c3 { grid-column: 3; background: blue; height:10px; }
div { min-width:0; min-height:10px; }
t { display:inline-block; width:20px; }
</style>
</head>
<body>
<div class="g1 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g2 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g2f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g3 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g4 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g4f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g5 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g6 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g6f grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g7 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g8 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="g9 grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gA grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gB grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gC grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
<div class="gD grid">
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"><t>&nbsp;</t></div>
</div>
</body>
</html>
layout/reftests/css-grid/grid-whitespace-handling-2-ref.xhtml
+1 -1
View File
@@ -14,7 +14,7 @@
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="stylesheet" type="text/css" href="support/ahem.css" />
<style>
div { height: 100px; }
div.a, div.b, div.grid { height: 100px; }
div.grid {
white-space: pre;
border: 1px dashed blue;
layout/reftests/css-grid/reftest.list
+26 -1
View File
@@ -5,6 +5,7 @@ fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
== grid-whitespace-handling-2.xhtml grid-whitespace-handling-2-ref.xhtml
== grid-placement-definite-001.html grid-placement-definite-001-ref.html
== grid-placement-definite-002.html grid-placement-definite-002-ref.html
== grid-placement-definite-003.html grid-placement-definite-003-ref.html
== grid-placement-auto-row-sparse-001.html grid-placement-auto-row-sparse-001-ref.html
== grid-placement-auto-row-dense-001.html grid-placement-auto-row-dense-001-ref.html
== grid-placement-auto-col-sparse-001.html grid-placement-auto-col-sparse-001-ref.html
@@ -12,12 +13,21 @@ fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
== grid-track-sizing-001.html grid-track-sizing-001-ref.html
== grid-abspos-items-001.html grid-abspos-items-001-ref.html
== grid-abspos-items-002.html grid-abspos-items-002-ref.html
== grid-abspos-items-003.html grid-abspos-items-003-ref.html
== grid-abspos-items-004.html grid-abspos-items-004-ref.html
== grid-abspos-items-005.html grid-abspos-items-005-ref.html
== grid-abspos-items-006.html grid-abspos-items-006-ref.html
== grid-abspos-items-007.html grid-abspos-items-007-ref.html
== grid-abspos-items-008.html grid-abspos-items-008-ref.html
== grid-abspos-items-009.html grid-abspos-items-009-ref.html
== grid-abspos-items-010.html grid-abspos-items-010-ref.html
== grid-abspos-items-011.html grid-abspos-items-011-ref.html
== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html
== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html
== grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html
skip-if(Android) == grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001-ref.html
== grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html
skip-if(Android) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
skip-if(Android) fuzzy-if(winWidget,1,32) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
== grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
@@ -25,3 +35,18 @@ pref(layout.css.vertical-text.enabled,true) == vlr-grid-placement-auto-row-spars
pref(layout.css.vertical-text.enabled,true) == vrl-grid-placement-auto-row-sparse-001.html vrl-grid-placement-auto-row-sparse-001-ref.html
== grid-relpos-items-001.html grid-relpos-items-001-ref.html
== grid-item-dir-001.html grid-item-dir-001-ref.html
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
== grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
== grid-track-intrinsic-sizing-001.html grid-track-intrinsic-sizing-001-ref.html
== grid-track-intrinsic-sizing-002.html grid-track-intrinsic-sizing-002-ref.html
== grid-track-intrinsic-sizing-003.html grid-track-intrinsic-sizing-003-ref.html
== grid-track-intrinsic-sizing-004.html grid-track-intrinsic-sizing-004-ref.html
== grid-max-sizing-flex-001.html grid-max-sizing-flex-001-ref.html
== grid-max-sizing-flex-002.html grid-max-sizing-flex-002-ref.html
== grid-max-sizing-flex-003.html grid-max-sizing-flex-003-ref.html
== grid-max-sizing-flex-004.html grid-max-sizing-flex-004-ref.html
== grid-max-sizing-flex-005.html grid-max-sizing-flex-005-ref.html
== grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html
== grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
== grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html
layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html
+2
View File
@@ -3,6 +3,8 @@
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
block-size: 60px;
border: 2px solid green;
layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001.html
+2
View File
@@ -3,6 +3,8 @@
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid {
display: grid;
border: 2px solid green;
layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
.grid1, .grid2 {
block-size: 60px;

Some files were not shown because too many files have changed in this diff Show More