align-content-multicol.html (1663B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-multicol"> 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 13 #container { 14 width: 400px; 15 height: 90px; 16 columns: 2; 17 widows: 1; 18 orphans: 1; 19 } 20 </style> 21 22 <div id="container" style="align-content: end;"> 23 <div>text<br>text</div> 24 <div style="column-span:all">span</div> 25 <div>text<br>text</div> 26 </div> 27 28 <script> 29 const LINE_HEIGHT = 10; 30 const Result = { 31 START: 0, 32 CENTER: (90 - LINE_HEIGHT * 3) / 2, 33 END: 90 - LINE_HEIGHT * 3, 34 }; 35 const data = [ 36 ['normal', Result.START], 37 ['start', Result.START], 38 ['unsafe start', Result.START], 39 ['safe start', Result.START], 40 ['flex-start', Result.START], 41 ['space-between', Result.START], 42 ['stretch', Result.START], 43 ['center', Result.CENTER], 44 ['unsafe center', Result.CENTER], 45 ['safe center', Result.CENTER], 46 ['space-around', Result.CENTER], 47 ['space-evenly', Result.CENTER], 48 ['end', Result.END], 49 ['unsafe end', Result.END], 50 ['safe end', Result.END], 51 ['flex-end', Result.END] 52 ]; 53 54 for (let d of data) { 55 for (let c of ['none', 'size']) { 56 test(() => { 57 container.style.alignContent = d[0]; 58 container.style.contain = c; 59 const children = container.querySelectorAll('div'); 60 assert_equals(children[0].offsetTop, d[1]); 61 assert_equals(children[1].offsetTop, d[1] + LINE_HEIGHT); 62 assert_equals(children[2].offsetTop, d[1] + LINE_HEIGHT * 2); 63 }, `align-content: ${d[0]}` + (c == 'none' ? `` : `; contain: ${c}`)); 64 } 65 } 66 </script>