active-selection-063.html (1865B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Pseudo-Elements Test: active selection and consecutive preserved &Tab;</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors"> 9 <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property"> 10 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 13 <meta name="assert" content="In this test, tab characters are preserved and converted into 4 consecutive blank spaces. The background of such blank spaces can be painted. The lines are broken after each tab character since 'white-space: pre' preserves line breaks."> 14 15 <style> 16 div 17 { 18 background-color: red; 19 color: red; 20 float: left; /* or display: inline-block or position: absolute or width: 4em */ 21 font-family: Ahem; 22 font-size: 25px; 23 line-height: 1; 24 /* -moz-tab-size: 4; */ 25 /* 26 Implement 'tab-size' (dropping the -moz- prefix) 27 https://bugzilla.mozilla.org/show_bug.cgi?id=737785 28 */ 29 tab-size: 4; 30 white-space: pre; 31 } 32 33 div::selection 34 { 35 background-color: green; 36 } 37 </style> 38 39 <script> 40 function startTest() 41 { 42 var targetRange = document.createRange(); 43 /* We first create an empty range */ 44 targetRange.selectNodeContents(document.getElementById("test")); 45 /* Then we set the range boundaries to the children of div#test */ 46 window.getSelection().addRange(targetRange); 47 /* Finally, we now select such range of content */ 48 } 49 </script> 50 51 <body onload="startTest();"> 52 53 <p>Test passes if there is a filled green square and <strong>no red</strong>. 54 55 <div id="test">	 56 	 57 	 58 	</div>