overflow-clip-001.html (1685B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/"> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <style> 7 #multicol { 8 writing-mode: vertical-lr; 9 columns: 4; 10 column-fill: auto; 11 column-gap: 0; 12 inline-size: 100px; 13 block-size: 200px; 14 } 15 #clipper { 16 /* Take up all of the first three columns and the half of the last one. */ 17 block-size: 700px; 18 overflow: clip; 19 } 20 .filler { 21 /* Take us from one fragmentainer and 50px into the next. */ 22 block-size: 150px; 23 } 24 .visible { 25 block-size: 100px; 26 background: green; 27 } 28 .before-fragmentainer-start { 29 /* This is before the block-start of a fragmentainer, and should therefore 30 be clipped by #clipper. */ 31 margin-block-start: -100px; 32 block-size: 50px; 33 background: red; 34 } 35 .after-container-end { 36 block-size: 100px; 37 background: red; 38 } 39 </style> 40 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 41 <div id="multicol"> 42 <div id="clipper"> 43 <div class="visible"></div> 44 <div class="filler"></div> 45 <div class="before-fragmentainer-start"></div> 46 <div class="visible"></div> 47 <div class="filler"></div> 48 <div class="before-fragmentainer-start"></div> 49 <div class="visible"></div> 50 <div class="filler"></div> 51 <div class="before-fragmentainer-start"></div> 52 <div class="visible"></div> 53 <div class="after-container-end"></div> 54 </div> 55 </div>