Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(176)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css/invalidation/in-and-out-of-range-pseudo.html

Issue 2556423002: Missing style invalidation for :in-range and :out-of-range. (Closed)
Patch Set: Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLFormControlElement.cpp » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css/invalidation/in-and-out-of-range-pseudo.html
diff --git a/third_party/WebKit/LayoutTests/fast/css/invalidation/in-and-out-of-range-pseudo.html b/third_party/WebKit/LayoutTests/fast/css/invalidation/in-and-out-of-range-pseudo.html
new file mode 100644
index 0000000000000000000000000000000000000000..8ad83028dcc3eca57d9bde4d8c4084cd5eee634d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css/invalidation/in-and-out-of-range-pseudo.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+ .inrange, .outofrange {
+ background-color: red
+ }
+ input:in-range + .inrange, input:out-of-range + .outofrange {
+ background-color: green
+ }
+</style>
+<div>
+ <input type="number" min="1" max="10" value="20" id="t1">
+ <span id="r1" class="inrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="5" id="t2">
+ <span id="r2" class="outofrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="20" id="t3">
+ <span id="r3" class="inrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="5" id="t4">
+ <span id="r4" class="outofrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="20" id="t5">
+ <span id="r5" class="inrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="5" id="t6">
+ <span id="r6" class="outofrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="20" id="t7">
+ <span id="r7" class="inrange">This text should have a green background</span>
+</div>
+<div>
+ <input type="number" min="1" max="10" value="5" id="t8">
+ <span id="r8" class="outofrange">This text should have a green background</span>
+</div>
+<script>
+ test(() => {
+ assert_equals(getComputedStyle(r1).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t1.value = "5";
+ assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
+ }, "Change an out-of-range number input value to be in-range through DOM property.");
+
+ test(() => {
+ assert_equals(getComputedStyle(r2).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t2.value = "20";
+ assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
+ }, "Change an in-range number input value to be out-of-range through DOM property.");
+
+ test(() => {
+ assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.")
+ assert_equals(getComputedStyle(r3).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t3.focus();
+ t3.select();
+ eventSender.keyDown("5");
+ assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
+ }, "Change an out-of-range number input value to be in-range with keyboard input.");
+
+ test(() => {
+ assert_true(!!window.eventSender, "Needs window.eventSender to test keyboard input.")
+ assert_equals(getComputedStyle(r4).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t4.focus();
+ t4.select();
+ eventSender.keyDown("2");
+ eventSender.keyDown("0");
+ assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
+ }, "Change an in-range number input value to be out-of-range with keyboard input.");
+
+ test(() => {
+ assert_equals(getComputedStyle(r5).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t5.setAttribute("value", "5");
+ assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
+ }, "Change an out-of-range number input value to be in-range with setAttribute.");
+
+ test(() => {
+ assert_equals(getComputedStyle(r6).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t6.setAttribute("value", "20");
+ assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
+ }, "Change an in-range number input value to be out-of-range with setAttribute.");
+
+ test(() => {
+ assert_equals(getComputedStyle(r7).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t7.setAttribute("max", "40");
+ assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", ":in-range change applied.");
+ }, "Change an out-of-range number input value to be in-range by changing max attribute.");
+
+ test(() => {
+ assert_equals(getComputedStyle(r8).backgroundColor, "rgb(255, 0, 0)", "Precondition.");
+ t8.setAttribute("min", "10");
+ assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", ":out-of-range change applied.");
+ }, "Change an in-range number input value to be out-of-range by changing min attribute.");
+
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLFormControlElement.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698