<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
 :valid { background: red; }
 :invalid { background: red; }
 input { background: lime; }
 fieldset { background: lime; }
 object { background: lime; }
 button { background: lime; }
 progress { background: lime; }
 meter { background: lime; }
 option { background: lime; }
 select { background: lime; }
</style>
</head>
<body>
<p id="description"></p>
<form method="get">
<input name="input-text-readonly" type="text" value="Lorem ipsum" readonly/>
<input name="input-text-disabled" type="text" value="Lorem ipsum" disabled/>
<input name="input-button" type="button" value="Lorem ipsum">
<input name="input-reset" type="reset" value="Lorem ipsum"/>
<input name="input-hidden" type="hidden" value="Lorem ipsum"/>
<input name="input-image" type="image">
<fieldset name="fieldset"></fieldset>
<object name="object"></object>
<button name="button-button" type="button">Lorem ipsum</button>
<button name="button-reset" type="reset">Lorem ipsum</button>
<progress id="progress" value=50 max=100>50</progress>
<meter id="meter" value=50 max=100>50</meter>
<select id="select" required><option id="option" value="1">One</option></select>
</form>
<div id="console"></div>
<script>
description("This test performs a check for the :valid CSS selector on various input elements and other elements where it shouldn't be applied.");

function getBackgroundColor(nameOrId) {
    var list = document.getElementsByName(nameOrId);
    var element = list.length > 0 ? list[0] : document.getElementById(nameOrId);
    return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')
}

var names = [
    "input-text-readonly",
    "input-text-disabled",
    "input-button",
    "input-reset",
    "input-hidden",
    "input-image",
    "fieldset",
    "object",
    "button-button",
    "button-reset",
    "progress",
    "meter",
    "option",
];

var normalColor = "rgb(0, 255, 0)";
for (var i = 0; i < names.length; i++)
    shouldBe("getBackgroundColor('" + names[i] + "')", "normalColor");

document.forms[0].style.display = 'none';
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>