align-content-table-cell.html (4984B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 @import "/fonts/ahem.css"; 8 body { 9 font: 10px/1 Ahem; 10 } 11 12 td { 13 padding: 0; 14 height: 50px; 15 } 16 17 td:nth-child(2) { 18 font-size: 20px; 19 } 20 21 .valign-top td { 22 vertical-align: top; 23 } 24 .valign-middle td { 25 vertical-align: middle; 26 } 27 .valign-bottom td { 28 vertical-align: bottom; 29 } 30 .valign-middle-short td { 31 vertical-align: middle; 32 height: 10px; 33 } 34 .valign-bottom-short td { 35 vertical-align: bottom; 36 height: 10px; 37 } 38 .valign-baseline td { 39 vertical-align: baseline; 40 } 41 42 .alignc-start td { 43 align-content: start; 44 } 45 .alignc-center td { 46 align-content: unsafe center; 47 } 48 .alignc-end td { 49 align-content: unsafe end; 50 } 51 .alignc-center-short td { 52 align-content: unsafe center; 53 height: 10px; 54 } 55 .alignc-end-short td { 56 align-content: unsafe end; 57 height: 10px; 58 } 59 .alignc-baseline td { 60 align-content: baseline; 61 } 62 63 .alignc-safe-center td { 64 align-content: safe center; 65 } 66 .alignc-safe-end td { 67 align-content: safe end; 68 } 69 .alignc-safe-center-short td { 70 align-content: safe center; 71 height: 10px; 72 } 73 .alignc-safe-end-short td { 74 align-content: safe end; 75 height: 10px; 76 } 77 </style> 78 79 <table border="0" id="ref" class="valign-baseline"> 80 <tr> 81 <td><div class="content1">first<br>second</div></td> 82 <td><div class="content2">first<br>second</div></td> 83 <td><div class="content3">first<br>second<br>third</div></td> 84 </tr> 85 </table> 86 87 <table border="0" id="target" class="alignc-baseline"> 88 <tr> 89 <td><div class="content1">first<br>second</div></td> 90 <td><div class="content2">first<br>second</div></td> 91 <td><div class="content3">first<br>second<br>third</div></td> 92 </tr> 93 </table> 94 95 <script> 96 function testEquivalence(target, ref) { 97 assert_equals(target.querySelector('.content1').offsetTop, 98 ref.querySelector('.content1').offsetTop, 'The first cell content top'); 99 assert_equals(target.querySelector('.content2').offsetTop, 100 ref.querySelector('.content2').offsetTop, 'The second cell content top'); 101 assert_equals(target.querySelector('.content3').offsetTop, 102 ref.querySelector('.content3').offsetTop, 'The third cell conten topt'); 103 } 104 105 const ref = document.querySelector('#ref'); 106 const target = document.querySelector('#target'); 107 const TALL = 50; 108 // *-short specifies `height: 10px`, but cells ignore it, and the actual height 109 // is the maximum content height in the row. 110 const SHORT = 40; 111 const C1HEIGHT = 10 * 2; 112 113 test(() => { 114 ref.className = 'valign-top'; 115 target.className = 'alignc-start'; 116 testEquivalence(target, ref); 117 assert_equals(target.querySelector('.content1').offsetTop, 0); 118 }, 'vertical-align:top and align-content:start are equivalent'); 119 120 test(() => { 121 ref.className = 'valign-middle'; 122 target.className = 'alignc-center'; 123 testEquivalence(target, ref); 124 assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); 125 126 ref.className = 'valign-middle-short'; 127 target.className = 'alignc-center-short'; 128 testEquivalence(target, ref); 129 assert_equals(target.querySelector('.content1').offsetTop, (SHORT - C1HEIGHT) / 2); 130 }, 'vertical-align:middle and `align-content:unsafe center` are equivalent'); 131 132 test(() => { 133 ref.className = 'valign-bottom'; 134 target.className = 'alignc-end'; 135 testEquivalence(target, ref); 136 assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); 137 138 ref.className = 'valign-bottom-short'; 139 target.className = 'alignc-end-short'; 140 testEquivalence(target, ref); 141 assert_equals(target.querySelector('.content1').offsetTop, SHORT - C1HEIGHT); 142 }, 'vertical-align:bottom and `align-content:unsafe end` are equivalent'); 143 144 test(() => { 145 ref.className = 'valign-baseline'; 146 target.className = 'alignc-baseline'; 147 testEquivalence(target, ref); 148 }, 'vertical-align:baseline and align-content:baseline are equivalent'); 149 150 test(() => { 151 ref.className = 'valign-middle'; 152 target.className = 'alignc-safe-center'; 153 testEquivalence(target, ref); 154 assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); 155 }, 'vertical-align:middle and `align-content:safe center` are equivalent if the container is tall'); 156 157 test(() => { 158 ref.className = 'valign-bottom'; 159 target.className = 'alignc-safe-end'; 160 testEquivalence(target, ref); 161 assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); 162 }, 'vertical-align:bottom and `align-content:safe end` are equivalent if the container is tall'); 163 164 test(() => { 165 ref.className = 'alignc-center-short'; 166 target.className = 'alignc-safe-center-short'; 167 testEquivalence(target, ref); 168 }, '`align-content:safe center` is equivalent to `unsafe center` even if the specified `height` is short'); 169 170 test(() => { 171 ref.className = 'alignc-end-short'; 172 target.className = 'alignc-safe-end-short'; 173 }, '`align-content:safe end` is equivalent to `unsafe end` even if the specified `height` is short'); 174 </script>