Attachment 184100 Details for Bug 85755 – Text & pixel unit test

Text & pixel unit test

css3-ch-unit2.html (text/html), 8.34 KB, created by Lamarque V. Souza on 2013-01-22 18:48:39 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Lamarque V. Souza

Created: 2013-01-22 18:48:39 PST

Size: 8.34 KB

patch

obsolete

><!doctype html>
><html>
><head>
><script src="../js/resources/js-test-pre.js"></script>
><style type="text/css">
>	.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 type="text/javascript">
>function pass() {
>       document.write('<span class="pass">PASS</span>');
>}
>function fail(msg) {
>       document.write('<span class="fail">FAIL ('+msg+')</span>');
>}
></script>
></head>
><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;
>			if(w1 !== w2 || h1 !== h2) {
>				fail(''+w1+'/'+w2+'|'+h1+'/'+h2);
>				testFailed(''+w1+'/'+w2+'|'+h1+'/'+h2);
>			} else {
>				pass();
>				testPassed("forcedsmall is chsmall");
>			}
>		</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;
>		if((ps1h > ps2h) && (ps1h > ps3h)) {
>			pass();
>			testPassed('The first line is higher than the other two.');
>		} else {
>			fail('The first line is not higher than the other two.' + ps1h + '/' + ps2h + '/' +ps3h);
>			testFailed('The first line is not higher than the other two.' + ps1h + '/' + ps2h + '/' +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="../js/resources/js-test-post.js"></script>
></body>
></html>

<!doctype html>
<html>
<head>
<script src="../js/resources/js-test-pre.js"></script>
<style type="text/css">
	.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 type="text/javascript">
function pass() {
       document.write('<span class="pass">PASS</span>');
}
function fail(msg) {
       document.write('<span class="fail">FAIL ('+msg+')</span>');
}
</script>
</head>
<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;
			if(w1 !== w2 || h1 !== h2) {
				fail(''+w1+'/'+w2+'|'+h1+'/'+h2);
				testFailed(''+w1+'/'+w2+'|'+h1+'/'+h2);
			} else {
				pass();
				testPassed("forcedsmall is chsmall");
			}
		</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;
		if((ps1h > ps2h) && (ps1h > ps3h)) {
			pass();
			testPassed('The first line is higher than the other two.');
		} else {
			fail('The first line is not higher than the other two.' + ps1h + '/' + ps2h + '/' +ps3h);
			testFailed('The first line is not higher than the other two.' + ps1h + '/' + ps2h + '/' +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="../js/resources/js-test-post.js"></script>
</body>
</html>

Actions: View

Attachments on bug 85755: 151038 | 151463 | 151616 | 151623 | 151630 | 153006 | 153012 | 157997 | 158001 | 158042 | 158067 | 174491 | 179815 | 183785 | 183832 | 184100 | 184102 | 184103 | 184214 | 184243 | 184510 | 184616 | 187182 | 187376 | 188399