active-selection-043.html (2231B)
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 (complex)</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-bounds"> 11 <link rel="match" href="../reference/ref-nothing-below.xht"> 12 13 <meta name="assert" content="In this test, a filled red image has a padding belt painted red and a red border. This test checks that the associated overlay for an image must not leak outside the image's border box."> 14 15 <!-- 16 17 " 18 For replaced content, the associated overlay must cover 19 at least the entire replaced object, and may extend 20 outward to include the element's entire content box. 21 The overlay may also include other other areas within 22 the border-box of an element (...) 23 " 24 coming from 25 https://www.w3.org/TR/css-pseudo-4/#highlight-bounds 26 27 --> 28 29 <style> 30 div 31 { 32 font-size: 300%; 33 } 34 35 img 36 { 37 background-color: red; 38 /* so that the padding belt is painted red */ 39 border: red solid 10px; 40 padding: 10px; 41 } 42 43 /* 44 Chromium 80+ highlights the descender space 45 below the baseline on which the image "sits" while 46 Firefox 72+ only highlights the image itself. 47 */ 48 49 img::selection 50 { 51 background-color: red; 52 color: red; 53 } 54 55 span#masking 56 { 57 background-color: white; 58 display: inline-block; 59 height: 100px; 60 position: relative; 61 right: 100px; 62 width: 100px; 63 } 64 </style> 65 66 <script> 67 function startTest() 68 { 69 var targetRange = document.createRange(); 70 /* We first create an empty range */ 71 targetRange.selectNodeContents(document.getElementById("test")); 72 /* Then we set the range boundaries to the children of div#test */ 73 window.getSelection().addRange(targetRange); 74 /* Finally, we now select such range of content */ 75 document.documentElement.className = ""; 76 } 77 </script> 78 79 <body onload="startTest();"> 80 81 <p>Test passes if there is nothing below. 82 83 <div id="test"><img src="support/60x60-red.png" alt="Image download support must be enabled"><span id="masking"></span></div>