grid-item-auto-margins-alignment.html (8566B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: align-self and justify-self with auto margins</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."> 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 itemsCenter"> 47 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 48 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 49 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 50 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" 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"> 57 <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 58 <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 59 <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 60 <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" 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 itemsCenter"> 67 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 68 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 69 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 70 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" 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"> 77 <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 78 <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 79 <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 80 <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" 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 itemsCenter directionRTL"> 88 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 89 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 90 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 91 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 92 </div> 93 </div> 94 95 <p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p> 96 <div style="position: relative"> 97 <div class="grid fit-content directionRTL"> 98 <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 99 <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 100 <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 101 <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 102 </div> 103 </div> 104 105 <p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> 106 <div style="position: relative"> 107 <div class="grid fit-content itemsCenter directionRTL"> 108 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 109 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 110 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 111 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 112 </div> 113 </div> 114 115 <p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p> 116 <div style="position: relative"> 117 <div class="grid fit-content directionRTL"> 118 <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 119 <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 120 <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 121 <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> 122 </div> 123 </div> 124 125 </body>