clone-intrinsic-size.html (2086B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Test: min/max-content size on box-decoration-break:clone inline box</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> 6 <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1552357"> 8 <link rel="match" href="clone-intrinsic-size-ref.html"> 9 <style> 10 html,body { 11 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 12 } 13 14 div { 15 border: 5px solid blue; 16 } 17 .max > div { 18 width: max-content; 19 } 20 .min > div { 21 width: min-content; 22 } 23 24 span { 25 border: 2px solid gray; 26 padding: 0 10px 0 6px; 27 border-width: 0 8px 0 5px; 28 margin: 0 4px 0 3px; 29 background: yellow; 30 -webkit-box-decoration-break: clone; 31 box-decoration-break: clone; 32 } 33 34 f { margin-right: 30px; float: left; } 35 </style> 36 <body> 37 <f class="max"> 38 <div> 39 <span>aaa</span><span>aaa</span> 40 </div> 41 <div> 42 <span>aaa</span>aa<span>aaa</span> 43 </div> 44 <div> 45 <span>aaa</span> <span>aaa</span> 46 </div> 47 <div> 48 <span>aaa </span><span>aaa</span> 49 </div> 50 <div> 51 <span>aaa</span><span> aaa</span> 52 </div> 53 <div> 54 <span>aaa</span> aa<span>aaa</span> 55 </div> 56 <div> 57 <span>aaa </span>aa<span>aaa</span> 58 </div> 59 <div> 60 <span>aaa</span>aa<span> aaa</span> 61 </div> 62 <div> 63 <span>aaa</span> aa <span>aaa</span> 64 </div> 65 <div> 66 <span>aaa</span>aa <span>aaa</span> 67 </div> 68 <div> 69 <span>aaa</span>aa </div> 70 </f> 71 72 <f class="min"> 73 <div> 74 <span>aaa</span><span>aaa</span> 75 </div> 76 <div> 77 <span>aaa</span>aa<span>aaa</span> 78 </div> 79 <div> 80 <span>aaa</span> <span>aaa</span> 81 </div> 82 <div> 83 <span>aaa </span><span>aaa</span> 84 </div> 85 <div> 86 <span>aaa</span><span> aaa</span> 87 </div> 88 <div> 89 <span>aaa</span> aa<span>aaa</span> 90 </div> 91 <div> 92 <span>aaa </span>aa<span>aaa</span> 93 </div> 94 <div> 95 <span>aaa</span>aa<span> aaa</span> 96 </div> 97 <div> 98 <span>aaa</span> aa <span>aaa</span> 99 </div> 100 <div> 101 <span>aaa</span>aa <span>aaa</span> 102 </div> 103 <div> 104 <span>aaa</span>aa </div> 105 </f>