mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue