10 -webkit-text-security: initial;
13 content:
"before text";
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";
20 .before.disc::before {
21 content:
"\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022";
23 .before.square::before {
24 content:
"\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0\25A0";
27 list-style-type:
"\25E6\25E6\25E6";
30 list-style-type:
"\2022\2022\2022";
33 list-style-type:
"\25A0\25A0\25A0";
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
;
46 if (document
.location
.search
!= "?ref") {
47 console
.warn("Expected either ?test or ?ref request");
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") {
55 } else if (maskOption
== "disc") {
57 } else if (maskOption
== "square") {
59 } else if (maskOption
== "none") {
62 console
.warn("Unknown mask character option: " + maskOption
);
66 testElems
= document
.getElementsByClassName("test");
67 for (i
= 0; i
< testElems
.length
; ++i
) {
69 if (e
.classList
.contains("before") || e
.tagName
== "OL" || e
.tagName
== "UL") {
70 e
.classList
.add(maskOption
);
72 if (e
.tagName
== "INPUT") {
73 if (e
.type
== "password") {
77 e
.value
= e
.value
.replaceAll(/./g
, maskChar
);
80 function replaceInElem(elem
) {
81 if (elem
.classList
&& elem
.classList
.contains("init")) {
85 elem
.alt
= elem
.alt
.replaceAll(/./g
, maskChar
);
87 if (elem
.firstElementChild
) {
88 for (c
= elem
.firstElementChild
; c
; c
= c
.nextElementSibling
) {
93 if (elem
.textContent
!= " ") {
94 elem
.textContent
= elem
.textContent
.replaceAll(/./g
, maskChar
);
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>
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 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>
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>-->