grid-item-auto-margins-alignment-vertical-rl.html (8816B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-rl</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> 7 <meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-rl writing mode."> 8 <meta name="flags" content="ahem"> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <link rel="stylesheet" href="/css/support/alignment.css"> 11 <link rel="stylesheet" href="/css/support/width-keyword-classes.css"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 14 <style> 15 .grid { 16 grid-template-columns: 100px 100px; 17 grid-template-rows: 200px 200px; 18 margin-bottom: 20px; 19 } 20 21 .item { 22 width: 20px; 23 height: 40px; 24 } 25 26 .autoMarginTop { margin-top: auto; } 27 .autoMarginRight { margin-right: auto; } 28 .autoMarginBottom { margin-bottom: auto; } 29 .autoMarginLeft { margin-left: auto; } 30 .autoMargin { margin: auto; } 31 </style> 32 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/resources/check-layout-th.js"></script> 36 <script type="text/javascript"> 37 setup({ explicit_done: true }); 38 </script> 39 40 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 41 42 <p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p> 43 44 <p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p> 45 <div style="position: relative"> 46 <div class="grid fit-content verticalRL itemsCenter"> 47 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> 48 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 49 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 50 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 51 </div> 52 </div> 53 54 <p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p> 55 <div style="position: relative"> 56 <div class="grid fit-content verticalRL"> 57 <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 58 <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 59 <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 60 <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 61 </div> 62 </div> 63 64 <p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p> 65 <div style="position: relative"> 66 <div class="grid fit-content verticalRL itemsCenter"> 67 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 68 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 69 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 70 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 71 </div> 72 </div> 73 74 <p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p> 75 <div style="position: relative"> 76 <div class="grid fit-content verticalRL"> 77 <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 78 <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 79 <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 80 <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 81 </div> 82 </div> 83 84 <!-- direction RTL --> 85 <p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p> 86 <div style="position: relative"> 87 <div class="grid fit-content verticalRL itemsCenter directionRTL"> 88 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 89 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 90 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 91 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 92 </div> 93 </div> 94 95 96 <p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p> 97 <div style="position: relative"> 98 <div class="grid fit-content verticalRL directionRTL"> 99 <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 100 <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 101 <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 102 <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 103 </div> 104 </div> 105 106 <p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> 107 <div style="position: relative"> 108 <div class="grid fit-content verticalRL itemsCenter directionRTL"> 109 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 110 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 111 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 112 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 113 </div> 114 </div> 115 116 117 <p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p> 118 <div style="position: relative"> 119 <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200"> 120 <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 121 <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 122 <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 123 <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 124 </div> 125 </div> 126 127 </body>