| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: CSS3 text-decoration-color when |::selection| exists</title> |
| <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property"> |
| <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> |
| <link rel="match" href="reference/text-decoration-color-selection-001-ref.html"> |
| <style> |
| #transparent-fill { |
| -webkit-text-fill-color: transparent; |
| -webkit-text-stroke-width: 1px; |
| -webkit-text-stroke-color: black; |
| } |
| |
| .underline { |
| text-decoration: underline; |
| color: gray; |
| text-decoration-color: blue; |
| } |
| .overline { |
| text-decoration: overline; |
| color: green; |
| text-decoration-color: black; |
| } |
| .line-through { |
| text-decoration: line-through; |
| color: violet; |
| text-decoration-color: gold; |
| } |
| .underline::selection { |
| color: brown; |
| text-decoration-color: pink; |
| } |
| .overline::selection { |
| color: purple; |
| text-decoration-color: skyblue; |
| } |
| .line-through::selection { |
| color: orange; |
| text-decoration-color: magenta; |
| } |
| |
| .empty-selection-underline { |
| text-decoration: underline; |
| color: red; |
| text-decoration-color: blue; |
| } |
| |
| .margin-bottom { |
| margin-bottom: 20px; |
| } |
| </style> |
| <script> |
| function startTest() { |
| var targetRange = document.createRange(); |
| /* We first create an empty range */ |
| targetRange.selectNodeContents(document.getElementById("wrapper")); |
| /* Then we set the range boundaries to the children of div#wrapper */ |
| window.getSelection().addRange(targetRange); |
| /* Finally, we now select such range of content */ |
| } |
| </script> |
| </head> |
| <body onload="startTest();"> |
| <h3>Each line of this test should match its text decoration color description:</h3> |
| |
| <div id="wrapper"> |
| <!-- Test with text-fill-color and text-stroke-color values set --> |
| <div class="underline margin-bottom" id="transparent-fill" >Transparent fill with black stroke text and pink underline</div> |
| |
| <!-- Valid values for underline, overline and line-through text decoration lines when selected--> |
| <div class="underline margin-bottom">Brown text with pink underline</div> |
| <div class="overline margin-bottom">Purple text with skyblue overline</div> |
| <div class="line-through margin-bottom">Orange text with magenta line-through</div> |
| |
| <!-- When there is a selection but no |::selection| style exists. It should preserve the |
| style as it is. --> |
| <div class="empty-selection-underline margin-bottom">Red text with blue underline</div> |
| </div> |
| </body> |
| </html> |
