From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../html/semantics/forms/constraints/.gitkeep      |   0
 .../html/semantics/forms/constraints/contains.json |  18 +
 .../constraints/form-validation-checkValidity.html | 145 ++++++++
 .../form-validation-reportValidity.html            | 145 ++++++++
 .../constraints/form-validation-validate.html      | 127 +++++++
 .../form-validation-validity-badInput.html         |  46 +++
 .../form-validation-validity-customError.html      |  48 +++
 .../form-validation-validity-patternMismatch.html  |  27 ++
 .../form-validation-validity-rangeOverflow.html    | 115 +++++++
 .../form-validation-validity-rangeUnderflow.html   | 113 ++++++
 .../form-validation-validity-stepMismatch.html     |  77 +++++
 .../form-validation-validity-tooLong.html          |  50 +++
 .../form-validation-validity-tooShort.html         |  52 +++
 .../form-validation-validity-typeMismatch.html     |  41 +++
 .../form-validation-validity-valid.html            | 130 +++++++
 .../form-validation-validity-valueMissing.html     | 168 +++++++++
 .../constraints/form-validation-willValidate.html  |  90 +++++
 .../forms/constraints/inputwillvalidate.html       |  26 ++
 .../forms/constraints/support/validator.js         | 377 +++++++++++++++++++++
 .../tooLong-input-email-delete-manual.html         |  30 ++
 .../tooLong-input-password-delete-manual.html      |  30 ++
 .../tooLong-input-search-delete-manual.html        |  30 ++
 .../tooLong-input-tel-delete-manual.html           |  30 ++
 .../tooLong-input-text-delete-manual.html          |  30 ++
 .../tooLong-input-url-delete-manual.html           |  30 ++
 .../tooLong-textarea-delete-manual.html            |  30 ++
 26 files changed, 2005 insertions(+)
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/.gitkeep
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/contains.json
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-checkValidity.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-reportValidity.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validate.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-badInput.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-customError.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeOverflow.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeUnderflow.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-stepMismatch.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooLong.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooShort.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-typeMismatch.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valid.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valueMissing.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/form-validation-willValidate.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/inputwillvalidate.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/support/validator.js
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-email-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-password-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-search-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-tel-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-text-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-url-delete-manual.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/constraints/tooLong-textarea-delete-manual.html

(limited to 'testing/web-platform/tests/html/semantics/forms/constraints')

diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/.gitkeep b/testing/web-platform/tests/html/semantics/forms/constraints/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/contains.json b/testing/web-platform/tests/html/semantics/forms/constraints/contains.json
new file mode 100644
index 000000000..67e4c3b12
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/contains.json
@@ -0,0 +1,18 @@
+[
+    {
+        "id": "definitions",
+        "original_id": "definitions"
+    },
+    {
+        "id": "constraint-validation",
+        "original_id": "constraint-validation"
+    },
+    {
+        "id": "the-constraint-validation-api",
+        "original_id": "the-constraint-validation-api"
+    },
+    {
+        "id": "security-forms",
+        "original_id": "security-forms"
+    }
+]
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-checkValidity.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-checkValidity.html
new file mode 100644
index 000000000..2e790c75d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-checkValidity.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.checkValidity()</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "password"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "4", value: "abcdef"}, expected: true, name: "[target] not suffering from being too long", dirty: true},
+        {conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["url"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "20", value: "http://www.example.com"}, expected: true, name: "[target] suffering from being too long", dirty: true},
+        {conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["email"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "10", value: "test@example.com"}, expected: true, name: "[target] not suffering from being too long", dirty: true},
+        {conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01-01T12:00:00", value: "2001-01-01T12:00:00"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01-01T12:00:00", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 86400000, value: "2001-01-03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 3 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {max: "5", value: "6"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "5", value: "4"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["checkbox", "radio"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["file"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, files: null}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "checkValidity");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-reportValidity.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-reportValidity.html
new file mode 100644
index 000000000..c68e21c9d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-reportValidity.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.reportValidity()</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "password"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "4", value: "abcdef"}, expected: true, name: "[target] not suffering from being too long", dirty: true},
+        {conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["url"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "20", value: "http://www.example.com"}, expected: true, name: "[target] not suffering from being too long", dirty: true},
+        {conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["email"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {maxLength: "10", value: "test@example.com"}, expected: true, name: "[target] not suffering from being too long", dirty: true},
+        {conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01-01T12:00:00", value: "2001-01-01T12:00:00"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01-01T12:00:00", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 86400000, value: "2001-01-03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 3 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {max: "5", value: "6"}, expected: false, name: "[target] suffering from an overflow"},
+        {conditions: {min: "5", value: "4"}, expected: false, name: "[target] suffering from an underflow"},
+        {conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] suffering from a step mismatch"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["checkbox", "radio"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["file"],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, files: null}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {}, expected: true, name: "[target] no constraint"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "reportValidity");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validate.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validate.html
new file mode 100644
index 000000000..47b41ffeb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validate.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Constraint validation</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#constraint-validation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<form id="fm1" style="display:none">
+  <fieldset id="test0">
+    <input type="text" required value="" id="test1">
+  </fieldset>
+  <input type="email" value="abc" id="test2">
+  <button id="test3">TEST</button>
+  <select id="test4"></select>
+  <textarea id="test5"></textarea>
+  <output id="test6"></output>
+</form>
+<form id="fm2" style="display:none">
+  <fieldset>
+    <input type="text" required value="abc">
+  </fieldset>
+  <input type="email" value="test@example.com">
+  <button>TEST</button>
+  <select></select>
+  <textarea></textarea>
+  <output></output>
+</form>
+<form id="fm3"  style="display:none">
+  <fieldset id="fs">
+    <legend><input type="text" id="inp1"></legend>
+    <input type="text" required value="" id="inp2">
+  </fieldset>
+</form>
+
+<script>
+  var cancelable = true,
+      times1 = 0,
+      times2 = 0,
+      invalidList1 = [],
+      invalidList2 = [],
+      test1,
+      test2,
+      fm1,
+      fm2,
+      fm3;
+
+  setup(function () {
+    fm1 = document.getElementById("fm1");
+    fm2 = document.getElementById("fm2");
+    fm3 = document.getElementById("fm3");
+    test1 = document.getElementById("test1");
+    test2 = document.getElementById("test2");
+    for (var index = 0; index < fm1.elements.length; index++) {
+      var ele = fm1.elements.item(index);
+      ele.addEventListener("invalid", function (e) {
+        times1++;
+        invalidList1.push(e.target);
+        if (!e.cancelable)
+          cancelable = e.cancelable;
+      }, false);
+    }
+
+    for (var index = 0; index < fm1.elements.length; index++) {
+      var ele = fm2.elements.item(index);
+      ele.addEventListener("invalid", function (e) {
+        times2++;
+        invalidList2.push(ele);
+      }, false);
+    }
+  });
+
+  test(function(){
+    assert_false(fm1.checkValidity(), "The checkValidity method should be false.");
+  }, "If there is any invalid submittable element whose form owner is the form, the form.checkValidity must be false");
+
+  test(function(){
+    assert_true("reportValidity" in fm1, "The reportValidity method is not supported");
+    assert_false(fm1.reportValidity(), "The reportValidity method should be false.");
+  }, "If there is any invalid submittable element whose form owner is the form, the form.reportValidity must be false");
+
+  test(function(){
+    assert_true(fm2.checkValidity(), "The checkValidity method should be true.");
+  }, "If all of the submittable elements whose form owner is the form are valid, the form.checkValidity must be true");
+
+  test(function(){
+    assert_true("reportValidity" in fm2, "The reportValidity method is not supported.");
+    assert_true(fm2.reportValidity(), "The reportValidity method should be true.");
+  }, "If all of the submittable elements whose form owner is the form are valid, the form.reportValidity must be true");
+
+  test(function(){
+    assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
+    document.getElementById("fs").disabled = true;
+    assert_true(fm3.checkValidity(), "The checkValidity method should be true.");
+
+    document.getElementById("inp1").value = "aaa";
+    document.getElementById("inp1").type = "url";
+    assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
+  }, "Check the checkValidity method of the form element when it has a fieldset child");
+
+  test(function(){
+    // Restore the condition to default which was modified during the previous test.
+    document.getElementById("fs").disabled = false;
+    document.getElementById("inp1").value = "";
+    document.getElementById("inp1").type = "text";
+
+    assert_true("reportValidity" in fm3, "The reportValidity method is not supported.");
+    assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
+    document.getElementById("fs").disabled = true;
+    assert_true(fm3.reportValidity(), "The reportValidity method should be true.");
+
+    document.getElementById("inp1").value = "aaa";
+    document.getElementById("inp1").type = "url";
+    assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
+  }, "Check the reportValidity method of the form element when it has a fieldset child");
+
+  test(function () {
+    assert_equals(times1, 4, "The invalid event will be fired if the checkValidity or reportValidity method are called.");
+    assert_array_equals(invalidList1, [test1, test2, test1, test2], "The invalid event must be fired at the invalid control");
+    assert_true(cancelable, "The invalid event is cancelable.");
+  }, "The invalid event must be fired at the invalid controls");
+
+  test(function () {
+    assert_equals(times2, 0,  "The invalid event should not be fired, times should be 0.");
+    assert_array_equals(invalidList2, [], "The invalid event should not be fired, invalid list should be empty");
+  }, "The invalid event must not be fired at the invalid controls");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-badInput.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-badInput.html
new file mode 100644
index 000000000..8f6153b92
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-badInput.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.badInput</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/association-of-controls-and-forms.html#suffering-from-bad-input">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/the-button-element.html#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+var testElements = [
+    {
+      tag: "input",
+      types: ["email"],
+      testData: [
+        {conditions: {multiple: false, value: ""}, expected: false, name: "[target] The multiple attribute is false and the value attribute is empty"},
+        {conditions: {multiple: false, value: "test1@example.com"}, expected: false, name: "[target] The multiple attribute is false and the value attribute is a valid e-mail address"},
+        {conditions: {multiple: true, value: "test1@example.com,test2@eample.com"}, expected: false, name: "[target] The multiple attribute is true and the value contains valid e-mail addresses"},
+        {conditions: {multiple: true, value: "test,1@example.com"}, expected: false, name: "[target] The multiple attribute is true and the value attribute contains a ','"}
+        //TODO, the value contains characters that cannot be converted to punycode.
+        //Can not find a character that cannot be converted to punycode.
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {value: ""}, expected: false, name: "[target] The value attribute is empty"},
+        {conditions: {value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The value attribute is a valid date and time string"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] The value attribute cannot convert to a valid normalized forced-UTC global date and time string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["color"],
+      testData: [
+        {conditions: {value: ""}, expected: false, name: "[target] The value attribute is empty"},
+        {conditions: {value: "#000000"}, expected: false, name: "[target] The value attribute is a valid sample color"},
+        {conditions: {value: "#FFFFFF"}, expected: false, name: "[target] The value attribute is not a valid lowercase sample color"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] The value attribute cannot convert to a valid sample color"}
+      ]
+    },
+  ];
+  validator.run_test (testElements, "badInput");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-customError.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-customError.html
new file mode 100644
index 000000000..16e642147
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-customError.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.customError</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-customerror">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+var testElements = [
+    {
+      tag: "input",
+      types: [],
+      testData: [
+        {conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
+        {conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
+      ]
+    },
+    {
+      tag: "button",
+      types: [],
+      testData: [
+        {conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
+        {conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
+        {conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false i the custom validity error message is empty"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
+        {conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
+      ]
+    }
+  ]
+
+  validator.run_test(testElements, "customError");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html
new file mode 100644
index 000000000..5a0012b0e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.patternMismatch</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-patternmismatch">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password"],
+      testData: [
+        {conditions: {pattern: null, value: "abc"}, expected: false, name: "[target] The pattern attribute is not set"},
+        {conditions: {pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
+        {conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
+        {conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"}
+      ]
+    }
+  ];
+
+  validator.run_test (testElements, "patternMismatch");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeOverflow.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeOverflow.html
new file mode 100644
index 000000000..ca423ef9e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeOverflow.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.rangeOverflow</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-rangeoverflow">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {max: "", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "2000-01-01T12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "2000-01-01  12:00:00", value: "2001-01-01T12:00:00"}, expected: false, name: "[target] The max attribute is an invalid local date time string"},
+        {conditions: {max: "2000-01-01T12:00:00", value: "2000-01-01T11:00:00"}, expected: false, name: "[target] The max attribute is greater than the value attribute"},
+        {conditions: {max: "2000-01-01T23:59:59", value: "2001-01-01T24:00:00"}, expected: false, name: "[target] The value is an invalid local date time string(hour is greater than 23)"},
+        {conditions: {max: "1970-01-01T12:00", value: "80-01-01T12:00"}, expected: false, name: "[target] The value if an invalid local date time string(year is two digits)"},
+        {conditions: {max: "2000-01-01T12:00:00", value: "2001-01-01T13:00:00"}, expected: true, name: "[target] The value is greater than max"},
+        {conditions: {max: "2000-01-01T12:00:00.1", value: "2000-01-01T12:00:00.2"}, expected: true, name: "[target] The value is greater than max(with millisecond in 1 digit)"},
+        {conditions: {max: "2000-01-01T12:00:00.01", value: "2000-01-01T12:00:00.02"}, expected: true, name: "[target] The value is greater than max(with millisecond in 2 digits)"},
+        {conditions: {max: "2000-01-01T12:00:00.001", value: "2000-01-01T12:00:00.002"}, expected: true, name: "[target] The value is greater than max(with millisecond in 3 digits)"},
+        {conditions: {max: "2000-01-01T12:00:00", value: "10000-01-01T12:00:00"}, expected: true, name: "[target] The value is greater than max(Year is 10000 should be valid)"},
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {max: "", value: "2000-01-01"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "2000-01-01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "2000/01/01", value: "2002-01-01"}, expected: false, name: "[target] The max attribute is an invalid date"},
+        {conditions: {max: "2000-01-01", value: "2000-2-2"}, expected: false, name: "[target] The value attribute is an invalid date"},
+        {conditions: {max: "987-01-01", value: "988-01-01"}, expected: false, name: "[target] The value is an invalid date(year is three digits)"},
+        {conditions: {max: "2000-01-01", value: "2000-13-01"}, expected: false, name: "[target] The value is an invalid date(month is greater than 12)"},
+        {conditions: {max: "2000-01-01", value: "2000-02-30"}, expected: false, name: "[target] The value is an invalid date(date is greater than 29 for Feb)"},
+        {conditions: {max: "2000-12-01", value: "2000-01-01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
+        {conditions: {max: "2000-12-01", value: "2001-01-01"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
+        {conditions: {max: "9999-01-01", value: "10000-01-01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {max: "", value: "2000-01"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "2000-01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "2000/01", value: "2001-02"}, expected: false, name: "[target] The max attribute is an invalid month string"},
+        {conditions: {max: "2000-01", value: "2000-1"}, expected: false, name: "[target] The value attribute is an invalid month string"},
+        {conditions: {max: "987-01", value: "988-01"}, expected: false, name: "[target] The value is an invalid month string(year is three digits)"},
+        {conditions: {max: "2000-01", value: "2000-13"}, expected: false, name: "[target] The value is an invalid month string(month is greater than 12)"},
+        {conditions: {max: "2000-12", value: "2000-01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
+        {conditions: {max: "2000-01", value: "2000-12"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
+        {conditions: {max: "9999-01", value: "10000-01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {max: "", value: "2000-W01"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "2000-W01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "2000/W01", value: "2001-W02"}, expected: false, name: "[target] The max attribute is an invalid week string"},
+        {conditions: {max: "2000-W01", value: "2000-W2"}, expected: false, name: "[target] The value attribute is an invalid week string"},
+        {conditions: {max: "2000-W01", value: "2000-w02"}, expected: false, name: "[target] The value attribute is an invalid week string(w is in lowercase)"},
+        {conditions: {max: "987-W01", value: "988-W01"}, expected: false, name: "[target] The value is an invalid week string(year is three digits)"},
+        {conditions: {max: "2000-W01", value: "2000-W57"}, expected: false, name: "[target] The value is an invalid week string(week is too greater)"},
+        {conditions: {max: "2000-W12", value: "2000-W01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
+        {conditions: {max: "2000-W01", value: "2000-W12"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
+        {conditions: {max: "9999-W01", value: "10000-W01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {max: "", value: "12:00:00"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "12.00.00", value: "12:00:01"}, expected: false, name: "[target] The max attribute is an invalid time string"},
+        {conditions: {max: "12:00:00", value: "12.00.01"}, expected: false, name: "[target] The value attribute is an invalid time string"},
+        {conditions: {max: "23:59:59", value: "24:00:00"}, expected: false, name: "[target] The value attribute is an invalid time string(hour is greater than 23)"},
+        {conditions: {max: "23:59:59", value: "23:60:00"}, expected: false, name: "[target] The value attribute is an invalid time string(minute is greater than 59)"},
+        {conditions: {max: "23:59:59", value: "23:59:60"}, expected: false, name: "[target] The value attribute is an invalid time string(second is greater than 59)"},
+        {conditions: {max: "13:00:00", value: "12:00:00"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
+        {conditions: {max: "12:00:00", value: "13"}, expected: false, name: "[target] The time missing second and minute parts is invalid"},
+        {conditions: {max: "12:00:00", value: "12:00:02"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
+        {conditions: {max: "12:00:00.1", value: "12:00:00.2"}, expected: true, name: "[target] The value is greater than max(with millisecond in 1 digit)"},
+        {conditions: {max: "12:00:00.01", value: "12:00:00.02"}, expected: true, name: "[target] The value is greater than max(with millisecond in 2 digit)"},
+        {conditions: {max: "12:00:00.001", value: "12:00:00.002"}, expected: true, name: "[target] The value is greater than max(with millisecond in 3 digit)"},
+        {conditions: {max: "12:00:00", value: "12:01"}, expected: true, name: "[target] The time missing second part is valid"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {max: "", value: "10"}, expected: false, name: "[target] The max attribute is not set"},
+        {conditions: {max: "5", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {max: "5", value: "4"}, expected: false, name: "[target] The max is greater than value(integer)"},
+        {conditions: {max: "-5.5", value: "-5.6"}, expected: false, name: "[target] The max is greater than value(floating number)"},
+        {conditions: {max: "-0", value: "0"}, expected: false, name: "[target] The max equals to value"},
+        {conditions: {max: "5", value: "1abc"}, expected: false, name: "[target] The value is not a number"},
+        {conditions: {max: "5", value: "6"}, expected: true, name: "[target] The value is greater than max(integer)"},
+        {conditions: {max: "-5.5", value: "-5.4"}, expected: true, name: "[target] The value is greater than max(floating number)"},
+        {conditions: {max: "-5e-1", value: "5e+2"}, expected: true, name: "[target] The value is greater than max(scientific notation)"}
+      ]
+    }
+   ];
+
+  validator.run_test(testElements, "rangeOverflow");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeUnderflow.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeUnderflow.html
new file mode 100644
index 000000000..d6bf86060
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-rangeUnderflow.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.rangeUnderflow</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-rangeunderflow">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {min: "", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "2000-01-01T12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "2001-01-01  12:00:00", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The min attribute is an invalid local date time string"},
+        {conditions: {min: "2000-01-01T11:00:00", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The min attribute is less than the value attribute"},
+        {conditions: {min: "2001-01-01T23:59:59", value: "2000-01-01T24:00:00"}, expected: false, name: "[target] The value is an invalid local date time string(hour is greater than 23)"},
+        {conditions: {min: "1980-01-01T12:00", value: "79-01-01T12:00"}, expected: false, name: "[target] The value is an invalid local date time string(year is two digits)"},
+        {conditions: {min: "2000-01-01T13:00:00", value: "2000-01-01T12:00:00"}, expected: true, name: "[target] The value is less than min"},
+        {conditions: {min: "2000-01-01T12:00:00.2", value: "2000-01-01T12:00:00.1"}, expected: true, name: "[target] The value is less than min(with millisecond in 1 digit)"},
+        {conditions: {min: "2000-01-01T12:00:00.02", value: "2000-01-01T12:00:00.01"}, expected: true, name: "[target] The value is less than min(with millisecond in 2 digits)"},
+        {conditions: {min: "2000-01-01T12:00:00.002", value: "2000-01-01T12:00:00.001"}, expected: true, name: "[target] The value is less than min(with millisecond in 3 digits)"},
+        {conditions: {min: "10000-01-01T12:00:00", value: "2000-01-01T12:00:00"}, expected: true, name: "[target] The value is less than min(Year is 10000 should be valid)"},
+        {conditions: {max: "8593-01-01T02:09", value: "8592-01-01T02:09"}, expected: false, name: "[target] The value is greater than max"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {min: "", value: "2000-01-01"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "2000-01-01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "2001/01/01", value: "2000-01-01"}, expected: false, name: "[target] The min attribute is an invalid date"},
+        {conditions: {min: "2000-02-02", value: "2000-1-1"}, expected: false, name: "[target] The value attribute is an invalid date"},
+        {conditions: {min: "988-01-01", value: "987-01-01"}, expected: false, name: "[target] The value is an invalid date(year is three digits)"},
+        {conditions: {min: "2001-01-01", value: "2000-13-01"}, expected: false, name: "[target] The value is an invalid date(month is less than 12)"},
+        {conditions: {min: "2001-01-01", value: "2000-02-30"}, expected: false, name: "[target] The value is an invalid date(date is less than 29 for Feb)"},
+        {conditions: {min: "2000-01-01", value: "2000-12-01"}, expected: false, name: "[target] The min attribute is less than value attribute"},
+        {conditions: {min: "2000-12-01", value: "2000-01-01"}, expected: true, name: "[target] The value attribute is less than min attribute"},
+        {conditions: {min: "10000-01-01", value: "9999-01-01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {min: "", value: "2000-01"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "2000-01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "2001/01", value: "2000-02"}, expected: false, name: "[target] The min attribute is an invalid month string"},
+        {conditions: {min: "2000-02", value: "2000-1"}, expected: false, name: "[target] The value attribute is an invalid month string"},
+        {conditions: {min: "988-01", value: "987-01"}, expected: false, name: "[target] The value is an invalid month string(year is three digits)"},
+        {conditions: {min: "2001-01", value: "2000-13"}, expected: false, name: "[target] The value is an invalid month string(month is less than 12)"},
+        {conditions: {min: "2000-01", value: "2000-12"}, expected: false, name: "[target] The min attribute is less than value attribute"},
+        {conditions: {min: "2001-01", value: "2000-12"}, expected: true, name: "[target] The value attribute is less than min attribute"},
+        {conditions: {min: "10000-01", value: "2000-01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {min: "", value: "2000-W01"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "2000-W01", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "2001/W02", value: "2000-W01"}, expected: false, name: "[target] The min attribute is an invalid week string"},
+        {conditions: {min: "2001-W02", value: "2000-W1"}, expected: false, name: "[target] The value attribute is an invalid week string"},
+        {conditions: {min: "2001-W02", value: "2000-w01"}, expected: false, name: "[target] The value attribute is an invalid week string(w is in lowercase)"},
+        {conditions: {min: "988-W01", value: "987-W01"}, expected: false, name: "[target] The value is an invalid week string(year is three digits)"},
+        {conditions: {min: "2001-W01", value: "2000-W57"}, expected: false, name: "[target] The value is an invalid week string(week is too greater)"},
+        {conditions: {min: "2000-W01", value: "2000-W12"}, expected: false, name: "[target] The min attribute is less than value attribute"},
+        {conditions: {min: "2000-W12", value: "2000-W01"}, expected: true, name: "[target] The value attribute is less than min attribute"},
+        {conditions: {min: "10000-W01", value: "2000-W01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {min: "", value: "12:00:00"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "12.00.01", value: "12:00:00"}, expected: false, name: "[target] The min attribute is an invalid time string"},
+        {conditions: {min: "12:00:01", value: "12.00.00"}, expected: false, name: "[target] The value attribute is an invalid time string"},
+        {conditions: {min: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] The min attribute is less than value attribute"},
+        {conditions: {min: "13:00:00", value: "12"}, expected: false, name: "[target] The time missing second and minute parts is invalid"},
+        {conditions: {min: "12:00:02", value: "12:00:00"}, expected: true, name: "[target] The value attribute is less than min attribute"},
+        {conditions: {min: "12:00:00.2", value: "12:00:00.1"}, expected: true, name: "[target] The value is less than min(with millisecond in 1 digit)"},
+        {conditions: {min: "12:00:00.02", value: "12:00:00.01"}, expected: true, name: "[target] The value is less than min(with millisecond in 2 digit)"},
+        {conditions: {min: "12:00:00.002", value: "12:00:00.001"}, expected: true, name: "[target] The value is less than min(with millisecond in 3 digit)"},
+        {conditions: {min: "12:00:00", value: "11:59"}, expected: true, name: "[target] The time missing second part is valid"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {min: "", value: "10"}, expected: false, name: "[target] The min attribute is not set"},
+        {conditions: {min: "5", value: ""}, expected: false, name: "[target] Value is empty string"},
+        {conditions: {min: "4", value: "5"}, expected: false, name: "[target] The min is less than value(integer)"},
+        {conditions: {min: "-5.6", value: "-5.5"}, expected: false, name: "[target] The min is less than value(floating number)"},
+        {conditions: {min: "0", value: "-0"}, expected: false, name: "[target] The min equals to value"},
+        {conditions: {min: "5", value: "6abc"}, expected: false, name: "[target] The value is not a number"},
+        {conditions: {min: "6", value: "5"}, expected: true, name: "[target] The value is less than min(integer)"},
+        {conditions: {min: "-5.4", value: "-5.5"}, expected: true, name: "[target] The value is less than min(floating number)"},
+        {conditions: {min: "5e+2", value: "-5e-1"}, expected: true, name: "[target] The value is less than min(scientific notation)"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "rangeUnderflow");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-stepMismatch.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-stepMismatch.html
new file mode 100644
index 000000000..174ecaf33
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-stepMismatch.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.stepMismatch</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-stepmismatch">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  //set step = 2 * default step * factor
+  var testElements = [
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {step: "", value: "2000-01-01"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2, value: "1970-01-03"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2, value: "1970-01-02"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {step: "", value: "2000-01"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2, value: "1970-03"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2, value: "1970-04"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {step: "", value: "1970-W01"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2, value: "1970-W03"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2, value: "1970-W04"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {step: "", value: "12:00:00"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2 * 60, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2 * 60, value: "12:02:00"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2 * 60, value: "12:03:00"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {step: "", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2 * 60, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2 * 60, value: "1970-01-01T12:02:00"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2 * 60, value: "1970-01-01T12:03:00"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {step: "", value: "1"}, expected: false, name: "[target] The step attribute is not set"},
+        {conditions: {step: 2 * 1 * 1, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
+        {conditions: {step: 2 * 1 * 1, value: "2"}, expected: false, name: "[target] The value must match the step"},
+        {conditions: {step: 2 * 1 * 1, value: "3"}, expected: true, name: "[target] The value must mismatch the step"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "stepMismatch");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooLong.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooLong.html
new file mode 100644
index 000000000..aa787d471
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooLong.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.tooLong</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-toolong">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password"],
+      testData: [ // Non-dirty value
+        {conditions: {maxLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - maxlength is not set"},
+        {conditions: {maxLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
+        {conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than maxlength"},
+        {conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to maxlength"},
+        {conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than maxlength"},
+        //Dirty value
+        {conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - value is less than maxlength", dirty: true},
+        {conditions: {maxLength: "4", value: "\u0041\u0041\u0041"}, expected: false, name: "[target] Dirty value - length of value(AAA) in unicode is less than maxlength", dirty: true},
+        {conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - value equals to maxlength", dirty: true},
+        // False due to lack of required interactive editing by the user
+        {conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - length of value is greater than maxlength", dirty: true}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {maxLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - maxlength is not set"},
+        {conditions: {maxLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
+        {conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than maxlength"},
+        {conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to maxlength"},
+        {conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than maxlength"},
+        //Dirty value
+        {conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - value is less than maxlength", dirty: true},
+        {conditions: {maxLength: "4", value: "\u000D\u000A"}, expected: false, name: "[target] Dirty value - length of value(LF, CRLF) in unicode is less than maxlength", dirty: true},
+        {conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - length of value equals to maxlength", dirty: true},
+        // False due to lack of required interactive editing by the user
+        {conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - length of value is greater than maxlength", dirty: true}
+      ]
+    }
+  ];
+
+  validator.run_test (testElements, "tooLong");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooShort.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooShort.html
new file mode 100644
index 000000000..b6c0e4399
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-tooShort.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.tooShort</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#suffering-from-being-too-short">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password"],
+      testData: [
+        // Non-dirty value
+        {conditions: {minLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - minLength is not set"},
+        {conditions: {minLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
+        {conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than minLength"},
+        {conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to minLength"},
+        {conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than minLength"},
+        //Dirty value
+        {conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - value is greater than minLength", dirty: true},
+        {conditions: {minLength: "4", value: "\u0041\u0041\u0041\u0041\u0041"}, expected: false, name: "[target] Dirty value - length of value(AAAAA) in unicode is greater than minLength", dirty: true},
+        {conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - value equals to minLength", dirty: true},
+        // False due to lack of required interactive editing by the user
+        {conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - length of value is less than minLength", dirty: true}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        // Non-dirty value
+        {conditions: {minLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - minLength is no set"},
+        {conditions: {minLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
+        {conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than minLength"},
+        {conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to minLength"},
+        {conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of length of value is greater than minLength"},
+        //Dirty value
+        {conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - value is less than minLength", dirty: true},
+        {conditions: {minLength: "4", value: "\u000D\u000A\u000D\u000A\u000D\u000A"}, expected: false, name: "[target] Dirty value - length of value(LF, CRLF) in unicode is less than minLength", dirty: true},
+        {conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - length of value equals to minLength", dirty: true},
+        // False due to lack of required interactive editing by the user
+        {conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - length of value is greater than minLength", dirty: true}
+      ]
+    }
+  ];
+
+  validator.run_test (testElements, "tooShort");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-typeMismatch.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-typeMismatch.html
new file mode 100644
index 000000000..40444277c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-typeMismatch.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.typeMismatch</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-typemismatch">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["email"],
+      testData: [
+        // multiple is false
+        {conditions: {multiple: false, value: ""}, expected: false, name: "[target] The value is empty"},
+        {conditions: {multiple: false, value: "test@example.com"}, expected: false, name: "[target] The value is a valid email address"},
+        {conditions: {multiple: false, value: "\u000A\u000D\u0020\u0009 test@example.com \u000A\u000D\u0020\u0009"}, expected: false, name: "[target] The value is a valid email address with some white spaces."},
+        {conditions: {multiple: false, value: "abc"}, expected: true, name: "[target] The value is not an email address"},
+        {conditions: {multiple: false, value: "test1@example.com,test2@example.com"}, expected: true, name: "[target] The value contains multiple email addresses"},
+        //multiple is true
+        {conditions: {multiple: true, value: "test1@example.com,test2@example.com"}, expected: false, name: "[target] The value is valid email addresses"},
+        {conditions: {multiple: true, value: "test1@example.com;test2@example.com"}, expected: true, name: "[target] The value contains invalid separator"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["url"],
+      testData: [
+        {conditions: {multiple: false, value: ""}, expected: false, name: "[target] The value is empty"},
+        {conditions: {multiple: false, value: "http://www.example.com"}, expected: false, name: "[target] The value is a valid url"},
+        {conditions: {multiple: false, value: "\u000A\u000D\u0020\u0009 http://www.example.com \u000A\u000D\u0020\u0009 "}, expected: false, name: "[target] The value is a valid url with some white spaces."},
+        {conditions: {multiple: false, value: "abc"}, expected: true, name: "[target] The value is not an url"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "typeMismatch");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valid.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valid.html
new file mode 100644
index 000000000..5dacfeae3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valid.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.valid</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valid">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "password"],
+      testData: [
+        {conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["url"],
+      testData: [
+        {conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.typeMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["email"],
+      testData: [
+        {conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
+        {conditions: {value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.typeMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {max: "2000-01-01T12:00:00", value: "2001-01-01T12:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "2001-01-01T12:00:00", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 1 * 86400000, value: "2000-01-03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {max: "5", value: "6"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
+        {conditions: {min: "5", value: "4"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
+        {conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["checkbox", "radio"],
+      testData: [
+        {conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["file"],
+      testData: [
+        {conditions: {required: true, files: null}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "isValid");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valueMissing.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valueMissing.html
new file mode 100644
index 000000000..3c9e4c4cb
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-valueMissing.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.validity.valueMissing</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valuemissing">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "abc"}, expected: false, name: "[target] The value is not empty and required is true"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value is empty and required is true"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["datetime-local"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "2000-12-10T12:00:00"}, expected: false, name: "[target] Valid local date and time string(2000-12-10T12:00:00)"},
+        {conditions: {required: true, value: "2000-12-10 12:00"}, expected: false, name: "[target] Valid local date and time string(2000-12-10 12:00)"},
+        {conditions: {required: true, value: "1979-10-14T12:00:00.001"}, expected: false, name: "[target] Valid local date and time string(1979-10-14T12:00:00.001)"},
+        {conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
+        {conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
+        {conditions: {required: true, value: "1979-10-99 99:99"}, expected: true, name: "[target] Invalid local date and time string(1979-10-99 99:99)"},
+        {conditions: {required: true, value: "1979-10-14 12:00:00"}, expected: false, name: "[target] Valid local date and time string(1979-10-14 12:00:00)"},
+        {conditions: {required: true, value: "2001-12-21  12:00"}, expected: true, name: "[target] Invalid local date and time string(2001-12-21  12:00)-two white space"},
+        {conditions: {required: true, value: "abc"}, expected: true, name: "[target] the value attribute is a string(abc)"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["date"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "2000-12-10"}, expected: false, name: "[target] Valid date string(2000-12-10)"},
+        {conditions: {required: true, value: "9999-01-01"}, expected: false, name: "[target] Valid date string(9999-01-01)"},
+        {conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
+        {conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
+        {conditions: {required: true, value: "9999-99-99"}, expected: true, name: "[target] Invalid date string(9999-99-99)"},
+        {conditions: {required: true, value: "37/01/01"}, expected: true, name: "[target] Invalid date string(37-01-01)"},
+        {conditions: {required: true, value: "2000/01/01"}, expected: true, name: "[target] Invalid date string(2000/01/01)"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["month"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "2000-12"}, expected: false, name: "[target] Valid month string(2000-12)"},
+        {conditions: {required: true, value: "9999-01"}, expected: false, name: "[target] Valid month string(9999-01)"},
+        {conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
+        {conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
+        {conditions: {required: true, value: "2000-99"}, expected: true, name: "[target] Invalid month string(2000-99)"},
+        {conditions: {required: true, value: "37-01"}, expected: true, name: "[target] Invalid month string(37-01)"},
+        {conditions: {required: true, value: "2000/01"}, expected: true, name: "[target] Invalid month string(2000/01)"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["week"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "2000-W12"}, expected: false, name: "[target] Valid week string(2000-W12)"},
+        {conditions: {required: true, value: "9999-W01"}, expected: false, name: "[target] Valid week string(9999-W01)"},
+        {conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
+        {conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
+        {conditions: {required: true, value: "2000-W99"}, expected: true, name: "[target] Invalid week string(2000-W99)"},
+        {conditions: {required: true, value: "2000-W00"}, expected: true, name: "[target] invalid week string(2000-W00)"},
+        {conditions: {required: true, value: "2000-w01"}, expected: true, name: "[target] invalid week string(2000-w01)"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["time"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "12:00:00"}, expected: false, name: "[target] Validtime string(12:00:00)"},
+        {conditions: {required: true, value: "12:00"}, expected: false, name: "[target] Validtime string(12:00)"},
+        {conditions: {required: true, value: "12:00:00.001"}, expected: false, name: "[target] Valid time string(12:00:60.001)"},
+        {conditions: {required: true, value: "12:00:00.01"}, expected: false, name: "[target] Valid time string(12:00:60.01)"},
+        {conditions: {required: true, value: "12:00:00.1"}, expected: false, name: "[target] Valid time string(12:00:60.1)"},
+        {conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
+        {conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a time object"},
+        {conditions: {required: true, value: "25:00:00"}, expected: true, name: "[target] Invalid time string(25:00:00)"},
+        {conditions: {required: true, value: "12:60:00"}, expected: true, name: "[target] Invalid time string(12:60:00)"},
+        {conditions: {required: true, value: "12:00:60"}, expected: true, name: "[target] Invalid time string(12:00:60)"},
+        {conditions: {required: true, value: "12:00:00:001"}, expected: true, name: "[target] Invalid time string(12:00:00:001)"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["number"],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "123"}, expected: false, name: "[target] Value is an integer with a leading symbol '+'"},
+        {conditions: {required: true, value: "-123.45"}, expected: false, name: "[target] Value is a number with a '-' symbol"},
+        {conditions: {required: true, value: "123.01e-10"}, expected: false, name: "[target] Value is a number in scientific notation form(e is in lowercase)"},
+        {conditions: {required: true, value: "123.01E+10"}, expected: false, name: "[target] Value is a number in scientific notation form(E is in uppercase)"},
+        {conditions: {required: true, value: "-0"}, expected: false, name: "[target] Value is -0"},
+        {conditions: {required: true, value: " 123 "}, expected: true, name: "[target] Value is a number with some white spaces"},
+        {conditions: {required: true, value: Math.pow(2, 1024)}, expected: true, name: "[target] Value is Math.pow(2, 1024)"},
+        {conditions: {required: true, value: Math.pow(-2, 1024)}, expected: true, name: "[target] Value is Math.pow(-2, 1024)"},
+        {conditions: {required: true, value: "abc"}, expected: true, name: "[target] Value is a string that cannot be converted to a number"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["checkbox"],
+      testData: [
+        {conditions: {required: false, checked: false, name: "test1"}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, checked: true, name: "test2"}, expected: false, name: "[target] The checked attribute is true"},
+        {conditions: {required: true, checked: false, name: "test3"}, expected: true, name: "[target] The checked attribute is false"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["radio"],
+      testData: [
+        {conditions: {required: false, checked: false, name: "test4"}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, checked: true, name: "test5"}, expected: false, name: "[target] The checked attribute is true"},
+        {conditions: {required: true, checked: false, name: "test6"}, expected: true, name: "[target] The checked attribute is false"}
+      ]
+    },
+    {
+      tag: "input",
+      types: ["file"],
+      testData: [
+        {conditions: {required: false, files: null}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, files: null}, expected: true, name: "[target] The Files attribute is null"}
+        //ToDo: Add a case to test the files is not null
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: 1}, expected: false, name: "[target] Selected the option with value equals to 1"},
+        {conditions: {required: true, value: ""}, expected: true, name: "[target] Selected the option with value equals to empty"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [
+        {conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
+        {conditions: {required: true, value: "abc"}, expected: false, name: "[target] The value is not empty"},
+        {conditions: {required: true, value: ""}, expected: true  , name: "[target] The value is empty"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "valueMissing");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-willValidate.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-willValidate.html
new file mode 100644
index 000000000..237572b0f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-willValidate.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.willValidate</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    //input in hidden, button and reset status must be barred from the constraint validation
+    {
+      tag: "input",
+      types: ["hidden", "button", "reset"],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    //button in button and reset status must be barred from the constraint validation
+    {
+      tag: "button",
+      types: ["button", "reset"],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    //FIELDSET, OUTPUT elements should not be barred from the constraint validation
+    {
+      tag: "fieldset",
+      types: [],
+      testData: [{conditions: {}, expected: true, name: "[target] Must not be barred from the constraint validation"}]
+    },
+    {
+      tag: "output",
+      types: [],
+      testData: [{conditions: {}, expected: true, name: "[target] Must not be barred from the constraint validation"}]
+    },
+    //OBJECT, KEYGEN, elements must be barred from the constraint validation
+    {
+      tag: "object",
+      types: [],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    {
+      tag: "keygen",
+      types: [],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    //If an element is disabled, it is barred from constraint validation.
+    //The willValidate attribute must be true if an element is mutable
+    //If the readonly attribute is specified on an INPUT element, the element is barred from constraint validation.
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password", "datetime-local", "date", "month", "week", "time", "color", "file", "submit"],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
+        {conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {readOnly: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is readonly"},
+        {conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
+      ]
+    },
+    {
+      tag: "button",
+      types: ["submit"],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [,
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "willValidate");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/inputwillvalidate.html b/testing/web-platform/tests/html/semantics/forms/constraints/inputwillvalidate.html
new file mode 100644
index 000000000..909fd889b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/inputwillvalidate.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html><head>
+    <title>willValidate property on the input element</title>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <meta content="willValidate property on the input element" name="description">
+    <link href="https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate" rel="help">
+  </head>
+  <body>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+
+    <div id="log"></div>
+
+    <form action="http://www.example.com/" style="display : none">
+      <input required="" type="text">
+      <input disabled="" type="text">
+    </form>
+
+    <script type="text/javascript">
+
+      test(function() {assert_true(document.getElementsByTagName("input")[0].willValidate)}, "willValidate property returns true when required attribute exists");
+      test(function() {assert_false(document.getElementsByTagName("input")[1].willValidate)}, "willValidate property returns false when disabled attribute exists");
+
+    </script>
+
+</body></html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/support/validator.js b/testing/web-platform/tests/html/semantics/forms/constraints/support/validator.js
new file mode 100644
index 000000000..e969ce460
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/support/validator.js
@@ -0,0 +1,377 @@
+var validator = {
+  test_tooLong: function(ctl, data) {
+    var self = this;
+    test(function () {
+       self.pre_check(ctl, "tooLong");
+      self.set_conditions(ctl, data.conditions);
+      if (data.dirty)
+        self.set_dirty(ctl);
+
+      if (data.expected)
+        assert_true(ctl.validity.tooLong, "The validity.tooLong should be true.");
+      else
+        assert_false(ctl.validity.tooLong, "The validity.tooLong should be false.");
+    }, data.name);
+  },
+
+  test_tooShort: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "tooShort");
+      self.set_conditions(ctl, data.conditions);
+      if (data.dirty)
+        self.set_dirty(ctl);
+
+      if (data.expected)
+        assert_true(ctl.validity.tooShort, "The validity.tooShort should be true.");
+      else
+        assert_false(ctl.validity.tooShort, "The validity.tooShort should be false.");
+    }, data.name);
+  },
+
+  test_patternMismatch: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "patternMismatch");
+      self.set_conditions(ctl, data.conditions);
+
+      if (data.expected)
+        assert_true(ctl.validity.patternMismatch, "The validity.patternMismatch should be true.");
+      else
+        assert_false(ctl.validity.patternMismatch, "The validity.patternMismatch should be false.");
+    }, data.name);
+  },
+
+  test_valueMissing: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "valueMissing");
+      self.set_conditions(ctl, data.conditions);
+      if (data.expected)
+        assert_true(ctl.validity.valueMissing, "The validity.valueMissing should be true.");
+      else
+        assert_false(ctl.validity.valueMissing, "The validity.valueMissing should be false.");
+    }, data.name);
+  },
+
+  test_typeMismatch: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "typeMismatch");
+      self.set_conditions(ctl, data.conditions);
+
+      if (data.expected)
+        assert_true(ctl.validity.typeMismatch, "The validity.typeMismatch should be true.");
+      else
+        assert_false(ctl.validity.typeMismatch, "The validity.typeMismatch should be false.");
+    }, data.name);
+  },
+
+  test_rangeOverflow: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "rangeOverflow");
+      self.set_conditions(ctl, data.conditions);
+
+      if (data.expected)
+        assert_true(ctl.validity.rangeOverflow, "The validity.rangeOverflow should be true.");
+      else
+        assert_false(ctl.validity.rangeOverflow, "The validity.rangeOverflow should be false.");
+    }, data.name);
+  },
+
+  test_rangeUnderflow: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "rangeUnderflow");
+      self.set_conditions(ctl, data.conditions);
+      if (data.expected)
+        assert_true(ctl.validity.rangeUnderflow, "The validity.rangeUnderflow should be true.");
+      else
+        assert_false(ctl.validity.rangeUnderflow, "The validity.rangeUnderflow should be false.");
+    }, data.name);
+  },
+
+  test_stepMismatch: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "stepMismatch");
+      self.set_conditions(ctl, data.conditions);
+
+      if (data.expected)
+        assert_true(ctl.validity.stepMismatch, "The validity.stepMismatch should be true.");
+      else
+        assert_false(ctl.validity.stepMismatch, "The validity.stepMismatch should be false.");
+    }, data.name);
+  },
+
+  test_badInput: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "badInput");
+      self.set_conditions(ctl, data.conditions);
+
+      if (data.expected)
+        assert_true(ctl.validity.badInput, "The validity.badInput should be true.");
+      else
+        assert_false(ctl.validity.badInput, "The validity.badInput should be false.");
+    }, data.name);
+  },
+
+  test_customError: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "customError");
+      ctl.setCustomValidity(data.conditions.message);
+
+      if (data.expected) {
+        assert_true(ctl.validity.customError, "The validity.customError attribute should be true.");
+        assert_equals(ctl.validationMessage, data.conditions.message,
+                      "The validationMessage attribute should be '" + data.conditions.message + "'.");
+      } else {
+        assert_false(ctl.validity.customError, "The validity.customError attribute should be false.");
+        assert_equals(ctl.validationMessage, "", "The validationMessage attribute must be empty.");
+      }
+    }, data.name);
+  },
+
+  test_isValid: function (ctl, data) {
+    var self = this;
+    test(function () {
+      self.set_conditions(ctl, data.conditions);
+      if (data.dirty)
+        self.set_dirty(ctl);
+
+      if (data.expected)
+        assert_true(ctl.validity.valid, "The validity.valid should be true.");
+      else
+        assert_false(ctl.validity.valid, "The validity.valid should be false.");
+    }, data.name);
+  },
+
+  test_willValidate: function(ctl, data) {
+    var self = this;
+    test(function () {
+      self.pre_check(ctl, "willValidate");
+      self.set_conditions(ctl, data.conditions);
+      if (data.ancestor) {
+        var dl = document.createElement("datalist");
+        dl.appendChild(ctl);
+      }
+
+      if (data.expected)
+        assert_true(ctl.willValidate, "The willValidate attribute should be true.");
+      else
+        assert_false(ctl.willValidate, "The willValidate attribute should be false.");
+    }, data.name);
+  },
+
+  test_checkValidity: function (ctl, data) {
+    var self = this;
+    test(function () {
+      var eventFired = false;
+      self.pre_check(ctl, "checkValidity");
+      self.set_conditions(ctl, data.conditions);
+      if (data.dirty)
+        self.set_dirty(ctl);
+
+      on_event(ctl, "invalid", function(e){
+        assert_equals(e.type, "invalid", "The invalid event should be fired.");
+        eventFired = true;
+      });
+
+      if (data.expected) {
+        assert_true(ctl.checkValidity(), "The checkValidity method should be true.");
+        assert_false(eventFired, "The invalid event should not be fired.");
+      } else {
+        assert_false(ctl.checkValidity(), "The checkValidity method should be false.");
+        assert_true(eventFired, "The invalid event should be fired.");
+      }
+    }, data.name);
+
+    test(function () {
+      var fm = document.createElement("form");
+      var ctl2 = ctl.cloneNode(true);
+
+      self.pre_check(ctl, "checkValidity");
+      self.set_conditions(ctl2, data.conditions);
+      fm.appendChild(ctl2);
+      document.body.appendChild(fm);
+      if (data.dirty)
+        self.set_dirty(ctl2);
+
+      var result = fm.checkValidity();
+      document.body.removeChild(fm);
+
+      if (data.expected)
+        assert_true(result, "The checkValidity method of the element's form owner should return true.");
+      else
+        assert_false(result, "The checkValidity method of the element's form owner should return false.");
+    }, data.name + " (in a form)");
+  },
+
+  test_reportValidity: function (ctl, data) {
+    var self = this;
+    test(function () {
+      var eventFired = false;
+
+      self.pre_check(ctl, "reportValidity");
+      self.set_conditions(ctl, data.conditions);
+      if (data.dirty)
+        self.set_dirty(ctl);
+
+      on_event(ctl, "invalid", function(e){
+        assert_equals(e.type, "invalid", "The invalid event should be fired.");
+        eventFired = true;
+      });
+
+      if (data.expected) {
+        assert_true(ctl.reportValidity(), "The reportValidity method should be true.");
+        assert_false(eventFired, "The invalid event should not be fired.");
+      } else {
+        assert_false(ctl.reportValidity(), "The reportValidity method should be false.");
+        assert_true(eventFired, "The invalid event should be fired.");
+      }
+    }, data.name);
+
+    test(function () {
+      var fm = document.createElement("form");
+      var ctl2 = ctl.cloneNode(true);
+
+      self.pre_check(ctl, "reportValidity");
+      self.set_conditions(ctl2, data.conditions);
+      fm.appendChild(ctl2);
+      document.body.appendChild(fm);
+      if (data.dirty)
+        self.set_dirty(ctl2);
+
+      var result = fm.reportValidity();
+      document.body.removeChild(fm);
+
+      if (data.expected)
+        assert_true(result, "The reportValidity method of the element's form owner should return true.");
+      else
+        assert_false(result, "The reportValidity method of the element's form owner should return false.");
+    }, data.name + " (in a form)");
+  },
+
+  test_support_type: function (ctl, typ, testName) {
+    test(function () {
+      assert_equals(ctl.type, typ, "The " + typ + " type should be supported.");
+    }, testName);
+  },
+
+  set_conditions: function (ctl, obj) {
+    [
+      "checked",
+      "disabled",
+      "max",
+      "maxlength",
+      "min",
+      "minlength",
+      "multiple",
+      "pattern",
+      "required",
+      "selected",
+      "step",
+      "value"
+    ].forEach(function(item) {
+      ctl.removeAttribute(item);
+    });
+    for (var attr in obj) {
+      if (attr === "checked" || obj[attr] || obj[attr] === "")
+        ctl[attr] = obj[attr];
+    }
+  },
+
+  set_dirty: function(ctl) {
+    ctl.focus();
+    var old_value = ctl.value;
+    ctl.value = "a";
+    ctl.value = old_value;
+  },
+
+  pre_check: function(ctl, item) {
+    switch (item) {
+      case "willValidate":
+        assert_true(item in ctl, "The " + item + " attribute doesn't exist.");
+        break;
+      case "checkValidity":
+      case "reportValidity":
+        assert_true(item in ctl, "The " + item + " method doesn't exist.");
+        break;
+      case "tooLong":
+      case "tooShort":
+      case "patternMismatch":
+      case "typeMismatch":
+      case "stepMismatch":
+      case "rangeOverflow":
+      case "rangeUnderflow":
+      case "valueMissing":
+      case "badInput":
+      case "valid":
+        assert_true("validity" in ctl, "The validity attribute doesn't exist.");
+        assert_true(item in ctl.validity, "The " + item + " attribute doesn't exist.");
+        break;
+      case "customError":
+        assert_true("validity" in ctl, "The validity attribute doesn't exist.");
+        assert_true("setCustomValidity" in ctl, "The validity attribute doesn't exist.");
+        assert_true("validationMessage" in ctl, "The validity attribute doesn't exist.");
+        assert_true(item in ctl.validity, "The " + item + " attribute doesn't exist.");
+        break;
+    }
+  },
+
+  run_test: function (testee, method) {
+    var testMethod = "test_" + method;
+    if (typeof this[testMethod] !== "function") {
+      return false;
+    }
+
+    var ele = null,
+        prefix = "";
+
+    for (var i = 0; i < testee.length; i++) {
+      if (testee[i].types.length > 0) {
+        for (var typ in testee[i].types) {
+          ele = document.createElement(testee[i].tag);
+          document.body.appendChild(ele);
+          try {
+            ele.type = testee[i].types[typ];
+          } catch (e) {
+            //Do nothing, avoid the runtime error breaking the test
+          }
+
+          prefix = "[" + testee[i].tag.toUpperCase() + " in " + testee[i].types[typ].toUpperCase() + " status] ";
+          if (ele.type != testee[i].types[typ]) {
+            this.test_support_type(
+              ele,
+              testee[i].types[typ],
+              prefix + "The " + testee[i].types[typ] + " type must be supported."
+            );
+            continue;
+          }
+
+          for (var j = 0; j < testee[i].testData.length; j++) {
+            testee[i].testData[j].name = testee[i].testData[j].name.replace(/\[.*\]\s/g, prefix);
+            this[testMethod](ele, testee[i].testData[j]);
+          }
+        }
+      } else {
+        ele = document.createElement(testee[i].tag);
+        document.body.appendChild(ele);
+        prefix = "[" + testee[i].tag + "] ";
+
+        if (testElements[i].tag === "select") {
+          ele.add(new Option("test1", ""));
+          ele.add(new Option("test2", 1));
+        }
+
+        for (var item in testee[i].testData) {
+          testee[i].testData[item].name = testee[i].testData[item].name.replace("[target]", prefix);
+          this[testMethod](ele, testee[i].testData[item]);
+        }
+      }
+    }
+  }
+}
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-email-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-email-delete-manual.html
new file mode 100644
index 000000000..008089f39
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-email-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="email"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="email" value="jane.doe@example.com" maxlength="5" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-password-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-password-delete-manual.html
new file mode 100644
index 000000000..353d9466d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-password-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="password"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="password" value="swordfish" maxlength="5" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-search-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-search-delete-manual.html
new file mode 100644
index 000000000..73be3b6d8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-search-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="search"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="search" value="abcdefghi" maxlength="5" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-tel-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-tel-delete-manual.html
new file mode 100644
index 000000000..bf7682af3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-tel-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="tel"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="tel" value="123-456-7890" maxlength="7" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-text-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-text-delete-manual.html
new file mode 100644
index 000000000..2eea2b724
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-text-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="text"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="text" value="0123456789" maxlength="5" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-url-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-url-delete-manual.html
new file mode 100644
index 000000000..17039a71a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-input-url-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>input[type="url"], ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still exceeds the input's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text input:</p>
+    <input type="url" value="http://example.com/foo" maxlength="12" autocomplete="off" id="testinput">
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-textarea-delete-manual.html b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-textarea-delete-manual.html
new file mode 100644
index 000000000..2212a1ca9
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/constraints/tooLong-textarea-delete-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>textarea, ValidityState.tooLong and user editing</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/#limiting-user-input-length:-the-maxlength-attribute">
+    <meta name="flags" content="interact">
+    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, a textarea whose value was edited by the user but still exceeds the textarea's maxlength should suffer from being too long.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <p>Delete one character from the following text area:</p>
+    <textarea maxlength="5" autocomplete="off" id="testinput">0123456789</textarea>
+
+    <div id="log"></div>
+    <script>
+var input = document.getElementById('testinput');
+setup({explicit_timeout: true, explicit_done: true});
+on_event(input, "input", function () {
+  test(function() {
+    assert_class_string(input.validity, 'ValidityState', 'HTMLTextAreaElement.validity must be a ValidityState instance');
+    assert_true(input.validity.tooLong, "tooLong must be true since the user just changed the input's value and the value exceeds the maxlength");
+  });
+  done();
+});
+    </script>
+  </body>
+</html>
-- 
cgit v1.2.3