third_party/WebKit/LayoutTests/fast/text/emphasis.html

   1 <!doctype html>
   2 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   3 <style>
   4     body {
   5         font-size: 24px;
   6     }
   7
   8     div {
   9         border: solid;
  10         width: 360px;
  11         float: left;
  12         margin: 8px;
  13     }
  14
  15     span::selection {
  16         background-color: brown;
  17         color: yellow;
  18     }
  19
  20     #special-span::selection {
  21         -webkit-text-emphasis-color: lightgreen;
  22     }
  23 </style>
  24 <div>
  25     Lorem ipsum dolor sit amet,
  26     <span style="-webkit-text-emphasis: '@ignored';">consectetur adipiscing</span>
  27     elit. Aliquam
  28     <span style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
  29     lobortis eu iaculis vel, scelerisque nec dolor.
  30 </div>
  31
  32 <div style="text-rendering: optimizelegibility;">
  33     Lorem ipsum dolor sit amet,
  34     <span style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
  35     elit. Aliquam
  36     <span style="-webkit-text-emphasis: '*does not matter'; -webkit-text-emphasis-position: under;">odio sa&#x0300;pien</span>,
  37     lobortis eu iaculis vel, scelerisque nec dolor.
  38 </div>
  39
  40 <div>
  41     Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span>
  42     <span style="-webkit-text-emphasis: open green;">dolor</span>
  43     <span style="-webkit-text-emphasis: circle;">sit</span>
  44     <span style="-webkit-text-emphasis: dot;">amet</span>,
  45     <span style="-webkit-text-emphasis: double-circle;">consectetur</span>
  46     <span style="-webkit-text-emphasis: sesame;">adipiscing</span>
  47     <span style="-webkit-text-emphasis: triangle;">elit</span>.
  48
  49     <span style="-webkit-text-emphasis: open dot;">Aliquam</span>,
  50     <span style="-webkit-text-emphasis: open double-circle;">odio</span>
  51     <span style="-webkit-text-emphasis: open sesame;">sapien</span>,
  52     <span style="-webkit-text-emphasis: open triangle;">lobortis</span>
  53     eu iaculis vel, scelerisque nec dolor.
  54 </div>
  55
  56 <div style="-webkit-writing-mode: horizontal-bt;">
  57     Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span>
  58     <span style="-webkit-text-emphasis: open green;">dolor</span>
  59     <span style="-webkit-text-emphasis: circle;">sit</span>
  60     <span style="-webkit-text-emphasis: dot;">amet</span>,
  61     <span style="-webkit-text-emphasis: double-circle;">consectetur</span>
  62     <span style="-webkit-text-emphasis: sesame;">adipiscing</span>
  63     <span style="-webkit-text-emphasis: triangle;">elit</span>.
  64
  65     <span style="-webkit-text-emphasis: open dot;">Aliquam</span>,
  66     <span style="-webkit-text-emphasis: open double-circle;">odio</span>
  67     <span style="-webkit-text-emphasis: open sesame;">sapien</span>,
  68     <span style="-webkit-text-emphasis: open triangle;">lobortis</span>
  69     eu iaculis vel, scelerisque nec dolor.
  70 </div>
  71
  72 <div style="line-height: 2;">
  73     Lorem ipsum dolor sit amet,
  74     <span style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
  75     elit. Aliquam
  76     <span style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
  77     lobortis eu iaculis vel, scelerisque nec dolor.
  78 </div>
  79
  80 <div>
  81     Lorem ipsum dolor sit amet,
  82     <span id="first-span" style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
  83     elit. Aliquam
  84     <span id="special-span" style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
  85     lobortis eu iaculis vel, scelerisque nec dolor.
  86 </div>
  87
  88 <script>
  89     getSelection().setBaseAndExtent(document.getElementById("first-span").firstChild, 10, document.getElementById("special-span").firstChild, 7);
  90 </script>