contain-size-multicol-001.html (1265B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Size containment on a multicol with set column size (and gap)</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> 6 <meta name=assert content="columns and column-gap do affect the size of a multicol, even with size containment"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 9 <style> 10 div { 11 position: absolute; 12 } 13 #red { 14 background: red; 15 width: 100px; 16 height: 100px; 17 } 18 #test { 19 background: green; 20 21 contain: size; 22 columns: 2 40px; 23 column-gap: 20px; 24 min-height: 100px; 25 26 color: transparent; 27 } 28 </style> 29 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <div id=red></div> 32 <div id=test> 33 filler filler filler filler filler filler filler filler 34 filler filler filler filler filler filler filler filler 35 filler filler filler filler filler filler filler filler 36 filler filler filler filler filler filler filler filler 37 </div> 38 39 <!-- 40 The filler text, min-height (instead of height) and transparent color 41 are to make the test fail in browsers 42 that do not implement contain:size at all, 43 by making the box non square. 44 -->