webkit-text-security-1.html (5070B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 4 <style> 5 .test { 6 color: blue; 7 font: 13px monospace; 8 } 9 .init { 10 -webkit-text-security: initial; 11 } 12 .before::before { 13 content: "before text"; 14 } 15 16 /* these classes are added/used only in reference mode */ 17 .before.circle::before { 18 content: "\25E6\25E6\25E6\25E6\25E6\25E6\25E6\25E6\25E6\25E6\25E6"; 19 } 20 .before.disc::before { 21 content: "\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022"; 22 } 23 .before.square::before { 24 content: "\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0"; 25 } 26 ol.circle { 27 list-style-type: "\25E6\25E6\25E6"; 28 } 29 ol.disc { 30 list-style-type: "\2022\2022\2022"; 31 } 32 ol.square { 33 list-style-type: "\25A0\25A0\25A0"; 34 } 35 </style> 36 37 <script> 38 function go() { 39 // In test mode, we just apply the requested -webkit-text-security setting. 40 maskOption = document.location.hash.substr(1); 41 if (document.location.search == "?test") { 42 document.styleSheets[0].cssRules[0].style.webkitTextSecurity = maskOption; 43 return; 44 } 45 46 if (document.location.search != "?ref") { 47 console.warn("Expected either ?test or ?ref request"); 48 return; 49 } 50 51 // In reference mode, edit the content to replace text with the masking symbol. 52 // (This is hacky and incomplete, just enough to handle the things present in this example.) 53 if (maskOption == "circle") { 54 maskChar = "\u25E6"; 55 } else if (maskOption == "disc") { 56 maskChar = "\u2022"; 57 } else if (maskOption == "square") { 58 maskChar = "\u25A0"; 59 } else if (maskOption == "none") { 60 return; 61 } else { 62 console.warn("Unknown mask character option: " + maskOption); 63 return; 64 } 65 66 testElems = document.getElementsByClassName("test"); 67 for (i = 0; i < testElems.length; ++i) { 68 e = testElems[i]; 69 if (e.classList.contains("before") || e.tagName == "OL" || e.tagName == "UL") { 70 e.classList.add(maskOption); 71 } 72 if (e.tagName == "INPUT") { 73 if (e.type == "password") { 74 // leave untouched 75 continue; 76 } 77 e.value = e.value.replaceAll(/./g, maskChar); 78 continue; 79 } 80 function replaceInElem(elem) { 81 if (elem.classList && elem.classList.contains("init")) { 82 return; 83 } 84 if (elem.alt) { 85 elem.alt = elem.alt.replaceAll(/./g, maskChar); 86 } 87 if (elem.firstElementChild) { 88 for (c = elem.firstElementChild; c; c = c.nextElementSibling) { 89 replaceInElem(c); 90 } 91 return; 92 } 93 if (elem.textContent != " ") { 94 elem.textContent = elem.textContent.replaceAll(/./g, maskChar); 95 } 96 } 97 replaceInElem(e); 98 } 99 } 100 </script> 101 102 <body onload="go()"> 103 div: <div class="test">a b c</div> 104 div with single (collapsed-away) space character: <div class="test"> </div> 105 div with nbsp: <div class="test"> </div> 106 div with ::before generated content text: <div class="test before"></div> 107 implicitly inheriting into div: <div class="test"><div>div inherit</div></div> 108 reset on child div: <div class="test"><div class="init">div reset</div></div> 109 span: <span class="test">Hello</span><br> 110 img with alt text and "title" hover-text: 111 <img class="test" src="broken" alt="alt text" title="hover text"><br> 112 Fieldset: 113 <fieldset class="test"><legend>Legend</legend><span>Fieldset</span></fieldset> 114 <h4>FORM FIELDS:</h4> 115 button: <button class="test">Hello</button><br> 116 input: <input class="test" value="Hello"><br> 117 input type="password": <input class="test" type="password" value="please"><br> 118 input type="submit": <input class="test" type="submit" value="Submit"><br> 119 input type="reset": <input class="test" type="reset" value="Reset"><br> 120 input type="button": <input class="test" type="button" value="button"><br> 121 input type="tel": <input class="test" type="tel" value="12345"><br> 122 <!-- skipping input types with browser-generated content that is hard to emulate 123 and can't just be overwritten with the masking character --> 124 <!--input type="number": <input class="test" type="number" value="12345"><br>--> 125 input type="search": <input class="test" type="search" value="12345"><br> 126 input type="url": <input class="test" type="url" value="http://example.org"><br> 127 input type="email": <input class="test" type="email" value="a@example.org"><br> 128 <!--input type="date": <input class="test" type="date" value="2022-01-01"><br>--> 129 <!--input type="time": <input class="test" type="time" value="12:00:00"><br>--> 130 <!--input type="week": <input class="test" type="week" value="12:00:00"><br>--> 131 <!--input type="file": <input class="test" type="file"><br>--> 132 <!--input type="image": <input class="test" type="image"><br>--> 133 select: <select style="appearance: none" class="test"><option>A</option><option>BB</option></select><br> 134 SVG: <svg height="30px" class="test"><text y="20">SVG Text</text></svg><br> 135 136 Ordered list, first item empty: <ol class="test"><li></li><li>a</li><li>bb</li></ol> 137 <!-- unordered list is tricky because of the use of -moz-bullet-font for the markers --> 138 <!--Unordered list, first item empty: <ul class="test"><li></li><li>a</li><li>bb</li></ul>-->