selection-background-painting-order-ref2.html (1234B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> 4 <link rel="stylesheet" href="support/highlights.css"> 5 <style> 6 @font-face { 7 font-family: CSSTest; 8 src: url(/fonts/CSSTest/csstest-basic-italic.ttf); 9 } 10 main { 11 font: 80px/1 CSSTest; 12 margin: 0.5em; 13 width: min-content; 14 } 15 .unselected { 16 background: black; 17 } 18 .orange { 19 color: orange; 20 } 21 .selected { 22 background: #0000FFC0; 23 color: transparent; 24 } 25 </style> 26 <!-- 27 In this ref, the overhanging parts of the selected text are 28 invisible, being painted in transparent. Blink does this. 29 --> 30 <p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue. 31 <main class="highlight_reftest"> 32 <div class="hrt_layers"> 33 <div><span class="unselected">ii∫∫∫</span></div> 34 <div>ii∫<span class="hrt_hider"> 35 <div><span class="orange">ii∫</span>∫∫</div> 36 ∫∫ 37 </span></div> 38 <div>ii∫<span class="orange">∫∫</span></div> 39 <div><span class="selected">ii∫</span>∫∫</div> 40 ii∫∫∫ 41 </div> 42 </main>