chromium/third_party/blink/web_tests/fast/css/percentage-non-integer.html

<head>
    <title>Test for http://bugs.webkit.org/show_bug.cgi?id=5164</title>
    <style type="text/css">
        body { overflow: hidden; }
        div.bar { height: 4px; background-color: rgba(0, 0, 0, 0.5); }
        td.green { background-color: green; }
        td.black { background-color: black; }
        td.red { background-color: #0f0; }
        td.greenOverlay { background-color: rgba(0, 255, 0, 0.5); }
        td.blackOverlay { background-color: rgba(0, 0, 0, 0.5); }
        td.sep { width: 10px; }
    </style>
</head>
<body>
    <div style="background-color: #0f0; width: 100px; height: 100px;">
        <div><div class="bar" style="width: 100px"></div></div>
        <div style="width: 1005px"><div class="bar" style="width: 10%"></div></div>
        <div style="width: 995px"><div class="bar" style="width: 10.1%"></div></div>
        <div style="width: 985px"><div class="bar" style="width: 10.2%"></div></div>
        <div style="width: 975px"><div class="bar" style="width: 10.3%"></div></div>
        <div style="width: 965px"><div class="bar" style="width: 10.4%"></div></div>
        <div style="width: 955px"><div class="bar" style="width: 10.5%"></div></div>
        <div style="width: 945px"><div class="bar" style="width: 10.6%"></div></div>
        <div style="width: 935px"><div class="bar" style="width: 10.7%"></div></div>
        <div style="width: 930px"><div class="bar" style="width: 10.8%"></div></div>
        <div style="width: 920px"><div class="bar" style="width: 10.9%"></div></div>
        <div style="width: 910px"><div class="bar" style="width: 11%"></div></div>
        <div style="width: 910px"><div class="bar" style="width: 11.1%"></div></div>
        <div style="width: 900px"><div class="bar" style="width: 11.2%"></div></div>
        <div style="width: 890px"><div class="bar" style="width: 11.3%"></div></div>
        <div style="width: 885px"><div class="bar" style="width: 11.4%"></div></div>
        <div style="width: 875px"><div class="bar" style="width: 11.5%"></div></div>
        <div style="width: 870px"><div class="bar" style="width: 11.6%"></div></div>
        <div style="width: 860px"><div class="bar" style="width: 11.7%"></div></div>
        <div style="width: 850px"><div class="bar" style="width: 11.8%"></div></div>
        <div style="width: 845px"><div class="bar" style="width: 11.9%"></div></div>
        <div style="width: 840px"><div class="bar" style="width: 12%"></div></div>
        <div style="width: 835px"><div class="bar" style="width: 12.1%"></div></div>
        <div style="width: 825px"><div class="bar" style="width: 12.2%"></div></div>
        <div style="width: 815px"><div class="bar" style="width: 12.3%"></div></div>
    </div>
    <br>
    <div style="position: relative;">
        <table style="position: absolute; top: 0; left: 0; " cellpadding="0" cellspacing="0">
            <tr style="height: 20px;">
                <td class="red" style="width: 11px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 13px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 15px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 17px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 20px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 21px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 23px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 25px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 27px;"></td>
                <td class="black sep"></td>
                <td class="red" style="width: 30px;"></td>
                <td></td>
            </tr>
        </table>
        <table style="position: absolute; top: 0; left: 0; width: 1000px;" cellpadding="0" cellspacing="0">
            <tr style="height: 20px;">
                <td class="blackOverlay" style="width: 1.2%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 1.4%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 1.6%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 1.8%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 2%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 2.2%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 2.4%;">&nbsp;</td>
                <td class="greenOverlay sep"></td>
                <td class="blackOverlay" style="width: 2.6%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 2.8%;">&nbsp;</td>
                <td class="greenOverlay sep">&nbsp;</td>
                <td class="blackOverlay" style="width: 3%;">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
</body>
</html>