diff options
Diffstat (limited to 'layout/reftests/text/webkit-text-security-1.html')
| -rw-r--r-- | layout/reftests/text/webkit-text-security-1.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/layout/reftests/text/webkit-text-security-1.html b/layout/reftests/text/webkit-text-security-1.html new file mode 100644 index 0000000000..19ffaf5b49 --- /dev/null +++ b/layout/reftests/text/webkit-text-security-1.html @@ -0,0 +1,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 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>--> |