| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: CSS3 text-decoration-color repaint</title> |
| <meta name="flags" content="ahem"/> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| <script> |
| function runRepaintTest() { |
| document.getElementById("test-underline").style.textDecorationColor = 'gray'; |
| document.getElementById("test-overline").style.textDecorationColor = 'yellow'; |
| document.getElementById("test-line-through").style.textDecorationColor = 'white'; |
| document.getElementById("test-parent").style.textDecorationColor = 'green'; |
| document.getElementById("test-ancestor-1").style.textDecorationColor = 'black'; |
| document.getElementById("test-ancestor-2").style.textDecorationColor = 'inherit'; |
| document.getElementById("test-mixed-1").style.textDecorationColor = 'black'; |
| document.getElementById("test-mixed-2").style.textDecorationColor = 'green'; |
| document.getElementById("test-mixed-3").style.textDecorationColor = 'blue'; |
| } |
| </script> |
| <style> |
| .underline { |
| text-decoration: underline; |
| } |
| .overline { |
| text-decoration: overline; |
| } |
| .line-through { |
| text-decoration: line-through; |
| } |
| </style> |
| </head> |
| <body onload="runRepaintTest();" style="font: 10px Ahem; -webkit-font-smoothing: none;"> |
| <!-- Green text with gray underline on repaint --> |
| <p><span class="underline" id="test-underline" style="color: green;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p> |
| |
| <!-- Navy text with yellow overline on repaint --> |
| <p><span class="overline" id="test-overline" style="color: navy;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p> |
| |
| <!-- Black text with white line-through on repaint --> |
| <p><span class="line-through" id="test-line-through" style="color: black;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p> |
| |
| <!-- Parent color is grey, with green underline, first ancestor has black overline and latter has inherited text decoration color from parent on repaint --> |
| <p><span class="underline" id="test-parent" style="color: rgb(100, 100, 100);">lorem <span class="overline" id="test-ancestor-1">ipsum</span> <span class="line-through" id="test-ancestor-2">ipsum</span> ipsum</span></p> |
| |
| <!-- Transparent text with green overline, blue line-through and black underline on repaint --> |
| <p style="color: transparent;"><span id="test-mixed-1" class="underline"><span id="test-mixed-2" class="overline"><span id="test-mixed-3" class="line-through">lorem ipsum</span></span></span></p> |
| </body> |
| </html> |
