mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -210,7 +210,7 @@ body { margin: 0; }
|
|||
<div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
|
||||
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
|
||||
<div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first" data-offset-x="0" data-offset-y="80"></div>
|
||||
<div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first" data-offset-x="50" data-offset-y="60"></div>
|
||||
</div>
|
||||
<div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
|
||||
<div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@
|
|||
A grid item whose size is input
|
||||
to the size of the track
|
||||
on which its size depends
|
||||
cannot participate in baseline alignment.
|
||||
cannot participate in baseline alignment, unless
|
||||
the grid algorithm requires
|
||||
another pass, where the track
|
||||
sizing can be resovled.
|
||||
">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
|
||||
<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
|
||||
|
|
@ -55,7 +58,7 @@
|
|||
<div class="index">
|
||||
X
|
||||
</div>
|
||||
<div class="percent">
|
||||
<div class="percent orthogonal">
|
||||
X
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527539">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
|
||||
<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 50px 50px;
|
||||
grid-template-rows: 100px 100px;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contentSizedTracks {
|
||||
grid-template: max-content 100px / max-content 50px;
|
||||
}
|
||||
|
||||
.overflowWidth {
|
||||
width: 60px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.overflowHeight {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.item1 {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.minSize {
|
||||
min-width: 300px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.maxSize {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205">
|
||||
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
|
||||
<div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
|
||||
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="60" data-expected-scroll-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="-70" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="-70" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="-20" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="-20" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150">
|
||||
<div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
|
||||
<div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
|
||||
<div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid fit-content contentEndUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
|
||||
<div class="grid fit-content contentCenterUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
|
||||
<div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100">
|
||||
<div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
|
||||
<div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205">
|
||||
<div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
|
||||
<div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
|
||||
<div class="item1 firstRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="item2 secondRowFirstColumn" data-offset-x="70" data-offset-y="270" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="container" style="margin-right: 25px;">
|
||||
<div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
|
||||
<div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:10px; height:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<title>stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
|
||||
<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px; height:40px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<title>stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
|
||||
<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:0px; height:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<title>stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
|
||||
<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
|
|
@ -13,12 +14,14 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
img { background: blue; }
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
|
|
@ -41,7 +44,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
|
|
@ -19,8 +19,6 @@
|
|||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
|
@ -35,17 +33,17 @@
|
|||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:20px">
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:0px">
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px; height:0px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<title>stretching works for replaced items with a fallback aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-7-ref.html">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
|
||||
<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
|
||||
<meta name="assert" content="Auto margin alignment should be safe.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
grid-template: 0px / 0px;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="grid">
|
||||
<div style="margin: auto;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
|
||||
<meta name="assert" content="Auto margin alignment should be safe.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
grid-template: 0px / 0px;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="grid">
|
||||
<div style="margin-left: auto; margin-top: auto;"></div>
|
||||
</div>
|
||||
|
|
@ -19,8 +19,8 @@
|
|||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
width: 0px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
|
|
@ -34,17 +34,17 @@
|
|||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:10px">
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:20px">
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:10px; height:20px">
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
width: 20px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
|
|
@ -34,17 +34,17 @@
|
|||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:20px">
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="width:350px; height:40px">
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px; height:40px">
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
div {
|
||||
display: inline-grid;
|
||||
grid-template: 100% / 100%;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -19,9 +19,8 @@
|
|||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
|
|
@ -35,17 +34,17 @@
|
|||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:0px">
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:20px">
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:0px; height:20px">
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
img { background: blue; }
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
|
|
@ -42,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
|
||||
<pre>Horizontal grid and verticalRL item</pre>
|
||||
<pre>Horizontal grid and verticalRL items do not share a baseline context</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="autoRowSpanning2AutoColumn height25"></div>
|
||||
</div>
|
||||
|
||||
<pre>VerticalLR grid and Horizontal item</pre>
|
||||
<pre>VerticalRL grid and Horizontal item</pre>
|
||||
|
||||
<div class="grid justifyItemsBaseline verticalRL">
|
||||
<div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
|
||||
|
|
|
|||
|
|
@ -48,10 +48,10 @@
|
|||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalRL item with fixed width</pre>
|
||||
<pre>Horizontal grid and verticalRL item with fixed width do not share a baseline context</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="firstRowFirstColumn fixedWidth" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,10 +48,10 @@
|
|||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
||||
<pre>Horizontal grid and verticalRL item with relative width</pre>
|
||||
<pre>Horizontal grid and verticalRL item with relative width do not share a baseline context</pre>
|
||||
|
||||
<div class="grid width300 justifyItemsBaseline">
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowFirstColumn relativeWidth" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
|
||||
<div class="autoRowSpanning2AutoColumn width25"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -69,16 +69,16 @@
|
|||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid">
|
||||
<div data-offset-x="25" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="200" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="175" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="110" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="100" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="25" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="135" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="170" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="125" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="25" data-offset-y="15" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
<div data-offset-x="25" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -88,9 +88,9 @@
|
|||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="375" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="85" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="375" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="377" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="86" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="377" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="261" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
|
||||
.flex-rows { grid-template-rows: 1fr; }
|
||||
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
|
||||
.auto-rows { grid-template-rows: auto 100px; }
|
||||
|
||||
.height25 { height: 25px; }
|
||||
.height50 { height: 50px; }
|
||||
|
|
@ -53,7 +54,6 @@
|
|||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
|
||||
|
||||
<div style="height: 125px">
|
||||
<pre>auto-sized rows - items with relative height</pre>
|
||||
<div class="inline-grid alignItemsBaseline columns">
|
||||
|
|
@ -154,12 +154,12 @@
|
|||
</div>
|
||||
|
||||
<div style="height: 250px">
|
||||
<pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
|
||||
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
|
||||
<div class="firstRowFirstColumn verticalLR width50 height50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="firstRowSpanning2AutoColumn verticalLR width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,12 +29,14 @@
|
|||
.fit-content-columns { grid-template-columns: fit-content; }
|
||||
.flex-columns { grid-template-columns: 1fr; }
|
||||
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
|
||||
.auto-columns { grid-template-columns: auto 100px; }
|
||||
|
||||
.min-content-rows { grid-template-rows: min-content; }
|
||||
.max-content-rows { grid-template-rows: max-content; }
|
||||
.fit-content-rows { grid-template-rows: fit-content; }
|
||||
.flex-rows { grid-template-rows: 1fr; }
|
||||
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
|
||||
.auto-rows { grid-template-rows: auto 100px; }
|
||||
|
||||
.height25 { height: 25px; }
|
||||
.height50 { height: 50px; }
|
||||
|
|
@ -93,8 +95,8 @@
|
|||
|
||||
<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<div class="inline-grid alignItemsBaseline columns max-flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="376" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="inline-grid alignItemsBaseline columns auto-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
||||
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
|
@ -136,10 +138,10 @@
|
|||
|
||||
<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
|
||||
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
|
||||
<div class="secondRowFirstColumn verticalLR" data-offset-x="32" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="112" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
||||
|
|
@ -179,13 +181,14 @@
|
|||
|
||||
<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<div class="inline-grid verticalLR alignItemsBaseline columns max-flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">É</div>
|
||||
<div class="firstRowSecondColumn horizontalBT" data-offset-x="7" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="87" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
|
||||
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
|
|
@ -193,6 +196,7 @@
|
|||
</div>
|
||||
|
||||
<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="25" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
|
|
@ -200,6 +204,7 @@
|
|||
</div>
|
||||
|
||||
<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
|
|
@ -207,25 +212,27 @@
|
|||
</div>
|
||||
|
||||
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
|
||||
<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
|
||||
<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
||||
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
||||
<div class="inline-grid verticalRL alignItemsBaseline columns max-flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
||||
<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
||||
<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
|
||||
<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows">
|
||||
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
|
||||
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
||||
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.row { grid: minmax(0px, 1fr) / 50px 50px 100px }
|
||||
.column { grid: 50px 50px 100px / minmax(0px, 1fr); }
|
||||
.row { grid: minmax(0px, 1fr) / auto 50px 100px }
|
||||
.column { grid: auto 50px 100px / minmax(0px, 1fr); }
|
||||
.item1 {
|
||||
font-size: 30px;
|
||||
background: blue;
|
||||
|
|
@ -50,42 +50,42 @@
|
|||
|
||||
<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
|
||||
<div class="grid row alignItemsBaseline">
|
||||
<div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="50" data-expected-height="30">É</div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
<div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="30" data-expected-height="30">É</div>
|
||||
<div class="item2" data-offset-x="30" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
|
||||
<div class="grid row alignItemsBaseline ">
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="item2" data-offset-x="50" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="56" data-expected-width="30" data-expected-height="40">É</div>
|
||||
<div class="item2" data-offset-x="30" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
|
||||
<div class="grid row alignItemsBaseline">
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="24" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="item2 verticalLR" data-offset-x="50" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
<div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="30" data-expected-height="40">É</div>
|
||||
<div class="item2 verticalLR" data-offset-x="30" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
|
||||
<div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="50">É</div>
|
||||
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
<div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="30">É</div>
|
||||
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="30" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
|
||||
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
||||
<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
|
||||
<div class="grid column justifyItemsBaseline">
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
|
||||
<div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
|
||||
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue