grid-container-baseline-001.html (5985B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid container baseline</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> 6 <meta name="assert" content="Grid container baseline should match the element with 'align-self: baseline' in the first row, even if it's an orthogonal element."> 7 <style> 8 .wrapper { 9 position: relative; 10 margin: 10px; 11 line-height: 0; 12 } 13 14 .grid { 15 display: inline-grid; 16 grid-auto-flow: column; 17 background: grey; 18 } 19 20 .i1 { 21 width: 150px; 22 height: 100px; 23 background: magenta; 24 } 25 26 .i2 { 27 align-self: baseline; 28 width: 75px; 29 height: 50px; 30 background: cyan; 31 } 32 33 .i3 { 34 width: 100px; 35 height: 75px; 36 background: yellow; 37 } 38 </style> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 <body onload="checkLayout('.wrapper')"> 43 44 <div class="wrapper" style="writing-mode: horizontal-tb;"> 45 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 46 <div class="grid"> 47 <div class="i1"></div> 48 <div class="i2" data-offset-y="0"></div> 49 <div class="i3"></div> 50 </div> 51 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 52 </div> 53 54 <div class="wrapper" style="writing-mode: horizontal-tb;"> 55 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 56 <div class="grid"> 57 <div class="i1"></div> 58 <div class="i2" style="writing-mode: vertical-lr;" data-offset-y="0"></div> 59 <div class="i3"></div> 60 </div> 61 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 62 </div> 63 64 <div class="wrapper" style="writing-mode: horizontal-tb;"> 65 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 66 <div class="grid"> 67 <div class="i1"></div> 68 <div class="i2" style="writing-mode: vertical-rl;" data-offset-y="0"></div> 69 <div class="i3"></div> 70 </div> 71 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> 72 </div> 73 74 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> 75 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 76 <div class="grid"> 77 <div class="i1"></div> 78 <div class="i2" data-offset-x="0"></div> 79 <div class="i3"></div> 80 </div> 81 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 82 </div> 83 84 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> 85 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 86 <div class="grid"> 87 <div class="i1"></div> 88 <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div> 89 <div class="i3"></div> 90 </div> 91 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 92 </div> 93 94 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> 95 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 96 <div class="grid"> 97 <div class="i1"></div> 98 <div class="i2" data-offset-x="0"></div> 99 <div class="i3"></div> 100 </div> 101 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 102 </div> 103 104 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> 105 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 106 <div class="grid"> 107 <div class="i1"></div> 108 <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div> 109 <div class="i3"></div> 110 </div> 111 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> 112 </div> 113 114 <div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> 115 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 116 <div class="grid"> 117 <div class="i1"></div> 118 <div class="i2" data-offset-x="75"></div> 119 <div class="i3"></div> 120 </div> 121 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 122 </div> 123 124 <div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> 125 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 126 <div class="grid"> 127 <div class="i1"></div> 128 <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div> 129 <div class="i3"></div> 130 </div> 131 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 132 </div> 133 134 <div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> 135 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 136 <div class="grid"> 137 <div class="i1"></div> 138 <div class="i2" data-offset-x="75"></div> 139 <div class="i3"></div> 140 </div> 141 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 142 </div> 143 144 <div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> 145 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 146 <div class="grid"> 147 <div class="i1"></div> 148 <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div> 149 <div class="i3"></div> 150 </div> 151 <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> 152 </div> 153 154 </body>