highlight-text-decorations-ref.html (1422B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html { 6 font-size: 24pt; 7 } 8 .style1 { 9 text-decoration: underline; 10 text-decoration-color: red; 11 color: blue; 12 } 13 .style2 { 14 text-decoration: line-through; 15 text-decoration-color: violet; 16 text-decoration-style: double; 17 } 18 .style3 { 19 text-decoration: overline; 20 text-decoration-color: orange; 21 text-decoration-style: dotted; 22 } 23 /* FIXME: There is a discrepency for how the underlines are displayed at the end of the line, leading to a pixel different in this text. Find a real fix, but in the meantime, obscure the offending pixel <rdar://problem/59327965> https://bugs.webkit.org/show_bug.cgi?id=207512*/ 24 .obscurer1 { 25 position: absolute; 26 top: 25px; 27 left: 95px; 28 width: 10px; 29 height: 10px; 30 background: grey; 31 } 32 .obscurer2 { 33 position: absolute; 34 top: 35px; 35 left: 180px; 36 width: 10px; 37 height: 10px; 38 background: grey; 39 } 40 </style> 41 </head> 42 <body> 43 O<span class="style1">n</span>e t<span class="style2">w</span>o th<span class="style3">ree</span> 44 <div class='obscurer1'></div> 45 <div class='obscurer2'></div> 46 </body> 47 </html>