WebCore/manual-tests/select-webkit-appearance-off-narrow-select.html
author Dremov Kirill (Nokia-D-MSW/Tampere) <kirill.dremov@nokia.com>
Mon, 04 Oct 2010 01:32:07 +0300
changeset 2 303757a437d3
parent 0 4f2f89ce4247
permissions -rw-r--r--
Revision: 201037 Kit: 201039

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Padding on select with webkit-appearance: off</title>
    <style type="text/css">
        #webkit-appearance-none {
            -webkit-appearance: none;
            border: 1px solid black;
            width: 15px;
            padding-left: 5px;
            padding-right: 5px;
        }
        
        #narrow-with-border {
            border: 1px solid black;
            width: 40px;
        }
    </style>
</head>

<body>
    <p>This is a manual test for <a href="https://bugs.webkit.org/show_bug.cgi?id=33235">Padding in popup 
    menu gets lost with styled select in Windows</a></p>
    <p>To open the selects, click inside the select boxes below.</p>

    <p>The options in this selects should have padding on both the left and the right, the edges of
    the text should not be pressed against the edges of the opened select.</p>
    <select id="webkit-appearance-none">
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <hr />
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
    </select>
    
    <p>The options in this select should not have too much padding on the right</p>
    <select id="narrow-with-border">
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
        <hr />
        <option href="#">Do Action ABCDEFG</option>
        <option href="#">Do Action ABCDEFG</option>
    </select>
</body>
</html>