<!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 invisible, being painted in transparent. Blink 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></div> <div>ii∫<span class="hrt_hider"> <div><span class="orange">ii∫</span>∫∫</div> ∫∫ </span></div> <div>ii∫<span class="orange">∫∫</span></div> <div><span class="selected">ii∫</span>∫∫</div> ii∫∫∫ </div> </main>