| <!doctype html> |
| <meta charset="utf-8"> |
| <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> |
| <link rel="stylesheet" href="support/highlights.css"> |
| <style> |
| @font-face { |
| font-family: CSSTest; |
| src: url(/fonts/CSSTest/csstest-basic-italic.ttf); |
| } |
| main { |
| font: 80px/1 CSSTest; |
| margin: 0.5em; |
| width: min-content; |
| } |
| .unselected { |
| background: black; |
| } |
| .orange { |
| color: orange; |
| } |
| .selected { |
| background: #0000FFC0; |
| color: transparent; |
| } |
| </style> |
| <!-- |
| In this ref, the overhanging parts of the selected text are |
| visible, being painted in orange. Gecko does this. |
| --> |
| <p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue. |
| <main class="highlight_reftest"> |
| <div class="hrt_layers"> |
| <div><span class="unselected">ii∫<span class="orange">∫∫</span></span></div> |
| <div><span class="selected">ii∫</span>∫∫</div> |
| ii∫∫∫ |
| </div> |
| </main> |
