selection-background-painting-order-ref1.html (1049B)
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 visible, being painted in orange. Gecko 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 class="orange">∫∫</span></span></div> 34 <div><span class="selected">ii∫</span>∫∫</div> 35 ii∫∫∫ 36 </div> 37 </main>