| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| @import "/fonts/ahem.css"; |
| body { |
| font: 10px/1 Ahem; |
| } |
| |
| td { |
| padding: 0; |
| height: 50px; |
| } |
| |
| td:nth-child(2) { |
| font-size: 20px; |
| } |
| |
| .valign-top td { |
| vertical-align: top; |
| } |
| .valign-middle td { |
| vertical-align: middle; |
| } |
| .valign-bottom td { |
| vertical-align: bottom; |
| } |
| .valign-middle-short td { |
| vertical-align: middle; |
| height: 10px; |
| } |
| .valign-bottom-short td { |
| vertical-align: bottom; |
| height: 10px; |
| } |
| .valign-baseline td { |
| vertical-align: baseline; |
| } |
| |
| .alignc-start td { |
| align-content: start; |
| } |
| .alignc-center td { |
| align-content: unsafe center; |
| } |
| .alignc-end td { |
| align-content: unsafe end; |
| } |
| .alignc-center-short td { |
| align-content: unsafe center; |
| height: 10px; |
| } |
| .alignc-end-short td { |
| align-content: unsafe end; |
| height: 10px; |
| } |
| .alignc-baseline td { |
| align-content: baseline; |
| } |
| |
| .alignc-safe-center td { |
| align-content: safe center; |
| } |
| .alignc-safe-end td { |
| align-content: safe end; |
| } |
| .alignc-safe-center-short td { |
| align-content: safe center; |
| height: 10px; |
| } |
| .alignc-safe-end-short td { |
| align-content: safe end; |
| height: 10px; |
| } |
| </style> |
| |
| <table border="0" id="ref" class="valign-baseline"> |
| <tr> |
| <td><div class="content1">first<br>second</div></td> |
| <td><div class="content2">first<br>second</div></td> |
| <td><div class="content3">first<br>second<br>third</div></td> |
| </tr> |
| </table> |
| |
| <table border="0" id="target" class="alignc-baseline"> |
| <tr> |
| <td><div class="content1">first<br>second</div></td> |
| <td><div class="content2">first<br>second</div></td> |
| <td><div class="content3">first<br>second<br>third</div></td> |
| </tr> |
| </table> |
| |
| <script> |
| function testEquivalence(target, ref) { |
| assert_equals(target.querySelector('.content1').offsetTop, |
| ref.querySelector('.content1').offsetTop, 'The first cell content top'); |
| assert_equals(target.querySelector('.content2').offsetTop, |
| ref.querySelector('.content2').offsetTop, 'The second cell content top'); |
| assert_equals(target.querySelector('.content3').offsetTop, |
| ref.querySelector('.content3').offsetTop, 'The third cell conten topt'); |
| } |
| |
| const ref = document.querySelector('#ref'); |
| const target = document.querySelector('#target'); |
| const TALL = 50; |
| // *-short specifies `height: 10px`, but cells ignore it, and the actual height |
| // is the maximum content height in the row. |
| const SHORT = 40; |
| const C1HEIGHT = 10 * 2; |
| |
| test(() => { |
| ref.className = 'valign-top'; |
| target.className = 'alignc-start'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, 0); |
| }, 'vertical-align:top and align-content:start are equivalent'); |
| |
| test(() => { |
| ref.className = 'valign-middle'; |
| target.className = 'alignc-center'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); |
| |
| ref.className = 'valign-middle-short'; |
| target.className = 'alignc-center-short'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, (SHORT - C1HEIGHT) / 2); |
| }, 'vertical-align:middle and `align-content:unsafe center` are equivalent'); |
| |
| test(() => { |
| ref.className = 'valign-bottom'; |
| target.className = 'alignc-end'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); |
| |
| ref.className = 'valign-bottom-short'; |
| target.className = 'alignc-end-short'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, SHORT - C1HEIGHT); |
| }, 'vertical-align:bottom and `align-content:unsafe end` are equivalent'); |
| |
| test(() => { |
| ref.className = 'valign-baseline'; |
| target.className = 'alignc-baseline'; |
| testEquivalence(target, ref); |
| }, 'vertical-align:baseline and align-content:baseline are equivalent'); |
| |
| test(() => { |
| ref.className = 'valign-middle'; |
| target.className = 'alignc-safe-center'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, (TALL - C1HEIGHT) / 2); |
| }, 'vertical-align:middle and `align-content:safe center` are equivalent if the container is tall'); |
| |
| test(() => { |
| ref.className = 'valign-bottom'; |
| target.className = 'alignc-safe-end'; |
| testEquivalence(target, ref); |
| assert_equals(target.querySelector('.content1').offsetTop, TALL - C1HEIGHT); |
| }, 'vertical-align:bottom and `align-content:safe end` are equivalent if the container is tall'); |
| |
| test(() => { |
| ref.className = 'alignc-center-short'; |
| target.className = 'alignc-safe-center-short'; |
| testEquivalence(target, ref); |
| }, '`align-content:safe center` is equivalent to `unsafe center` even if the specified `height` is short'); |
| |
| test(() => { |
| ref.className = 'alignc-end-short'; |
| target.className = 'alignc-safe-end-short'; |
| }, '`align-content:safe end` is equivalent to `unsafe end` even if the specified `height` is short'); |
| </script> |
