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

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

    <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>
    <script src="../../resources/js-test-post.js"></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>