| <!DOCTYPE html> |
| <style> |
| input, textarea { |
| height: 8px; |
| } |
| .placeholder-shown { |
| background-color: green; |
| } |
| </style> |
| <p>This test checks how various input elements are styled when :placeholder-shown is applied.</p> |
| <div> |
| <textarea></textarea> |
| <textarea placeholder></textarea> |
| <textarea placeholder="Placeholder text" class="placeholder-shown"></textarea> |
| <textarea placeholder="Placeholder text">Foobar</textarea> |
| </div> |
| <div> |
| <input> |
| <input placeholder> |
| <input placeholder="Placeholder text" class="placeholder-shown"> |
| <input placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type=""> |
| <input type="" placeholder> |
| <input type="" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="hidden"> |
| <input type="hidden" placeholder> |
| <input type="hidden" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="hidden" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="text"> |
| <input type="text" placeholder> |
| <input type="text" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="text" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="tel"> |
| <input type="tel" placeholder> |
| <input type="tel" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="tel" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="url"> |
| <input type="url" placeholder> |
| <input type="url" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="url" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="email"> |
| <input type="email" placeholder> |
| <input type="email" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="email" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="password"> |
| <input type="password" placeholder> |
| <input type="password" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="password" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="search"> |
| <input type="search" placeholder> |
| <input type="search" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="search" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="date"> |
| <input type="date" placeholder> |
| <input type="date" placeholder="Placeholder text"> |
| <input type="date" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="month"> |
| <input type="month" placeholder> |
| <input type="month" placeholder="Placeholder text"> |
| <input type="month" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="week"> |
| <input type="week" placeholder> |
| <input type="week" placeholder="Placeholder text"> |
| <input type="week" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="time"> |
| <input type="time" placeholder> |
| <input type="time" placeholder="Placeholder text"> |
| <input type="time" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="datetime-local"> |
| <input type="datetime-local" placeholder> |
| <input type="datetime-local" placeholder="Placeholder text"> |
| <input type="datetime-local" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="number"> |
| <input type="number" placeholder> |
| <input type="number" placeholder="Placeholder text" class="placeholder-shown"> |
| <input type="number" placeholder="Placeholder text" value="0"> |
| </div> |
| <div> |
| <input type="range"> |
| <input type="range" placeholder> |
| <input type="range" placeholder="Placeholder text"> |
| <input type="range" placeholder="Placeholder text" value="1"> |
| </div> |
| <div> |
| <input type="checkbox"> |
| <input type="checkbox" placeholder> |
| <input type="checkbox" placeholder="Placeholder text"> |
| <input type="checkbox" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="radio"> |
| <input type="radio" placeholder> |
| <input type="radio" placeholder="Placeholder text"> |
| <input type="radio" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="file"> |
| <input type="file" placeholder> |
| <input type="file" placeholder="Placeholder text"> |
| <input type="file" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="submit"> |
| <input type="submit" placeholder> |
| <input type="submit" placeholder="Placeholder text"> |
| <input type="submit" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="image"> |
| <input type="image" placeholder> |
| <input type="image" placeholder="Placeholder text"> |
| <input type="image" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="reset"> |
| <input type="reset" placeholder> |
| <input type="reset" placeholder="Placeholder text"> |
| <input type="reset" placeholder="Placeholder text" value="Foobar"> |
| </div> |
| <div> |
| <input type="color"> |
| <input type="color" placeholder> |
| <input type="color" placeholder="Placeholder text"> |
| <input type="color" placeholder="Placeholder text" value="Foobar"> |
| </div> |
