block-justify-self.html (10059B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Self-Alignment: justify-self - block-level elements</title> 4 <link rel="author" title="David Tran" href="mailto:davidtranhq+wpt@gmail.com"> 5 <link rel="match" href="block-justify-self-ref.html"> 6 <link rel="help" href="https://www.w3.org/TR/css-align-3/#justify-block" /> 7 <meta name="assert" content="justify-self applies to block-level boxes"> 8 <style> 9 .grid-container div { 10 width: 100px; 11 background-color: green; 12 } 13 14 .block-container div, .block-container-with-table-items div { 15 width: 100px; 16 background-color: red; 17 } 18 19 .stack { 20 display: grid; 21 } 22 23 .stack > * { 24 grid-row: 1; 25 grid-column: 1; 26 } 27 28 body { 29 width: 700px; 30 } 31 32 </style> 33 <p>Test passes if <strong>no red</strong> is visible</p> 34 35 <div class="stack" style="float: left;"> 36 <article class="block-container" style="display: block; width: 300px"> 37 <div style="justify-self: auto;">auto</div> 38 <div style="justify-self: normal;">normal</div> 39 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 40 <div style="justify-self: stretch; margin: 0;">stretch</div> 41 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 42 <div style="justify-self: left;">left</div> 43 <div style="justify-self: right;">right</div> 44 <div style="justify-self: start;">start</div> 45 <div style="justify-self: center;">center</div> 46 <div style="justify-self: end;">end</div> 47 <div style="justify-self: self-start;">self-start</div> 48 <div style="justify-self: self-end;">self-end</div> 49 <div style="justify-self: flex-start;">flex-start</div> 50 <div style="justify-self: flex-end;">flex-end</div> 51 <div style="float: left; justify-self: center;">float left</div> 52 <div style="float: right; justify-self: center;">float right</div> 53 <div style="justify-self: self-start; direction: rtl">self-start (rtl)</div> 54 <div style="justify-self: self-end; direction: rtl">self-end (rtl)</div> 55 <div style="justify-self: start; direction: rtl">start (rtl)</div> 56 <div style="justify-self: end; direction: rtl">end (rtl)</div> 57 <div style="justify-self: end">end parent 58 <div style="position: absolute;">absolute child</div> 59 </div> 60 <div style="justify-self: end; position: absolute;">absolute parent</div> 61 </article> 62 63 <article class="block-container-with-table-items" style="display: block; width: 300px"> 64 <div style="justify-self: auto;">auto</div> 65 <div style="justify-self: normal;">normal</div> 66 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 67 <div style="justify-self: stretch; margin: 0;">stretch</div> 68 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 69 <div style="justify-self: left;">left</div> 70 <div style="justify-self: right;">right</div> 71 <div style="justify-self: start;">start</div> 72 <div style="justify-self: center;">center</div> 73 <div style="justify-self: end;">end</div> 74 <div style="justify-self: self-start;">self-start</div> 75 <div style="justify-self: self-end;">self-end</div> 76 <div style="justify-self: flex-start;">flex-start</div> 77 <div style="justify-self: flex-end;">flex-end</div> 78 <div style="float: left; justify-self: center;">float left</div> 79 <div style="float: right; justify-self: center;">float right</div> 80 <div style="justify-self: self-start; direction: rtl">self-start (rtl)</div> 81 <div style="justify-self: self-end; direction: rtl">self-end (rtl)</div> 82 <div style="justify-self: start; direction: rtl">start (rtl)</div> 83 <div style="justify-self: end; direction: rtl">end (rtl)</div> 84 <div style="justify-self: end">end parent 85 <div style="position: absolute;">absolute child</div> 86 </div> 87 <div style="justify-self: end; position: absolute;">absolute parent</div> 88 </article> 89 90 <article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px"> 91 <div style="justify-self: auto;">auto</div> 92 <div style="justify-self: normal;">normal</div> 93 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 94 <div style="justify-self: stretch; margin: 0;">stretch</div> 95 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 96 <div style="justify-self: left;">left</div> 97 <div style="justify-self: right;">right</div> 98 <div style="justify-self: start;">start</div> 99 <div style="justify-self: center;">center</div> 100 <div style="justify-self: end;">end</div> 101 <div style="justify-self: self-start;">self-start</div> 102 <div style="justify-self: self-end;">self-end</div> 103 <div style="justify-self: flex-start;">flex-start</div> 104 <div style="justify-self: flex-end;">flex-end</div> 105 <div style="float: left; justify-self: center;">float left</div> 106 <div style="float: right; justify-self: center;">float right</div> 107 <div style="justify-self: self-start; direction: rtl">self-start (rtl)</div> 108 <div style="justify-self: self-end; direction: rtl">self-end (rtl)</div> 109 <div style="justify-self: start; direction: rtl">start (rtl)</div> 110 <div style="justify-self: end; direction: rtl">end (rtl)</div> 111 <div style="justify-self: end">end parent 112 <div style="position: absolute;">absolute child</div> 113 </div> 114 <div style="justify-self: end; position: absolute;">absolute parent</div> 115 </article> 116 </div> 117 118 <div class="stack" style="direction: rtl; float: right;"> 119 <article class="block-container" style="display: block; width: 300px"> 120 <div style="justify-self: auto;">auto</div> 121 <div style="justify-self: normal;">normal</div> 122 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 123 <div style="justify-self: stretch; margin: 0;">stretch</div> 124 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 125 <div style="justify-self: left;">left</div> 126 <div style="justify-self: right;">right</div> 127 <div style="justify-self: start;">start</div> 128 <div style="justify-self: center;">center</div> 129 <div style="justify-self: end;">end</div> 130 <div style="justify-self: self-start;">self-start</div> 131 <div style="justify-self: self-end;">self-end</div> 132 <div style="justify-self: flex-start;">flex-start</div> 133 <div style="justify-self: flex-end;">flex-end</div> 134 <div style="float: left; justify-self: center;">float left</div> 135 <div style="float: right; justify-self: center;">float right</div> 136 <div style="justify-self: self-start; direction: ltr">self-start (ltr)</div> 137 <div style="justify-self: self-end; direction: ltr">self-end (ltr)</div> 138 <div style="justify-self: start; direction: ltr">start (ltr)</div> 139 <div style="justify-self: end; direction: ltr">end (ltr)</div> 140 <div style="justify-self: end">end parent 141 <div style="position: absolute;">absolute child</div> 142 </div> 143 <div style="justify-self: end; position: absolute;">absolute parent</div> 144 </article> 145 146 <article class="block-container-with-table-items" style="display: block; width: 300px"> 147 <div style="justify-self: auto;">auto</div> 148 <div style="justify-self: normal;">normal</div> 149 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 150 <div style="justify-self: stretch; margin: 0;">stretch</div> 151 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 152 <div style="justify-self: left;">left</div> 153 <div style="justify-self: right;">right</div> 154 <div style="justify-self: start;">start</div> 155 <div style="justify-self: center;">center</div> 156 <div style="justify-self: end;">end</div> 157 <div style="justify-self: self-start;">self-start</div> 158 <div style="justify-self: self-end;">self-end</div> 159 <div style="justify-self: flex-start;">flex-start</div> 160 <div style="justify-self: flex-end;">flex-end</div> 161 <div style="float: left; justify-self: center;">float left</div> 162 <div style="float: right; justify-self: center;">float right</div> 163 <div style="justify-self: self-start; direction: ltr">self-start (ltr)</div> 164 <div style="justify-self: self-end; direction: ltr">self-end (ltr)</div> 165 <div style="justify-self: start; direction: ltr">start (ltr)</div> 166 <div style="justify-self: end; direction: ltr">end (ltr)</div> 167 <div style="justify-self: end">end parent 168 <div style="position: absolute;">absolute child</div> 169 </div> 170 <div style="justify-self: end; position: absolute;">absolute parent</div> 171 </article> 172 173 <article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px"> 174 <div style="justify-self: auto;">auto</div> 175 <div style="justify-self: normal;">normal</div> 176 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 177 <div style="justify-self: stretch; margin: 0;">stretch</div> 178 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 179 <div style="justify-self: left;">left</div> 180 <div style="justify-self: right;">right</div> 181 <div style="justify-self: start;">start</div> 182 <div style="justify-self: center;">center</div> 183 <div style="justify-self: end;">end</div> 184 <div style="justify-self: self-start;">self-start</div> 185 <div style="justify-self: self-end;">self-end</div> 186 <div style="justify-self: flex-start;">flex-start</div> 187 <div style="justify-self: flex-end;">flex-end</div> 188 <div style="float: left; justify-self: center;">float left</div> 189 <div style="float: right; justify-self: center;">float right</div> 190 <div style="justify-self: self-start; direction: ltr">self-start (ltr)</div> 191 <div style="justify-self: self-end; direction: ltr">self-end (ltr)</div> 192 <div style="justify-self: start; direction: ltr">start (ltr)</div> 193 <div style="justify-self: end; direction: ltr">end (ltr)</div> 194 <div style="justify-self: end">end parent 195 <div style="position: absolute;">absolute child</div> 196 </div> 197 <div style="justify-self: end; position: absolute;">absolute parent</div> 198 </article> 199 </div>