<!DOCTYPE html>
<html>
<head>
    <style>
        input, textarea {
            height: 8px;
        }
        :placeholder-shown {
            background-color: green;
        }
    </style>
</head>
<body>
    <p>This test checks how various input elements are styled when :placeholder-shown is applied.</p>
    <div>
        <textarea></textarea>
        <textarea placeholder></textarea>
        <textarea placeholder="WebKit"></textarea>
        <textarea placeholder="WebKit">Foobar</textarea>
    </div>
    <div>
        <input>
        <input placeholder>
        <input placeholder="WebKit">
        <input placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="">
        <input type="" placeholder>
        <input type="" placeholder="WebKit">
        <input type="" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="hidden">
        <input type="hidden" placeholder>
        <input type="hidden" placeholder="WebKit">
        <input type="hidden" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="text">
        <input type="text" placeholder>
        <input type="text" placeholder="WebKit">
        <input type="text" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="tel">
        <input type="tel" placeholder>
        <input type="tel" placeholder="WebKit">
        <input type="tel" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="url">
        <input type="url" placeholder>
        <input type="url" placeholder="WebKit">
        <input type="url" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="email">
        <input type="email" placeholder>
        <input type="email" placeholder="WebKit">
        <input type="email" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="password">
        <input type="password" placeholder>
        <input type="password" placeholder="WebKit">
        <input type="password" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="datetime">
        <input type="datetime" placeholder>
        <input type="datetime" placeholder="WebKit">
        <input type="datetime" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="number">
        <input type="number" placeholder>
        <input type="number" placeholder="WebKit">
        <input type="number" placeholder="WebKit" value="0">
    </div>
    <div>
        <input type="range">
        <input type="range" placeholder>
        <input type="range" placeholder="WebKit">
        <input type="range" placeholder="WebKit" value="1">
    </div>
    <div>
        <input type="checkbox">
        <input type="checkbox" placeholder>
        <input type="checkbox" placeholder="WebKit">
        <input type="checkbox" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="radio">
        <input type="radio" placeholder>
        <input type="radio" placeholder="WebKit">
        <input type="radio" placeholder="WebKit" value="Foobar">
    </div>
    <div>
        <input type="submit">
        <input type="submit" placeholder>
        <input type="submit" placeholder="WebKit">
        <input type="submit" placeholder="WebKit" value="Foobar">
    </div>
</body>
</html>
