overflow-clip-002.html (1712B)
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-rl; 9 margin-left: -100px; 10 columns: 4; 11 column-fill: auto; 12 column-gap: 0; 13 inline-size: 100px; 14 block-size: 200px; 15 } 16 #clipper { 17 /* Take up all of the first three columns and the half of the last one. */ 18 block-size: 700px; 19 overflow: clip; 20 } 21 .filler { 22 /* Take us from one fragmentainer and 50px into the next. */ 23 block-size: 150px; 24 } 25 .visible { 26 block-size: 100px; 27 background: green; 28 } 29 .before-fragmentainer-start { 30 /* This is before the block-start of a fragmentainer, and should therefore 31 be clipped by #clipper. */ 32 margin-block-start: -100px; 33 block-size: 50px; 34 background: red; 35 } 36 .after-container-end { 37 block-size: 100px; 38 background: red; 39 } 40 </style> 41 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 42 <div id="multicol"> 43 <div id="clipper"> 44 <div class="visible"></div> 45 <div class="filler"></div> 46 <div class="before-fragmentainer-start"></div> 47 <div class="visible"></div> 48 <div class="filler"></div> 49 <div class="before-fragmentainer-start"></div> 50 <div class="visible"></div> 51 <div class="filler"></div> 52 <div class="before-fragmentainer-start"></div> 53 <div class="visible"></div> 54 <div class="after-container-end"></div> 55 </div> 56 </div>