mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision 70fdd27f4cecb8a5cae3dafa76ba05265531c9e2
This commit is contained in:
WPT Sync Bot
parent
e5689df6b4
commit
bea56037ef
701 changed files with 13864 additions and 1909 deletions
|
|
@ -0,0 +1,240 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout test: box model parts and alignment properties, vertical-LR writing mode</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
|
||||
<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids, in both LTR and RTL directions.">
|
||||
<meta name="flags" content="ahem">
|
||||
<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">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 100px 200px;
|
||||
grid-template-rows: 200px 200px;
|
||||
padding: 10px 15px 20px 30px;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
border-style: dotted;
|
||||
border-color: blue;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
|
||||
<div class="firstRowFirstColumn cell" data-offset-x="124" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'left' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content verticalLR alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: rtl)</p>
|
||||
<div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: rtl)</p>
|
||||
<div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="124" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsLeft" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: ltr)</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: ltr)</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout test: box model parts and alignment properties, vertical-RL writing mode</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
|
||||
<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids, in both LTR and RTL directions.">
|
||||
<meta name="flags" content="ahem">
|
||||
<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">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 100px 200px;
|
||||
grid-template-rows: 200px 200px;
|
||||
padding: 10px 15px 20px 30px;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
border-style: dotted;
|
||||
border-color: blue;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
|
||||
<div class="firstRowFirstColumn cell" data-offset-x="324" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'left' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: rtl)</p>
|
||||
<div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: rtl)</p>
|
||||
<div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="324" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsLeft" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: ltr)</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: ltr)</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout test: box model parts and alignment properties</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/">
|
||||
<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties, in both LTR and RTL directions.">
|
||||
<meta name="flags" content="ahem">
|
||||
<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">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 100px 200px;
|
||||
grid-template-rows: 200px 200px;
|
||||
padding: 10px 15px 20px 30px;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
border-style: dotted;
|
||||
border-color: blue;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
|
||||
<div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'start' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
|
||||
<div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'center' | justify-items: 'center'</p>
|
||||
<div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'end' | justify-items: 'end'</p>
|
||||
<div class="grid fit-content directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'left'</p>
|
||||
<div class="grid fit-content directionRTL alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL | align-items: 'start' | justify-items: 'right'</p>
|
||||
<div class="grid fit-content directionRTL alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
|
||||
<div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
|
||||
direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
|
||||
<div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
|
||||
<div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div>
|
||||
<div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: overflow for justify and align</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
|
||||
<meta name="assert" content="This test checks that both safe and unsafe overflow positions are applied correctly for align-items and justify-items properties.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<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">
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 150px 150px;
|
||||
grid-template-rows: 120px 120px 120px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cellOverflowWidth {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
}
|
||||
.cellOverflowHeight {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
}
|
||||
.cellWithNoOverflow {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsUnsafeCenter justifyItemsUnsafeCenter" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsUnsafeEnd justifyItemsUnsafeEnd" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn justifySelfUnsafeCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
|
||||
<div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellWithNoOverflow firstRowSecondColumn alignSelfUnsafeCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout test:align stretch with orthogonal flows</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
|
||||
<meta name="assert" content="This test checks that stretching alignment works as expected with orthogonal flows, in horizontal and vertical writing mode.">
|
||||
<meta name="flags" content="ahem">
|
||||
<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">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
grid-template-columns: 100px 100px;
|
||||
grid-template-rows: 150px 150px;
|
||||
font: 10px/1 ahem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.widthAndHeightSet {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
.onlyWidthSet { width: 20px; }
|
||||
.onlyHeightSet { height: 40px; }
|
||||
.maxHeight { max-height: 160px; }
|
||||
.maxWidth { max-width: 90px; }
|
||||
.minWidth { min-width: 120px; }
|
||||
.minHeight { min-height: 220px; }
|
||||
.topAutoMargin { margin-top: auto; }
|
||||
.bottomAutoMargin { margin-bottom: auto; }
|
||||
.leftAutoMargin { margin-left: auto; }
|
||||
.rightAutoMargin { margin-right: auto; }
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
|
||||
|
||||
<p>HORIZONTAL vs VERTICAL-RL</p>
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="200" data-expected-height="300">
|
||||
<div class="verticalRL firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div>
|
||||
<div class="verticalRL firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="150">XXX</div>
|
||||
<div class="verticalRL secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
|
||||
<div class="verticalRL secondRowSecondColumn selfSelfStart" data-expected-width="10" data-expected-height="30">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="200" data-expected-height="300">
|
||||
<div class="verticalRL firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
|
||||
<div class="verticalRL firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div>
|
||||
<div class="verticalRL secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
|
||||
<div class="verticalRL secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>HORIZONTAL vs VERTICAL-LR</p>
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="200" data-expected-height="300">
|
||||
<div class="verticalLR firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div>
|
||||
<div class="verticalLR firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="150">XXX</div>
|
||||
<div class="verticalLR secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
|
||||
<div class="verticalLR secondRowSecondColumn selfSelfStart" data-expected-width="10" data-expected-height="30">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="200" data-expected-height="300">
|
||||
<div class="verticalLR firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
|
||||
<div class="verticalLR firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div>
|
||||
<div class="verticalLR secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
|
||||
<div class="verticalLR secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>VERTICAL-RL vs HORIZONTAL</p>
|
||||
<div class="container">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
|
||||
<div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div>
|
||||
<div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="100">XXX</div>
|
||||
<div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
|
||||
<div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30" data-expected-height="10">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
|
||||
<div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
|
||||
<div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div>
|
||||
<div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
|
||||
<div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>VERTICAL-LR vs HORIZONTAL</p>
|
||||
<div class="container">
|
||||
<div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
|
||||
<div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div>
|
||||
<div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="100">XXX</div>
|
||||
<div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
|
||||
<div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30" data-expected-height="10">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
|
||||
<div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
|
||||
<div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div>
|
||||
<div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
|
||||
<div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue