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.

Side by Side 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:

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script src="../../../resources/testharness.js"></script>

	3 <script src="../../../resources/testharnessreport.js"></script>

	4 <style>

	5 .inrange, .outofrange {

	6 background-color: red

	7 }

	8 input:in-range + .inrange, input:out-of-range + .outofrange {

	9 background-color: green

	10 }

	11 </style>

	12 <div>

	13 <input type="number" min="1" max="10" value="20" id="t1">

	14 <span id="r1" class="inrange">This text should have a green background</span >

	15 </div>

	16 <div>

	17 <input type="number" min="1" max="10" value="5" id="t2">

	18 <span id="r2" class="outofrange">This text should have a green background</s pan>

	19 </div>

	20 <div>

	21 <input type="number" min="1" max="10" value="20" id="t3">

	22 <span id="r3" class="inrange">This text should have a green background</span >

	23 </div>

	24 <div>

	25 <input type="number" min="1" max="10" value="5" id="t4">

	26 <span id="r4" class="outofrange">This text should have a green background</s pan>

	27 </div>

	28 <div>

	29 <input type="number" min="1" max="10" value="20" id="t5">

	30 <span id="r5" class="inrange">This text should have a green background</span >

	31 </div>

	32 <div>

	33 <input type="number" min="1" max="10" value="5" id="t6">

	34 <span id="r6" class="outofrange">This text should have a green background</s pan>

	35 </div>

	36 <div>

	37 <input type="number" min="1" max="10" value="20" id="t7">

	38 <span id="r7" class="inrange">This text should have a green background</span >

	39 </div>

	40 <div>

	41 <input type="number" min="1" max="10" value="5" id="t8">

	42 <span id="r8" class="outofrange">This text should have a green background</s pan>

	43 </div>

	44 <script>

	45 test(() => {

	46 assert_equals(getComputedStyle(r1).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	47 t1.value = "5";

	48 assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", ": in-range change applied.");

	49 }, "Change an out-of-range number input value to be in-range through DOM pro perty.");

	50

	51 test(() => {

	52 assert_equals(getComputedStyle(r2).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	53 t2.value = "20";

	54 assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", ": out-of-range change applied.");

	55 }, "Change an in-range number input value to be out-of-range through DOM pro perty.");

	56

	57 test(() => {

	58 assert_true(!!window.eventSender, "Needs window.eventSender to test keyb oard input.")

	59 assert_equals(getComputedStyle(r3).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	60 t3.focus();

	61 t3.select();

	62 eventSender.keyDown("5");

	63 assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", ": in-range change applied.");

	64 }, "Change an out-of-range number input value to be in-range with keyboard i nput.");

	65

	66 test(() => {

	67 assert_true(!!window.eventSender, "Needs window.eventSender to test keyb oard input.")

	68 assert_equals(getComputedStyle(r4).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	69 t4.focus();

	70 t4.select();

	71 eventSender.keyDown("2");

	72 eventSender.keyDown("0");

	73 assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", ": out-of-range change applied.");

	74 }, "Change an in-range number input value to be out-of-range with keyboard i nput.");

	75

	76 test(() => {

	77 assert_equals(getComputedStyle(r5).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	78 t5.setAttribute("value", "5");

	79 assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", ": in-range change applied.");

	80 }, "Change an out-of-range number input value to be in-range with setAttribu te.");

	81

	82 test(() => {

	83 assert_equals(getComputedStyle(r6).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	84 t6.setAttribute("value", "20");

	85 assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", ": out-of-range change applied.");

	86 }, "Change an in-range number input value to be out-of-range with setAttribu te.");

	87

	88 test(() => {

	89 assert_equals(getComputedStyle(r7).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	90 t7.setAttribute("max", "40");

	91 assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", ": in-range change applied.");

	92 }, "Change an out-of-range number input value to be in-range by changing max attribute.");

	93

	94 test(() => {

	95 assert_equals(getComputedStyle(r8).backgroundColor, "rgb(255, 0, 0)", "P recondition.");

	96 t8.setAttribute("min", "10");

	97 assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", ": out-of-range change applied.");

	98 }, "Change an in-range number input value to be out-of-range by changing min attribute.");

	99

	100 </script>

OLD	NEW

« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLFormControlElement.cpp » ('j') | no next file with comments »