| 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 |