Index: third_party/WebKit/LayoutTests/imported/wpt/html/semantics/selectors/pseudo-classes/valid-invalid.html |
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/html/semantics/selectors/pseudo-classes/valid-invalid.html b/third_party/WebKit/LayoutTests/imported/wpt/html/semantics/selectors/pseudo-classes/valid-invalid.html |
index 034b6ff31f9cdd6d094d7257d34b564bf02b12cf..d93407707f07e99dec7a45a9c2b5df388c17d98d 100644 |
--- a/third_party/WebKit/LayoutTests/imported/wpt/html/semantics/selectors/pseudo-classes/valid-invalid.html |
+++ b/third_party/WebKit/LayoutTests/imported/wpt/html/semantics/selectors/pseudo-classes/valid-invalid.html |
@@ -1,4 +1,6 @@ |
<!DOCTYPE html> |
+<html> |
+<head> |
<meta charset=utf-8> |
<title>Selector: pseudo-classes (:valid, :invalid)</title> |
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> |
@@ -6,6 +8,13 @@ |
<script src="/resources/testharness.js"></script> |
<script src="/resources/testharnessreport.js"></script> |
<script src="utils.js"></script> |
+<style> |
+ #styleTests form, #styleTests fieldset, #failExample { background-color:red; } |
+ #styleTests > :valid, #validExample { background-color:green; } |
+ #styleTests > :invalid, #invalidExample { background-color:lime; } |
+</style> |
+</head> |
+<body> |
<div id="log"></div> |
<div id='simpleConstraints'> |
<input type=text id=text1 value="foobar" required> |
@@ -35,7 +44,27 @@ |
<input type=number id=number1 value=0 min=1> |
<input type=number id=number2 value=1 min=1> |
</div> |
- |
+<div id='styleTests'> |
+ <form> |
+ </form> |
+ <form> |
+ <input type=text min=8 value=4> |
+ </form> |
+ <form> |
+ <input type=number min=8 value=4> |
+ </form> |
+ <fieldset> |
+ </fieldset> |
+ <fieldset> |
+ <input type=text min=8 value=4> |
+ </fieldset> |
+ <fieldset> |
+ <input type=number min=8 value=4> |
+ </fieldset> |
+ <div id='validExample'></div> |
+ <div id='invalidExample'></div> |
+ <div id='failExample'></div> |
+</div> |
<script> |
testSelectorIdsMatch("#simpleConstraints :valid", ["text1"], "':valid' matches elements that satisfy their constraints"); |
@@ -65,4 +94,53 @@ |
document.getElementById("text8").value="BBB"; |
testSelectorIdsMatch("#patternConstraints :valid", ["text7"], "':valid' doesn't match new elements that do not satisfy their constraints"); |
testSelectorIdsMatch("#patternConstraints :invalid", ["text8"], "':invalid' matches new elements that do not satisfy their constraints"); |
+ |
+ function getBGColor(elem) { |
+ return getComputedStyle(elem).backgroundColor; |
+ } |
+ |
+ function testStyles(type) { |
+ var elems = document.querySelectorAll("#styleTests " + type), |
+ empty = elems[0], |
+ valid = elems[1], |
+ invalid = elems[2], |
+ validInput = valid.querySelector("input"), |
+ invalidInput = invalid.querySelector("input"), |
+ expectedValidBGColor = getBGColor(document.getElementById("validExample")), |
+ expectedInvalidBGColor = getBGColor(document.getElementById("invalidExample")), |
+ expectedFailBGColor = getBGColor(document.getElementById("failExample")); |
+ |
+ test(function() { |
+ assert_equals(getBGColor(empty), expectedValidBGColor, "wrong background-color"); |
+ }, 'empty ' + type + ' correctly styled on page-load'); |
+ |
+ test(function() { |
+ assert_equals(getBGColor(valid), expectedValidBGColor, "wrong background-color"); |
+ }, 'valid ' + type + ' correctly styled on page-load'); |
+ test(function() { |
+ assert_equals(getBGColor(invalid), expectedInvalidBGColor, "wrong background-color"); |
+ }, 'invalid ' + type + ' correctly styled on page-load'); |
+ |
+ test(function() { |
+ empty.appendChild(validInput.cloneNode()); |
+ assert_equals(getBGColor(empty), expectedValidBGColor, "wrong background-color"); |
+ }, 'programmatically adding valid to empty ' + type + ' results in correct style'); |
+ test(function() { |
+ empty.appendChild(invalidInput.cloneNode()); |
+ assert_equals(getBGColor(empty), expectedInvalidBGColor, "wrong background-color"); |
+ }, 'programmatically adding invalid to empty ' + type + ' results in correct style'); |
+ |
+ validInput.type = "number"; |
+ invalidInput.type = "text"; |
+ test(function() { |
+ assert_equals(getBGColor(valid), expectedInvalidBGColor, "wrong background-color"); |
+ }, 'programmatically-invalidated ' + type + ' correctly styled'); |
+ test(function() { |
+ assert_equals(getBGColor(invalid), expectedValidBGColor, "wrong background-color"); |
+ }, 'programmatically-validated ' + type + ' correctly styled'); |
+ } |
+ test(testStyles.bind(undefined, "form"), ":valid/:invalid styling for <form>"); |
+ test(testStyles.bind(undefined, "fieldset"), ":valid/:invalid styling for <fieldset>"); |
</script> |
+</body> |
+</html> |