tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
     40 </div>
     41 <div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
     42 </div>
     43 <div><span>&#x202e;a&#x202d;bc</span> <span>d&#x202e;e&#x202d;f</span>
     44 </div>
     45 <div><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
     46 </div>
     47 <div><span>&#x202e;a&#x202d;bc</span><span> d&#x202e;e&#x202d;f</span>
     48 </div>
     49 <div><span>&#x202e;a&#x202d;bc</span> aa<span>d&#x202e;e&#x202d;f</span>
     50 </div>
     51 <div><span>&#x202e;a&#x202d;bc </span>aa<span>d&#x202e;e&#x202d;f</span>
     52 </div>
     53 <div><span>&#x202e;a&#x202d;bc</span>aa<span> d&#x202e;e&#x202d;f</span>
     54 </div>
     55 <div><span>&#x202e;a&#x202d;bc</span> aa <span>d&#x202e;e&#x202d;f</span>
     56 </div>
     57 <div><span>&#x202e;a&#x202d;bc</span>aa <span>d&#x202e;e&#x202d;f</span>
     58 </div>
     59 <div><span>&#x202e;a&#x202d;bc</span>aa</div>
     60 </f>
     61 
     62 <f class="min">
     63 <div><span>&#x202e;a&#x202d;bc</span><span>d&#x202e;e&#x202d;f</span>
     64 </div>
     65 <div><span>&#x202e;a&#x202d;bc</span>aa<span>d&#x202e;e&#x202d;f</span>
     66 </div>
     67 <div><span>&#x202e;a&#x202d;bc</span><br><span>d&#x202e;e&#x202d;f</span>
     68 </div>
     69 <!-- FIXME -->
     70 <div style="white-space:normal;"><span>&#x202e;a&#x202d;bc </span><span>d&#x202e;e&#x202d;f</span>
     71 </div>
     72 <div><span class="l">bc</span><span>&#x202e;a&#x202d;</span><br><span class="r">d&#x202e;e&#x202d;f</span>
     73 </div>
     74 <div><span>&#x202e;a&#x202d;bc</span><br>aa<span>d&#x202e;e&#x202d;f</span>
     75 </div>
     76 <div><span>&#x202e;a&#x202d;bc</span><br>aa<span>d&#x202e;e&#x202d;f</span>
     77 </div>
     78 <div><span class="l">bc</span>aa<span>&#x202e;a&#x202d;</span><br><span class="r">d&#x202e;e&#x202d;f</span>
     79 </div>
     80 <div><span>&#x202e;a&#x202d;bc</span><br>aa<br><span>d&#x202e;e&#x202d;f</span>
     81 </div>
     82 <div><span>&#x202e;a&#x202d;bc</span>aa<br><span>d&#x202e;e&#x202d;f</span>
     83 </div>
     84 <div><span>&#x202e;a&#x202d;bc</span>aa</div>
     85 </f>