rtl-grid-placement-auto-row-sparse-001-ref.html (3689B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 7 8 .grid { 9 block-size: 60px; 10 border: 2px solid green; 11 position: relative; 12 } 13 14 span { 15 position: absolute; 16 background: lime; 17 border: 1px solid black; 18 box-sizing: border-box; 19 inline-size: 20px; 20 block-size: 20px; 21 } 22 23 .test1 .a { 24 inset-block-start: 0; 25 inset-inline-start: 20px; 26 inline-size: 20px; 27 block-size: 20px; 28 } 29 .test1 .b { 30 inset-block-start: 20px; 31 inset-inline-start: 20px; 32 inline-size: 60px; 33 block-size: 20px; 34 } 35 .test1 .c { 36 inset-block-start: 0; 37 inset-inline-start: 80px; 38 inline-size: 60px; 39 block-size: 40px; 40 } 41 .test1 .e { 42 inset-block-start: 20px; 43 inset-inline-start: 0px; 44 } 45 .test1 .d2 { 46 inset-block-start: 0px; 47 inset-inline-start: 40px; 48 } 49 50 .test2 .a { 51 inset-block-start: 0; 52 inset-inline-start: 20px; 53 inline-size: 60px; 54 block-size: 20px; 55 } 56 .test2 .b { 57 inset-block-start: 20px; 58 inset-inline-start: 20px; 59 inline-size: 20px; 60 block-size: 20px; 61 } 62 .test2 .c { 63 inset-block-start: 0; 64 inset-inline-start: 80px; 65 inline-size: 60px; 66 block-size: 40px; 67 } 68 .test2 .e { 69 inset-block-start: 20px; 70 inset-inline-start: 0px; 71 } 72 .test2 .d2 { 73 inset-block-start: 20px; 74 inset-inline-start: 40px; 75 } 76 77 .test3 .a { 78 inset-block-start: 0; 79 inset-inline-start: 0; 80 inline-size: 60px; 81 block-size: 40px; 82 } 83 .test3 .b { 84 inset-block-start: 40px; 85 inset-inline-start: 20px; 86 inline-size: 60px; 87 block-size: 20px; 88 } 89 .test3 .c { 90 inset-block-start: 60px; 91 inset-inline-start: 0px; 92 inline-size: 60px; 93 block-size: 40px; 94 } 95 .test3 .d { inset-block-start: 60px; inset-inline-start:60px; } 96 .test3 .e { 97 inset-block-start: 20px; 98 inset-inline-start: 60px; 99 } 100 .test3 .d2 { 101 inset-block-start: 80px; 102 inset-inline-start: 60px; 103 } 104 105 .test4 .c { 106 inset-block-start: 0; 107 inset-inline-start: 20px; 108 inline-size: 60px; 109 block-size: 40px; 110 } 111 .test4 .d { inset-block-start: 40px; } 112 .test4 .e { 113 inset-block-start: 20px; 114 inset-inline-start: 0px; 115 } 116 .test4 .d2 { 117 inset-block-start: 40px; 118 inset-inline-start: 20px; 119 } 120 121 .test5 .c { 122 inset-block-start: 20px; 123 inset-inline-start: 0; 124 inline-size: 60px; 125 block-size: 20px; 126 } 127 .test5 .e { 128 inset-block-start: 20px; 129 inset-inline-start: 60px; 130 } 131 .test5 .d2 { 132 inset-block-start: 0px; 133 inset-inline-start: 20px; 134 } 135 136 .test6 { inset-inline-start: 0px; inset-block-start: 20px;} 137 .test6d2 { 138 inset-block-start: 20px; 139 inset-inline-start: 140px; 140 } 141 .test6e { 142 inset-block-start: 20px; 143 inset-inline-start: 160px; 144 } 145 </style> 146 </head> 147 <body dir=rtl> 148 149 <div class="grid test1"> 150 <span class="a">a</span> 151 <span class="b">b</span> 152 <span class="c">c</span> 153 <span class="d">d</span> 154 <span class="d2">D</span> 155 <span class="e">e</span> 156 </div> 157 158 <div class="grid test2"> 159 <span class="a">a</span> 160 <span class="b">b</span> 161 <span class="c">c</span> 162 <span class="d">d</span> 163 <span class="d2">D</span> 164 <span class="e">e</span> 165 </div> 166 167 <div class="grid test3" style="block-size:100px"> 168 <span class="a">a</span> 169 <span class="b">b</span> 170 <span class="c">c</span> 171 <span class="d">d</span> 172 <span class="d2">D</span> 173 <span class="e">e</span> 174 </div> 175 176 <div class="grid test4"> 177 <span class="c">c</span> 178 <span class="d">d</span> 179 <span class="d2">D</span> 180 <span class="e">e</span> 181 </div> 182 183 <div class="grid test5"> 184 <span class="c">c</span> 185 <span class="d">d</span> 186 <span class="d2">D</span> 187 <span class="e">e</span> 188 </div> 189 190 <div class="grid test1"> 191 <span class="a">a</span> 192 <span class="b">b</span> 193 <span class="c">c</span> 194 <span class="test6">d</span> 195 <span class="test6d2">D</span> 196 <span class="test6e">e</span> 197 </div> 198 199 </body> 200 </html>