third_party/WebKit/LayoutTests/fast/css/css3-ch-unit.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style type="text/css" title="teste">
   5     .box {
   6         margin: 0px;
   7         padding: 0px;
   8         overflow: hidden;
   9     }
  10     .border { border:1px solid black; }
  11
  12     /* font family classes */
  13     .mono { font-family: monospace; }
  14     .monofallthrough { font-family: nonexistant, monospace; }
  15     .serif { font-family: serif; }
  16     .sans-serif { font-family: sans-serif; }
  17     .courier { font-family: courier; }
  18     .arial { font-family: arial; }
  19     .times { font-family: times; }
  20     .helvetica { font-family: helvetica; }
  21
  22     /* ch-length containers */
  23     .one { width: 1ch; }
  24     .four { width: 4ch; }
  25     .zero { width: 0ch; }
  26     .alphalen { width: 26ch; }
  27
  28     /* font sizes for the relative size test */
  29     .large { font-size:20px; }
  30     .relative { font-size:1ch; }
  31
  32     /* pass/fail colors */
  33     .pass { color: green; }
  34     .fail { color: red; }
  35
  36     /* pseudo-elements */
  37     #pseudo{
  38         font-size:2ch;
  39     }
  40     #pseudo:first-line {
  41         font-size:3ch;
  42     }
  43     #pseudo span:last-child {
  44         font-size:1ch;
  45     }
  46 </style>
  47 <script src="../../resources/js-test.js"></script>
  48 <script type="text/javascript">
  49 </script>
  50 </head>
  51 <body id="body">
  52     <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>
  53     Only 'PASS' should be visible:
  54     <div id="box_mono_zero" class="box mono zero"></div>
  55     <script type="text/javascript">
  56         description("This is a test to make sure ch units work as intended.")
  57         shouldEvaluateTo('document.getElementById("box_mono_zero").clientWidth', "0");
  58     </script>
  59
  60     <div id="box_mono_four1" class="box mono four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
  61     <div id="box_mono_four2" class="box mono four"><span class="pass">PASS</span></div>
  62     <script type="text/javascript">
  63         shouldEvaluateTo('document.getElementById("box_mono_four1").clientWidth', 'document.getElementById("box_mono_four2").clientWidth');
  64     </script>
  65
  66     <div id="box_monofallthrough_four1" class="box monofallthrough four"><span class="pass">PASS</span><span class="fail">FAIL</span></div>
  67     <div id="box_monofallthrough_four2" class="box monofallthrough four"><span class="pass">PASS</span></div>
  68     <script type="text/javascript">
  69         shouldEvaluateTo('document.getElementById("box_monofallthrough_four1").clientWidth', 'document.getElementById("box_monofallthrough_four2").clientWidth');
  70     </script>
  71
  72     The whole lower case alphabet should be readable:
  73     <div id="mono_box_alphalen1" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span><span class="fail">FAIL</span></div>
  74     <div id="mono_box_alphalen2" class="mono box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
  75     <script type="text/javascript">
  76         shouldEvaluateTo('document.getElementById("mono_box_alphalen1").clientWidth', 'document.getElementById("mono_box_alphalen2").clientWidth');
  77     </script>
  78
  79     <div id="box_one" class="box one"></div>
  80     <div id="box_alphalen" class="box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
  81     <script type="text/javascript">
  82         shouldEvaluateTo('document.getElementById("box_one").clientWidth * 26', 'document.getElementById("box_alphalen").clientWidth');
  83     </script>
  84
  85     <div id="arial_box_one" class="arial box one"></div>
  86     <div id="arial_box_alphalen" class="arial box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
  87     <script type="text/javascript">
  88         shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 26', 'document.getElementById("arial_box_alphalen").clientWidth', 0.5);
  89     </script>
  90
  91     <div id="helvetica_box_one" class="helvetica box one"></div>
  92     <div id="helvetica_box_alphalen" class="helvetica box alphalen"><span class="pass">abcdefghijklmnopqrstuvwxyz</span></div>
  93     <script type="text/javascript">
  94         shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 26', 'document.getElementById("helvetica_box_alphalen").clientWidth', 0.5);
  95     </script>
  96
  97     Four zeroes should be visible, nothing else:
  98     <div id="times_box_one" class="times box one"></div>
  99     <div id="box_times_four" class="box times four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
 100     <script type="text/javascript">
 101         shouldEvaluateTo('document.getElementById("times_box_one").clientWidth * 4', 'document.getElementById("box_times_four").clientWidth', 0.5);
 102     </script>
 103
 104     <div id="box_arial_four" class="box arial four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
 105     <script type="text/javascript">
 106         shouldEvaluateTo('document.getElementById("arial_box_one").clientWidth * 4', 'document.getElementById("box_arial_four").clientWidth', 0.5);
 107     </script>
 108
 109     <div id="box_helvetica_four" class="box helvetica four"><span class="pass">0000</span><span class="fail">FAIL</span></div>
 110     <script type="text/javascript">
 111         shouldEvaluateTo('document.getElementById("helvetica_box_one").clientWidth * 4', 'document.getElementById("box_helvetica_four").clientWidth', 0.5);
 112     </script>
 113
 114     There should be more than one green '|' visible (non-monospaced fonts):
 115     <div id="box_arial_one" class="box arial one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
 116     <div id="ref_box_arial_one" class="box arial" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
 117     <script type="text/javascript">
 118         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_arial_one").clientWidth', 'document.getElementById("box_arial_one").clientWidth');
 119     </script>
 120
 121     <div id="box_times_one" class="box times one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
 122     <div id="ref_box_times_one" class="box times" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
 123     <script type="text/javascript">
 124         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_times_one").clientWidth', 'document.getElementById("box_times_one").clientWidth');
 125     </script>
 126
 127     <div id="box_sansserif_one" class="box sansserif one"><span class="pass">|</span><span class="pass">||0</span><span class="fail">||||</span></div>
 128     <div id="ref_box_sansserif_one" class="box times" style="display:inline-block"><span class="pass">|</span><span class="pass">||</span></div>
 129     <script type="text/javascript">
 130         shouldBeGreaterThanOrEqual('document.getElementById("ref_box_sansserif_one").clientWidth', 'document.getElementById("box_sansserif_one").clientWidth');
 131     </script>
 132
 133     <div class="border">
 134         This box has a 20px font size.
 135         The last two '0's should be the same size.
 136         <div class="large pass">
 137             <div id="reference" class="one">0</div>
 138             <div id="forcedsmall" class="box one">0</div>
 139             <div id="chsmall" class="box one relative">0</div>
 140         </div>
 141         <script type="text/javascript">
 142             var ref = document.getElementById("reference");
 143             var refWidth = ref.clientWidth;
 144             var small = document.getElementById("forcedsmall");
 145             small.style.fontSize = refWidth +"px";
 146             var w1 = small.clientWidth;
 147             var h1 = small.clientHeight;
 148             var chsmall = document.getElementById("chsmall");
 149             var w2 = chsmall.clientWidth;
 150             var h2 = chsmall.clientHeight;
 151             shouldBeFalse("w1 !== w2 || h1 !== h2");
 152         </script>
 153     </div>
 154     <div id="pseudo">
 155         <span id="ps1">I'm a pseudo selected first line, I should be bigger than the rest.</span><br>
 156         <span id="ps2">I'm the second line.</span><br>
 157         <span id="ps3">Last in line. But one day... the throne will be mine!</span>
 158     </div>
 159     <script>
 160         var ps1h = document.getElementById('ps1').offsetHeight;
 161         var ps2h = document.getElementById('ps2').offsetHeight;
 162         var ps3h = document.getElementById('ps3').offsetHeight;
 163         shouldBeTrue("ps1h > ps2h && ps1h > ps3h");
 164     </script>
 165
 166     <div id="box_mono_one" class="box mono one"></div>
 167     <div id="box_mono" class="box mono" style="display:inline-block">0</div>
 168     <script type="text/javascript">
 169         shouldEvaluateTo('document.getElementById("box_mono_one").clientWidth', 'document.getElementById("box_mono").clientWidth', 0.5);
 170     </script>
 171     <script>
 172         // Text with '<span class="fail">' must not appear in DumpRenderTree's output, only when opening this file in a web browser.
 173         if (window.testRunner) {
 174             var CSSRules = 'rules';
 175             for (var i = 0; i < document.styleSheets[0][CSSRules].length; ++i)
 176                 if (document.styleSheets[0][CSSRules][i].selectorText === ".fail") {
 177                     document.styleSheets[0][CSSRules][i].style['display'] = 'none';
 178                     break;
 179                 }
 180         }
 181     </script>
 182 </body>
 183 </html>