layout/reftests/text/webkit-text-security-1.html

   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">&nbsp;</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 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>-->