Quelle webkit-text-security-1.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/reftests/text/webkit-text-security-1.html

<!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>


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>





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>

Messung V0.5

¤ Dauer der Verarbeitung: 0.4 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.