| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-multicol"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| @import "/fonts/ahem.css"; |
| body { |
| font: 10px/1 Ahem; |
| margin: 0; |
| } |
| |
| #container { |
| width: 400px; |
| height: 90px; |
| columns: 2; |
| widows: 1; |
| orphans: 1; |
| } |
| </style> |
| |
| <div id="container" style="align-content: end;"> |
| <div>text<br>text</div> |
| <div style="column-span:all">span</div> |
| <div>text<br>text</div> |
| </div> |
| |
| <script> |
| const LINE_HEIGHT = 10; |
| const Result = { |
| START: 0, |
| CENTER: (90 - LINE_HEIGHT * 3) / 2, |
| END: 90 - LINE_HEIGHT * 3, |
| }; |
| const data = [ |
| ['normal', Result.START], |
| ['start', Result.START], |
| ['unsafe start', Result.START], |
| ['safe start', Result.START], |
| ['flex-start', Result.START], |
| ['space-between', Result.START], |
| ['stretch', Result.START], |
| ['center', Result.CENTER], |
| ['unsafe center', Result.CENTER], |
| ['safe center', Result.CENTER], |
| ['space-around', Result.CENTER], |
| ['space-evenly', Result.CENTER], |
| ['end', Result.END], |
| ['unsafe end', Result.END], |
| ['safe end', Result.END], |
| ['flex-end', Result.END] |
| ]; |
| |
| for (let d of data) { |
| for (let c of ['none', 'size']) { |
| test(() => { |
| container.style.alignContent = d[0]; |
| container.style.contain = c; |
| const children = container.querySelectorAll('div'); |
| assert_equals(children[0].offsetTop, d[1]); |
| assert_equals(children[1].offsetTop, d[1] + LINE_HEIGHT); |
| assert_equals(children[2].offsetTop, d[1] + LINE_HEIGHT * 2); |
| }, `align-content: ${d[0]}` + (c == 'none' ? `` : `; contain: ${c}`)); |
| } |
| } |
| </script> |
