clone-nowrap-intrinsic-size.html (2138B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Test: min/max-content size on box-decoration-break:clone inline box w. white-space:nowrap</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=1556709"> 8 <link rel="match" href="clone-nowrap-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 white-space: nowrap; 17 } 18 .max > div { 19 width: max-content; 20 } 21 .min > div { 22 width: min-content; 23 } 24 25 span { 26 border: 2px solid gray; 27 padding: 0 10px 0 6px; 28 border-width: 0 8px 0 5px; 29 margin: 0 4px 0 3px; 30 background: yellow; 31 -webkit-box-decoration-break: clone; 32 box-decoration-break: clone; 33 } 34 35 f { margin-right: 30px; float: left; } 36 </style> 37 <body> 38 <f class="max"> 39 <div> 40 <span>aaa</span><span>aaa</span> 41 </div> 42 <div> 43 <span>aaa</span>aa<span>aaa</span> 44 </div> 45 <div> 46 <span>aaa</span> <span>aaa</span> 47 </div> 48 <div> 49 <span>aaa </span><span>aaa</span> 50 </div> 51 <div> 52 <span>aaa</span><span> aaa</span> 53 </div> 54 <div> 55 <span>aaa</span> aa<span>aaa</span> 56 </div> 57 <div> 58 <span>aaa </span>aa<span>aaa</span> 59 </div> 60 <div> 61 <span>aaa</span>aa<span> aaa</span> 62 </div> 63 <div> 64 <span>aaa</span> aa <span>aaa</span> 65 </div> 66 <div> 67 <span>aaa</span>aa <span>aaa</span> 68 </div> 69 <div> 70 <span>aaa</span>aa </div> 71 </f> 72 73 <f class="min"> 74 <div> 75 <span>aaa</span><span>aaa</span> 76 </div> 77 <div> 78 <span>aaa</span>aa<span>aaa</span> 79 </div> 80 <div> 81 <span>aaa</span> <span>aaa</span> 82 </div> 83 <div> 84 <span>aaa </span><span>aaa</span> 85 </div> 86 <div> 87 <span>aaa</span><span> aaa</span> 88 </div> 89 <div> 90 <span>aaa</span> aa<span>aaa</span> 91 </div> 92 <div> 93 <span>aaa </span>aa<span>aaa</span> 94 </div> 95 <div> 96 <span>aaa</span>aa<span> aaa</span> 97 </div> 98 <div> 99 <span>aaa</span> aa <span>aaa</span> 100 </div> 101 <div> 102 <span>aaa</span>aa <span>aaa</span> 103 </div> 104 <div> 105 <span>aaa</span>aa </div> 106 </f>