| <!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"> |
| <style> |
| .first-underline { |
| text-decoration: underline; |
| text-decoration-color: blue; |
| } |
| .second-underline { |
| text-decoration: underline; |
| text-decoration-color: gold; |
| } |
| .third-underline { |
| text-decoration: underline; |
| text-decoration-color: green; |
| } |
| .first-underline::selection { |
| text-decoration: underline; |
| text-decoration-color: pink; |
| } |
| .second-underline::selection { |
| text-decoration: underline; |
| text-decoration-color: violet; |
| } |
| .third-underline::selection { |
| text-decoration: underline; |
| text-decoration-color: skyblue; |
| } |
| |
| .blue-underline { |
| text-decoration: underline; |
| text-decoration-color: blue; |
| } |
| .gold-overline { |
| text-decoration: overline; |
| text-decoration-color: gold; |
| } |
| .green-line-through { |
| text-decoration: line-through; |
| text-decoration-color: green; |
| } |
| .blue-underline::selection { |
| text-decoration: underline; |
| text-decoration-color: pink; |
| } |
| .gold-overline::selection { |
| text-decoration: overline; |
| text-decoration-color: violet; |
| } |
| .green-line-through::selection { |
| text-decoration: line-through; |
| text-decoration-color: skyblue; |
| } |
| </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();"> |
| <div id="wrapper"> |
| <h3>Each line of this test should match its text decoration color description:</h3> |
| |
| <!-- Nested same text-decoration-line with different text-decoration-color. |
| It should be affected by their parent |::selection| --> |
| <div> |
| <span class="first-underline"> |
| First pink underline |
| <span class="second-underline"> |
| Second violet underline |
| <span class="third-underline">Third skyblue underline</span> |
| </span> |
| </span> |
| </div><br/> |
| |
| <!-- Mix of underline, overline and line-through with different colors for each. |
| It should be affected by their parent |::selection| --> |
| <div> |
| <span class="blue-underline"> |
| pink underline |
| <span class="green-line-through"> |
| blue underline, skyblue line-through |
| <span class="gold-overline">blue underline, green line-through, violet overline</span> |
| </span> |
| </span> |
| </div><br/> |
| |
| <!-- Test behavior on subscript and superscript text --> |
| <div> |
| <span class="green-line-through"> |
| <sub class="gold-overline">subscript text, violet overline, green line-through</sub> |
| skyblue line-through |
| <sup class="blue-underline">superscript text, pink underline, green line-through</sup> |
| </span> |
| </div><br/> |
| </div> |
| </body> |
| </html> |
