blob: 420e752580dd18b520feff1faa015fe06d6e09e9 [file] [log] [blame]
<!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" class="placeholder-shown"></textarea>
<textarea placeholder="WebKit">Foobar</textarea>
</div>
<div>
<input>
<input placeholder>
<input placeholder="WebKit" class="placeholder-shown">
<input placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="">
<input type="" placeholder>
<input type="" placeholder="WebKit" class="placeholder-shown">
<input type="" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="hidden">
<input type="hidden" placeholder>
<input type="hidden" placeholder="WebKit" class="placeholder-shown">
<input type="hidden" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="text">
<input type="text" placeholder>
<input type="text" placeholder="WebKit" class="placeholder-shown">
<input type="text" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="tel">
<input type="tel" placeholder>
<input type="tel" placeholder="WebKit" class="placeholder-shown">
<input type="tel" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="url">
<input type="url" placeholder>
<input type="url" placeholder="WebKit" class="placeholder-shown">
<input type="url" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="email">
<input type="email" placeholder>
<input type="email" placeholder="WebKit" class="placeholder-shown">
<input type="email" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="password">
<input type="password" placeholder>
<input type="password" placeholder="WebKit" class="placeholder-shown">
<input type="password" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="datetime">
<input type="datetime" placeholder>
<input type="datetime" placeholder="WebKit" class="placeholder-shown">
<input type="datetime" placeholder="WebKit" value="Foobar">
</div>
<div>
<input type="number">
<input type="number" placeholder>
<input type="number" placeholder="WebKit" class="placeholder-shown">
<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>