grid-baseline-justify-001-ref.html (1945B)
1 <!DOCTYPE html> 2 <title> 3 Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items 4 </title> 5 6 <style> 7 @import "/fonts/ahem.css"; 8 .grid { 9 border: solid silver; 10 margin: 1em 2px; 11 font: 20px/1 Ahem; 12 13 display: inline-block; 14 vertical-align: top; 15 } 16 .grid > div { 17 border: black 10px; 18 border-style: none solid; 19 color: orange; 20 writing-mode: vertical-rl; 21 } 22 div + div { 23 font-size: 2em; 24 } 25 div + div + div { 26 font-size: 50%; 27 } 28 29 .ref { 30 position: relative; 31 width: 96px; 32 height: 80px; 33 } 34 .ref > div { 35 position: absolute; 36 } 37 .ref1 { right: 16px; } 38 .ref2 { top: 20px; 39 right: 0px; } 40 .ref3 { right: 24px; 41 top: 60px; } 42 .ref4 { bottom: 0px; 43 right: 0px; 44 left: 0px; 45 height: 10px; } 46 47 .ref.content > div:not(.stripe) { 48 border-color: transparent; 49 } 50 .stripe { 51 width: 76px; 52 height: 80px; 53 } 54 </style> 55 56 <p>Test passes if each pair of boxes is identical.</p> 57 58 <div class="grid self ref"> 59 <div class="ref1"> 60 p<br> 61 p<br> 62 p 63 </div> 64 <div class="ref2"> 65 p 66 </div> 67 <div class="ref3"> 68 p 69 </div> 70 <div class="ref4"> 71 72 </div> 73 </div> 74 75 <div class="grid self ref"> 76 <div class="ref1"> 77 p<br> 78 p<br> 79 p 80 </div> 81 <div class="ref2"> 82 p 83 </div> 84 <div class="ref3"> 85 p 86 </div> 87 <div class="ref4"> 88 89 </div> 90 </div> 91 92 <br> 93 94 <div class="grid content ref"> 95 <div class="ref1"> 96 p<br> 97 p<br> 98 p 99 </div> 100 <div class="ref2"> 101 p 102 </div> 103 <div class="ref3"> 104 p 105 </div> 106 <div class="ref4"> 107 108 </div> 109 <div class="stripe"> 110 </div> 111 </div> 112 113 <div class="grid content ref"> 114 <div class="ref1"> 115 p<br> 116 p<br> 117 p 118 </div> 119 <div class="ref2"> 120 p 121 </div> 122 <div class="ref3"> 123 p 124 </div> 125 <div class="ref4"> 126 127 </div> 128 <div class="stripe"> 129 </div> 130 </div>