CSS Grid Improvements.
This commit is contained in:
parent
7028020b46
commit
bddd8ea4b9
|
@ -779,7 +779,8 @@ exports.CSS_PROPERTIES = {
|
||||||
"column-gap"
|
"column-gap"
|
||||||
],
|
],
|
||||||
"supports": [
|
"supports": [
|
||||||
6
|
6,
|
||||||
|
8
|
||||||
],
|
],
|
||||||
"values": [
|
"values": [
|
||||||
"-moz-calc",
|
"-moz-calc",
|
||||||
|
@ -5434,7 +5435,8 @@ exports.CSS_PROPERTIES = {
|
||||||
"column-gap"
|
"column-gap"
|
||||||
],
|
],
|
||||||
"supports": [
|
"supports": [
|
||||||
6
|
6,
|
||||||
|
8
|
||||||
],
|
],
|
||||||
"values": [
|
"values": [
|
||||||
"-moz-calc",
|
"-moz-calc",
|
||||||
|
|
|
@ -90,7 +90,9 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
|
||||||
for (uint32_t i = aTrackInfo->mStartFragmentTrack;
|
for (uint32_t i = aTrackInfo->mStartFragmentTrack;
|
||||||
i < aTrackInfo->mEndFragmentTrack + 1;
|
i < aTrackInfo->mEndFragmentTrack + 1;
|
||||||
i++) {
|
i++) {
|
||||||
uint32_t line1Index = i + 1;
|
// Since line indexes are 1-based, calculate a 1-based value
|
||||||
|
// for this track to simplify some calculations.
|
||||||
|
const uint32_t line1Index = i + 1;
|
||||||
|
|
||||||
startOfNextTrack = (i < aTrackInfo->mEndFragmentTrack) ?
|
startOfNextTrack = (i < aTrackInfo->mEndFragmentTrack) ?
|
||||||
aTrackInfo->mPositions[i] :
|
aTrackInfo->mPositions[i] :
|
||||||
|
@ -127,7 +129,8 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (i >= aTrackInfo->mRepeatFirstTrack &&
|
if (i >= (aTrackInfo->mRepeatFirstTrack +
|
||||||
|
aTrackInfo->mNumLeadingImplicitTracks) &&
|
||||||
repeatIndex < numRepeatTracks) {
|
repeatIndex < numRepeatTracks) {
|
||||||
numAddedLines += AppendRemovedAutoFits(aTrackInfo,
|
numAddedLines += AppendRemovedAutoFits(aTrackInfo,
|
||||||
aLineInfo,
|
aLineInfo,
|
||||||
|
@ -139,23 +142,30 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo,
|
||||||
|
|
||||||
RefPtr<GridLine> line = new GridLine(this);
|
RefPtr<GridLine> line = new GridLine(this);
|
||||||
mLines.AppendElement(line);
|
mLines.AppendElement(line);
|
||||||
|
MOZ_ASSERT(line1Index > 0, "line1Index must be positive.");
|
||||||
|
bool isBeforeFirstExplicit =
|
||||||
|
(line1Index <= aTrackInfo->mNumLeadingImplicitTracks);
|
||||||
|
// Calculate an actionable line number for this line, that could be used
|
||||||
|
// in a css grid property to align a grid item or area at that line.
|
||||||
|
// For implicit lines that appear before line 1, report a number of 0.
|
||||||
|
// We can't report negative indexes, because those have a different
|
||||||
|
// meaning in the css grid spec (negative indexes are negative-1-based
|
||||||
|
// from the end of the grid decreasing towards the front).
|
||||||
|
uint32_t lineNumber = isBeforeFirstExplicit ? 0 :
|
||||||
|
(line1Index - aTrackInfo->mNumLeadingImplicitTracks + numAddedLines);
|
||||||
|
GridDeclaration lineType =
|
||||||
|
(isBeforeFirstExplicit ||
|
||||||
|
line1Index > (aTrackInfo->mNumLeadingImplicitTracks +
|
||||||
|
aTrackInfo->mNumExplicitTracks + 1))
|
||||||
|
? GridDeclaration::Implicit
|
||||||
|
: GridDeclaration::Explicit;
|
||||||
line->SetLineValues(
|
line->SetLineValues(
|
||||||
lineNames,
|
lineNames,
|
||||||
nsPresContext::AppUnitsToDoubleCSSPixels(lastTrackEdge),
|
nsPresContext::AppUnitsToDoubleCSSPixels(lastTrackEdge),
|
||||||
nsPresContext::AppUnitsToDoubleCSSPixels(startOfNextTrack -
|
nsPresContext::AppUnitsToDoubleCSSPixels(startOfNextTrack -
|
||||||
lastTrackEdge),
|
lastTrackEdge),
|
||||||
line1Index + numAddedLines,
|
lineNumber,
|
||||||
(
|
lineType
|
||||||
// Implicit if there are no explicit tracks, or if the index
|
|
||||||
// is before the first explicit track, or after
|
|
||||||
// a track beyond the last explicit track.
|
|
||||||
(aTrackInfo->mNumExplicitTracks == 0) ||
|
|
||||||
(i < aTrackInfo->mNumLeadingImplicitTracks) ||
|
|
||||||
(i > aTrackInfo->mNumLeadingImplicitTracks +
|
|
||||||
aTrackInfo->mNumExplicitTracks) ?
|
|
||||||
GridDeclaration::Implicit :
|
|
||||||
GridDeclaration::Explicit
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
if (i < aTrackInfo->mEndFragmentTrack) {
|
if (i < aTrackInfo->mEndFragmentTrack) {
|
||||||
|
@ -215,11 +225,13 @@ GridLines::AppendRemovedAutoFits(const ComputedGridTrackInfo* aTrackInfo,
|
||||||
|
|
||||||
RefPtr<GridLine> line = new GridLine(this);
|
RefPtr<GridLine> line = new GridLine(this);
|
||||||
mLines.AppendElement(line);
|
mLines.AppendElement(line);
|
||||||
|
uint32_t lineNumber = aTrackInfo->mRepeatFirstTrack +
|
||||||
|
aRepeatIndex + 1;
|
||||||
line->SetLineValues(
|
line->SetLineValues(
|
||||||
aLineNames,
|
aLineNames,
|
||||||
nsPresContext::AppUnitsToDoubleCSSPixels(aLastTrackEdge),
|
nsPresContext::AppUnitsToDoubleCSSPixels(aLastTrackEdge),
|
||||||
nsPresContext::AppUnitsToDoubleCSSPixels(0),
|
nsPresContext::AppUnitsToDoubleCSSPixels(0),
|
||||||
aTrackInfo->mRepeatFirstTrack + aRepeatIndex + 1,
|
lineNumber,
|
||||||
GridDeclaration::Explicit
|
GridDeclaration::Explicit
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
[chrome/test_grid_fragmentation.html]
|
[chrome/test_grid_fragmentation.html]
|
||||||
[chrome/test_grid_implicit.html]
|
[chrome/test_grid_implicit.html]
|
||||||
[chrome/test_grid_lines.html]
|
[chrome/test_grid_lines.html]
|
||||||
|
[chrome/test_grid_line_numbers.html]
|
||||||
[chrome/test_grid_object.html]
|
[chrome/test_grid_object.html]
|
||||||
[chrome/test_grid_repeats.html]
|
[chrome/test_grid_repeats.html]
|
||||||
[chrome/test_grid_tracks.html]
|
[chrome/test_grid_tracks.html]
|
||||||
|
|
|
@ -33,6 +33,11 @@ body {
|
||||||
grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
|
grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.template4 {
|
||||||
|
grid-template-columns: 100px 50px 100px;
|
||||||
|
grid-template-rows: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -50,6 +55,9 @@ body {
|
||||||
.d {
|
.d {
|
||||||
grid-area: areaD;
|
grid-area: areaD;
|
||||||
}
|
}
|
||||||
|
.e {
|
||||||
|
grid-column: -7 / 5;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -78,9 +86,12 @@ function runTests() {
|
||||||
is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
|
is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
|
||||||
is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");
|
is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");
|
||||||
|
|
||||||
is(grid.rows.lines[0].type, "implicit", "Grid row line 1 is implicit.");
|
is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit.");
|
||||||
is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit.");
|
is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number.");
|
||||||
is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit.");
|
is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit.");
|
||||||
|
is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number.");
|
||||||
|
is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit.");
|
||||||
|
is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number.");
|
||||||
|
|
||||||
// test that row line 1 gets the name forced on it by placement of item B
|
// test that row line 1 gets the name forced on it by placement of item B
|
||||||
todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
|
todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
|
||||||
|
@ -221,6 +232,48 @@ function runTests() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// test the fourth grid wrapper
|
||||||
|
wrapper = document.getElementById("wrapper4");
|
||||||
|
grid = wrapper.getGridFragments()[0];
|
||||||
|
|
||||||
|
// test column and row line counts
|
||||||
|
is(grid.cols.lines.length, 8,
|
||||||
|
"Grid.cols.lines property expands properly with implicit columns on both sides."
|
||||||
|
);
|
||||||
|
is(grid.rows.lines.length, 2,
|
||||||
|
"Grid.rows.lines property is as expected"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (grid.cols.lines.length == 8) {
|
||||||
|
// check that all the lines get correct implict/explicit type and number
|
||||||
|
let expectedType = [
|
||||||
|
"implicit",
|
||||||
|
"implicit",
|
||||||
|
"implicit",
|
||||||
|
"explicit",
|
||||||
|
"explicit",
|
||||||
|
"explicit",
|
||||||
|
"explicit",
|
||||||
|
"implicit",
|
||||||
|
];
|
||||||
|
let expectedNumber = [
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let i = 0; i < grid.cols.lines.length; i++) {
|
||||||
|
let line = grid.cols.lines[i];
|
||||||
|
is(line.type, expectedType[i], "Line index " + i + " has expected type.");
|
||||||
|
is(line.number, expectedNumber[i], "Line index " + i + " has expected number.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
SimpleTest.finish();
|
SimpleTest.finish();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -246,5 +299,9 @@ function runTests() {
|
||||||
<div id="boxC" class="box c">C</div>
|
<div id="boxC" class="box c">C</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="wrapper4" class="wrapper template4">
|
||||||
|
<div id="boxE" class="box e">E</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,101 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 40px;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 0px;
|
||||||
|
background-color: #f00;
|
||||||
|
}
|
||||||
|
.wrapper > div {
|
||||||
|
background-color: #444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.repeatColumns {
|
||||||
|
width: 600px;
|
||||||
|
grid-auto-columns: 50px;
|
||||||
|
grid-template-columns: repeat(auto-fit, 100px);
|
||||||
|
}
|
||||||
|
.repeatRows {
|
||||||
|
height: 600px;
|
||||||
|
grid-auto-rows: 50px;
|
||||||
|
grid-template-rows: repeat(auto-fit, 100px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
SimpleTest.waitForExplicitFinish();
|
||||||
|
|
||||||
|
function testLines(elementName, lines, expectedValues) {
|
||||||
|
is(lines.count, expectedValues.count, elementName + " has expected number of lines.");
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function runTests() {
|
||||||
|
let grid;
|
||||||
|
let lines;
|
||||||
|
let expectedValues;
|
||||||
|
|
||||||
|
grid = document.getElementById("gridWithColumns").getGridFragments()[0];
|
||||||
|
lines = grid.cols.lines;
|
||||||
|
expectedValues = [
|
||||||
|
{ "number": 0 },
|
||||||
|
{ "number": 0 },
|
||||||
|
{ "number": 1 },
|
||||||
|
{ "number": 2 },
|
||||||
|
{ "number": 3 },
|
||||||
|
{ "number": 4 },
|
||||||
|
{ "number": 5 },
|
||||||
|
{ "number": 6 },
|
||||||
|
{ "number": 7 },
|
||||||
|
{ "number": 8 },
|
||||||
|
];
|
||||||
|
testLines("gridWithColumns", lines, expectedValues);
|
||||||
|
|
||||||
|
grid = document.getElementById("gridWithRows").getGridFragments()[0];
|
||||||
|
lines = grid.rows.lines;
|
||||||
|
expectedValues = [
|
||||||
|
{ "number": 0 },
|
||||||
|
{ "number": 0 },
|
||||||
|
{ "number": 1 },
|
||||||
|
{ "number": 2 },
|
||||||
|
{ "number": 3 },
|
||||||
|
{ "number": 4 },
|
||||||
|
{ "number": 5 },
|
||||||
|
{ "number": 6 },
|
||||||
|
{ "number": 7 },
|
||||||
|
{ "number": 8 },
|
||||||
|
];
|
||||||
|
testLines("gridWithRows", lines, expectedValues);
|
||||||
|
|
||||||
|
SimpleTest.finish();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onLoad="runTests();">
|
||||||
|
|
||||||
|
<div id="gridWithColumns" class="wrapper repeatColumns">
|
||||||
|
<div style="grid-column: -9">A</div>
|
||||||
|
<div style="grid-column: 4">B</div>
|
||||||
|
<div style="grid-column: 7">C</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gridWithRows" class="wrapper repeatRows">
|
||||||
|
<div style="grid-row: span 3 / 2">A</div>
|
||||||
|
<div style="grid-row: 4">B</div>
|
||||||
|
<div style="grid-row: 5">C</div>
|
||||||
|
<div style="grid-row: span 2 / 8">D</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,31 @@
|
||||||
|
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||||
|
/* vim: set ts=8 sts=2 et sw=2 tw=80: */
|
||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||||
|
|
||||||
|
/* constants used throughout the Layout module */
|
||||||
|
|
||||||
|
#ifndef LayoutConstants_h___
|
||||||
|
#define LayoutConstants_h___
|
||||||
|
|
||||||
|
#include "nsSize.h" // for NS_MAXSIZE
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constant used to indicate an unconstrained size.
|
||||||
|
*/
|
||||||
|
#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE
|
||||||
|
|
||||||
|
// NOTE: There are assumptions all over that these have the same value,
|
||||||
|
// namely NS_UNCONSTRAINEDSIZE.
|
||||||
|
#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE
|
||||||
|
#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE
|
||||||
|
#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE
|
||||||
|
|
||||||
|
// +1 is to avoid clamped huge margin values being processed as auto margins
|
||||||
|
#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1)
|
||||||
|
|
||||||
|
#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN
|
||||||
|
|
||||||
|
|
||||||
|
#endif // LayoutConstants_h___
|
|
@ -13,6 +13,9 @@ with Files('Display*'):
|
||||||
with Files('FrameLayerBuilder.*'):
|
with Files('FrameLayerBuilder.*'):
|
||||||
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
|
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
|
||||||
|
|
||||||
|
with Files('LayoutConstants.*'):
|
||||||
|
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
|
||||||
|
|
||||||
with Files('LayerState.*'):
|
with Files('LayerState.*'):
|
||||||
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
|
BUG_COMPONENT = ('Core', 'Layout: View Rendering')
|
||||||
|
|
||||||
|
@ -63,6 +66,7 @@ EXPORTS += [
|
||||||
'FrameLayerBuilder.h',
|
'FrameLayerBuilder.h',
|
||||||
'FrameProperties.h',
|
'FrameProperties.h',
|
||||||
'LayerState.h',
|
'LayerState.h',
|
||||||
|
'LayoutConstants.h',
|
||||||
'LayoutLogging.h',
|
'LayoutLogging.h',
|
||||||
'nsArenaMemoryStats.h',
|
'nsArenaMemoryStats.h',
|
||||||
'nsBidi.h',
|
'nsBidi.h',
|
||||||
|
|
|
@ -4671,8 +4671,6 @@ GetDefiniteSize(const nsStyleCoord& aStyle,
|
||||||
nscoord pb = aIsInlineAxis ? aPercentageBasis.value().ISize(wm)
|
nscoord pb = aIsInlineAxis ? aPercentageBasis.value().ISize(wm)
|
||||||
: aPercentageBasis.value().BSize(wm);
|
: aPercentageBasis.value().BSize(wm);
|
||||||
if (pb == NS_UNCONSTRAINEDSIZE) {
|
if (pb == NS_UNCONSTRAINEDSIZE) {
|
||||||
// XXXmats given that we're calculating an intrinsic size here,
|
|
||||||
// maybe we should back-compute the calc-size using AddPercents?
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
*aResult = std::max(0, calc->mLength +
|
*aResult = std::max(0, calc->mLength +
|
||||||
|
@ -4916,12 +4914,9 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
nscoord result = aContentSize;
|
nscoord result = aContentSize;
|
||||||
nscoord min = aContentMinSize;
|
nscoord min = aContentMinSize;
|
||||||
nscoord coordOutsideSize = 0;
|
nscoord coordOutsideSize = 0;
|
||||||
float pctOutsideSize = 0;
|
|
||||||
float pctTotal = 0.0f;
|
|
||||||
|
|
||||||
if (!(aFlags & nsLayoutUtils::IGNORE_PADDING)) {
|
if (!(aFlags & nsLayoutUtils::IGNORE_PADDING)) {
|
||||||
coordOutsideSize += aOffsets.hPadding;
|
coordOutsideSize += aOffsets.hPadding;
|
||||||
pctOutsideSize += aOffsets.hPctPadding;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
coordOutsideSize += aOffsets.hBorder;
|
coordOutsideSize += aOffsets.hBorder;
|
||||||
|
@ -4929,21 +4924,15 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
if (aBoxSizing == StyleBoxSizing::Border) {
|
if (aBoxSizing == StyleBoxSizing::Border) {
|
||||||
min += coordOutsideSize;
|
min += coordOutsideSize;
|
||||||
result = NSCoordSaturatingAdd(result, coordOutsideSize);
|
result = NSCoordSaturatingAdd(result, coordOutsideSize);
|
||||||
pctTotal += pctOutsideSize;
|
|
||||||
|
|
||||||
coordOutsideSize = 0;
|
coordOutsideSize = 0;
|
||||||
pctOutsideSize = 0.0f;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
coordOutsideSize += aOffsets.hMargin;
|
coordOutsideSize += aOffsets.hMargin;
|
||||||
pctOutsideSize += aOffsets.hPctMargin;
|
|
||||||
|
|
||||||
min += coordOutsideSize;
|
min += coordOutsideSize;
|
||||||
result = NSCoordSaturatingAdd(result, coordOutsideSize);
|
result = NSCoordSaturatingAdd(result, coordOutsideSize);
|
||||||
pctTotal += pctOutsideSize;
|
|
||||||
|
|
||||||
const bool shouldAddPercent = aType == nsLayoutUtils::PREF_ISIZE ||
|
|
||||||
(aFlags & nsLayoutUtils::ADD_PERCENTS);
|
|
||||||
nscoord size;
|
nscoord size;
|
||||||
if (aType == nsLayoutUtils::MIN_ISIZE &&
|
if (aType == nsLayoutUtils::MIN_ISIZE &&
|
||||||
(((aStyleSize.HasPercent() || aStyleMaxSize.HasPercent()) &&
|
(((aStyleSize.HasPercent() || aStyleMaxSize.HasPercent()) &&
|
||||||
|
@ -4961,18 +4950,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
GetIntrinsicCoord(aStyleSize, aRenderingContext, aFrame,
|
GetIntrinsicCoord(aStyleSize, aRenderingContext, aFrame,
|
||||||
PROP_WIDTH, size)) {
|
PROP_WIDTH, size)) {
|
||||||
result = size + coordOutsideSize;
|
result = size + coordOutsideSize;
|
||||||
if (shouldAddPercent) {
|
|
||||||
result = nsLayoutUtils::AddPercents(result, pctOutsideSize);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// NOTE: We could really do a lot better for percents and for some
|
|
||||||
// cases of calc() containing percent (certainly including any where
|
|
||||||
// the coefficient on the percent is positive and there are no max()
|
|
||||||
// expressions). However, doing better for percents wouldn't be
|
|
||||||
// backwards compatible.
|
|
||||||
if (shouldAddPercent) {
|
|
||||||
result = nsLayoutUtils::AddPercents(result, pctTotal);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nscoord maxSize = aFixedMaxSize ? *aFixedMaxSize : 0;
|
nscoord maxSize = aFixedMaxSize ? *aFixedMaxSize : 0;
|
||||||
|
@ -4980,9 +4957,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
GetIntrinsicCoord(aStyleMaxSize, aRenderingContext, aFrame,
|
GetIntrinsicCoord(aStyleMaxSize, aRenderingContext, aFrame,
|
||||||
PROP_MAX_WIDTH, maxSize)) {
|
PROP_MAX_WIDTH, maxSize)) {
|
||||||
maxSize += coordOutsideSize;
|
maxSize += coordOutsideSize;
|
||||||
if (shouldAddPercent) {
|
|
||||||
maxSize = nsLayoutUtils::AddPercents(maxSize, pctOutsideSize);
|
|
||||||
}
|
|
||||||
if (result > maxSize) {
|
if (result > maxSize) {
|
||||||
result = maxSize;
|
result = maxSize;
|
||||||
}
|
}
|
||||||
|
@ -4993,17 +4967,11 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
GetIntrinsicCoord(aStyleMinSize, aRenderingContext, aFrame,
|
GetIntrinsicCoord(aStyleMinSize, aRenderingContext, aFrame,
|
||||||
PROP_MIN_WIDTH, minSize)) {
|
PROP_MIN_WIDTH, minSize)) {
|
||||||
minSize += coordOutsideSize;
|
minSize += coordOutsideSize;
|
||||||
if (shouldAddPercent) {
|
|
||||||
minSize = nsLayoutUtils::AddPercents(minSize, pctOutsideSize);
|
|
||||||
}
|
|
||||||
if (result < minSize) {
|
if (result < minSize) {
|
||||||
result = minSize;
|
result = minSize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (shouldAddPercent) {
|
|
||||||
min = nsLayoutUtils::AddPercents(min, pctTotal);
|
|
||||||
}
|
|
||||||
if (result < min) {
|
if (result < min) {
|
||||||
result = min;
|
result = min;
|
||||||
}
|
}
|
||||||
|
@ -5020,9 +4988,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
|
||||||
: devSize.width);
|
: devSize.width);
|
||||||
// GetMinimumWidgetSize() returns a border-box width.
|
// GetMinimumWidgetSize() returns a border-box width.
|
||||||
themeSize += aOffsets.hMargin;
|
themeSize += aOffsets.hMargin;
|
||||||
if (shouldAddPercent) {
|
|
||||||
themeSize = nsLayoutUtils::AddPercents(themeSize, aOffsets.hPctMargin);
|
|
||||||
}
|
|
||||||
if (themeSize > result || !canOverride) {
|
if (themeSize > result || !canOverride) {
|
||||||
result = themeSize;
|
result = themeSize;
|
||||||
}
|
}
|
||||||
|
@ -5267,9 +5232,19 @@ nsLayoutUtils::IntrinsicForAxis(PhysicalAxis aAxis,
|
||||||
min = aFrame->GetMinISize(aRenderingContext);
|
min = aFrame->GetMinISize(aRenderingContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nscoord pmPercentageBasis = NS_UNCONSTRAINEDSIZE;
|
||||||
|
if (aPercentageBasis.isSome()) {
|
||||||
|
// The padding/margin percentage basis is the inline-size in the parent's
|
||||||
|
// writing-mode.
|
||||||
|
auto childWM = aFrame->GetWritingMode();
|
||||||
|
pmPercentageBasis =
|
||||||
|
aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ?
|
||||||
|
aPercentageBasis->BSize(childWM) :
|
||||||
|
aPercentageBasis->ISize(childWM);
|
||||||
|
}
|
||||||
nsIFrame::IntrinsicISizeOffsetData offsets =
|
nsIFrame::IntrinsicISizeOffsetData offsets =
|
||||||
MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets()
|
MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis)
|
||||||
: aFrame->IntrinsicBSizeOffsets();
|
: aFrame->IntrinsicBSizeOffsets(pmPercentageBasis);
|
||||||
nscoord contentBoxSize = result;
|
nscoord contentBoxSize = result;
|
||||||
result = AddIntrinsicSizeOffset(aRenderingContext, aFrame, offsets, aType,
|
result = AddIntrinsicSizeOffset(aRenderingContext, aFrame, offsets, aType,
|
||||||
boxSizing, result, min, styleISize,
|
boxSizing, result, min, styleISize,
|
||||||
|
@ -5310,11 +5285,12 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext* aRenderingContext,
|
||||||
}
|
}
|
||||||
|
|
||||||
/* static */ nscoord
|
/* static */ nscoord
|
||||||
nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
|
nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
|
||||||
nsRenderingContext* aRC,
|
nsRenderingContext* aRC,
|
||||||
nsIFrame* aFrame,
|
nsIFrame* aFrame,
|
||||||
IntrinsicISizeType aType,
|
IntrinsicISizeType aType,
|
||||||
uint32_t aFlags)
|
const LogicalSize& aPercentageBasis,
|
||||||
|
uint32_t aFlags)
|
||||||
{
|
{
|
||||||
MOZ_ASSERT(aFrame);
|
MOZ_ASSERT(aFrame);
|
||||||
MOZ_ASSERT(aFrame->IsFlexOrGridItem(),
|
MOZ_ASSERT(aFrame->IsFlexOrGridItem(),
|
||||||
|
@ -5328,9 +5304,7 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
|
||||||
aWM.IsVertical() ? "vertical" : "horizontal");
|
aWM.IsVertical() ? "vertical" : "horizontal");
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
// Note: this method is only meant for grid/flex items which always
|
// Note: this method is only meant for grid/flex items.
|
||||||
// include percentages in their intrinsic size.
|
|
||||||
aFlags |= nsLayoutUtils::ADD_PERCENTS;
|
|
||||||
const nsStylePosition* const stylePos = aFrame->StylePosition();
|
const nsStylePosition* const stylePos = aFrame->StylePosition();
|
||||||
const nsStyleCoord* style = aAxis == eAxisHorizontal ? &stylePos->mMinWidth
|
const nsStyleCoord* style = aAxis == eAxisHorizontal ? &stylePos->mMinWidth
|
||||||
: &stylePos->mMinHeight;
|
: &stylePos->mMinHeight;
|
||||||
|
@ -5375,11 +5349,17 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis,
|
||||||
// wrapping inside of it should not apply font size inflation.
|
// wrapping inside of it should not apply font size inflation.
|
||||||
AutoMaybeDisableFontInflation an(aFrame);
|
AutoMaybeDisableFontInflation an(aFrame);
|
||||||
|
|
||||||
PhysicalAxis ourInlineAxis =
|
// The padding/margin percentage basis is the inline-size in the parent's
|
||||||
aFrame->GetWritingMode().PhysicalAxis(eLogicalAxisInline);
|
// writing-mode.
|
||||||
|
auto childWM = aFrame->GetWritingMode();
|
||||||
|
nscoord pmPercentageBasis =
|
||||||
|
aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ?
|
||||||
|
aPercentageBasis.BSize(childWM) :
|
||||||
|
aPercentageBasis.ISize(childWM);
|
||||||
|
PhysicalAxis ourInlineAxis = childWM.PhysicalAxis(eLogicalAxisInline);
|
||||||
nsIFrame::IntrinsicISizeOffsetData offsets =
|
nsIFrame::IntrinsicISizeOffsetData offsets =
|
||||||
ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets()
|
ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis)
|
||||||
: aFrame->IntrinsicBSizeOffsets();
|
: aFrame->IntrinsicBSizeOffsets(pmPercentageBasis);
|
||||||
nscoord result = 0;
|
nscoord result = 0;
|
||||||
nscoord min = 0;
|
nscoord min = 0;
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
#ifndef nsLayoutUtils_h__
|
#ifndef nsLayoutUtils_h__
|
||||||
#define nsLayoutUtils_h__
|
#define nsLayoutUtils_h__
|
||||||
|
|
||||||
|
#include "LayoutConstants.h"
|
||||||
#include "mozilla/MemoryReporting.h"
|
#include "mozilla/MemoryReporting.h"
|
||||||
#include "mozilla/ArrayUtils.h"
|
#include "mozilla/ArrayUtils.h"
|
||||||
#include "mozilla/Maybe.h"
|
#include "mozilla/Maybe.h"
|
||||||
|
@ -154,6 +155,7 @@ public:
|
||||||
typedef mozilla::ScreenMargin ScreenMargin;
|
typedef mozilla::ScreenMargin ScreenMargin;
|
||||||
typedef mozilla::LayoutDeviceIntSize LayoutDeviceIntSize;
|
typedef mozilla::LayoutDeviceIntSize LayoutDeviceIntSize;
|
||||||
typedef mozilla::StyleGeometryBox StyleGeometryBox;
|
typedef mozilla::StyleGeometryBox StyleGeometryBox;
|
||||||
|
typedef mozilla::LogicalSize LogicalSize;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Finds previously assigned ViewID for the given content element, if any.
|
* Finds previously assigned ViewID for the given content element, if any.
|
||||||
|
@ -1381,7 +1383,8 @@ public:
|
||||||
* variations if that's what matches aAxis) and its padding, border and margin
|
* variations if that's what matches aAxis) and its padding, border and margin
|
||||||
* in the corresponding dimension.
|
* in the corresponding dimension.
|
||||||
* @param aPercentageBasis an optional percentage basis (in aFrame's WM).
|
* @param aPercentageBasis an optional percentage basis (in aFrame's WM).
|
||||||
* Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes.
|
* If the basis is indefinite in a given axis, pass a size with
|
||||||
|
* NS_UNCONSTRAINEDSIZE in that component.
|
||||||
* If you pass Nothing() a percentage basis will be calculated from aFrame's
|
* If you pass Nothing() a percentage basis will be calculated from aFrame's
|
||||||
* ancestors' computed size in the relevant axis, if needed.
|
* ancestors' computed size in the relevant axis, if needed.
|
||||||
* @param aMarginBoxMinSizeClamp make the result fit within this margin-box
|
* @param aMarginBoxMinSizeClamp make the result fit within this margin-box
|
||||||
|
@ -1395,14 +1398,13 @@ public:
|
||||||
IGNORE_PADDING = 0x01,
|
IGNORE_PADDING = 0x01,
|
||||||
BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so
|
BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so
|
||||||
MIN_INTRINSIC_ISIZE = 0x04, // use min-width/height instead of width/height
|
MIN_INTRINSIC_ISIZE = 0x04, // use min-width/height instead of width/height
|
||||||
ADD_PERCENTS = 0x08, // apply AddPercents also for MIN_ISIZE
|
|
||||||
};
|
};
|
||||||
static nscoord
|
static nscoord
|
||||||
IntrinsicForAxis(mozilla::PhysicalAxis aAxis,
|
IntrinsicForAxis(mozilla::PhysicalAxis aAxis,
|
||||||
nsRenderingContext* aRenderingContext,
|
nsRenderingContext* aRenderingContext,
|
||||||
nsIFrame* aFrame,
|
nsIFrame* aFrame,
|
||||||
IntrinsicISizeType aType,
|
IntrinsicISizeType aType,
|
||||||
const mozilla::Maybe<mozilla::LogicalSize>& aPercentageBasis = mozilla::Nothing(),
|
const mozilla::Maybe<LogicalSize>& aPercentageBasis = mozilla::Nothing(),
|
||||||
uint32_t aFlags = 0,
|
uint32_t aFlags = 0,
|
||||||
nscoord aMarginBoxMinSizeClamp = NS_MAXSIZE);
|
nscoord aMarginBoxMinSizeClamp = NS_MAXSIZE);
|
||||||
/**
|
/**
|
||||||
|
@ -1427,31 +1429,18 @@ public:
|
||||||
* calculates the result as if the 'min-' computed value is zero.
|
* calculates the result as if the 'min-' computed value is zero.
|
||||||
* Otherwise, return NS_UNCONSTRAINEDSIZE.
|
* Otherwise, return NS_UNCONSTRAINEDSIZE.
|
||||||
*
|
*
|
||||||
|
* @param aPercentageBasis the percentage basis (in aFrame's WM).
|
||||||
|
* Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes.
|
||||||
* @note this behavior is specific to Grid/Flexbox (currently) so aFrame
|
* @note this behavior is specific to Grid/Flexbox (currently) so aFrame
|
||||||
* should be a grid/flex item.
|
* should be a grid/flex item.
|
||||||
*/
|
*/
|
||||||
static nscoord MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis,
|
static nscoord
|
||||||
nsRenderingContext* aRC,
|
MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis,
|
||||||
nsIFrame* aFrame,
|
nsRenderingContext* aRC,
|
||||||
IntrinsicISizeType aType,
|
nsIFrame* aFrame,
|
||||||
uint32_t aFlags = 0);
|
IntrinsicISizeType aType,
|
||||||
|
const LogicalSize& aPercentageBasis,
|
||||||
/**
|
uint32_t aFlags = 0);
|
||||||
* This function increases an initial intrinsic size, 'aCurrent', according
|
|
||||||
* to the given 'aPercent', such that the size-increase makes up exactly
|
|
||||||
* 'aPercent' percent of the returned value. If 'aPercent' or 'aCurrent' are
|
|
||||||
* less than or equal to zero the original 'aCurrent' value is returned.
|
|
||||||
* If 'aPercent' is greater than or equal to 1.0 the value nscoord_MAX is
|
|
||||||
* returned.
|
|
||||||
*/
|
|
||||||
static nscoord AddPercents(nscoord aCurrent, float aPercent)
|
|
||||||
{
|
|
||||||
if (aPercent > 0.0f && aCurrent > 0) {
|
|
||||||
return MOZ_UNLIKELY(aPercent >= 1.0f) ? nscoord_MAX
|
|
||||||
: NSToCoordRound(float(aCurrent) / (1.0f - aPercent));
|
|
||||||
}
|
|
||||||
return aCurrent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Convert nsStyleCoord to nscoord when percentages depend on the
|
* Convert nsStyleCoord to nscoord when percentages depend on the
|
||||||
|
@ -2876,6 +2865,62 @@ public:
|
||||||
static nsRect ComputeGeometryBox(nsIFrame* aFrame,
|
static nsRect ComputeGeometryBox(nsIFrame* aFrame,
|
||||||
StyleGeometryBox aGeometryBox);
|
StyleGeometryBox aGeometryBox);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve a CSS <length-percentage> value to a definite size.
|
||||||
|
*/
|
||||||
|
template<bool clampNegativeResultToZero>
|
||||||
|
static nscoord ResolveToLength(const nsStyleCoord& aCoord,
|
||||||
|
nscoord aPercentageBasis)
|
||||||
|
{
|
||||||
|
NS_WARNING_ASSERTION(aPercentageBasis >= nscoord(0), "nscoord overflow?");
|
||||||
|
|
||||||
|
switch (aCoord.GetUnit()) {
|
||||||
|
case eStyleUnit_Coord:
|
||||||
|
MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetCoordValue() >= 0,
|
||||||
|
"This value should have been rejected by the style system");
|
||||||
|
return aCoord.GetCoordValue();
|
||||||
|
case eStyleUnit_Percent:
|
||||||
|
if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) {
|
||||||
|
return nscoord(0);
|
||||||
|
}
|
||||||
|
MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetPercentValue() >= 0,
|
||||||
|
"This value should have been rejected by the style system");
|
||||||
|
return NSToCoordFloorClamped(aPercentageBasis *
|
||||||
|
aCoord.GetPercentValue());
|
||||||
|
case eStyleUnit_Calc: {
|
||||||
|
nsStyleCoord::Calc* calc = aCoord.GetCalcValue();
|
||||||
|
nscoord result;
|
||||||
|
if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) {
|
||||||
|
result = calc->mLength;
|
||||||
|
} else {
|
||||||
|
result = calc->mLength +
|
||||||
|
NSToCoordFloorClamped(aPercentageBasis * calc->mPercent);
|
||||||
|
}
|
||||||
|
if (clampNegativeResultToZero && result < 0) {
|
||||||
|
return nscoord(0);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
MOZ_ASSERT_UNREACHABLE("Unexpected unit!");
|
||||||
|
return nscoord(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve a column-gap/row-gap to a definite size.
|
||||||
|
* @note This method resolves 'normal' to zero.
|
||||||
|
* Callers who want different behavior should handle 'normal' on their own.
|
||||||
|
*/
|
||||||
|
static nscoord ResolveGapToLength(const nsStyleCoord& aGap,
|
||||||
|
nscoord aPercentageBasis)
|
||||||
|
{
|
||||||
|
if (aGap.GetUnit() == eStyleUnit_Normal) {
|
||||||
|
return nscoord(0);
|
||||||
|
}
|
||||||
|
return ResolveToLength<true>(aGap, aPercentageBasis);
|
||||||
|
}
|
||||||
|
|
||||||
private:
|
private:
|
||||||
static uint32_t sFontSizeInflationEmPerLine;
|
static uint32_t sFontSizeInflationEmPerLine;
|
||||||
static uint32_t sFontSizeInflationMinTwips;
|
static uint32_t sFontSizeInflationMinTwips;
|
||||||
|
|
|
@ -183,18 +183,15 @@ nsColumnSetFrame::GetAvailableContentBSize(const ReflowInput& aReflowInput)
|
||||||
|
|
||||||
static nscoord
|
static nscoord
|
||||||
GetColumnGap(nsColumnSetFrame* aFrame,
|
GetColumnGap(nsColumnSetFrame* aFrame,
|
||||||
const nsStyleColumn* aColStyle)
|
const nsStyleColumn* aColStyle,
|
||||||
|
nscoord aPercentageBasis)
|
||||||
{
|
{
|
||||||
if (eStyleUnit_Normal == aColStyle->mColumnGap.GetUnit())
|
const auto& columnGap = aColStyle->mColumnGap;
|
||||||
|
if (columnGap.GetUnit() == eStyleUnit_Normal) {
|
||||||
return aFrame->StyleFont()->mFont.size;
|
return aFrame->StyleFont()->mFont.size;
|
||||||
if (eStyleUnit_Coord == aColStyle->mColumnGap.GetUnit()) {
|
|
||||||
nscoord colGap = aColStyle->mColumnGap.GetCoordValue();
|
|
||||||
NS_ASSERTION(colGap >= 0, "negative column gap");
|
|
||||||
return colGap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
NS_NOTREACHED("Unknown gap type");
|
return nsLayoutUtils::ResolveGapToLength(columnGap, aPercentageBasis);
|
||||||
return 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nsColumnSetFrame::ReflowConfig
|
nsColumnSetFrame::ReflowConfig
|
||||||
|
@ -227,7 +224,7 @@ nsColumnSetFrame::ChooseColumnStrategy(const ReflowInput& aReflowInput,
|
||||||
colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize());
|
colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize());
|
||||||
}
|
}
|
||||||
|
|
||||||
nscoord colGap = GetColumnGap(this, colStyle);
|
nscoord colGap = GetColumnGap(this, colStyle, aReflowInput.ComputedISize());
|
||||||
int32_t numColumns = colStyle->mColumnCount;
|
int32_t numColumns = colStyle->mColumnCount;
|
||||||
|
|
||||||
// If column-fill is set to 'balance', then we want to balance the columns.
|
// If column-fill is set to 'balance', then we want to balance the columns.
|
||||||
|
@ -403,7 +400,7 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext)
|
||||||
// include n-1 column gaps.
|
// include n-1 column gaps.
|
||||||
colISize = iSize;
|
colISize = iSize;
|
||||||
iSize *= colStyle->mColumnCount;
|
iSize *= colStyle->mColumnCount;
|
||||||
nscoord colGap = GetColumnGap(this, colStyle);
|
nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
|
||||||
iSize += colGap * (colStyle->mColumnCount - 1);
|
iSize += colGap * (colStyle->mColumnCount - 1);
|
||||||
// The multiplication above can make 'width' negative (integer overflow),
|
// The multiplication above can make 'width' negative (integer overflow),
|
||||||
// so use std::max to protect against that.
|
// so use std::max to protect against that.
|
||||||
|
@ -424,7 +421,7 @@ nsColumnSetFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
|
||||||
nscoord result = 0;
|
nscoord result = 0;
|
||||||
DISPLAY_PREF_WIDTH(this, result);
|
DISPLAY_PREF_WIDTH(this, result);
|
||||||
const nsStyleColumn* colStyle = StyleColumn();
|
const nsStyleColumn* colStyle = StyleColumn();
|
||||||
nscoord colGap = GetColumnGap(this, colStyle);
|
nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
|
||||||
|
|
||||||
nscoord colISize;
|
nscoord colISize;
|
||||||
if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) {
|
if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) {
|
||||||
|
|
|
@ -4515,68 +4515,44 @@ nsIFrame::InlinePrefISizeData::ForceBreak()
|
||||||
mSkipWhitespace = true;
|
mSkipWhitespace = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
static void
|
static nscoord
|
||||||
AddCoord(const nsStyleCoord& aStyle,
|
ResolveMargin(const nsStyleCoord& aStyle, nscoord aPercentageBasis)
|
||||||
nsIFrame* aFrame,
|
|
||||||
nscoord* aCoord, float* aPercent,
|
|
||||||
bool aClampNegativeToZero)
|
|
||||||
{
|
{
|
||||||
switch (aStyle.GetUnit()) {
|
if (aStyle.GetUnit() == eStyleUnit_Auto) {
|
||||||
case eStyleUnit_Coord: {
|
return nscoord(0);
|
||||||
NS_ASSERTION(!aClampNegativeToZero || aStyle.GetCoordValue() >= 0,
|
|
||||||
"unexpected negative value");
|
|
||||||
*aCoord += aStyle.GetCoordValue();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case eStyleUnit_Percent: {
|
|
||||||
NS_ASSERTION(!aClampNegativeToZero || aStyle.GetPercentValue() >= 0.0f,
|
|
||||||
"unexpected negative value");
|
|
||||||
*aPercent += aStyle.GetPercentValue();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
case eStyleUnit_Calc: {
|
|
||||||
const nsStyleCoord::Calc *calc = aStyle.GetCalcValue();
|
|
||||||
if (aClampNegativeToZero) {
|
|
||||||
// This is far from ideal when one is negative and one is positive.
|
|
||||||
*aCoord += std::max(calc->mLength, 0);
|
|
||||||
*aPercent += std::max(calc->mPercent, 0.0f);
|
|
||||||
} else {
|
|
||||||
*aCoord += calc->mLength;
|
|
||||||
*aPercent += calc->mPercent;
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
default: {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return nsLayoutUtils::ResolveToLength<false>(aStyle, aPercentageBasis);
|
||||||
|
}
|
||||||
|
|
||||||
|
static nscoord
|
||||||
|
ResolvePadding(const nsStyleCoord& aStyle, nscoord aPercentageBasis)
|
||||||
|
{
|
||||||
|
return nsLayoutUtils::ResolveToLength<true>(aStyle, aPercentageBasis);
|
||||||
}
|
}
|
||||||
|
|
||||||
static nsIFrame::IntrinsicISizeOffsetData
|
static nsIFrame::IntrinsicISizeOffsetData
|
||||||
IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
|
IntrinsicSizeOffsets(nsIFrame* aFrame, nscoord aPercentageBasis, bool aForISize)
|
||||||
{
|
{
|
||||||
nsIFrame::IntrinsicISizeOffsetData result;
|
nsIFrame::IntrinsicISizeOffsetData result;
|
||||||
WritingMode wm = aFrame->GetWritingMode();
|
WritingMode wm = aFrame->GetWritingMode();
|
||||||
const nsStyleMargin* styleMargin = aFrame->StyleMargin();
|
const auto& margin = aFrame->StyleMargin()->mMargin;
|
||||||
bool verticalAxis = aForISize == wm.IsVertical();
|
bool verticalAxis = aForISize == wm.IsVertical();
|
||||||
AddCoord(verticalAxis ? styleMargin->mMargin.GetTop()
|
if (verticalAxis) {
|
||||||
: styleMargin->mMargin.GetLeft(),
|
result.hMargin += ResolveMargin(margin.GetTop(), aPercentageBasis);
|
||||||
aFrame, &result.hMargin, &result.hPctMargin,
|
result.hMargin += ResolveMargin(margin.GetBottom(), aPercentageBasis);
|
||||||
false);
|
} else {
|
||||||
AddCoord(verticalAxis ? styleMargin->mMargin.GetBottom()
|
result.hMargin += ResolveMargin(margin.GetLeft(), aPercentageBasis);
|
||||||
: styleMargin->mMargin.GetRight(),
|
result.hMargin += ResolveMargin(margin.GetRight(), aPercentageBasis);
|
||||||
aFrame, &result.hMargin, &result.hPctMargin,
|
}
|
||||||
false);
|
|
||||||
|
|
||||||
const nsStylePadding* stylePadding = aFrame->StylePadding();
|
const auto& padding = aFrame->StylePadding()->mPadding;
|
||||||
AddCoord(verticalAxis ? stylePadding->mPadding.GetTop()
|
if (verticalAxis) {
|
||||||
: stylePadding->mPadding.GetLeft(),
|
result.hPadding += ResolvePadding(padding.GetTop(), aPercentageBasis);
|
||||||
aFrame, &result.hPadding, &result.hPctPadding,
|
result.hPadding += ResolvePadding(padding.GetBottom(), aPercentageBasis);
|
||||||
true);
|
} else {
|
||||||
AddCoord(verticalAxis ? stylePadding->mPadding.GetBottom()
|
result.hPadding += ResolvePadding(padding.GetLeft(), aPercentageBasis);
|
||||||
: stylePadding->mPadding.GetRight(),
|
result.hPadding += ResolvePadding(padding.GetRight(), aPercentageBasis);
|
||||||
aFrame, &result.hPadding, &result.hPctPadding,
|
}
|
||||||
true);
|
|
||||||
|
|
||||||
const nsStyleBorder* styleBorder = aFrame->StyleBorder();
|
const nsStyleBorder* styleBorder = aFrame->StyleBorder();
|
||||||
if (verticalAxis) {
|
if (verticalAxis) {
|
||||||
|
@ -4606,22 +4582,21 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
|
||||||
result.hPadding =
|
result.hPadding =
|
||||||
presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
|
presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
|
||||||
: padding.LeftRight());
|
: padding.LeftRight());
|
||||||
result.hPctPadding = 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
||||||
nsFrame::IntrinsicISizeOffsets()
|
nsFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
|
||||||
{
|
{
|
||||||
return IntrinsicSizeOffsets(this, true);
|
return IntrinsicSizeOffsets(this, aPercentageBasis, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
nsIFrame::IntrinsicISizeOffsetData
|
nsIFrame::IntrinsicISizeOffsetData
|
||||||
nsIFrame::IntrinsicBSizeOffsets()
|
nsIFrame::IntrinsicBSizeOffsets(nscoord aPercentageBasis)
|
||||||
{
|
{
|
||||||
return IntrinsicSizeOffsets(this, false);
|
return IntrinsicSizeOffsets(this, aPercentageBasis, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* virtual */ IntrinsicSize
|
/* virtual */ IntrinsicSize
|
||||||
|
|
|
@ -261,7 +261,8 @@ public:
|
||||||
InlineMinISizeData *aData) override;
|
InlineMinISizeData *aData) override;
|
||||||
virtual void AddInlinePrefISize(nsRenderingContext *aRenderingContext,
|
virtual void AddInlinePrefISize(nsRenderingContext *aRenderingContext,
|
||||||
InlinePrefISizeData *aData) override;
|
InlinePrefISizeData *aData) override;
|
||||||
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
|
IntrinsicISizeOffsetData
|
||||||
|
IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) override;
|
||||||
virtual mozilla::IntrinsicSize GetIntrinsicSize() override;
|
virtual mozilla::IntrinsicSize GetIntrinsicSize() override;
|
||||||
virtual nsSize GetIntrinsicRatio() override;
|
virtual nsSize GetIntrinsicRatio() override;
|
||||||
|
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -25,6 +25,7 @@
|
||||||
|
|
||||||
#include "CaretAssociationHint.h"
|
#include "CaretAssociationHint.h"
|
||||||
#include "FrameProperties.h"
|
#include "FrameProperties.h"
|
||||||
|
#include "LayoutConstants.h"
|
||||||
#include "mozilla/layout/FrameChildList.h"
|
#include "mozilla/layout/FrameChildList.h"
|
||||||
#include "mozilla/Maybe.h"
|
#include "mozilla/Maybe.h"
|
||||||
#include "mozilla/WritingModes.h"
|
#include "mozilla/WritingModes.h"
|
||||||
|
@ -130,30 +131,12 @@ typedef uint32_t nsSplittableType;
|
||||||
#define NS_FRAME_IS_NOT_SPLITTABLE(type)\
|
#define NS_FRAME_IS_NOT_SPLITTABLE(type)\
|
||||||
(0 == ((type) & NS_FRAME_SPLITTABLE))
|
(0 == ((type) & NS_FRAME_SPLITTABLE))
|
||||||
|
|
||||||
#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN
|
|
||||||
|
|
||||||
//----------------------------------------------------------------------
|
//----------------------------------------------------------------------
|
||||||
|
|
||||||
#define NS_SUBTREE_DIRTY(_frame) \
|
#define NS_SUBTREE_DIRTY(_frame) \
|
||||||
(((_frame)->GetStateBits() & \
|
(((_frame)->GetStateBits() & \
|
||||||
(NS_FRAME_IS_DIRTY | NS_FRAME_HAS_DIRTY_CHILDREN)) != 0)
|
(NS_FRAME_IS_DIRTY | NS_FRAME_HAS_DIRTY_CHILDREN)) != 0)
|
||||||
|
|
||||||
/**
|
|
||||||
* Constant used to indicate an unconstrained size.
|
|
||||||
*
|
|
||||||
* @see #Reflow()
|
|
||||||
*/
|
|
||||||
#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE
|
|
||||||
|
|
||||||
#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE
|
|
||||||
#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE
|
|
||||||
// +1 is to avoid clamped huge margin values being processed as auto margins
|
|
||||||
#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1)
|
|
||||||
#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE
|
|
||||||
// NOTE: there are assumptions all over that these have the same value, namely NS_UNCONSTRAINEDSIZE
|
|
||||||
// if any are changed to be a value other than NS_UNCONSTRAINEDSIZE
|
|
||||||
// at least update AdjustComputedHeight/Width and test ad nauseum
|
|
||||||
|
|
||||||
// 1 million CSS pixels less than our max app unit measure.
|
// 1 million CSS pixels less than our max app unit measure.
|
||||||
// For reflowing with an "infinite" available inline space per [css-sizing].
|
// For reflowing with an "infinite" available inline space per [css-sizing].
|
||||||
// (reflowing with an NS_UNCONSTRAINEDSIZE available inline size isn't allowed
|
// (reflowing with an NS_UNCONSTRAINEDSIZE available inline size isn't allowed
|
||||||
|
@ -2050,23 +2033,27 @@ public:
|
||||||
/**
|
/**
|
||||||
* Return the horizontal components of padding, border, and margin
|
* Return the horizontal components of padding, border, and margin
|
||||||
* that contribute to the intrinsic width that applies to the parent.
|
* that contribute to the intrinsic width that applies to the parent.
|
||||||
|
* @param aPercentageBasis the percentage basis to use for padding/margin -
|
||||||
|
* i.e. the Containing Block's inline-size
|
||||||
*/
|
*/
|
||||||
struct IntrinsicISizeOffsetData {
|
struct IntrinsicISizeOffsetData {
|
||||||
nscoord hPadding, hBorder, hMargin;
|
nscoord hPadding, hBorder, hMargin;
|
||||||
float hPctPadding, hPctMargin;
|
|
||||||
|
|
||||||
IntrinsicISizeOffsetData()
|
IntrinsicISizeOffsetData()
|
||||||
: hPadding(0), hBorder(0), hMargin(0)
|
: hPadding(0), hBorder(0), hMargin(0)
|
||||||
, hPctPadding(0.0f), hPctMargin(0.0f)
|
|
||||||
{}
|
{}
|
||||||
};
|
};
|
||||||
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() = 0;
|
virtual IntrinsicISizeOffsetData
|
||||||
|
IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the bsize components of padding, border, and margin
|
* Return the bsize components of padding, border, and margin
|
||||||
* that contribute to the intrinsic width that applies to the parent.
|
* that contribute to the intrinsic width that applies to the parent.
|
||||||
|
* @param aPercentageBasis the percentage basis to use for padding/margin -
|
||||||
|
* i.e. the Containing Block's inline-size
|
||||||
*/
|
*/
|
||||||
IntrinsicISizeOffsetData IntrinsicBSizeOffsets();
|
IntrinsicISizeOffsetData
|
||||||
|
IntrinsicBSizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE);
|
||||||
|
|
||||||
virtual mozilla::IntrinsicSize GetIntrinsicSize() = 0;
|
virtual mozilla::IntrinsicSize GetIntrinsicSize() = 0;
|
||||||
|
|
||||||
|
|
|
@ -138,3 +138,7 @@ support-files = file_taintedfilters_feDisplacementMap-tainted-1.svg file_tainted
|
||||||
support-files = file_scroll_position_restore.html
|
support-files = file_scroll_position_restore.html
|
||||||
[test_scroll_animation_restore.html]
|
[test_scroll_animation_restore.html]
|
||||||
[test_scroll_position_iframe.html]
|
[test_scroll_position_iframe.html]
|
||||||
|
[test_grid_track_sizing_algo_001.html]
|
||||||
|
skip-if = debug == true # the test is slow
|
||||||
|
[test_grid_track_sizing_algo_002.html]
|
||||||
|
skip-if = debug == true # the test is slow
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -17,7 +17,7 @@ table {
|
||||||
<body>
|
<body>
|
||||||
<table>
|
<table>
|
||||||
<tbody><tr>
|
<tbody><tr>
|
||||||
<td colspan="2" style="width: 100%;"><div> </div></td>
|
<td colspan="2"><div> </div></td>
|
||||||
<td>b</td>
|
<td>b</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -65,32 +65,49 @@ b40 {
|
||||||
.h.r {
|
.h.r {
|
||||||
height: 42px;
|
height: 42px;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
/* This margin-left is 20% of 98px-wide grid area */
|
/* 49px is the percentage basis, i.e. the column size */
|
||||||
margin-left: 19.6px;
|
margin-left: calc(0.2 * 49px);
|
||||||
/* This padding-bottom is 10% of 98px wide grid area */
|
padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px);
|
||||||
/* This padding-left is 30% of 98px wide grid area */
|
|
||||||
padding: 1px 3px 9.8px 29.4px;
|
|
||||||
}
|
}
|
||||||
.v.r {
|
.v.r {
|
||||||
height: 42px;
|
height: 42px;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
/* This margin-left is 20% of 54px-wide grid area */
|
/* 27px is the percentage basis, i.e. the column size */
|
||||||
margin-left: 10.8px;
|
margin-left: calc(0.2 * 27px);
|
||||||
/* This padding-bottom is 10% of 54px wide grid area */
|
padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px);
|
||||||
/* This padding-left is 30% of 54px wide grid area */
|
|
||||||
padding: 1px 3px 5.4px 16.2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.r { position:relative; }
|
.r { position:relative; }
|
||||||
|
|
||||||
|
.t4 { width: 49px;
|
||||||
|
height: calc(10px /* item min-height */ +
|
||||||
|
7px /* item margin-top */ +
|
||||||
|
1px /* item padding-top */ +
|
||||||
|
1px /* item border-top */ +
|
||||||
|
calc(0.5 * 49px) /* item margin-bottom */ +
|
||||||
|
calc(0.1 * 49px) /* item padding-bottom */);
|
||||||
|
}
|
||||||
|
|
||||||
.t6 { width:46px; }
|
.t6 { width:46px; }
|
||||||
.t8 { width:118px; height: 102.5px; }
|
.t8 { width: 27px;
|
||||||
|
height: calc(30px /* item min-height */ +
|
||||||
|
7px /* item margin-top */ +
|
||||||
|
3px /* item padding-top */ +
|
||||||
|
1px /* item border-top */ +
|
||||||
|
calc(0.5 * 27px) /* item margin-bottom */ +
|
||||||
|
calc(0.1 * 27px) /* item padding-bottom */);
|
||||||
|
}
|
||||||
|
|
||||||
xx {
|
xx {
|
||||||
display: block;
|
display: block;
|
||||||
background: lime;
|
background: lime;
|
||||||
padding:32px 32px 16px 32px;
|
padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px);
|
||||||
margin: 0 0 32px 16px;
|
margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px);
|
||||||
|
}
|
||||||
|
.t9, .t10 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -100,15 +117,15 @@ xx {
|
||||||
<div class="grid"><span class="h"><x></x></span></div>
|
<div class="grid"><span class="h"><x></x></span></div>
|
||||||
<div class="grid"><span class="h bb"><x></x></span></div>
|
<div class="grid"><span class="h bb"><x></x></span></div>
|
||||||
<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
|
<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
|
||||||
<div class="grid" style="grid:48px / 122px"><span class="h r"><b40></b40></span></div>
|
<div class="grid t4"><span class="h r"><b40></b40></span></div>
|
||||||
<br>
|
<br>
|
||||||
<div class="grid"><span class="v"><x></x></span></div>
|
<div class="grid"><span class="v"><x></x></span></div>
|
||||||
<div class="grid t6"><span class="v bb"><x></x></span></div>
|
<div class="grid"><span class="v bb"><x></x></span></div>
|
||||||
<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
|
<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
|
||||||
<div class="grid t8"><span class="v r"><b40></b40></span></div>
|
<div class="grid t8"><span class="v r"><b40></b40></span></div>
|
||||||
|
|
||||||
<div class="grid"><xx class="v"></xx></div>
|
<div class="grid t9"><xx class="v"></xx></div>
|
||||||
<div class="grid v"><xx class="h"></xx></div>
|
<div class="grid v t10"><xx class="h"></xx></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -36,7 +36,7 @@ var coltest = [
|
||||||
"min-height:40%", "min-height:40%; max-width:30px"
|
"min-height:40%", "min-height:40%; max-width:30px"
|
||||||
];
|
];
|
||||||
var results = [
|
var results = [
|
||||||
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
|
"24px", "24px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px",
|
||||||
"24px", "24px", "24px"
|
"24px", "24px", "24px"
|
||||||
];
|
];
|
||||||
var item_width = [
|
var item_width = [
|
||||||
|
|
|
@ -36,7 +36,7 @@ var rowtest = [
|
||||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||||
];
|
];
|
||||||
var results = [
|
var results = [
|
||||||
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
|
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
|
||||||
];
|
];
|
||||||
var item_height = [
|
var item_height = [
|
||||||
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
||||||
|
|
|
@ -54,9 +54,9 @@ br { clear:both; }
|
||||||
.c10 { grid-template-columns: minmax(10px,0) 1fr; }
|
.c10 { grid-template-columns: minmax(10px,0) 1fr; }
|
||||||
#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
|
#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
|
||||||
|
|
||||||
#percent-border .c100 { grid-template-columns: 111px 0; }
|
#percent-border .c100 { grid-template-columns: 100px 0; }
|
||||||
#percent-border .c100calc100 { grid-template-columns: 100px 11px; }
|
#percent-border .c100calc100 { grid-template-columns: 100px 10px; }
|
||||||
#percent-border .c10 { grid-template-columns: minmax(11px,0) 0; }
|
#percent-border .c10 { grid-template-columns: minmax(10px,0) 0; }
|
||||||
#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
|
#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
|
||||||
#percent-border .c200 { grid-template-columns: 250px; }
|
#percent-border .c200 { grid-template-columns: 250px; }
|
||||||
</style>
|
</style>
|
||||||
|
@ -99,7 +99,7 @@ var grids = [
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid",
|
"grid",
|
||||||
"grid c200",
|
"grid c100",
|
||||||
"grid c10",
|
"grid c10",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
|
@ -110,7 +110,7 @@ var grids = [
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid",
|
"grid",
|
||||||
"grid c200",
|
"grid c100",
|
||||||
"grid c10",
|
"grid c10",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
"grid c100",
|
"grid c100",
|
||||||
|
|
|
@ -36,7 +36,7 @@ var coltest = [
|
||||||
"min-height:40%", "min-height:40%; max-width:30px"
|
"min-height:40%", "min-height:40%; max-width:30px"
|
||||||
];
|
];
|
||||||
var results = [
|
var results = [
|
||||||
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px",
|
"360px", "0px", "0px", "0px", "24px", "360px", "80px", "24px", "20px", "24px",
|
||||||
"6px", "24px", "24px"
|
"6px", "24px", "24px"
|
||||||
];
|
];
|
||||||
var item_width = [
|
var item_width = [
|
||||||
|
|
|
@ -36,7 +36,7 @@ var rowtest = [
|
||||||
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
|
||||||
];
|
];
|
||||||
var results = [
|
var results = [
|
||||||
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
|
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
|
||||||
];
|
];
|
||||||
var item_height = [
|
var item_height = [
|
||||||
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"
|
||||||
|
|
|
@ -17,9 +17,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||||
clear:left;
|
clear:left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
|
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
|
||||||
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
|
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
|
||||||
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
|
.c3 { width:10px; margin: 2px 18px 1px 71px; }
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -52,21 +52,22 @@ x { display:inline-block; width:10px; height:18px; }
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid" style="width:436px">
|
<div class="grid" style="width:436px">
|
||||||
<span class="c1" style="margin-right:41px"><x> </x></span>
|
<span class="c1" style="width:374px; margin-right:41px"><x> </x></span>
|
||||||
<span class="r1" style="margin-left:5px"><x> </x></span>
|
<span class="r1" style="margin-left:5px"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid" style="width:500px;">
|
<div class="grid" style="width:500px;">
|
||||||
<span class="c1" style="min-width:20px;margin-right:448px"><x> </x></span>
|
<span class="c1" style="width:20px;margin-right:448px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid" style="width:583px;">
|
<div class="grid" style="width:583px;">
|
||||||
<span class="c1" style="margin-right:55px"><x> </x></span>
|
<span class="c1" style="width:507px; margin-right:55px"><x> </x></span>
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -74,13 +75,13 @@ x { display:inline-block; width:10px; height:18px; }
|
||||||
<div class="grid" style="width:389px;">
|
<div class="grid" style="width:389px;">
|
||||||
<span class="c1" style="width:100px"><x> </x></span>
|
<span class="c1" style="width:100px"><x> </x></span>
|
||||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid" style="width:389px;">
|
<div class="grid" style="width:389px;">
|
||||||
<span class="c1" style="width:100px"><x> </x></span>
|
<span class="c1" style="width:100px"><x> </x></span>
|
||||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -21,9 +21,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||||
clear:left;
|
clear:left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
|
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
|
||||||
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
|
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
|
||||||
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
|
.c3 { width:10px; margin: 2px 18px 1px 71px; }
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -56,21 +56,22 @@ x { display:inline-block; width:10px; height:18px; }
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
|
||||||
<div class="wrap"><div class="grid" style="width:436px">
|
<div class="wrap"><div class="grid" style="width:436px">
|
||||||
<span class="c1" style="margin-right:41px"><x> </x></span>
|
<span class="c1" style="width:374px; margin-right:41px"><x> </x></span>
|
||||||
<span class="r1" style="margin-left:5px"><x> </x></span>
|
<span class="r1" style="margin-left:5px"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
|
||||||
<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
|
<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
|
||||||
<span class="c1" style="min-width:20px;margin-right:448px"><x> </x></span>
|
<span class="c1" style="width:20px;margin-right:448px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
|
||||||
<div class="wrap"><div class="grid" style="width:583px;">
|
<div class="wrap"><div class="grid" style="width:583px;">
|
||||||
<span class="c1" style="margin-right:55px"><x> </x></span>
|
<span class="c1" style="width:507px; margin-right:55px"><x> </x></span>
|
||||||
<span class="r1"><x> </x></span>
|
<span class="r1"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
@ -78,13 +79,13 @@ x { display:inline-block; width:10px; height:18px; }
|
||||||
<div class="wrap"><div class="grid" style="width:389px;">
|
<div class="wrap"><div class="grid" style="width:389px;">
|
||||||
<span class="c1" style="width:100px"><x> </x></span>
|
<span class="c1" style="width:100px"><x> </x></span>
|
||||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
|
||||||
<div class="wrap"><div class="grid" style="width:389px;">
|
<div class="wrap"><div class="grid" style="width:389px;">
|
||||||
<span class="c1" style="width:100px"><x> </x></span>
|
<span class="c1" style="width:100px"><x> </x></span>
|
||||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -127,10 +127,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
}
|
}
|
||||||
|
|
||||||
.gF {
|
.gF {
|
||||||
grid-template-columns: 22px
|
grid-template-columns: 2px
|
||||||
1px
|
20px
|
||||||
1px
|
2px
|
||||||
auto;
|
0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -69,67 +69,67 @@ a {
|
||||||
|
|
||||||
<div style="float:left">
|
<div style="float:left">
|
||||||
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left" class="maxw">
|
<div style="float:left" class="maxw">
|
||||||
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left" class="minw">
|
<div style="float:left" class="minw">
|
||||||
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left">
|
<div style="float:left">
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
|
|
||||||
<div style="float:left" class="maxw">
|
<div style="float:left" class="maxw">
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left" class="minw">
|
<div style="float:left" class="minw">
|
||||||
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -62,71 +62,71 @@ a {
|
||||||
|
|
||||||
<div style="float:left">
|
<div style="float:left">
|
||||||
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
|
|
||||||
<div style="float:left" class="maxw">
|
<div style="float:left" class="maxw">
|
||||||
<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:35px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:41px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 41px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
|
|
||||||
<div style="float:left" class="minw">
|
<div style="float:left" class="minw">
|
||||||
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left">
|
<div style="float:left">
|
||||||
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
|
|
||||||
<div style="float:left" class="maxw">
|
<div style="float:left" class="maxw">
|
||||||
<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:35px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:40px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:46px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 46px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="float:left" class="minw">
|
<div style="float:left" class="minw">
|
||||||
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -51,8 +51,8 @@ x { display:inline-block; height:10px; width:18px; }
|
||||||
<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div>
|
<div class="grid 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:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
|
||||||
<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width: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:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
|
||||||
<!-- TODO: fails due to broken align:stretch
|
<!-- 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: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 zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div>
|
||||||
|
|
|
@ -65,7 +65,7 @@ br { clear: both; }
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="float">
|
<div class="float">
|
||||||
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
|
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px">
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
|
@ -74,7 +74,7 @@ br { clear: both; }
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="inline-grid">
|
<div class="inline-grid">
|
||||||
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
|
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;">
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
<span><x></x></span>
|
<span><x></x></span>
|
||||||
|
@ -141,12 +141,12 @@ br { clear: both; }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="float" style="margin-top:-50px">
|
<div class="float" style="margin-top:-50px; width:62px">
|
||||||
<div class="grid" style="min-width:300%; grid-gap:15px 15px">
|
<div class="grid" style="padding-left:186px; height:60px; grid-column-gap:calc(186px * 0.2);">
|
||||||
<span><x></x></span>
|
<span style="margin-left:-186px; width:30px"><x></x></span>
|
||||||
<span style="margin-left:31px; width:30px"><x></x></span>
|
<span style="margin-left:-186px; width:30px"><x></x></span>
|
||||||
<span><x></x></span>
|
<span style="margin-left:-186px; width:30px"><x></x></span>
|
||||||
<span style="margin-left:31px; width:30px"><x></x></span>
|
<span style="margin-left:-186px; width:30px"><x></x></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -83,12 +83,16 @@ fill,fit {
|
||||||
|
|
||||||
.zero-progress {
|
.zero-progress {
|
||||||
grid-row-gap: calc(10px - 1%);
|
grid-row-gap: calc(10px - 1%);
|
||||||
grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [c]) [d];
|
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
|
||||||
}
|
}
|
||||||
.w50.zero-progress {
|
.w50.zero-progress {
|
||||||
grid-row-gap: calc(10px - 1%);
|
grid-row-gap: calc(10px - 1%);
|
||||||
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
|
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
|
||||||
}
|
}
|
||||||
|
.mw50.zero-progress {
|
||||||
|
grid-row-gap: calc(10px - 1%);
|
||||||
|
grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d];
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -129,55 +129,55 @@ float { float:left; margin-right:20px; }
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<float>
|
<float>
|
||||||
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
<float>
|
<float>
|
||||||
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x1"><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x1"><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x1"><a></a><b></b><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c1 t1 x1 p1"><a></a><b></b><f></f></div>
|
||||||
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
|
||||||
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div>
|
||||||
<div class="grid c2 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div>
|
||||||
<div class="grid c3 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
|
<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -146,7 +146,7 @@ float { float:left; margin-right:20px; }
|
||||||
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
|
@ -154,23 +154,23 @@ float { float:left; margin-right:20px; }
|
||||||
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
<float>
|
<float>
|
||||||
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -139,8 +139,7 @@ float { float:left; margin-right:20px; }
|
||||||
|
|
||||||
.x2 e { left:23px; width:20px; right:auto; }
|
.x2 e { left:23px; width:20px; right:auto; }
|
||||||
.c2.x2 e { left:20px; }
|
.c2.x2 e { left:20px; }
|
||||||
.t1.c3.x2 e { width:40px; }
|
.t1.c3.x2 e { width:20px; }
|
||||||
.t1.c3.x2 b { width:63px; }
|
|
||||||
.t1.c3.x2 c { width:20px; right:auto;}
|
.t1.c3.x2 c { width:20px; right:auto;}
|
||||||
|
|
||||||
.t2.x5 e { left:23px; width:60px; }
|
.t2.x5 e { left:23px; width:60px; }
|
||||||
|
@ -159,35 +158,35 @@ float { float:left; margin-right:20px; }
|
||||||
<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
|
<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
|
||||||
<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
|
<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><c></c><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
|
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><c></c><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
|
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
|
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
|
||||||
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
<float>
|
<float>
|
||||||
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
|
|
||||||
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
|
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
|
||||||
</float>
|
</float>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -156,32 +156,32 @@ function testGridTemplateColumns(elem, expected) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var a1 = [
|
var a1 = [
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
||||||
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
||||||
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
|
||||||
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
|
||||||
|
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
|
||||||
|
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
|
||||||
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
|
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px 3px"
|
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px"
|
||||||
];
|
];
|
||||||
var a2 = [
|
var a2 = [
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
||||||
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
|
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 3px",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
||||||
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
|
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
||||||
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
|
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
|
||||||
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
|
||||||
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 3px"
|
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
|
||||||
];
|
];
|
||||||
function runTest() {
|
function runTest() {
|
||||||
var t1 = document.querySelectorAll('.t1');
|
var t1 = document.querySelectorAll('.t1');
|
||||||
|
@ -195,7 +195,7 @@ function runTest() {
|
||||||
|
|
||||||
document.documentElement.className='';
|
document.documentElement.className='';
|
||||||
}
|
}
|
||||||
document.addEventListener('MozReftestInvalidate', runTest, false);
|
document.addEventListener('MozReftestInvalidate', runTest);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,144 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Reference: repeat(auto-fit) with removed tracks</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
|
||||||
|
<style type="text/css">
|
||||||
|
html,body {
|
||||||
|
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid: 10px / repeat(5, 30px);
|
||||||
|
grid-auto-columns: 2px;
|
||||||
|
background: lightgrey;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
.distribute {
|
||||||
|
grid-gap: 0;
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
background: blue;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abs {
|
||||||
|
position: absolute;
|
||||||
|
top:0; right:0; bottom:0; left:0;
|
||||||
|
grid-column-end: span 1;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / 3" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / auto" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / 3" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / 2" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / auto" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,160 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Grid Test: repeat(auto-fit) with removed tracks</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
|
||||||
|
<link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
html,body {
|
||||||
|
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid: 10px / repeat(auto-fit, 30px);
|
||||||
|
grid-auto-columns: 2px;
|
||||||
|
background: lightgrey;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
.distribute {
|
||||||
|
grid-gap: 0;
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
background: blue;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abs {
|
||||||
|
position: absolute;
|
||||||
|
top:0; right:0; bottom:0; left:0;
|
||||||
|
grid-column-end: span 1;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 4 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 3"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 4 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 1 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 2"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 2 / 4"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 4 / 5"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<span style="grid-column: 2 / 10" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 4 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 3"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 4 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 1 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 2"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 2 / 4"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
<span style="grid-column: 4 / 5"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 2 / 5" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid distribute">
|
||||||
|
<span style="grid-column: 2 / 10" class="abs"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,116 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Grid Test Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title>
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
width: 600px;
|
||||||
|
background-color: #f00;
|
||||||
|
}
|
||||||
|
.wrapper > * {
|
||||||
|
background-color: #444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.templateFit {
|
||||||
|
grid-template-columns: 10px 10px repeat(auto-fill, 40px);
|
||||||
|
}
|
||||||
|
.templateFixedFit {
|
||||||
|
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px);
|
||||||
|
}
|
||||||
|
.templateFitFixed {
|
||||||
|
grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px;
|
||||||
|
}
|
||||||
|
.templateFixedFitFixed {
|
||||||
|
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
z {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
z::after {
|
||||||
|
content: "Z";
|
||||||
|
}
|
||||||
|
|
||||||
|
y {
|
||||||
|
grid-column: auto;
|
||||||
|
}
|
||||||
|
y::after {
|
||||||
|
content: "Y";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
b {
|
||||||
|
grid-column: 3;
|
||||||
|
}
|
||||||
|
b::after {
|
||||||
|
content: "B";
|
||||||
|
}
|
||||||
|
|
||||||
|
c {
|
||||||
|
grid-column: 4;
|
||||||
|
}
|
||||||
|
c::after {
|
||||||
|
content: "C";
|
||||||
|
}
|
||||||
|
|
||||||
|
d {
|
||||||
|
grid-column: 5;
|
||||||
|
}
|
||||||
|
d::after {
|
||||||
|
content: "D";
|
||||||
|
}
|
||||||
|
|
||||||
|
e {
|
||||||
|
grid-column: 6;
|
||||||
|
}
|
||||||
|
e::after {
|
||||||
|
content: "E";
|
||||||
|
}
|
||||||
|
|
||||||
|
f {
|
||||||
|
grid-column: 7;
|
||||||
|
}
|
||||||
|
f::after {
|
||||||
|
content: "F";
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,135 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title>
|
||||||
|
<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
|
||||||
|
<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
width: 600px;
|
||||||
|
background-color: #f00;
|
||||||
|
grid-auto-columns: 10px;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
}
|
||||||
|
.wrapper > * {
|
||||||
|
background-color: #444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absposchild {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
grid-column-end: span 1;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.templateFit {
|
||||||
|
grid-template-columns: repeat(auto-fit, 40px);
|
||||||
|
}
|
||||||
|
.templateFixedFit {
|
||||||
|
grid-template-columns: 20px repeat(auto-fit, 40px);
|
||||||
|
}
|
||||||
|
.templateFitFixed {
|
||||||
|
grid-template-columns: repeat(auto-fit, 40px) 40px;
|
||||||
|
}
|
||||||
|
.templateFixedFitFixed {
|
||||||
|
grid-template-columns: 20px repeat(auto-fit, 40px) 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
z {
|
||||||
|
grid-column: -18;
|
||||||
|
}
|
||||||
|
z::after {
|
||||||
|
content: "Z";
|
||||||
|
}
|
||||||
|
|
||||||
|
y {
|
||||||
|
grid-column: auto;
|
||||||
|
}
|
||||||
|
y::after {
|
||||||
|
content: "Y";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
b {
|
||||||
|
grid-column: 3;
|
||||||
|
}
|
||||||
|
b::after {
|
||||||
|
content: "B";
|
||||||
|
}
|
||||||
|
|
||||||
|
c {
|
||||||
|
grid-column: 5;
|
||||||
|
}
|
||||||
|
c::after {
|
||||||
|
content: "C";
|
||||||
|
}
|
||||||
|
|
||||||
|
d {
|
||||||
|
grid-column: 7;
|
||||||
|
}
|
||||||
|
d::after {
|
||||||
|
content: "D";
|
||||||
|
}
|
||||||
|
|
||||||
|
e {
|
||||||
|
grid-column: 9;
|
||||||
|
}
|
||||||
|
e::after {
|
||||||
|
content: "E";
|
||||||
|
}
|
||||||
|
|
||||||
|
f {
|
||||||
|
grid-column: 11;
|
||||||
|
}
|
||||||
|
f::after {
|
||||||
|
content: "F";
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
|
||||||
|
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
|
||||||
|
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
|
||||||
|
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
|
||||||
|
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
background: grey;
|
background: grey;
|
||||||
}
|
}
|
||||||
.g1 .d1 {
|
.g1 .d1 {
|
||||||
width: 52px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g2 .d1 {
|
.g2 .d1 {
|
||||||
width: 56px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g2f .d1 {
|
.g2f .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g3 .d1 {
|
.g3 .d1 {
|
||||||
width: 56px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g4 .d1 {
|
.g4 .d1 {
|
||||||
width: 96px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.g4f .d1 {
|
.g4f .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g5 .d1 {
|
.g5 .d1 {
|
||||||
width: 96px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.g6 .d1 {
|
.g6 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g6f .d1 {
|
.g6f .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g7 .d1 {
|
.g7 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g8 .t {
|
.g8 .t {
|
||||||
width: 196px;
|
width: 196px;
|
||||||
|
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
.g9 .d1 {
|
.g9 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.gA .d1 {
|
.gA .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gB .d1 {
|
.gB .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gC .d1 {
|
.gC .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gD .d1 {
|
.gD .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t { grid-column: span 1; border:2px solid; }
|
.t { grid-column: span 1; border:2px solid; }
|
||||||
|
|
|
@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
background: grey;
|
background: grey;
|
||||||
}
|
}
|
||||||
.g1 .d1 {
|
.g1 .d1 {
|
||||||
width: 52px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g2 .d1 {
|
.g2 .d1 {
|
||||||
width: 56px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g2f .d1 {
|
.g2f .d1 {
|
||||||
width: 69px;
|
width: 69px;
|
||||||
}
|
}
|
||||||
.g3 .d1 {
|
.g3 .d1 {
|
||||||
width: 56px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g4 .d1 {
|
.g4 .d1 {
|
||||||
width: 96px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.g4f .d1 {
|
.g4f .d1 {
|
||||||
width: 104px;
|
width: 104px;
|
||||||
}
|
}
|
||||||
.g5 .d1 {
|
.g5 .d1 {
|
||||||
width: 96px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.g6 .d1 {
|
.g6 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g6f .d1 {
|
.g6f .d1 {
|
||||||
width: 89px;
|
width: 89px;
|
||||||
}
|
}
|
||||||
.g7 .d1 {
|
.g7 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.g8 .t {
|
.g8 .t {
|
||||||
width: 196px;
|
width: 196px;
|
||||||
|
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
.g9 .d1 {
|
.g9 .d1 {
|
||||||
width: 69px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
.gA .d1 {
|
.gA .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gB .d1 {
|
.gB .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gC .d1 {
|
.gC .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.gD .d1 {
|
.gD .d1 {
|
||||||
width: 93px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.d2 {
|
.d2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -84,10 +84,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
background: blue;
|
background: blue;
|
||||||
}
|
}
|
||||||
.g1 .d2 {
|
.g1 .d2 {
|
||||||
width: 448px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.g2 .d2 {
|
.g2 .d2 {
|
||||||
width: 444px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.g2f .d2 {
|
.g2f .d2 {
|
||||||
right: auto;
|
right: auto;
|
||||||
|
@ -95,10 +95,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
.g3 .d2 {
|
.g3 .d2 {
|
||||||
width: 444px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.g4 .d2 {
|
.g4 .d2 {
|
||||||
width: 404px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
.g4f .d2 {
|
.g4f .d2 {
|
||||||
right: auto;
|
right: auto;
|
||||||
|
@ -106,10 +106,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
.g5 .d2 {
|
.g5 .d2 {
|
||||||
width: 404px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
.g6 .d2 {
|
.g6 .d2 {
|
||||||
width: 431px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.g6f .d2 {
|
.g6f .d2 {
|
||||||
right: auto;
|
right: auto;
|
||||||
|
@ -117,25 +117,25 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
.g7 .d2 {
|
.g7 .d2 {
|
||||||
width: 431px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.g8 .d2 {
|
.g8 .d2 {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
.g9 .d2 {
|
.g9 .d2 {
|
||||||
width: 431px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
.gA .d2 {
|
.gA .d2 {
|
||||||
width: 407px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
.gB .d2 {
|
.gB .d2 {
|
||||||
width: 407px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
.gC .d2 {
|
.gC .d2 {
|
||||||
width: 407px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
.gD .d2 {
|
.gD .d2 {
|
||||||
width: 407px;
|
width: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t { grid-column: span 1; border:2px solid; }
|
.t { grid-column: span 1; border:2px solid; }
|
||||||
|
|
|
@ -112,9 +112,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
|
||||||
== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
|
== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
|
||||||
== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
|
== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
|
||||||
== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
|
== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
|
||||||
== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
|
# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976
|
||||||
== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
|
== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
|
||||||
== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
|
# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976
|
||||||
== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
|
== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
|
||||||
== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
|
== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
|
||||||
== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
|
== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
|
||||||
|
@ -184,6 +184,8 @@ skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.htm
|
||||||
== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
|
== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
|
||||||
== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
|
== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
|
||||||
== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html
|
== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html
|
||||||
|
== grid-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html
|
||||||
|
== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-ref.html
|
||||||
== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html
|
== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html
|
||||||
== grid-fragmentation-001.html grid-fragmentation-001-ref.html
|
== grid-fragmentation-001.html grid-fragmentation-001-ref.html
|
||||||
== grid-fragmentation-002.html grid-fragmentation-002-ref.html
|
== grid-fragmentation-002.html grid-fragmentation-002-ref.html
|
||||||
|
|
|
@ -13,20 +13,20 @@ div.v, div.h {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed silver;
|
border: 1px dashed silver;
|
||||||
width:92px;
|
width:74px;
|
||||||
height:60px;
|
height:24px;
|
||||||
}
|
}
|
||||||
div.h {
|
div.h {
|
||||||
width:124px;
|
width:62px;
|
||||||
height:98px;
|
height:61.2px;
|
||||||
}
|
}
|
||||||
.h span {
|
.h span {
|
||||||
margin: 7px 13px 62px 25px;
|
margin: 7px 13px 32px 12px;
|
||||||
padding: 1px 3px 12px 37px;
|
padding: 1px 3px 6px 19px;
|
||||||
}
|
}
|
||||||
.v span {
|
.v span {
|
||||||
margin: 7px 13px 30px 12px;
|
margin: 7px 13px 30px 5px;
|
||||||
padding: 1px 3px 6px 18px;
|
padding: 1px 3px 2px 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
|
@ -1499,7 +1499,7 @@ CSS_PROP_COLUMN(
|
||||||
CSS_PROPERTY_PARSE_VALUE |
|
CSS_PROPERTY_PARSE_VALUE |
|
||||||
CSS_PROPERTY_VALUE_NONNEGATIVE,
|
CSS_PROPERTY_VALUE_NONNEGATIVE,
|
||||||
"",
|
"",
|
||||||
VARIANT_HL | VARIANT_NORMAL | VARIANT_CALC,
|
VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC,
|
||||||
nullptr,
|
nullptr,
|
||||||
offsetof(nsStyleColumn, mColumnGap),
|
offsetof(nsStyleColumn, mColumnGap),
|
||||||
eStyleAnimType_Coord)
|
eStyleAnimType_Coord)
|
||||||
|
|
|
@ -3495,7 +3495,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleColumn
|
||||||
|
|
||||||
uint32_t mColumnCount; // [reset] see nsStyleConsts.h
|
uint32_t mColumnCount; // [reset] see nsStyleConsts.h
|
||||||
nsStyleCoord mColumnWidth; // [reset] coord, auto
|
nsStyleCoord mColumnWidth; // [reset] coord, auto
|
||||||
nsStyleCoord mColumnGap; // [reset] coord, normal
|
nsStyleCoord mColumnGap; // [reset] <length-percentage> | normal
|
||||||
|
|
||||||
mozilla::StyleComplexColor mColumnRuleColor; // [reset]
|
mozilla::StyleComplexColor mColumnRuleColor; // [reset]
|
||||||
uint8_t mColumnRuleStyle; // [reset]
|
uint8_t mColumnRuleStyle; // [reset]
|
||||||
|
|
|
@ -1438,7 +1438,7 @@ var gCSSProperties = {
|
||||||
inherited: false,
|
inherited: false,
|
||||||
type: CSS_TYPE_LONGHAND,
|
type: CSS_TYPE_LONGHAND,
|
||||||
initial_values: [ "normal", "1em", "calc(-2em + 3em)" ],
|
initial_values: [ "normal", "1em", "calc(-2em + 3em)" ],
|
||||||
other_values: [ "2px", "4em",
|
other_values: [ "2px", "1em", "4em", "3%", "calc(3%)", "calc(1em - 3%)",
|
||||||
"calc(2px)",
|
"calc(2px)",
|
||||||
"calc(-2px)",
|
"calc(-2px)",
|
||||||
"calc(0px)",
|
"calc(0px)",
|
||||||
|
@ -1448,7 +1448,7 @@ var gCSSProperties = {
|
||||||
"calc(25px*3)",
|
"calc(25px*3)",
|
||||||
"calc(3*25px + 5em)",
|
"calc(3*25px + 5em)",
|
||||||
],
|
],
|
||||||
invalid_values: [ "3%", "-1px", "4" ]
|
invalid_values: [ "-3%", "-1px", "4" ]
|
||||||
},
|
},
|
||||||
"-moz-column-gap": {
|
"-moz-column-gap": {
|
||||||
domProp: "MozColumnGap",
|
domProp: "MozColumnGap",
|
||||||
|
|
|
@ -796,12 +796,12 @@ nsTableCellFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
||||||
nsTableCellFrame::IntrinsicISizeOffsets()
|
nsTableCellFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
|
||||||
{
|
{
|
||||||
IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets();
|
IntrinsicISizeOffsetData result =
|
||||||
|
nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis);
|
||||||
|
|
||||||
result.hMargin = 0;
|
result.hMargin = 0;
|
||||||
result.hPctMargin = 0;
|
|
||||||
|
|
||||||
WritingMode wm = GetWritingMode();
|
WritingMode wm = GetWritingMode();
|
||||||
result.hBorder = GetBorderWidth(wm).IStartEnd(wm);
|
result.hBorder = GetBorderWidth(wm).IStartEnd(wm);
|
||||||
|
|
|
@ -118,7 +118,8 @@ public:
|
||||||
|
|
||||||
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
|
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
|
||||||
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
|
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
|
||||||
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
|
IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis =
|
||||||
|
NS_UNCONSTRAINEDSIZE) override;
|
||||||
|
|
||||||
virtual void Reflow(nsPresContext* aPresContext,
|
virtual void Reflow(nsPresContext* aPresContext,
|
||||||
ReflowOutput& aDesiredSize,
|
ReflowOutput& aDesiredSize,
|
||||||
|
|
|
@ -1564,16 +1564,15 @@ nsTableFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
/* virtual */ nsIFrame::IntrinsicISizeOffsetData
|
||||||
nsTableFrame::IntrinsicISizeOffsets()
|
nsTableFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis)
|
||||||
{
|
{
|
||||||
IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets();
|
IntrinsicISizeOffsetData result =
|
||||||
|
nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis);
|
||||||
|
|
||||||
result.hMargin = 0;
|
result.hMargin = 0;
|
||||||
result.hPctMargin = 0;
|
|
||||||
|
|
||||||
if (IsBorderCollapse()) {
|
if (IsBorderCollapse()) {
|
||||||
result.hPadding = 0;
|
result.hPadding = 0;
|
||||||
result.hPctPadding = 0;
|
|
||||||
|
|
||||||
WritingMode wm = GetWritingMode();
|
WritingMode wm = GetWritingMode();
|
||||||
LogicalMargin outerBC = GetIncludedOuterBCBorder(wm);
|
LogicalMargin outerBC = GetIncludedOuterBCBorder(wm);
|
||||||
|
|
|
@ -324,7 +324,8 @@ public:
|
||||||
// border to the results of these functions.
|
// border to the results of these functions.
|
||||||
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
|
virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override;
|
||||||
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
|
virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override;
|
||||||
virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override;
|
IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis =
|
||||||
|
NS_UNCONSTRAINEDSIZE) override;
|
||||||
|
|
||||||
virtual mozilla::LogicalSize
|
virtual mozilla::LogicalSize
|
||||||
ComputeSize(nsRenderingContext* aRenderingContext,
|
ComputeSize(nsRenderingContext* aRenderingContext,
|
||||||
|
|
Loading…
Reference in New Issue