rounded-clipped-border.html (1461B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1433413"> 4 <link rel="match" href="rounded-clipped-border-ref.html"> 5 <meta name="fuzzy" content="maxDifference=0-75;totalPixels=0-1200"> 6 7 <style> 8 .container { 9 float: left; 10 margin: 10px; 11 text-align: center; 12 inline-size: fit-content; 13 } 14 .multicol { 15 columns: 3; 16 column-fill: auto; 17 gap: 10px; 18 inline-size: 320px; 19 block-size: 120px; 20 border: solid; 21 background: lightgray; 22 } 23 .clipper { 24 block-size: 300px; 25 border-radius: 50px; 26 border: 20px solid blue; 27 overflow: clip; 28 background: red; 29 } 30 .child { 31 block-size: 300px; 32 background: yellow; 33 } 34 </style> 35 36 <p>In each figure there should be a yellow box with a rounded blue border around 37 it, split into three columns. There should be no red.</p> 38 39 <div class="container"> 40 horizontal-tb: 41 <div class="multicol"> 42 <div class="clipper"> 43 <div class="child"></div> 44 </div> 45 </div> 46 </div> 47 48 <div class="container"> 49 vertical-rl: 50 <div class="multicol" style="writing-mode:vertical-rl;"> 51 <div class="clipper"> 52 <div class="child"></div> 53 </div> 54 </div> 55 </div> 56 57 <div class="container"> 58 vertical-lr: 59 <div class="multicol" style="writing-mode:vertical-lr;"> 60 <div class="clipper"> 61 <div class="child"></div> 62 </div> 63 </div> 64 </div>