align-content-block-display-coverage.html (1107B)
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 margin: 0; 11 } 12 .target { 13 height: 50px; 14 align-content: unsafe center; 15 } 16 </style> 17 18 <div class="target"> 19 <div class="content">foo</div> 20 </div> 21 22 <script> 23 const supportedValues = ['block', 'flow', 'flow-root', 'inline-block', 24 'list-item', 'flow-root list-item', 'table-caption']; 25 const unsupportedValues = ['ruby-text']; 26 27 const target = document.querySelector('.target'); 28 const content = document.querySelector('.content'); 29 for (let value of supportedValues) { 30 test(() => { 31 target.style.display = value; 32 assert_equals(content.offsetTop, 20); 33 }, `display:${value} should support align-content`); 34 } 35 36 for (let value of unsupportedValues) { 37 test(() => { 38 target.style.display = value; 39 assert_not_equals(content.offsetTop, 20); 40 }, `display:${value} should not support align-content`); 41 } 42 </script>