1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!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>
|
