slice-intrinsic-size-bidi-ref.html (2715B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Reference: min/max-content size on box-decoration-break:slice inline box with bidi text</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 <style> 6 html,body { 7 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 8 } 9 10 div { 11 border: 5px solid blue; 12 white-space: pre; 13 } 14 .max > div { 15 width: -moz-max-content; 16 width: -webkit-max-content; 17 width: max-content; 18 } 19 .min > div { 20 width: -moz-min-content; 21 width: -webkit-min-content; 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 } 32 33 f { margin-right: 30px; float: left; } 34 .l { margin-right:0; border-right-width:0; padding-right:0 } 35 .r { margin-left:0; border-left-width:0; padding-left:0 } 36 </style> 37 <body> 38 <f class="max"> 39 <div><span>‮a‭bc</span><span>d‮e‭f</span> 40 </div> 41 <div><span>‮a‭bc</span>aa<span>d‮e‭f</span> 42 </div> 43 <div><span>‮a‭bc</span> <span>d‮e‭f</span> 44 </div> 45 <div><span>‮a‭bc </span><span>d‮e‭f</span> 46 </div> 47 <div><span>‮a‭bc</span><span> d‮e‭f</span> 48 </div> 49 <div><span>‮a‭bc</span> aa<span>d‮e‭f</span> 50 </div> 51 <div><span>‮a‭bc </span>aa<span>d‮e‭f</span> 52 </div> 53 <div><span>‮a‭bc</span>aa<span> d‮e‭f</span> 54 </div> 55 <div><span>‮a‭bc</span> aa <span>d‮e‭f</span> 56 </div> 57 <div><span>‮a‭bc</span>aa <span>d‮e‭f</span> 58 </div> 59 <div><span>‮a‭bc</span>aa</div> 60 </f> 61 62 <f class="min"> 63 <div><span>‮a‭bc</span><span>d‮e‭f</span> 64 </div> 65 <div><span>‮a‭bc</span>aa<span>d‮e‭f</span> 66 </div> 67 <div><span>‮a‭bc</span><br><span>d‮e‭f</span> 68 </div> 69 <!-- FIXME --> 70 <div style="white-space:normal;"><span>‮a‭bc </span><span>d‮e‭f</span> 71 </div> 72 <div><span class="l">bc</span><span>‮a‭</span><br><span class="r">d‮e‭f</span> 73 </div> 74 <div><span>‮a‭bc</span><br>aa<span>d‮e‭f</span> 75 </div> 76 <div><span>‮a‭bc</span><br>aa<span>d‮e‭f</span> 77 </div> 78 <div><span class="l">bc</span>aa<span>‮a‭</span><br><span class="r">d‮e‭f</span> 79 </div> 80 <div><span>‮a‭bc</span><br>aa<br><span>d‮e‭f</span> 81 </div> 82 <div><span>‮a‭bc</span>aa<br><span>d‮e‭f</span> 83 </div> 84 <div><span>‮a‭bc</span>aa</div> 85 </f>