mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 9a6026305062c90d84a567d81434010dde6c6c22
This commit is contained in:
WPT Sync Bot
parent
d77bf218fa
commit
906e45aab0
210 changed files with 6028 additions and 383 deletions
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR.area, .verticalRL.area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.grid { grid: 125px / 60px 60px 75px 100px; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block1 > .area:nth-child(1) { height: 60px; }
|
||||
.block1 > .area:nth-child(2) { height: 60px; }
|
||||
.block2 > .area:nth-child(1) { height: 75px; }
|
||||
.block2 > .area:nth-child(2) { height: 100px; }
|
||||
.block1 { float: left; }
|
||||
.block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-002-b-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row; }
|
||||
.grid { grid: 60px 60px 75px 100px / 125px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block1 > .area:nth-child(1) { height: 60px; }
|
||||
.block1 > .area:nth-child(2) { height: 60px; }
|
||||
.block2 > .area:nth-child(1) { height: 75px; }
|
||||
.block2 > .area:nth-child(2) { height: 100px; }
|
||||
.block1 { float: left; }
|
||||
.block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 175px / 60px 60px 75px 100px; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area:nth-child(1) { width: 70px; }
|
||||
.area:nth-child(2) { width: 80px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.area { display: inline-block; }
|
||||
.block.verticalLR > .area { float: left; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block {
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
}
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 100px / 70px 80px 100px 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
|
||||
.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 75px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 125px / 60px 75px 75px 125px; }
|
||||
.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
|
||||
</style>
|
||||
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR.area, .verticalRL.area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 140px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.grid { grid: 60px 60px 75px 100px / 140px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block.verticalLR > .area { float: left; }
|
||||
.area:nth-child(1) { width: 65px; }
|
||||
.area:nth-child(2) { width: 75px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block { height: 100px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 65px 75px 100px 125px / 100px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
|
||||
.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 65px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-007-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 65px 60px 100px 100px / 150px; }
|
||||
.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.top { vertical-align: top; }
|
||||
.item { display: inline-block; }
|
||||
.item.verticalLR, .item.verticalRL { margin: 10px 6px 4px 12px; }
|
||||
.item.horizontalTB { margin: 10px 6px 4px 0px; }
|
||||
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block"><div class="item">É</div><div class="item verticalLR top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block"><div class="item">É</div><div class="item verticalRL top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item verticalLR extraTopPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item verticalRL extraTopPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.top { vertical-align: top; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block"><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block" ><div class="item verticalLR extraTopPadding top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR extraBottomPadding top">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block"><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div></div>
|
||||
<div class="block" ><div class="item verticalRL extraTopPadding top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL extraBottomPadding top">É</div><div class="item verticalRL top">É</div></div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalLR extraTopPadding">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR extraBottomPadding">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalRL extraTopPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL extraBottomPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.item { display: inline; }
|
||||
.left { vertical-align: bottom; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
|
||||
<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.column { grid-auto-flow: row; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
position: relative;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.inline { display: inline-block; }
|
||||
.item { display: inline-block; }
|
||||
.bottom { vertical-align: bottom; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalLR extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalRL extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR extraLeftPadding">É</div>
|
||||
<div class="item verticalLR extraRightPadding ">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalRL extraLeftPadding">É</div>
|
||||
<div class="item verticalRL extraRightPadding ">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.block1, .block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-007-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR extraRightPadding">É</div>
|
||||
<div class="item verticalLR extraLeftPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.bottom { vertical-align: bottom; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item bottom horizontalTB">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item bottom horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraLeftPadding">É</div>
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { float: left; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraLeftPadding">É</div>
|
||||
<div class="item horizontalTB extraRightPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block"><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div></div>
|
||||
<div class="block"><div class="item top verticalLR extraTopPadding">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div><div class="item top verticalLR">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item extraTopPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
|
||||
.item.horizontalTB { margin: 10px 6px 4px 0px; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block"><div class="item top verticalLR">É</div><div class="item">É</div><div class="item top verticalLR">É</div><div class="item">É</div></div>
|
||||
<div class="block"><div class="item top verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item top verticalLR">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item extraTopPadding">É</div>
|
||||
<div class="item horizontalTB extraBottomPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalLR contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraBottomPadding">É</div>
|
||||
<div class="item horizontalTB extraTopPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.block1, .block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-lr-007-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalLR contentStart itemsBaseline">
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalRL"><div class="item top horizontalTB">É</div><div class="item">É</div><div class="item top horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item top horizontalTB">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraLeftPadding">É</div>
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block verticalRL"><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div></div>
|
||||
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">É</div><div class="item top horizontalTB extraRightPadding">É</div><div class="item top horizontalTB">É</div><div class="item top horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraLeftPadding">É</div>
|
||||
<div class="item horizontalTB extraRightPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block directionRTL"><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div></div>
|
||||
<div class="block directionRTL"><div class="item top verticalRL extraBottomPadding">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div><div class="item top verticalRL">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.top { vertical-align: top; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block directionRTL"><div class="item top verticalRL">É</div><div class="item">É</div><div class="item top verticalRL">É</div><div class="item">É</div></div>
|
||||
<div class="block directionRTL"><div class="item top verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item top verticalRL">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item extraTopPadding">É</div>
|
||||
<div class="item horizontalTB extraBottomPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block directionRTL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block directionRTL"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
<div class="block grid column verticalRL contentStart itemsBaseline">
|
||||
<div class="item horizontalTB extraBottomPadding">É</div>
|
||||
<div class="item horizontalTB extraTopPadding">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
<div class="item horizontalTB">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.block1, .block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalRL"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-vertical-rl-007-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row verticalRL contentStart itemsBaseline">
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: automatic minimum for items with instrinsic aspect ratios</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
|
||||
<meta name="assert" content="Check how min-width|height:auto is computed for items with intrinsic aspect ratios.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
border: 5px solid orange;
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.container')">
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="container min-content" data-expected-width="60"
|
||||
data-expected-height="35">
|
||||
<img src="/images/green-100x50.png" style="height: 25px;"
|
||||
data-expected-width="50" data-expected-height="25"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="150"
|
||||
data-expected-height="80">
|
||||
<img src="/images/green-100x50.png" style="min-height: 70px;"
|
||||
data-expected-width="140" data-expected-height="70"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="90"
|
||||
data-expected-height="50">
|
||||
<img src="/images/green-100x50.png" style="max-height: 40px;"
|
||||
data-expected-width="80" data-expected-height="40"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="70"
|
||||
data-expected-height="40">
|
||||
<img src="/images/green-100x50.png" style="height: 25px; min-height: 30px;"
|
||||
data-expected-width="60" data-expected-height="30"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="30"
|
||||
data-expected-height="20">
|
||||
<img src="/images/green-100x50.png" style="height: 25px; max-height: 10px;"
|
||||
data-expected-width="20" data-expected-height="10"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="50"
|
||||
data-expected-height="35">
|
||||
<img src="/images/green-100x50.png" style="height: 25px; max-width: 40px;"
|
||||
data-expected-width="40" data-expected-height="25"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="60"
|
||||
data-expected-height="40">
|
||||
<img src="/images/green-100x50.png"
|
||||
style="height: 25px; min-height: 30px; max-width: 50px;"
|
||||
data-expected-width="50" data-expected-height="30"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="60"
|
||||
data-expected-height="35">
|
||||
<img src="/images/green-100x50.png" style="width: 50px;"
|
||||
data-expected-width="50" data-expected-height="25"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="70"
|
||||
data-expected-height="40">
|
||||
<img src="/images/green-100x50.png" style="max-width: 60px;"
|
||||
data-expected-width="60" data-expected-height="30"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="130"
|
||||
data-expected-height="70">
|
||||
<img src="/images/green-100x50.png" style="min-width: 120px;"
|
||||
data-expected-width="120" data-expected-height="60"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="90"
|
||||
data-expected-height="50">
|
||||
<img src="/images/green-100x50.png" style="width: 60px; min-width: 80px;"
|
||||
data-expected-width="80" data-expected-height="40"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="34"
|
||||
data-expected-height="22">
|
||||
<img src="/images/green-100x50.png" style="width: 24px; max-width: 40px;"
|
||||
data-expected-width="24" data-expected-height="12"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="130"
|
||||
data-expected-height="35">
|
||||
<img src="/images/green-100x50.png" style="width: 120px; max-height: 25px;"
|
||||
data-expected-width="120" data-expected-height="25"/>
|
||||
</div>
|
||||
|
||||
<div class="container min-content" data-expected-width="35"
|
||||
data-expected-height="110">
|
||||
<img src="/images/green-100x50.png" style="width: 25px; min-height: 100px;"
|
||||
data-expected-width="25" data-expected-height="100"/>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.grid');">
|
||||
<body>
|
||||
<div class="grid min-content" data-expected-width="100" data-expected-height="100">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content scroll" data-expected-width="115" data-expected-height="115">
|
||||
<div class="grid min-content scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin scroll" data-expected-width="115" data-expected-height="115">
|
||||
<div class="grid min-content margin scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -74,11 +74,11 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content border scroll" data-expected-width="125" data-expected-height="125">
|
||||
<div class="grid min-content border scroll" data-width-without-scrollbar="110" data-height-without-scrollbar="110">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content padding scroll" data-expected-width="155" data-expected-height="155">
|
||||
<div class="grid min-content padding scroll" data-width-without-scrollbar="140" data-height-without-scrollbar="140">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,20 +86,54 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin border scroll" data-expected-width="125" data-expected-height="125">
|
||||
<div class="grid min-content margin border scroll" data-width-without-scrollbar="110" data-height-without-scrollbar="110">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin padding scroll" data-expected-width="155" data-expected-height="155">
|
||||
<div class="grid min-content margin padding scroll" data-width-without-scrollbar="140" data-height-without-scrollbar="140">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content border padding scroll" data-expected-width="165" data-expected-height="165">
|
||||
<div class="grid min-content border padding scroll" data-width-without-scrollbar="150" data-height-without-scrollbar="150">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin border padding scroll" data-expected-width="165" data-expected-height="165">
|
||||
<div class="grid min-content margin border padding scroll" data-width-without-scrollbar="150" data-height-without-scrollbar="150">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<!-- This div is only for measuring scrollbar size -->
|
||||
<div id="measure" style="overflow: scroll;">
|
||||
<div style="min-height: 300px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var measure = document.getElementById('measure');
|
||||
var scrollbarWidth = measure.offsetWidth - measure.clientWidth;
|
||||
var scrollbarHeight = measure.offsetHeight - measure.clientHeight;
|
||||
|
||||
// Here are the data-width-without-scrollbar (and height) attributes of all
|
||||
// elements that have the "scroll" class. Things that contribute to the expected
|
||||
// sizes are:
|
||||
//
|
||||
// - width:
|
||||
// padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth.
|
||||
//
|
||||
// - height:
|
||||
// padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight.
|
||||
//
|
||||
// The data-expected-width (and height) attributes are dynamically set to the elements
|
||||
// so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way.
|
||||
var elements = document.getElementsByClassName("scroll");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
const expectedWidth = parseInt(elements[i].getAttribute("data-width-without-scrollbar"));
|
||||
const expectedHeight = parseInt(elements[i].getAttribute("data-height-without-scrollbar"));
|
||||
elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
|
||||
elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
|
||||
}
|
||||
|
||||
checkLayout('.grid');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: Intrinsic logical width with scrollbars</title>
|
||||
<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com">
|
||||
<link rel="issue" href="https://codereview.chromium.org/535913002"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/>
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
|
||||
<link rel="match" href="../reference/grid-container-scrollbars-sizing-002-ref.html">
|
||||
<meta name="assert" content="This test ensures that the grid container considers the scrollbars when computing the intrinsic logical widths."/>
|
||||
|
||||
<style>
|
||||
.grid, .inline-grid {
|
||||
overflow: scroll;
|
||||
}
|
||||
.gridItem {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class='grid fit-content'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='grid fit-content' style='overflow-y: hidden'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='inline-grid fit-content'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='inline-grid fit-content' style='overflow-y: hidden'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: automatic minimum in 'auto' rows</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287">
|
||||
<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' rows.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
.grid { font: 10px/1 Ahem; }
|
||||
|
||||
.minHeight10 { min-height: 10px; }
|
||||
.minHeight20 { min-height: 20px; }
|
||||
.minHeight30 { min-height: 30px; }
|
||||
.minHeight40 { min-height: 40px; }
|
||||
.minHeight50 { min-height: 50px; }
|
||||
.minHeight60 { min-height: 60px; }
|
||||
.minHeight70 { min-height: 70px; }
|
||||
.minHeight90 { min-height: 90px; }
|
||||
.minHeightMaxContent { min-height: max-content; }
|
||||
|
||||
.height30 { height: 30px; }
|
||||
.height50 { height: 50px; }
|
||||
.height60 { height: 60px; }
|
||||
.height200 { height: 200px; }
|
||||
|
||||
.border5 { border: 5px solid #abc; }
|
||||
.padding8 { padding: 8px 0px; }
|
||||
|
||||
/* All these 4 cases are equivalent. We use them interchangeably. */
|
||||
.gridAuto { grid-template-rows: auto; }
|
||||
.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
|
||||
.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); }
|
||||
.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); }
|
||||
|
||||
/* All these 3 cases are equivalent. We use them interchangeably. */
|
||||
.gridAutoAndAuto { grid-template-rows: auto auto; }
|
||||
.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
|
||||
.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div class="grid gridAuto constrainedContainer" id="gridAuto">
|
||||
<div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
|
||||
<div class="firstRowFirstColumn minHeight40">XX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
|
||||
<div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
|
||||
<div class="firstRowFirstColumn minHeight20 height30"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
|
||||
<div class="firstRowFirstColumn minHeight60">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems">
|
||||
<div class="firstRowFirstColumn minHeight60">X<br>X</div>
|
||||
<div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div>
|
||||
<div class="firstRowAutoColumn minConstrainedContainer height50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight">
|
||||
<div class="firstRowFirstColumn height30">X<br>X</div>
|
||||
<div class="firstRowSecondColumn minHeight50"></div>
|
||||
<div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight">
|
||||
<div class="firstRowFirstColumn minHeight30">X<br>X</div>
|
||||
<div class="firstRowSecondColumn height60">XX</div>
|
||||
<div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
|
||||
<div class="firstRowFirstColumn height200"></div>
|
||||
<div class="secondRowFirstColumn height50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
|
||||
<div class="firstRowFirstColumn">XX XX</div>
|
||||
<div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
|
||||
<div class="bothRowSecondColumn minHeight60">XX XX XX</div>
|
||||
<div class="firstRowFirstColumn">X X X X</div>
|
||||
<div class="firstRowFirstColumn">XX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
|
||||
<div class="secondRowFirstColumn">X XXX XX</div>
|
||||
<div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
|
||||
<div class="bothRowSecondColumn minHeight70">XX XX XX</div>
|
||||
<div class="bothRowFirstColumn">XXXXX X XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMinMaxAutoMaxContentAndAuto"
|
||||
id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
|
||||
<div class="secondRowFirstColumn minHeight60">X XXX XX</div>
|
||||
<div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div>
|
||||
<div class="firstRowFirstColumn">XX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMinMaxAutoMaxContentAndAuto"
|
||||
id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
|
||||
<div class="bothRowSecondColumn">XX XX XX XX</div>
|
||||
<div class="firstRowFirstColumn minHeight40">XXX</div>
|
||||
<div class="bothRowFirstColumn minHeight90">X XX XXX</div>
|
||||
<div class="secondRowFirstColumn">X XX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoWithFixedHeightChild">
|
||||
<div class="firstRowFirstColumn height60">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
|
||||
<div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
|
||||
<div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
|
||||
<div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
|
||||
<div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
|
||||
<div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
|
||||
<div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
|
||||
<div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
|
||||
<div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
|
||||
<div class="firstRowFirstColumn border5">XX<br>XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
|
||||
<div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
|
||||
<div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
|
||||
<div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
|
||||
<div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding">
|
||||
<div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function testGridRowsValues(id, computedRowValue)
|
||||
{
|
||||
assert_equals(window.getComputedStyle(document.getElementById(id))
|
||||
.getPropertyValue('grid-template-rows')", computedRowValue);
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
document.fonts.ready.then(() => {
|
||||
test(() => {
|
||||
testGridRowsValues('gridAuto', '40px');
|
||||
testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px');
|
||||
testGridRowsValues('gridMinMaxAutoAuto', '40px');
|
||||
testGridRowsValues('gridMinMaxAutoMaxContent', '30px');
|
||||
testGridRowsValues('gridMinMaxMinContentAuto', '60px');
|
||||
testGridRowsValues('gridAutoMultipleItems', '60px');
|
||||
testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px');
|
||||
testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px');
|
||||
testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px');
|
||||
}, 'Check that min-height is honored when sizing auto rows.');
|
||||
test(() => {
|
||||
testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px');
|
||||
testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px');
|
||||
testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px');
|
||||
testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px');
|
||||
testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px');
|
||||
testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px');
|
||||
}, 'Check that min-height is honored when sizing auto rows and spanning grid items.');
|
||||
test(() => {
|
||||
testGridRowsValues('gridAutoWithFixedHeightChild', '60px');
|
||||
testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px');
|
||||
testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px');
|
||||
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px');
|
||||
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px');
|
||||
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px');
|
||||
}, 'Check the interactions between height and min-height and auto tracks.');
|
||||
test(() => {
|
||||
testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px');
|
||||
testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px');
|
||||
testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px');
|
||||
testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px');
|
||||
testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px');
|
||||
testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px');
|
||||
testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px');
|
||||
testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px');
|
||||
testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px');
|
||||
}, 'Check that borders and paddings are considering when computing min sizes.');
|
||||
done();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.grid {
|
||||
display: block;
|
||||
background-color: grey;
|
||||
overflow: scroll;
|
||||
}
|
||||
.inline-grid {
|
||||
display: inline-block;
|
||||
background-color: grey;
|
||||
overflow: scroll;
|
||||
}
|
||||
.gridItem {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
.fit-content {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class='grid fit-content'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='grid fit-content' style='overflow-y: hidden'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='inline-grid fit-content'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
<div class='inline-grid fit-content' style='overflow-y: hidden'>
|
||||
<span class='gridItem'></span>
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue