active-selection-041.html (2686B)
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="mismatch" href="reference/active-selection-041-notref.html"> 12 13 <meta content="should" name="flags"> 14 <meta name="assert" content="In this test, a filled yellow image is selected and is overlaid with an opaque blue background color. The specification states that, for replaced content, the UA should create a semi-transparent wash to coat the content. But such semi-transparent wash could use a transparency of 0.3 or 0.5 or 0.7: so, we do not know. Therefore we can not predict the rendered end result. All we can be sure of is that the image, once selected, must not be identical to its original non-selected version. This test checks precisely and only this."> 15 16 <!-- 17 " 18 (...) for replaced content, the UA should create 19 a semi-transparent wash to coat the content so 20 that it can show through the selection. 21 " 22 coming from 23 https://www.w3.org/TR/css-pseudo-4/#highlight-painting 24 --> 25 26 <!-- 27 July 28th 2020 28 29 Firefox 68.10.0 ESR will create a resulting 30 background color of #7F7F80, which looks like 31 dark gray. 32 33 Chrome 83.0.4103.116 will create a resulting 34 background color of #33CCCC which looks like 35 dark blue. 36 37 July 28th 2020 38 --> 39 40 <style> 41 div 42 { 43 font-size: 300%; 44 } 45 46 img 47 { 48 vertical-align: top; 49 } 50 51 /* 52 Chromium 80+ will highlight space 53 below and above content box while 54 Firefox 72+ only highlights the image itself. 55 Therefore this 'vertical-align: top' declaration 56 to work around this possible behavior. 57 */ 58 59 img::selection 60 { 61 background-color: blue; 62 /* 63 equivalent to rgb(0, 0, 255) or rgb(0%, 0%, 100%) 64 or rgba(0, 0, 255, 1) or #0000FF 65 */ 66 } 67 </style> 68 69 <script> 70 function startTest() 71 { 72 var targetRange = document.createRange(); 73 /* We first create an empty range */ 74 targetRange.selectNodeContents(document.getElementById("test")); 75 /* Then we set the range boundaries to the children of div#test */ 76 window.getSelection().addRange(targetRange); 77 /* Finally, we now select such range of content */ 78 document.documentElement.className = ""; 79 } 80 </script> 81 82 <body onload="startTest();"> 83 84 <p>Test passes if there is a filled square which is <strong>not yellow</strong>. 85 86 <div id="test"><img src="../support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"></div>