active-selection-045.html (1672B)
1 <!DOCTYPE html> 2 3 <html class="reftest-wait"> 4 5 <meta charset="UTF-8"> 6 7 <title>CSS Pseudo-Elements Test: active selection and image</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 10 <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> 11 <link rel="match" href="../reference/ref-nothing-below.xht"> 12 13 <meta name="assert" content="This test checks that the associated overlay for image must not cover (or leak) outside the image's content box."> 14 15 <style> 16 /* 17 Chromium 80+ highlights the 18 top of line box minus 19 content box and the bottom 20 of line box minus content 21 box. 22 Firefox 72+ consistently highlights 23 only the image content box itself. 24 */ 25 26 div 27 { 28 font-size: 300px; 29 } 30 31 img::selection 32 { 33 background-color: red; 34 } 35 36 span#masking 37 { 38 background-color: white; 39 display: inline-block; 40 height: 100px; 41 position: relative; 42 right: 100px; 43 width: 100px; 44 } 45 </style> 46 47 <script> 48 function startTest() 49 { 50 var targetRange = document.createRange(); 51 /* We first create an empty range */ 52 targetRange.selectNodeContents(document.getElementById("test")); 53 /* Then we set the range boundaries to the children of div#test */ 54 window.getSelection().addRange(targetRange); 55 /* Finally, we now select such range of content */ 56 document.documentElement.className = ""; 57 } 58 </script> 59 60 <body onload="startTest();"> 61 62 <p>Test passes if there is nothing below. 63 64 <div id="test"><img src="support/100x100-red.png" alt="Image download support must be enabled"><span id="masking"></span></div>