tor-browser

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

line-breaking-013.html (2219B)

      1 <!doctype html>
      2 <html>
      3 <meta charset="utf-8">
      4 <title>CSS Text — line breaking of emoji sequences that should form single clusters</title>
      5 <meta name=assert content="A UA must use the extended grapheme cluster (not legacy grapheme cluster), as defined in [UAX29], as the basis for its typographic character unit.">
      6 <link rel=help href="https://www.w3.org/TR/css-text-3/#characters">
      7 <link rel=match href="reference/line-breaking-013-ref.html">
      8 <link rel=author title="Jonathan Kew" href="mailto:jkew@mozilla.com">
      9 <style>
     10 div {
     11    line-height: 1em;
     12    font-size: 30px;
     13 }
     14 .container {
     15    position: relative;
     16    margin: .5em;
     17 }
     18 .ref {
     19    background-color: white;
     20    padding: .25em;
     21 }
     22 .test {
     23    color: transparent;
     24    background-color: red;
     25    position: absolute;
     26    width: .5em;
     27    left: 0;
     28    top: 0;
     29    padding: .25em;
     30    z-index: -1;
     31 }
     32 </style>
     33 <body>
     34    <p>Each emoji should appear on a single line with no red background.</p>
     35    <div class=container>
     36        <div class=ref>&#x1F468;&#x200D;&#x1F4BB;</div><!-- man technologist -->
     37        <div class=test>&#x1F468;&#x200D;&#x1F4BB;</div>
     38    </div>
     39    <div class=container>
     40        <div class=ref>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div><!-- family with mother, son and daughter -->
     41        <div class=test>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div>
     42    </div>
     43    <div class=container>
     44        <div class=ref>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div><!-- woman juggling -->
     45        <div class=test>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div>
     46    </div>
     47    <div class=container>
     48        <div class=ref>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div><!-- woman basketball player (fitzpatrick type 6) -->
     49        <div class=test>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div>
     50    </div>
     51    <div class=container>
     52        <div class=ref>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div><!-- rainbow flag -->
     53        <div class=test>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div>
     54    </div>
     55    <div class=container>
     56        <div class=ref>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div><!-- flag of Wales -->
     57        <div class=test>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div>
     58    </div>
     59 </body>
     60 </html>