<!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.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', 0.5);
</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', 0.5);
</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', 0.5);
</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', 0.5);
</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', 0.5);
</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', 0.5);
</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>
Codebase Browser
chromium