tor-browser

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

atomic-under-marker-ref.html (2338B)

      1 <!DOCTYPE HTML>
      2 <!--
      3    Any copyright is dedicated to the Public Domain.
      4    http://creativecommons.org/licenses/publicdomain/
      5 
      6    Test: text-overflow with overflow where introducing a marker would cause
      7          the line to have no visible text or atomic inline-level content --
      8          then we should either suppress or clip the marker
      9 -->
     10 <html><head>
     11 <title>text-overflow: suppress or clip the marker when it hides all content</title>
     12 <style type="text/css">
     13 @font-face {
     14  font-family: DejaVuSansMono;
     15  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
     16 }
     17 html,body {
     18    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
     19 }
     20 
     21 .test {
     22  overflow:hidden;
     23  width:100px;
     24  white-space:nowrap;
     25  margin:0 100px;
     26 }
     27 span {
     28 width:97px;
     29 display:inline-block;
     30 }
     31 s {
     32 width:3px;
     33 height:10px;
     34 margin-left:-2px;
     35 display:inline-block;
     36 background:blue;
     37 }
     38 .rlo {
     39  unicode-bidi: bidi-override; direction:rtl;
     40 }
     41 .lro {
     42  unicode-bidi: bidi-override;
     43 }
     44 .rtl {
     45  direction:rtl;
     46 }
     47 .ltr {
     48  direction:ltr;
     49 }
     50 
     51 .t1 { }
     52 .t2 { }
     53 .t3 { margin-left:98px; padding-left:3px; }
     54 
     55 i {
     56  display:inline-block;
     57  width:2px; 
     58  height:10px;
     59  background:blue;
     60 }
     61 
     62 </style>
     63 
     64 </head><body>
     65 
     66 <div style="float:left;">
     67 <div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
     68 <div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
     69 <div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
     70 <div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
     71 <div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
     72 <div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
     73 
     74 <div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
     75 <div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
     76 <div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
     77 <div class="test t2"><x style="margin-left:3px">.|</style></div> <!-- atomic under marker -->
     78 <div class="test t3">g<i></i></div> <!-- atomic in padding -->
     79 <div class="test t2"><s style="margin-left:1px;"></s><i style="width:17px"></i></div> <!-- atomic under marker and in padding -->
     80 
     81 </div>
     82 
     83 
     84 </body>
     85 </html>