| <!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> |
