| 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>
|
|
|