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