OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | 2 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
3 <style> | 3 <style> |
4 body { | 4 body { |
5 font-size: 24px; | 5 font-size: 24px; |
6 } | 6 } |
7 | 7 |
8 div { | 8 div { |
9 border: solid; | 9 border: solid; |
10 width: 360px; | 10 width: 360px; |
11 float: left; | 11 display: inline-block; |
12 margin: 8px; | 12 margin: 4px; |
13 } | 13 } |
14 | 14 |
15 span::selection { | 15 span::selection { |
16 background-color: brown; | 16 background-color: brown; |
17 color: yellow; | 17 color: yellow; |
18 } | 18 } |
19 | 19 |
20 #special-span::selection { | 20 #special-span::selection { |
21 -webkit-text-emphasis-color: lightgreen; | 21 -webkit-text-emphasis-color: lightgreen; |
22 } | 22 } |
(...skipping 23 matching lines...) Expand all Loading... |
46 <span style="-webkit-text-emphasis: sesame;">adipiscing</span> | 46 <span style="-webkit-text-emphasis: sesame;">adipiscing</span> |
47 <span style="-webkit-text-emphasis: triangle;">elit</span>. | 47 <span style="-webkit-text-emphasis: triangle;">elit</span>. |
48 | 48 |
49 <span style="-webkit-text-emphasis: open dot;">Aliquam</span>, | 49 <span style="-webkit-text-emphasis: open dot;">Aliquam</span>, |
50 <span style="-webkit-text-emphasis: open double-circle;">odio</span> | 50 <span style="-webkit-text-emphasis: open double-circle;">odio</span> |
51 <span style="-webkit-text-emphasis: open sesame;">sapien</span>, | 51 <span style="-webkit-text-emphasis: open sesame;">sapien</span>, |
52 <span style="-webkit-text-emphasis: open triangle;">lobortis</span> | 52 <span style="-webkit-text-emphasis: open triangle;">lobortis</span> |
53 eu iaculis vel, scelerisque nec dolor. | 53 eu iaculis vel, scelerisque nec dolor. |
54 </div> | 54 </div> |
55 | 55 |
56 <div style="-webkit-writing-mode: horizontal-bt;"> | 56 <div style="-webkit-writing-mode: vertical-rl; height:150px;"> |
57 Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span> | 57 Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span> |
58 <span style="-webkit-text-emphasis: open green;">dolor</span> | 58 <span style="-webkit-text-emphasis: open green;">dolor</span> |
59 <span style="-webkit-text-emphasis: circle;">sit</span> | 59 <span style="-webkit-text-emphasis: circle;">sit</span> |
60 <span style="-webkit-text-emphasis: dot;">amet</span>, | 60 <span style="-webkit-text-emphasis: dot;">amet</span>, |
61 <span style="-webkit-text-emphasis: double-circle;">consectetur</span> | 61 <span style="-webkit-text-emphasis: double-circle;">consectetur</span> |
62 <span style="-webkit-text-emphasis: sesame;">adipiscing</span> | 62 <span style="-webkit-text-emphasis: sesame;">adipiscing</span> |
63 <span style="-webkit-text-emphasis: triangle;">elit</span>. | 63 <span style="-webkit-text-emphasis: triangle;">elit</span>. |
64 | 64 |
65 <span style="-webkit-text-emphasis: open dot;">Aliquam</span>, | 65 <span style="-webkit-text-emphasis: open dot;">Aliquam</span>, |
66 <span style="-webkit-text-emphasis: open double-circle;">odio</span> | 66 <span style="-webkit-text-emphasis: open double-circle;">odio</span> |
(...skipping 14 matching lines...) Expand all Loading... |
81 Lorem ipsum dolor sit amet, | 81 Lorem ipsum dolor sit amet, |
82 <span id="first-span" style="-webkit-text-emphasis: '@';">consectetur adipis
cing</span> | 82 <span id="first-span" style="-webkit-text-emphasis: '@';">consectetur adipis
cing</span> |
83 elit. Aliquam | 83 elit. Aliquam |
84 <span id="special-span" style="-webkit-text-emphasis: '*'; -webkit-text-emph
asis-position: under;">odio sapien</span>, | 84 <span id="special-span" style="-webkit-text-emphasis: '*'; -webkit-text-emph
asis-position: under;">odio sapien</span>, |
85 lobortis eu iaculis vel, scelerisque nec dolor. | 85 lobortis eu iaculis vel, scelerisque nec dolor. |
86 </div> | 86 </div> |
87 | 87 |
88 <script> | 88 <script> |
89 getSelection().setBaseAndExtent(document.getElementById("first-span").firstC
hild, 10, document.getElementById("special-span").firstChild, 7); | 89 getSelection().setBaseAndExtent(document.getElementById("first-span").firstC
hild, 10, document.getElementById("special-span").firstChild, 7); |
90 </script> | 90 </script> |
OLD | NEW |