LayoutTests/fast/css/text-security.html - WebKit - Git at Google

 <script>

 function finishTest()
 {
     document.getElementById("test").setAttribute("class", "bullet");
     if (window.layoutTestController)
         layoutTestController.notifyDone();
 }

 function init()
 {
     if (window.layoutTestController)
         layoutTestController.waitUntilDone();
     setTimeout(finishTest, 0);
 }

 </script>

 <style>

 @font-face {
     font-family: 'times';
     src: local('Times');
 }

 /* Match Mac OS X's font fallback behavior on Windows */

 @font-face {
     font-family: 'times';
     src: local('Lucida Grande');
     /* black square and white bullet */
     unicode-range: U+25A0, U+25E6;
 }

 .square { -webkit-text-security: square; }
 .bullet { -webkit-text-security: disc; }
 .circle { -webkit-text-security: circle; }
 .none { -webkit-text-security: disc; -webkit-text-security: none; }
 .invalid { -webkit-text-security: disc; -webkit-text-security: not-secure; }

 </style>

 <body onload="init()">
 <p>Bullets: <span class="bullet">xxx</span>.</p>
 <p>Squares: <span class="square">xxx</span>.</p>
 <p>Circles: <span class="circle">xxx</span>.</p>
 <p>Plain letters: <span class="none">xxx</span>.</p>
 <p>Bullets (invalid): <span class="invalid">xxx</span>.</p>
 <p>Bullets (dynamic): <span id="test" class="square">xxx</span>.</p>
 </body>
	<script>

	function finishTest()
	{
	document.getElementById("test").setAttribute("class", "bullet");
	if (window.layoutTestController)
	layoutTestController.notifyDone();
	}

	function init()
	{
	if (window.layoutTestController)
	layoutTestController.waitUntilDone();
	setTimeout(finishTest, 0);
	}

	</script>

	<style>

	@font-face {
	font-family: 'times';
	src: local('Times');
	}

	/* Match Mac OS X's font fallback behavior on Windows */

	@font-face {
	font-family: 'times';
	src: local('Lucida Grande');
	/* black square and white bullet */
	unicode-range: U+25A0, U+25E6;
	}

	.square { -webkit-text-security: square; }
	.bullet { -webkit-text-security: disc; }
	.circle { -webkit-text-security: circle; }
	.none { -webkit-text-security: disc; -webkit-text-security: none; }
	.invalid { -webkit-text-security: disc; -webkit-text-security: not-secure; }

	</style>

	<body onload="init()">
	<p>Bullets: <span class="bullet">xxx</span>.</p>
	<p>Squares: <span class="square">xxx</span>.</p>
	<p>Circles: <span class="circle">xxx</span>.</p>
	<p>Plain letters: <span class="none">xxx</span>.</p>
	<p>Bullets (invalid): <span class="invalid">xxx</span>.</p>
	<p>Bullets (dynamic): <span id="test" class="square">xxx</span>.</p>
	</body>