2013-02-14 21:18:49 +00:00
|
|
|
<!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>
|
2013-09-07 22:20:15 +00:00
|
|
|
<script src="../../resources/js-test-pre.js"></script>
|
2013-02-14 21:18:49 +00:00
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
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>
|
2013-09-07 22:20:15 +00:00
|
|
|
<script src="../../resources/js-test-post.js"></script>
|
2013-02-14 21:18:49 +00:00
|
|
|
<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>
|
