mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
Update web-platform-tests to revision e87f38097902e16348d4e17f4fe3bc2d0112bff1
This commit is contained in:
WPT Sync Bot
parent
2f8fa32e91
commit
db5631a086
381 changed files with 11610 additions and 4232 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as containing block.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as parent.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-paint-positioned-children-001-ref.html">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
border: 2px solid black;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned children writing modes reference test</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-children-writing-modes-001-ref.html">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items don't avoid auto-fit tracks to collapse.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks tracks before the first in-flow item also collapse and positioned items don't have any impact.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items will use the area defined by the in-flow items, ignoring any collapsed track.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items ignore collapsed gaps.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items ignore collapsed gaps, both before and after the first in-flow item .">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items ignore collapsed gaps but consider those between in-flow items inside their grid area.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<meta name="assert" content="This test checks that positioned items ignore collapsed gaps even with non-empty tracks before and after.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.container {
|
||||
width: 250px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-items-background-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the background of positioned items is painted in the right position">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-items-background-rtl-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the background of positioned items is painted in the right position using RTL direction.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment in RTL.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps in RTL.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
|
||||
<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as 'auto'.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned grid items can be placed directly on the padding.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as 'auto'.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
|
||||
<meta name="assert" content="This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the different size options for absolutely positioned grid items.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned items shouldn't create implicit tracks on the grid.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<title>CSS Grid Layout Test: Positioned grid items sizing reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<meta name="flags" content="ahem">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="match" href="positioned-grid-items-sizing-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the sizing of positioned grid items without specific dimensions or offsets is equivalent to the size of regular items.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
gap: calc(15% + 7px) calc(10px + 5%);
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="help" href0"https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
grid-gap: calc(15% + 7px) calc(10px + 5%);
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
|
||||
<meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
width: fit-content;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="match" href="grid-template-columns-fit-content-001-ref.html">
|
||||
<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-columns, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
justify-content: start;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="match" href="grid-template-rows-fit-content-001-ref.html">
|
||||
<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-rows, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
justify-content: start;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,277 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.firstRowFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlyFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.firstRowSecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlySecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.secondRowFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlyFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.secondRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlySecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.endSecondRowEndSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column-end: 3;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.thirdRowSecondColumn {
|
||||
background-color: red;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.firstRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowThirdColumn {
|
||||
background-color: navy;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstRowFourthColumn {
|
||||
background-color: green;
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowFourthColumn {
|
||||
background-color: pink;
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstAutoRowSecondAutoColumn {
|
||||
grid-row: 1 / auto;
|
||||
grid-column: 2 / auto;
|
||||
}
|
||||
|
||||
.autoLastRowAutoLastColumn {
|
||||
grid-row: auto / -1;
|
||||
grid-column: auto / -1;
|
||||
}
|
||||
|
||||
.autoSecondRowAutoFirstColumn {
|
||||
grid-row: auto / 2;
|
||||
grid-column: auto / 1;
|
||||
}
|
||||
|
||||
.firstRowBothColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.secondRowBothColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.bothRowSecondColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.bothRowBothColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Auto column / row. */
|
||||
.autoRowAutoColumn {
|
||||
background-color: pink;
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowAutoColumn {
|
||||
background-color: blue;
|
||||
grid-column: auto;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowAutoColumn {
|
||||
background-color: purple;
|
||||
grid-column: auto;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.thirdRowAutoColumn {
|
||||
background-color: navy;
|
||||
grid-column: auto;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumn {
|
||||
background-color: lime;
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowAutoColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumn {
|
||||
background-color: aqua;
|
||||
grid-column: auto;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumnSpanning3 {
|
||||
background-color: olive;
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning3AutoColumnSpanning2 {
|
||||
background-color: indigo;
|
||||
grid-column: span 2;
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumnSpanning2 {
|
||||
background-color: olive;
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowSpanning2AutoColumn {
|
||||
background-color: maroon;
|
||||
grid-column: auto;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secondRowSpanning2AutoColumn {
|
||||
background-color: olive;
|
||||
grid-column: auto;
|
||||
grid-row: 2 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Grid element flow. */
|
||||
.gridAutoFlowColumnSparse {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gridAutoFlowColumnDense {
|
||||
grid-auto-flow: column dense;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowSparse {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowDense {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
|
||||
.constrainedContainer {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.sizedToGridArea {
|
||||
font: 10px/1 Ahem;
|
||||
/* Make us fit our grid area. */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.verticalRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.verticalLR {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.horizontalTB {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.directionRTL {
|
||||
direction: rtl;
|
||||
}
|
||||
.directionLTR {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
border: solid thick;
|
||||
grid: 10px 10px / minmax(auto, 0px);
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: solid 5px;
|
||||
grid: 10px 10px / minmax(auto, 0px);
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
border: solid thick;
|
||||
grid: 10px 10px / minmax(auto, 0px);
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: solid 5px;
|
||||
grid: 10px 10px / minmax(auto, 0px);
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-lr.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
border: solid thick;
|
||||
grid: minmax(auto, 0px) / 10px 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-lr.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: solid 5px;
|
||||
grid: minmax(auto, 0px) / 10px 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-rl.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
border: solid thick;
|
||||
grid: minmax(auto, 0px) / 10px 10px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-rl.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
border: solid 5px;
|
||||
grid: minmax(auto, 0px) / 10px 10px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.grid > div:nth-child(1) { background: cyan; }
|
||||
.grid > div:nth-child(2) { background: magenta; }
|
||||
|
||||
.width60 { width: 60px; }
|
||||
.minWidth60 { min-width: 60px; }
|
||||
|
||||
.marginLeft5 { margin-left: 5px; }
|
||||
.marginRight10 { margin-right: 10px; }
|
||||
|
||||
.paddingLeft6 { padding-left: 6px; }
|
||||
.paddingRight3 { padding-right: 3px; }
|
||||
|
||||
.borderLeft2, .borderRight4 { border: solid yellow 0px; }
|
||||
.borderLeft2 { border-left-width: 2px; }
|
||||
.borderRight4 { border-right-width: 4px; }
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<h3>Direction LTR</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<pre>Item width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="width60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="70">
|
||||
<div class="minWidth60" data-expected-width="60"></div>
|
||||
<div data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="width60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="75">
|
||||
<div class="minWidth60 marginLeft5" data-expected-width="60"></div>
|
||||
<div data-expected-width="65"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="width60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="80">
|
||||
<div class="minWidth60 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="70"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="85">
|
||||
<div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
|
||||
<div data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="width60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="73">
|
||||
<div class="minWidth60 paddingRight3" data-expected-width="63"></div>
|
||||
<div data-expected-width="63"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & padding-left: 6px; & padding-right: 3px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="79">
|
||||
<div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
|
||||
<div data-expected-width="69"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="width60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="72">
|
||||
<div class="minWidth60 borderLeft2" data-expected-width="62"></div>
|
||||
<div data-expected-width="62"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="width60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="74">
|
||||
<div class="minWidth60 borderRight4" data-expected-width="64"></div>
|
||||
<div data-expected-width="64"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="76">
|
||||
<div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
|
||||
<div data-expected-width="66"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item min-width: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre>
|
||||
|
||||
<div class="grid directionRTL" data-expected-width="100">
|
||||
<div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
|
||||
<div data-expected-width="90"></div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
|
||||
<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
border: solid thick;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
|
||||
<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
border: solid thick;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
|
||||
<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
border: solid thick;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
|
||||
<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes and spaning items.">
|
||||
<link rel="stylesheet" href="../support/grid.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
border: solid thick;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,277 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.firstRowFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlyFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.firstRowSecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlySecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.secondRowFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlyFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.secondRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlySecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.endSecondRowEndSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column-end: 3;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.thirdRowSecondColumn {
|
||||
background-color: red;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.firstRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowThirdColumn {
|
||||
background-color: navy;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstRowFourthColumn {
|
||||
background-color: green;
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowFourthColumn {
|
||||
background-color: pink;
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstAutoRowSecondAutoColumn {
|
||||
grid-row: 1 / auto;
|
||||
grid-column: 2 / auto;
|
||||
}
|
||||
|
||||
.autoLastRowAutoLastColumn {
|
||||
grid-row: auto / -1;
|
||||
grid-column: auto / -1;
|
||||
}
|
||||
|
||||
.autoSecondRowAutoFirstColumn {
|
||||
grid-row: auto / 2;
|
||||
grid-column: auto / 1;
|
||||
}
|
||||
|
||||
.firstRowBothColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.secondRowBothColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.bothRowSecondColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.bothRowBothColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Auto column / row. */
|
||||
.autoRowAutoColumn {
|
||||
background-color: pink;
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowAutoColumn {
|
||||
background-color: blue;
|
||||
grid-column: auto;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowAutoColumn {
|
||||
background-color: purple;
|
||||
grid-column: auto;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.thirdRowAutoColumn {
|
||||
background-color: navy;
|
||||
grid-column: auto;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumn {
|
||||
background-color: lime;
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowAutoColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumn {
|
||||
background-color: aqua;
|
||||
grid-column: auto;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumnSpanning3 {
|
||||
background-color: olive;
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning3AutoColumnSpanning2 {
|
||||
background-color: indigo;
|
||||
grid-column: span 2;
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumnSpanning2 {
|
||||
background-color: olive;
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowSpanning2AutoColumn {
|
||||
background-color: maroon;
|
||||
grid-column: auto;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secondRowSpanning2AutoColumn {
|
||||
background-color: olive;
|
||||
grid-column: auto;
|
||||
grid-row: 2 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Grid element flow. */
|
||||
.gridAutoFlowColumnSparse {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gridAutoFlowColumnDense {
|
||||
grid-auto-flow: column dense;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowSparse {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowDense {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
|
||||
.constrainedContainer {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.sizedToGridArea {
|
||||
font: 10px/1 Ahem;
|
||||
/* Make us fit our grid area. */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.verticalRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.verticalLR {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.horizontalTB {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.directionRTL {
|
||||
direction: rtl;
|
||||
}
|
||||
.directionLTR {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
|
||||
<meta name="assert" content="The test checks that grid item should ignore grid container's first-letter pseudo-element.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
body { line-height: 20px; }
|
||||
.grid-first-letter::first-letter { line-height: 100px; color: red; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
|
||||
<meta name="assert" content="The test checks that grid item should ignore grid container's first-line pseudo-element.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
body { line-height: 20px; }
|
||||
.grid-first-line::first-line { line-height: 100px; }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
|
||||
<meta name="assert" content="The test checks that grid items accept first-letter pseudo-element.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.item::first-letter { line-height: 100px; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
|
||||
<meta name="assert" content="The test checks that grid items accept first-line pseudo-element.">
|
||||
<link href="../support/grid.css" rel="stylesheet">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.item::first-line { line-height: 100px; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,277 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.firstRowFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlyFirstColumn {
|
||||
background-color: blue;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.firstRowSecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.onlyFirstRowOnlySecondColumn {
|
||||
background-color: lime;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.secondRowFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlyFirstColumn {
|
||||
background-color: purple;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.secondRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.onlySecondRowOnlySecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.endSecondRowEndSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column-end: 3;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.thirdRowSecondColumn {
|
||||
background-color: red;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.firstRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowThirdColumn {
|
||||
background-color: navy;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstRowFourthColumn {
|
||||
background-color: green;
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowFourthColumn {
|
||||
background-color: pink;
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.firstAutoRowSecondAutoColumn {
|
||||
grid-row: 1 / auto;
|
||||
grid-column: 2 / auto;
|
||||
}
|
||||
|
||||
.autoLastRowAutoLastColumn {
|
||||
grid-row: auto / -1;
|
||||
grid-column: auto / -1;
|
||||
}
|
||||
|
||||
.autoSecondRowAutoFirstColumn {
|
||||
grid-row: auto / 2;
|
||||
grid-column: auto / 1;
|
||||
}
|
||||
|
||||
.firstRowBothColumn {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.secondRowBothColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.bothRowSecondColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.bothRowBothColumn {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Auto column / row. */
|
||||
.autoRowAutoColumn {
|
||||
background-color: pink;
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowAutoColumn {
|
||||
background-color: blue;
|
||||
grid-column: auto;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.secondRowAutoColumn {
|
||||
background-color: purple;
|
||||
grid-column: auto;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.thirdRowAutoColumn {
|
||||
background-color: navy;
|
||||
grid-column: auto;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumn {
|
||||
background-color: lime;
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumn {
|
||||
background-color: orange;
|
||||
grid-column: 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowAutoColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumn {
|
||||
background-color: aqua;
|
||||
grid-column: auto;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning2AutoColumnSpanning3 {
|
||||
background-color: olive;
|
||||
grid-column: span 3;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.autoRowSpanning3AutoColumnSpanning2 {
|
||||
background-color: indigo;
|
||||
grid-column: span 2;
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.autoRowFirstColumnSpanning2 {
|
||||
background-color: maroon;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.autoRowSecondColumnSpanning2 {
|
||||
background-color: olive;
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.firstRowSpanning2AutoColumn {
|
||||
background-color: maroon;
|
||||
grid-column: auto;
|
||||
grid-row: 1 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.secondRowSpanning2AutoColumn {
|
||||
background-color: olive;
|
||||
grid-column: auto;
|
||||
grid-row: 2 / span 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Grid element flow. */
|
||||
.gridAutoFlowColumnSparse {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gridAutoFlowColumnDense {
|
||||
grid-auto-flow: column dense;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowSparse {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.gridAutoFlowRowDense {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
|
||||
.constrainedContainer {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.sizedToGridArea {
|
||||
font: 10px/1 Ahem;
|
||||
/* Make us fit our grid area. */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.verticalRL {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.verticalLR {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.horizontalTB {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.directionRTL {
|
||||
direction: rtl;
|
||||
}
|
||||
.directionLTR {
|
||||
direction: ltr;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue