LayoutTests/fast/css/css3-ch-unit.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>
 <style type="text/css" title="teste">
     .box {
         margin: 0px;
         padding: 0px;
         overflow: hidden;
     }
     .border { border:1px solid black; }

     /* font family classes */
     .mono { font-family: monospace; }
     .monofallthrough { font-family: nonexistant, monospace; }
     .serif { font-family: serif; }
     .sans-serif { font-family: sans-serif; }
     .courier { font-family: courier; }
     .arial { font-family: arial; }
     .times { font-family: times; }
     .helvetica { font-family: helvetica; }

     /* ch-length containers */
     .one { width: 1ch; }
     .four { width: 4ch; }
     .zero { width: 0ch; }
     .alphalen { width: 26ch; }

     /* font sizes for the relative size test */
     .large { font-size:20px; }
     .relative { font-size:1ch; }

     /* pass/fail colors */
     .pass { color: green; }
     .fail { color: red; }

     /* pseudo-elements */
     #pseudo{
         font-size:2ch;
     }
     #pseudo:first-line {
         font-size:3ch;
     }
     #pseudo span:last-child {
         font-size:1ch;
     }
 </style>
 <script src="../../resources/js-test-pre.js"></script>
 <script type="text/javascript">
 </script>
 </head>
 <body id="body">
     <p>This is a test to make sure ch units work as intended. You should not see <b>anything</b> red on this page.</p>
     Only 'PASS' should be visible:
     <div id="box_mono_zero" class="box mono zero"></div>
     <script type="text/javascript">
         description("This is a test to make sure ch units work as intended.")
         shouldEvaluateTo('document.getElementById("box_mono_zero").clientWidth', "0");
     </script>

     <div id="box_mono_four1" class="box mono four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
     <div id="box_mono_four2" class="box mono four"><span class="pass">PASS</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("box_mono_four1").clientWidth', 'document.getElementById("box_mono_four2").clientWidth');
     </script>

     <div id="box_monofallthrough_four1" class="box monofallthrough four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
     <div id="box_monofallthrough_four2" class="box monofallthrough four"><span class="pass">PASS</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("box_monofallthrough_four1").clientWidth', 'document.getElementById("box_monofallthrough_four2").clientWidth');
     </script>

     The whole lower case alphabet should be readable:
     <div id="mono_box_alphalen1" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span><span class="fail">FAIL</span></div>
     <div id="mono_box_alphalen2" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("mono_box_alphalen1").clientWidth', 'document.getElementById("mono_box_alphalen2").clientWidth');
     </script>

     <div id="box_one" class="box one"></div>
     <div id="box_alphalen" class="box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("box_one").clientWidth * 26', 'document.getElementById("box_alphalen").clientWidth');
     </script>

     <div id="arial_box_one" class="arial box one"></div>
     <div id="arial_box_alphalen" class="arial box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 26', 'document.getElementById("arial_box_alphalen").clientWidth');
     </script>

     <div id="helvetica_box_one" class="helvetica box one"></div>
     <div id="helvetica_box_alphalen" class="helvetica box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 26', 'document.getElementById("helvetica_box_alphalen").clientWidth');
     </script>

     Four zeroes should be visible, nothing else:
     <div id="times_box_one" class="times box one"></div>
     <div id="box_times_four" class="box times four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("times_box_one").clientWidth * 4', 'document.getElementById("box_times_four").clientWidth');
     </script>

     <div id="box_arial_four" class="box arial four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 4', 'document.getElementById("box_arial_four").clientWidth');
     </script>

     <div id="box_helvetica_four" class="box helvetica four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 4', 'document.getElementById("box_helvetica_four").clientWidth');
     </script>

     There should be more than one green '|' visible (non-monospaced fonts):
     <div id="box_arial_one" class="box arial one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
     <div id="ref_box_arial_one" class="box arial" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
     <script type="text/javascript">
         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_arial_one").clientWidth', 'document.getElementById("box_arial_one").clientWidth');
     </script>

     <div id="box_times_one" class="box times one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
     <div id="ref_box_times_one" class="box times" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
     <script type="text/javascript">
         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_times_one").clientWidth', 'document.getElementById("box_times_one").clientWidth');
     </script>

     <div id="box_sansserif_one" class="box sansserif one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
     <div id="ref_box_sansserif_one" class="box times" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
     <script type="text/javascript">
         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_sansserif_one").clientWidth', 'document.getElementById("box_sansserif_one").clientWidth');
     </script>

     <div class="border">
         This box has a 20px font size.
         The last two '0's should be the same size.
         <div class="large pass">
             <div id="reference" class="one">0</div>
             <div id="forcedsmall" class="box one">0</div>
             <div id="chsmall" class="box one relative">0</div>
         </div>
         <script type="text/javascript">
             var ref = document.getElementById("reference");
             var refWidth = ref.clientWidth;
             var small = document.getElementById("forcedsmall");
             small.style.fontSize = refWidth +"px";
             var w1 = small.clientWidth;
             var h1 = small.clientHeight;
             var chsmall = document.getElementById("chsmall");
             var w2 = chsmall.clientWidth;
             var h2 = chsmall.clientHeight;
             shouldBeFalse("w1 !== w2 || h1 !== h2");
         </script>
     </div>
     <div id="pseudo">
         <span id="ps1">I'm a pseudo selected first line, I should be bigger than the rest.</span><br>
         <span id="ps2">I'm the second line.</span><br>
         <span id="ps3">Last in line. But one day... the throne will be mine!</span>
     </div>
     <script>
         var ps1h = document.getElementById('ps1').offsetHeight;
         var ps2h = document.getElementById('ps2').offsetHeight;
         var ps3h = document.getElementById('ps3').offsetHeight;
         shouldBeTrue("ps1h > ps2h && ps1h > ps3h");
     </script>

     <div id="box_mono_one" class="box mono one"></div>
     <div id="box_mono" class="box mono" style="display:inline-block">0</div>
     <script type="text/javascript">
         shouldEvaluateTo('document.getElementById("box_mono_one").clientWidth', 'document.getElementById("box_mono").clientWidth');
     </script>
     <script src="../../resources/js-test-post.js"></script>
     <script>
         // Text with '<span class="fail">' must not appear in DumpRenderTree's output, only when opening this file in a web browser.
         if (window.testRunner) {
             var CSSRules = 'rules';
             for (var i = 0; i < document.styleSheets[0][CSSRules].length; ++i)
                 if (document.styleSheets[0][CSSRules][i].selectorText === ".fail") {
                     document.styleSheets[0][CSSRules][i].style['display'] = 'none';
                     break;
                 }
         }
     </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style type="text/css" title="teste">
	.box {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}
	.border { border:1px solid black; }

	/* font family classes */
	.mono { font-family: monospace; }
	.monofallthrough { font-family: nonexistant, monospace; }
	.serif { font-family: serif; }
	.sans-serif { font-family: sans-serif; }
	.courier { font-family: courier; }
	.arial { font-family: arial; }
	.times { font-family: times; }
	.helvetica { font-family: helvetica; }

	/* ch-length containers */
	.one { width: 1ch; }
	.four { width: 4ch; }
	.zero { width: 0ch; }
	.alphalen { width: 26ch; }

	/* font sizes for the relative size test */
	.large { font-size:20px; }
	.relative { font-size:1ch; }

	/* pass/fail colors */
	.pass { color: green; }
	.fail { color: red; }

	/* pseudo-elements */
	#pseudo{
	font-size:2ch;
	}
	#pseudo:first-line {
	font-size:3ch;
	}
	#pseudo span:last-child {
	font-size:1ch;
	}
	</style>
	<script src="../../resources/js-test-pre.js"></script>
	<script type="text/javascript">
	</script>
	</head>
	<body id="body">
	<p>This is a test to make sure ch units work as intended. You should not see <b>anything</b> red on this page.</p>
	Only 'PASS' should be visible:
	<div id="box_mono_zero" class="box mono zero"></div>
	<script type="text/javascript">
	description("This is a test to make sure ch units work as intended.")
	shouldEvaluateTo('document.getElementById("box_mono_zero").clientWidth', "0");
	</script>

	<div id="box_mono_four1" class="box mono four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
	<div id="box_mono_four2" class="box mono four"><span class="pass">PASS</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("box_mono_four1").clientWidth', 'document.getElementById("box_mono_four2").clientWidth');
	</script>

	<div id="box_monofallthrough_four1" class="box monofallthrough four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
	<div id="box_monofallthrough_four2" class="box monofallthrough four"><span class="pass">PASS</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("box_monofallthrough_four1").clientWidth', 'document.getElementById("box_monofallthrough_four2").clientWidth');
	</script>

	The whole lower case alphabet should be readable:
	<div id="mono_box_alphalen1" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span><span class="fail">FAIL</span></div>
	<div id="mono_box_alphalen2" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("mono_box_alphalen1").clientWidth', 'document.getElementById("mono_box_alphalen2").clientWidth');
	</script>

	<div id="box_one" class="box one"></div>
	<div id="box_alphalen" class="box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("box_one").clientWidth * 26', 'document.getElementById("box_alphalen").clientWidth');
	</script>

	<div id="arial_box_one" class="arial box one"></div>
	<div id="arial_box_alphalen" class="arial box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 26', 'document.getElementById("arial_box_alphalen").clientWidth');
	</script>

	<div id="helvetica_box_one" class="helvetica box one"></div>
	<div id="helvetica_box_alphalen" class="helvetica box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 26', 'document.getElementById("helvetica_box_alphalen").clientWidth');
	</script>

	Four zeroes should be visible, nothing else:
	<div id="times_box_one" class="times box one"></div>
	<div id="box_times_four" class="box times four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("times_box_one").clientWidth * 4', 'document.getElementById("box_times_four").clientWidth');
	</script>

	<div id="box_arial_four" class="box arial four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 4', 'document.getElementById("box_arial_four").clientWidth');
	</script>

	<div id="box_helvetica_four" class="box helvetica four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 4', 'document.getElementById("box_helvetica_four").clientWidth');
	</script>

	There should be more than one green '\|' visible (non-monospaced fonts):
	<div id="box_arial_one" class="box arial one"><span class="pass">\|</span><span class="pass">\|\|0</span><span class="fail">\|\|\|\|</span></div>
	<div id="ref_box_arial_one" class="box arial" style="display:inline-block"><span class="pass">\|</span><span class="pass">\|\|</span></div>
	<script type="text/javascript">
	shouldBeGreaterThanOrEqual('document.getElementById("ref_box_arial_one").clientWidth', 'document.getElementById("box_arial_one").clientWidth');
	</script>

	<div id="box_times_one" class="box times one"><span class="pass">\|</span><span class="pass">\|\|0</span><span class="fail">\|\|\|\|</span></div>
	<div id="ref_box_times_one" class="box times" style="display:inline-block"><span class="pass">\|</span><span class="pass">\|\|</span></div>
	<script type="text/javascript">
	shouldBeGreaterThanOrEqual('document.getElementById("ref_box_times_one").clientWidth', 'document.getElementById("box_times_one").clientWidth');
	</script>

	<div id="box_sansserif_one" class="box sansserif one"><span class="pass">\|</span><span class="pass">\|\|0</span><span class="fail">\|\|\|\|</span></div>
	<div id="ref_box_sansserif_one" class="box times" style="display:inline-block"><span class="pass">\|</span><span class="pass">\|\|</span></div>
	<script type="text/javascript">
	shouldBeGreaterThanOrEqual('document.getElementById("ref_box_sansserif_one").clientWidth', 'document.getElementById("box_sansserif_one").clientWidth');
	</script>

	<div class="border">
	This box has a 20px font size.
	The last two '0's should be the same size.
	<div class="large pass">
	<div id="reference" class="one">0</div>
	<div id="forcedsmall" class="box one">0</div>
	<div id="chsmall" class="box one relative">0</div>
	</div>
	<script type="text/javascript">
	var ref = document.getElementById("reference");
	var refWidth = ref.clientWidth;
	var small = document.getElementById("forcedsmall");
	small.style.fontSize = refWidth +"px";
	var w1 = small.clientWidth;
	var h1 = small.clientHeight;
	var chsmall = document.getElementById("chsmall");
	var w2 = chsmall.clientWidth;
	var h2 = chsmall.clientHeight;
	shouldBeFalse("w1 !== w2 \|\| h1 !== h2");
	</script>
	</div>
	<div id="pseudo">
	<span id="ps1">I'm a pseudo selected first line, I should be bigger than the rest.</span><br>
	<span id="ps2">I'm the second line.</span><br>
	<span id="ps3">Last in line. But one day... the throne will be mine!</span>
	</div>
	<script>
	var ps1h = document.getElementById('ps1').offsetHeight;
	var ps2h = document.getElementById('ps2').offsetHeight;
	var ps3h = document.getElementById('ps3').offsetHeight;
	shouldBeTrue("ps1h > ps2h && ps1h > ps3h");
	</script>

	<div id="box_mono_one" class="box mono one"></div>
	<div id="box_mono" class="box mono" style="display:inline-block">0</div>
	<script type="text/javascript">
	shouldEvaluateTo('document.getElementById("box_mono_one").clientWidth', 'document.getElementById("box_mono").clientWidth');
	</script>
	<script src="../../resources/js-test-post.js"></script>
	<script>
	// Text with '<span class="fail">' must not appear in DumpRenderTree's output, only when opening this file in a web browser.
	if (window.testRunner) {
	var CSSRules = 'rules';
	for (var i = 0; i < document.styleSheets[0][CSSRules].length; ++i)
	if (document.styleSheets[0][CSSRules][i].selectorText === ".fail") {
	document.styleSheets[0][CSSRules][i].style['display'] = 'none';
	break;
	}
	}
	</script>
	</body>
	</html>