Diff
Modified: trunk/LayoutTests/ChangeLog (202158 => 202159)
--- trunk/LayoutTests/ChangeLog 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/LayoutTests/ChangeLog 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,3 +1,23 @@
+2016-06-16 Benjamin Poulain <[email protected]>
+
+ :in-range & :out-of-range CSS pseudo-classes shouldn't match disabled or readonly inputs
+ https://bugs.webkit.org/show_bug.cgi?id=156530
+
+ Reviewed by Simon Fraser.
+
+ * fast/css/pseudo-in-range-on-disabled-input-basics-expected.html: Added.
+ * fast/css/pseudo-in-range-on-disabled-input-basics.html: Added.
+ * fast/css/pseudo-in-range-on-readonly-input-basics-expected.html: Added.
+ * fast/css/pseudo-in-range-on-readonly-input-basics.html: Added.
+ * fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial-expected.html: Added.
+ * fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial.html: Added.
+ * fast/css/pseudo-out-of-range-on-disabled-input-basics-expected.html: Added.
+ * fast/css/pseudo-out-of-range-on-disabled-input-basics.html: Added.
+ * fast/css/pseudo-out-of-range-on-readonly-input-basics-expected.html: Added.
+ * fast/css/pseudo-out-of-range-on-readonly-input-basics.html: Added.
+ * fast/selectors/in-range-out-of-range-style-update-expected.txt: Added.
+ * fast/selectors/in-range-out-of-range-style-update.html: Added.
+
2016-06-16 Gyuyoung Kim <[email protected]>
[EFL][GTK] LayoutTest doesn't run on Ubuntu 16.04
Added: trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics-expected.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics-expected.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of disabled input elements with the :in-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" disabled>
+ <input type="text" disabled min=1>
+ <input type="text" disabled min=1 value=0>
+ <input type="text" disabled min=1 value=1>
+ <input type="text" disabled max=42>
+ <input type="text" disabled max=42 value=42>
+ <input type="text" disabled max=42 value=43>
+ <input type="text" disabled min=1 max=42>
+ <input type="text" disabled min=1 max=42 value=0>
+ <input type="text" disabled min=1 max=42 value=1>
+ <input type="text" disabled min=1 max=42 value=2>
+ <input type="text" disabled min=1 max=42 value=41>
+ <input type="text" disabled min=1 max=42 value=42>
+ <input type="text" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled>
+ <input type="number" disabled min=1>
+ <input type="number" disabled min=1 value=0>
+ <input type="number" disabled min=1 value=1>
+ <input type="number" disabled max=42>
+ <input type="number" disabled max=42 value=42>
+ <input type="number" disabled max=42 value=43>
+ <input type="number" disabled min=1 max=42>
+ <input type="number" disabled min=1 max=42 value=0>
+ <input type="number" disabled min=1 max=42 value=1>
+ <input type="number" disabled min=1 max=42 value=2>
+ <input type="number" disabled min=1 max=42 value=41>
+ <input type="number" disabled min=1 max=42 value=42>
+ <input type="number" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min>
+ <input type="number" disabled min value=0>
+ <input type="number" disabled max>
+ <input type="number" disabled max value=42>
+ <input type="number" disabled min max>
+ <input type="number" disabled min max=42>
+ <input type="number" disabled min=1 max>
+ <input type="number" disabled min max value=0>
+ <input type="number" disabled min=1 max value=0>
+ <input type="number" disabled min=1 max value=1>
+ <input type="number" disabled min max=42 value=42>
+ <input type="number" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min="webkit">
+ <input type="number" disabled min="webkit" value=0>
+ <input type="number" disabled max="webkit">
+ <input type="number" disabled max="webkit" value=42>
+ <input type="number" disabled min="webkit" max="webkit">
+ <input type="number" disabled min="webkit" max=42>
+ <input type="number" disabled min=1 max="webkit">
+ <input type="number" disabled min="webkit" max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=1>
+ <input type="number" disabled min="webkit" max=42 value=42>
+ <input type="number" disabled min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled>
+ <input type="range" disabled min=1>
+ <input type="range" disabled min=1 value=0>
+ <input type="range" disabled min=1 value=1>
+ <input type="range" disabled max=42>
+ <input type="range" disabled max=42 value=42>
+ <input type="range" disabled max=42 value=43>
+ <input type="range" disabled min=1 max=42>
+ <input type="range" disabled min=1 max=42 value=0>
+ <input type="range" disabled min=1 max=42 value=1>
+ <input type="range" disabled min=1 max=42 value=2>
+ <input type="range" disabled min=1 max=42 value=41>
+ <input type="range" disabled min=1 max=42 value=42>
+ <input type="range" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min>
+ <input type="range" disabled min value=0>
+ <input type="range" disabled max>
+ <input type="range" disabled max value=42>
+ <input type="range" disabled min max>
+ <input type="range" disabled min max=42>
+ <input type="range" disabled min=1 max>
+ <input type="range" disabled min max value=0>
+ <input type="range" disabled min=1 max value=0>
+ <input type="range" disabled min=1 max value=1>
+ <input type="range" disabled min max=42 value=42>
+ <input type="range" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min="webkit">
+ <input type="range" disabled min="webkit" value=0>
+ <input type="range" disabled max="webkit">
+ <input type="range" disabled max="webkit" value=42>
+ <input type="range" disabled min="webkit" max="webkit">
+ <input type="range" disabled min="webkit" max=42>
+ <input type="range" disabled min=1 max="webkit">
+ <input type="range" disabled min="webkit" max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=1>
+ <input type="range" disabled min="webkit" max=42 value=42>
+ <input type="range" disabled min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ :in-range {
+ background-color: red;
+ color: green;
+ border: 2px solid blue;
+ -webkit-appearance: none;
+ }
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of disabled input elements with the :in-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" disabled>
+ <input type="text" disabled min=1>
+ <input type="text" disabled min=1 value=0>
+ <input type="text" disabled min=1 value=1>
+ <input type="text" disabled max=42>
+ <input type="text" disabled max=42 value=42>
+ <input type="text" disabled max=42 value=43>
+ <input type="text" disabled min=1 max=42>
+ <input type="text" disabled min=1 max=42 value=0>
+ <input type="text" disabled min=1 max=42 value=1>
+ <input type="text" disabled min=1 max=42 value=2>
+ <input type="text" disabled min=1 max=42 value=41>
+ <input type="text" disabled min=1 max=42 value=42>
+ <input type="text" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled>
+ <input type="number" disabled min=1>
+ <input type="number" disabled min=1 value=0>
+ <input type="number" disabled min=1 value=1>
+ <input type="number" disabled max=42>
+ <input type="number" disabled max=42 value=42>
+ <input type="number" disabled max=42 value=43>
+ <input type="number" disabled min=1 max=42>
+ <input type="number" disabled min=1 max=42 value=0>
+ <input type="number" disabled min=1 max=42 value=1>
+ <input type="number" disabled min=1 max=42 value=2>
+ <input type="number" disabled min=1 max=42 value=41>
+ <input type="number" disabled min=1 max=42 value=42>
+ <input type="number" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min>
+ <input type="number" disabled min value=0>
+ <input type="number" disabled max>
+ <input type="number" disabled max value=42>
+ <input type="number" disabled min max>
+ <input type="number" disabled min max=42>
+ <input type="number" disabled min=1 max>
+ <input type="number" disabled min max value=0>
+ <input type="number" disabled min=1 max value=0>
+ <input type="number" disabled min=1 max value=1>
+ <input type="number" disabled min max=42 value=42>
+ <input type="number" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min="webkit">
+ <input type="number" disabled min="webkit" value=0>
+ <input type="number" disabled max="webkit">
+ <input type="number" disabled max="webkit" value=42>
+ <input type="number" disabled min="webkit" max="webkit">
+ <input type="number" disabled min="webkit" max=42>
+ <input type="number" disabled min=1 max="webkit">
+ <input type="number" disabled min="webkit" max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=1>
+ <input type="number" disabled min="webkit" max=42 value=42>
+ <input type="number" disabled min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled>
+ <input type="range" disabled min=1>
+ <input type="range" disabled min=1 value=0>
+ <input type="range" disabled min=1 value=1>
+ <input type="range" disabled max=42>
+ <input type="range" disabled max=42 value=42>
+ <input type="range" disabled max=42 value=43>
+ <input type="range" disabled min=1 max=42>
+ <input type="range" disabled min=1 max=42 value=0>
+ <input type="range" disabled min=1 max=42 value=1>
+ <input type="range" disabled min=1 max=42 value=2>
+ <input type="range" disabled min=1 max=42 value=41>
+ <input type="range" disabled min=1 max=42 value=42>
+ <input type="range" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min>
+ <input type="range" disabled min value=0>
+ <input type="range" disabled max>
+ <input type="range" disabled max value=42>
+ <input type="range" disabled min max>
+ <input type="range" disabled min max=42>
+ <input type="range" disabled min=1 max>
+ <input type="range" disabled min max value=0>
+ <input type="range" disabled min=1 max value=0>
+ <input type="range" disabled min=1 max value=1>
+ <input type="range" disabled min max=42 value=42>
+ <input type="range" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min="webkit">
+ <input type="range" disabled min="webkit" value=0>
+ <input type="range" disabled max="webkit">
+ <input type="range" disabled max="webkit" value=42>
+ <input type="range" disabled min="webkit" max="webkit">
+ <input type="range" disabled min="webkit" max=42>
+ <input type="range" disabled min=1 max="webkit">
+ <input type="range" disabled min="webkit" max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=1>
+ <input type="range" disabled min="webkit" max=42 value=42>
+ <input type="range" disabled min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics-expected.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics-expected.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of readonly input elements with the :in-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" readonly>
+ <input type="text" readonly min=1>
+ <input type="text" readonly min=1 value=0>
+ <input type="text" readonly min=1 value=1>
+ <input type="text" readonly max=42>
+ <input type="text" readonly max=42 value=42>
+ <input type="text" readonly max=42 value=43>
+ <input type="text" readonly min=1 max=42>
+ <input type="text" readonly min=1 max=42 value=0>
+ <input type="text" readonly min=1 max=42 value=1>
+ <input type="text" readonly min=1 max=42 value=2>
+ <input type="text" readonly min=1 max=42 value=41>
+ <input type="text" readonly min=1 max=42 value=42>
+ <input type="text" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly>
+ <input type="number" readonly min=1>
+ <input type="number" readonly min=1 value=0>
+ <input type="number" readonly min=1 value=1>
+ <input type="number" readonly max=42>
+ <input type="number" readonly max=42 value=42>
+ <input type="number" readonly max=42 value=43>
+ <input type="number" readonly min=1 max=42>
+ <input type="number" readonly min=1 max=42 value=0>
+ <input type="number" readonly min=1 max=42 value=1>
+ <input type="number" readonly min=1 max=42 value=2>
+ <input type="number" readonly min=1 max=42 value=41>
+ <input type="number" readonly min=1 max=42 value=42>
+ <input type="number" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min>
+ <input type="number" readonly min value=0>
+ <input type="number" readonly max>
+ <input type="number" readonly max value=42>
+ <input type="number" readonly min max>
+ <input type="number" readonly min max=42>
+ <input type="number" readonly min=1 max>
+ <input type="number" readonly min max value=0>
+ <input type="number" readonly min=1 max value=0>
+ <input type="number" readonly min=1 max value=1>
+ <input type="number" readonly min max=42 value=42>
+ <input type="number" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min="webkit">
+ <input type="number" readonly min="webkit" value=0>
+ <input type="number" readonly max="webkit">
+ <input type="number" readonly max="webkit" value=42>
+ <input type="number" readonly min="webkit" max="webkit">
+ <input type="number" readonly min="webkit" max=42>
+ <input type="number" readonly min=1 max="webkit">
+ <input type="number" readonly min="webkit" max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=1>
+ <input type="number" readonly min="webkit" max=42 value=42>
+ <input type="number" readonly min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly>
+ <input type="range" readonly min=1>
+ <input type="range" readonly min=1 value=0>
+ <input type="range" readonly min=1 value=1>
+ <input type="range" readonly max=42>
+ <input type="range" readonly max=42 value=42>
+ <input type="range" readonly max=42 value=43>
+ <input type="range" readonly min=1 max=42>
+ <input type="range" readonly min=1 max=42 value=0>
+ <input type="range" readonly min=1 max=42 value=1>
+ <input type="range" readonly min=1 max=42 value=2>
+ <input type="range" readonly min=1 max=42 value=41>
+ <input type="range" readonly min=1 max=42 value=42>
+ <input type="range" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min>
+ <input type="range" readonly min value=0>
+ <input type="range" readonly max>
+ <input type="range" readonly max value=42>
+ <input type="range" readonly min max>
+ <input type="range" readonly min max=42>
+ <input type="range" readonly min=1 max>
+ <input type="range" readonly min max value=0>
+ <input type="range" readonly min=1 max value=0>
+ <input type="range" readonly min=1 max value=1>
+ <input type="range" readonly min max=42 value=42>
+ <input type="range" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min="webkit">
+ <input type="range" readonly min="webkit" value=0>
+ <input type="range" readonly max="webkit">
+ <input type="range" readonly max="webkit" value=42>
+ <input type="range" readonly min="webkit" max="webkit">
+ <input type="range" readonly min="webkit" max=42>
+ <input type="range" readonly min=1 max="webkit">
+ <input type="range" readonly min="webkit" max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=1>
+ <input type="range" readonly min="webkit" max=42 value=42>
+ <input type="range" readonly min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-on-readonly-input-basics.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ :in-range {
+ background-color: red;
+ color: green;
+ border: 2px solid blue;
+ -webkit-appearance: none;
+ }
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of readonly input elements with the :in-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" readonly>
+ <input type="text" readonly min=1>
+ <input type="text" readonly min=1 value=0>
+ <input type="text" readonly min=1 value=1>
+ <input type="text" readonly max=42>
+ <input type="text" readonly max=42 value=42>
+ <input type="text" readonly max=42 value=43>
+ <input type="text" readonly min=1 max=42>
+ <input type="text" readonly min=1 max=42 value=0>
+ <input type="text" readonly min=1 max=42 value=1>
+ <input type="text" readonly min=1 max=42 value=2>
+ <input type="text" readonly min=1 max=42 value=41>
+ <input type="text" readonly min=1 max=42 value=42>
+ <input type="text" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly>
+ <input type="number" readonly min=1>
+ <input type="number" readonly min=1 value=0>
+ <input type="number" readonly min=1 value=1>
+ <input type="number" readonly max=42>
+ <input type="number" readonly max=42 value=42>
+ <input type="number" readonly max=42 value=43>
+ <input type="number" readonly min=1 max=42>
+ <input type="number" readonly min=1 max=42 value=0>
+ <input type="number" readonly min=1 max=42 value=1>
+ <input type="number" readonly min=1 max=42 value=2>
+ <input type="number" readonly min=1 max=42 value=41>
+ <input type="number" readonly min=1 max=42 value=42>
+ <input type="number" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min>
+ <input type="number" readonly min value=0>
+ <input type="number" readonly max>
+ <input type="number" readonly max value=42>
+ <input type="number" readonly min max>
+ <input type="number" readonly min max=42>
+ <input type="number" readonly min=1 max>
+ <input type="number" readonly min max value=0>
+ <input type="number" readonly min=1 max value=0>
+ <input type="number" readonly min=1 max value=1>
+ <input type="number" readonly min max=42 value=42>
+ <input type="number" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min="webkit">
+ <input type="number" readonly min="webkit" value=0>
+ <input type="number" readonly max="webkit">
+ <input type="number" readonly max="webkit" value=42>
+ <input type="number" readonly min="webkit" max="webkit">
+ <input type="number" readonly min="webkit" max=42>
+ <input type="number" readonly min=1 max="webkit">
+ <input type="number" readonly min="webkit" max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=1>
+ <input type="number" readonly min="webkit" max=42 value=42>
+ <input type="number" readonly min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly>
+ <input type="range" readonly min=1>
+ <input type="range" readonly min=1 value=0>
+ <input type="range" readonly min=1 value=1>
+ <input type="range" readonly max=42>
+ <input type="range" readonly max=42 value=42>
+ <input type="range" readonly max=42 value=43>
+ <input type="range" readonly min=1 max=42>
+ <input type="range" readonly min=1 max=42 value=0>
+ <input type="range" readonly min=1 max=42 value=1>
+ <input type="range" readonly min=1 max=42 value=2>
+ <input type="range" readonly min=1 max=42 value=41>
+ <input type="range" readonly min=1 max=42 value=42>
+ <input type="range" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min>
+ <input type="range" readonly min value=0>
+ <input type="range" readonly max>
+ <input type="range" readonly max value=42>
+ <input type="range" readonly min max>
+ <input type="range" readonly min max=42>
+ <input type="range" readonly min=1 max>
+ <input type="range" readonly min max value=0>
+ <input type="range" readonly min=1 max value=0>
+ <input type="range" readonly min=1 max value=1>
+ <input type="range" readonly min max=42 value=42>
+ <input type="range" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min="webkit">
+ <input type="range" readonly min="webkit" value=0>
+ <input type="range" readonly max="webkit">
+ <input type="range" readonly max="webkit" value=42>
+ <input type="range" readonly min="webkit" max="webkit">
+ <input type="range" readonly min="webkit" max=42>
+ <input type="range" readonly min=1 max="webkit">
+ <input type="range" readonly min="webkit" max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=1>
+ <input type="range" readonly min="webkit" max=42 value=42>
+ <input type="range" readonly min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial-expected.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial-expected.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <style>
+input {
+ outline: 2px solid lime;
+}
+ </style>
+</head>
+<body>
+ <input type="number" value=0 min=0 max=10 disabled> Disabled in-range
+ <br><br>
+ <input type="number" value=0 min=0 max=10 readonly> Read-only in-range
+ <br><br>
+ <input type="number" value=11 min=0 max=10 disabled> Disabled out-of-range
+ <br><br>
+ <input type="number" value=11 min=0 max=10 readonly> Read-only out-of-range
+</body>
+</html>
+
Added: trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <style>
+input {
+ outline: 2px solid lime;
+}
+input:in-range {
+ outline: 2px solid red;
+}
+input:out-of-range {
+ outline: 2px solid orange;
+}
+ </style>
+</head>
+<body>
+ <!-- Chris Rebert's test case for https://bugs.webkit.org/show_bug.cgi?id=156530 -->
+ <input type="number" value=0 min=0 max=10 disabled> Disabled in-range
+ <br><br>
+ <input type="number" value=0 min=0 max=10 readonly> Read-only in-range
+ <br><br>
+ <input type="number" value=11 min=0 max=10 disabled> Disabled out-of-range
+ <br><br>
+ <input type="number" value=11 min=0 max=10 readonly> Read-only out-of-range
+</body>
+</html>
+
Added: trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics-expected.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics-expected.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of disabled input elements with the :out-of-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" disabled>
+ <input type="text" disabled min=1>
+ <input type="text" disabled min=1 value=0>
+ <input type="text" disabled min=1 value=1>
+ <input type="text" disabled max=42>
+ <input type="text" disabled max=42 value=42>
+ <input type="text" disabled max=42 value=43>
+ <input type="text" disabled min=1 max=42>
+ <input type="text" disabled min=1 max=42 value=0>
+ <input type="text" disabled min=1 max=42 value=1>
+ <input type="text" disabled min=1 max=42 value=2>
+ <input type="text" disabled min=1 max=42 value=41>
+ <input type="text" disabled min=1 max=42 value=42>
+ <input type="text" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled>
+ <input type="number" disabled min=1>
+ <input type="number" disabled min=1 value=0>
+ <input type="number" disabled min=1 value=1>
+ <input type="number" disabled max=42>
+ <input type="number" disabled max=42 value=42>
+ <input type="number" disabled max=42 value=43>
+ <input type="number" disabled min=1 max=42>
+ <input type="number" disabled min=1 max=42 value=0>
+ <input type="number" disabled min=1 max=42 value=1>
+ <input type="number" disabled min=1 max=42 value=2>
+ <input type="number" disabled min=1 max=42 value=41>
+ <input type="number" disabled min=1 max=42 value=42>
+ <input type="number" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min>
+ <input type="number" disabled min value=0>
+ <input type="number" disabled max>
+ <input type="number" disabled max value=42>
+ <input type="number" disabled min max>
+ <input type="number" disabled min max=42>
+ <input type="number" disabled min=1 max>
+ <input type="number" disabled min max value=0>
+ <input type="number" disabled min=1 max value=0>
+ <input type="number" disabled min=1 max value=1>
+ <input type="number" disabled min max=42 value=42>
+ <input type="number" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min="webkit">
+ <input type="number" disabled min="webkit" value=0>
+ <input type="number" disabled max="webkit">
+ <input type="number" disabled max="webkit" value=42>
+ <input type="number" disabled min="webkit" max="webkit">
+ <input type="number" disabled min="webkit" max=42>
+ <input type="number" disabled min=1 max="webkit">
+ <input type="number" disabled min="webkit" max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=1>
+ <input type="number" disabled min="webkit" max=42 value=42>
+ <input type="number" disabled min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled>
+ <input type="range" disabled min=1>
+ <input type="range" disabled min=1 value=0>
+ <input type="range" disabled min=1 value=1>
+ <input type="range" disabled max=42>
+ <input type="range" disabled max=42 value=42>
+ <input type="range" disabled max=42 value=43>
+ <input type="range" disabled min=1 max=42>
+ <input type="range" disabled min=1 max=42 value=0>
+ <input type="range" disabled min=1 max=42 value=1>
+ <input type="range" disabled min=1 max=42 value=2>
+ <input type="range" disabled min=1 max=42 value=41>
+ <input type="range" disabled min=1 max=42 value=42>
+ <input type="range" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min>
+ <input type="range" disabled min value=0>
+ <input type="range" disabled max>
+ <input type="range" disabled max value=42>
+ <input type="range" disabled min max>
+ <input type="range" disabled min max=42>
+ <input type="range" disabled min=1 max>
+ <input type="range" disabled min max value=0>
+ <input type="range" disabled min=1 max value=0>
+ <input type="range" disabled min=1 max value=1>
+ <input type="range" disabled min max=42 value=42>
+ <input type="range" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min="webkit">
+ <input type="range" disabled min="webkit" value=0>
+ <input type="range" disabled max="webkit">
+ <input type="range" disabled max="webkit" value=42>
+ <input type="range" disabled min="webkit" max="webkit">
+ <input type="range" disabled min="webkit" max=42>
+ <input type="range" disabled min=1 max="webkit">
+ <input type="range" disabled min="webkit" max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=1>
+ <input type="range" disabled min="webkit" max=42 value=42>
+ <input type="range" disabled min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-out-of-range-on-disabled-input-basics.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ :out-of-range {
+ background-color: red;
+ color: green;
+ border: 2px solid blue;
+ -webkit-appearance: none;
+ }
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of disabled input elements with the :out-of-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" disabled>
+ <input type="text" disabled min=1>
+ <input type="text" disabled min=1 value=0>
+ <input type="text" disabled min=1 value=1>
+ <input type="text" disabled max=42>
+ <input type="text" disabled max=42 value=42>
+ <input type="text" disabled max=42 value=43>
+ <input type="text" disabled min=1 max=42>
+ <input type="text" disabled min=1 max=42 value=0>
+ <input type="text" disabled min=1 max=42 value=1>
+ <input type="text" disabled min=1 max=42 value=2>
+ <input type="text" disabled min=1 max=42 value=41>
+ <input type="text" disabled min=1 max=42 value=42>
+ <input type="text" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled>
+ <input type="number" disabled min=1>
+ <input type="number" disabled min=1 value=0>
+ <input type="number" disabled min=1 value=1>
+ <input type="number" disabled max=42>
+ <input type="number" disabled max=42 value=42>
+ <input type="number" disabled max=42 value=43>
+ <input type="number" disabled min=1 max=42>
+ <input type="number" disabled min=1 max=42 value=0>
+ <input type="number" disabled min=1 max=42 value=1>
+ <input type="number" disabled min=1 max=42 value=2>
+ <input type="number" disabled min=1 max=42 value=41>
+ <input type="number" disabled min=1 max=42 value=42>
+ <input type="number" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min>
+ <input type="number" disabled min value=0>
+ <input type="number" disabled max>
+ <input type="number" disabled max value=42>
+ <input type="number" disabled min max>
+ <input type="number" disabled min max=42>
+ <input type="number" disabled min=1 max>
+ <input type="number" disabled min max value=0>
+ <input type="number" disabled min=1 max value=0>
+ <input type="number" disabled min=1 max value=1>
+ <input type="number" disabled min max=42 value=42>
+ <input type="number" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" disabled min="webkit">
+ <input type="number" disabled min="webkit" value=0>
+ <input type="number" disabled max="webkit">
+ <input type="number" disabled max="webkit" value=42>
+ <input type="number" disabled min="webkit" max="webkit">
+ <input type="number" disabled min="webkit" max=42>
+ <input type="number" disabled min=1 max="webkit">
+ <input type="number" disabled min="webkit" max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=0>
+ <input type="number" disabled min=1 max="webkit" value=1>
+ <input type="number" disabled min="webkit" max=42 value=42>
+ <input type="number" disabled min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled>
+ <input type="range" disabled min=1>
+ <input type="range" disabled min=1 value=0>
+ <input type="range" disabled min=1 value=1>
+ <input type="range" disabled max=42>
+ <input type="range" disabled max=42 value=42>
+ <input type="range" disabled max=42 value=43>
+ <input type="range" disabled min=1 max=42>
+ <input type="range" disabled min=1 max=42 value=0>
+ <input type="range" disabled min=1 max=42 value=1>
+ <input type="range" disabled min=1 max=42 value=2>
+ <input type="range" disabled min=1 max=42 value=41>
+ <input type="range" disabled min=1 max=42 value=42>
+ <input type="range" disabled min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min>
+ <input type="range" disabled min value=0>
+ <input type="range" disabled max>
+ <input type="range" disabled max value=42>
+ <input type="range" disabled min max>
+ <input type="range" disabled min max=42>
+ <input type="range" disabled min=1 max>
+ <input type="range" disabled min max value=0>
+ <input type="range" disabled min=1 max value=0>
+ <input type="range" disabled min=1 max value=1>
+ <input type="range" disabled min max=42 value=42>
+ <input type="range" disabled min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" disabled min="webkit">
+ <input type="range" disabled min="webkit" value=0>
+ <input type="range" disabled max="webkit">
+ <input type="range" disabled max="webkit" value=42>
+ <input type="range" disabled min="webkit" max="webkit">
+ <input type="range" disabled min="webkit" max=42>
+ <input type="range" disabled min=1 max="webkit">
+ <input type="range" disabled min="webkit" max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=0>
+ <input type="range" disabled min=1 max="webkit" value=1>
+ <input type="range" disabled min="webkit" max=42 value=42>
+ <input type="range" disabled min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics-expected.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics-expected.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of readonly input elements with the :out-of-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" readonly>
+ <input type="text" readonly min=1>
+ <input type="text" readonly min=1 value=0>
+ <input type="text" readonly min=1 value=1>
+ <input type="text" readonly max=42>
+ <input type="text" readonly max=42 value=42>
+ <input type="text" readonly max=42 value=43>
+ <input type="text" readonly min=1 max=42>
+ <input type="text" readonly min=1 max=42 value=0>
+ <input type="text" readonly min=1 max=42 value=1>
+ <input type="text" readonly min=1 max=42 value=2>
+ <input type="text" readonly min=1 max=42 value=41>
+ <input type="text" readonly min=1 max=42 value=42>
+ <input type="text" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly>
+ <input type="number" readonly min=1>
+ <input type="number" readonly min=1 value=0>
+ <input type="number" readonly min=1 value=1>
+ <input type="number" readonly max=42>
+ <input type="number" readonly max=42 value=42>
+ <input type="number" readonly max=42 value=43>
+ <input type="number" readonly min=1 max=42>
+ <input type="number" readonly min=1 max=42 value=0>
+ <input type="number" readonly min=1 max=42 value=1>
+ <input type="number" readonly min=1 max=42 value=2>
+ <input type="number" readonly min=1 max=42 value=41>
+ <input type="number" readonly min=1 max=42 value=42>
+ <input type="number" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min>
+ <input type="number" readonly min value=0>
+ <input type="number" readonly max>
+ <input type="number" readonly max value=42>
+ <input type="number" readonly min max>
+ <input type="number" readonly min max=42>
+ <input type="number" readonly min=1 max>
+ <input type="number" readonly min max value=0>
+ <input type="number" readonly min=1 max value=0>
+ <input type="number" readonly min=1 max value=1>
+ <input type="number" readonly min max=42 value=42>
+ <input type="number" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min="webkit">
+ <input type="number" readonly min="webkit" value=0>
+ <input type="number" readonly max="webkit">
+ <input type="number" readonly max="webkit" value=42>
+ <input type="number" readonly min="webkit" max="webkit">
+ <input type="number" readonly min="webkit" max=42>
+ <input type="number" readonly min=1 max="webkit">
+ <input type="number" readonly min="webkit" max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=1>
+ <input type="number" readonly min="webkit" max=42 value=42>
+ <input type="number" readonly min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly>
+ <input type="range" readonly min=1>
+ <input type="range" readonly min=1 value=0>
+ <input type="range" readonly min=1 value=1>
+ <input type="range" readonly max=42>
+ <input type="range" readonly max=42 value=42>
+ <input type="range" readonly max=42 value=43>
+ <input type="range" readonly min=1 max=42>
+ <input type="range" readonly min=1 max=42 value=0>
+ <input type="range" readonly min=1 max=42 value=1>
+ <input type="range" readonly min=1 max=42 value=2>
+ <input type="range" readonly min=1 max=42 value=41>
+ <input type="range" readonly min=1 max=42 value=42>
+ <input type="range" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min>
+ <input type="range" readonly min value=0>
+ <input type="range" readonly max>
+ <input type="range" readonly max value=42>
+ <input type="range" readonly min max>
+ <input type="range" readonly min max=42>
+ <input type="range" readonly min=1 max>
+ <input type="range" readonly min max value=0>
+ <input type="range" readonly min=1 max value=0>
+ <input type="range" readonly min=1 max value=1>
+ <input type="range" readonly min max=42 value=42>
+ <input type="range" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min="webkit">
+ <input type="range" readonly min="webkit" value=0>
+ <input type="range" readonly max="webkit">
+ <input type="range" readonly max="webkit" value=42>
+ <input type="range" readonly min="webkit" max="webkit">
+ <input type="range" readonly min="webkit" max=42>
+ <input type="range" readonly min=1 max="webkit">
+ <input type="range" readonly min="webkit" max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=1>
+ <input type="range" readonly min="webkit" max=42 value=42>
+ <input type="range" readonly min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics.html (0 => 202159)
--- trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-out-of-range-on-readonly-input-basics.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ :out-of-range {
+ background-color: red;
+ color: green;
+ border: 2px solid blue;
+ -webkit-appearance: none;
+ }
+ #testcase * {
+ margin: 0;
+ padding: 0;
+ }
+ #testcase input {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <p>Check styling of readonly input elements with the :out-of-range pseudo selector</p>
+ <div id=testcase>
+ <div>
+ <input type="text" readonly>
+ <input type="text" readonly min=1>
+ <input type="text" readonly min=1 value=0>
+ <input type="text" readonly min=1 value=1>
+ <input type="text" readonly max=42>
+ <input type="text" readonly max=42 value=42>
+ <input type="text" readonly max=42 value=43>
+ <input type="text" readonly min=1 max=42>
+ <input type="text" readonly min=1 max=42 value=0>
+ <input type="text" readonly min=1 max=42 value=1>
+ <input type="text" readonly min=1 max=42 value=2>
+ <input type="text" readonly min=1 max=42 value=41>
+ <input type="text" readonly min=1 max=42 value=42>
+ <input type="text" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly>
+ <input type="number" readonly min=1>
+ <input type="number" readonly min=1 value=0>
+ <input type="number" readonly min=1 value=1>
+ <input type="number" readonly max=42>
+ <input type="number" readonly max=42 value=42>
+ <input type="number" readonly max=42 value=43>
+ <input type="number" readonly min=1 max=42>
+ <input type="number" readonly min=1 max=42 value=0>
+ <input type="number" readonly min=1 max=42 value=1>
+ <input type="number" readonly min=1 max=42 value=2>
+ <input type="number" readonly min=1 max=42 value=41>
+ <input type="number" readonly min=1 max=42 value=42>
+ <input type="number" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min>
+ <input type="number" readonly min value=0>
+ <input type="number" readonly max>
+ <input type="number" readonly max value=42>
+ <input type="number" readonly min max>
+ <input type="number" readonly min max=42>
+ <input type="number" readonly min=1 max>
+ <input type="number" readonly min max value=0>
+ <input type="number" readonly min=1 max value=0>
+ <input type="number" readonly min=1 max value=1>
+ <input type="number" readonly min max=42 value=42>
+ <input type="number" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="number" readonly min="webkit">
+ <input type="number" readonly min="webkit" value=0>
+ <input type="number" readonly max="webkit">
+ <input type="number" readonly max="webkit" value=42>
+ <input type="number" readonly min="webkit" max="webkit">
+ <input type="number" readonly min="webkit" max=42>
+ <input type="number" readonly min=1 max="webkit">
+ <input type="number" readonly min="webkit" max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=0>
+ <input type="number" readonly min=1 max="webkit" value=1>
+ <input type="number" readonly min="webkit" max=42 value=42>
+ <input type="number" readonly min="webkit" max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly>
+ <input type="range" readonly min=1>
+ <input type="range" readonly min=1 value=0>
+ <input type="range" readonly min=1 value=1>
+ <input type="range" readonly max=42>
+ <input type="range" readonly max=42 value=42>
+ <input type="range" readonly max=42 value=43>
+ <input type="range" readonly min=1 max=42>
+ <input type="range" readonly min=1 max=42 value=0>
+ <input type="range" readonly min=1 max=42 value=1>
+ <input type="range" readonly min=1 max=42 value=2>
+ <input type="range" readonly min=1 max=42 value=41>
+ <input type="range" readonly min=1 max=42 value=42>
+ <input type="range" readonly min=1 max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min>
+ <input type="range" readonly min value=0>
+ <input type="range" readonly max>
+ <input type="range" readonly max value=42>
+ <input type="range" readonly min max>
+ <input type="range" readonly min max=42>
+ <input type="range" readonly min=1 max>
+ <input type="range" readonly min max value=0>
+ <input type="range" readonly min=1 max value=0>
+ <input type="range" readonly min=1 max value=1>
+ <input type="range" readonly min max=42 value=42>
+ <input type="range" readonly min max=42 value=43>
+ </div>
+ <div>
+ <input type="range" readonly min="webkit">
+ <input type="range" readonly min="webkit" value=0>
+ <input type="range" readonly max="webkit">
+ <input type="range" readonly max="webkit" value=42>
+ <input type="range" readonly min="webkit" max="webkit">
+ <input type="range" readonly min="webkit" max=42>
+ <input type="range" readonly min=1 max="webkit">
+ <input type="range" readonly min="webkit" max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=0>
+ <input type="range" readonly min=1 max="webkit" value=1>
+ <input type="range" readonly min="webkit" max=42 value=42>
+ <input type="range" readonly min="webkit" max=42 value=43>
+ </div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update-expected.txt (0 => 202159)
--- trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update-expected.txt 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,111 @@
+Test the style update with the :in-range and :out-of-range pseudo classes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a valid minimum on number.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a valid minimum on range.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value above minimum on number.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value above minimum on range.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value under minimum on number.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is ['number-with-renderer', 'number-without-renderer']
+Set a value under minimum on range.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is ['number-with-renderer', 'number-without-renderer']
+Set an invalid minimum on number.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set an invalid minimum on range.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a valid maximum on number.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a valid maximum on range.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value under maximum on number.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value under maximum on range.
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set a value over maximum on number.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is ['number-with-renderer', 'number-without-renderer']
+Set a value over maximum on range.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is ['number-with-renderer', 'number-without-renderer']
+Set an invalid maximum on number.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set an invalid maximum on range.
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Set values, min and max in range on both
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Disable range
+PASS inRange() is ['number-with-renderer', 'number-without-renderer']
+PASS outOfRange() is []
+Disable number
+PASS inRange() is []
+PASS outOfRange() is []
+Set number out of range
+PASS inRange() is []
+PASS outOfRange() is []
+Set range out of range
+PASS inRange() is []
+PASS outOfRange() is []
+Re-enable range
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Re-enable number
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is ['number-with-renderer', 'number-without-renderer']
+Make number read-only
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Make range read-only
+PASS inRange() is []
+PASS outOfRange() is []
+Set range in range
+PASS inRange() is []
+PASS outOfRange() is []
+Set number in range
+PASS inRange() is []
+PASS outOfRange() is []
+Remove read-only from number
+PASS inRange() is ['number-with-renderer', 'number-without-renderer']
+PASS outOfRange() is []
+Remove read-only from range
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Remove min from number
+PASS inRange() is ['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Remove max from number
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Remove min from range
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+Remove max from range
+PASS inRange() is ['range-with-renderer', 'range-without-renderer']
+PASS outOfRange() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update.html (0 => 202159)
--- trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/in-range-out-of-range-style-update.html 2016-06-17 05:19:29 UTC (rev 202159)
@@ -0,0 +1,245 @@
+<!doctype html>
+<html>
+<head>
+<script src=""
+<style>
+input {
+ background-color: rgb(1, 2, 3);
+ color: rgb(4, 5, 6);
+}
+input:in-range {
+ background-color: rgb(7, 8, 9);
+}
+input:out-of-range {
+ color: rgb(10, 11, 12);
+}
+</style>
+</head>
+<body>
+ <div id="with-renderer">
+ <input type="number" id="number-with-renderer"></input>
+ <input type="range" id="range-with-renderer"></input>
+ </div>
+ <div style="display:none;">
+ <input type="number" id="number-without-renderer"></input>
+ <input type="range" id="range-without-renderer"></input>
+ </div>
+</body>
+<script>
+description('Test the style update with the :in-range and :out-of-range pseudo classes.');
+
+function elementsWithStyle(propertyName, propertyValue) {
+ let filteredElements = [];
+ let allInput = document.querySelectorAll("input");
+ for (let inputElement of allInput) {
+ let computedStyle = getComputedStyle(inputElement);
+ if (computedStyle[propertyName] === propertyValue)
+ filteredElements.push(inputElement.id);
+ }
+ return filteredElements;
+}
+function inRange() {
+ return elementsWithStyle("background-color", "rgb(7, 8, 9)");
+}
+function outOfRange() {
+ return elementsWithStyle("color", "rgb(10, 11, 12)");
+}
+
+function setAttribute(typeString, attributeName, attributeValue) {
+ let inputElements = document.querySelectorAll("input[type=\"" + typeString + "\"]");
+ for (let inputElement of inputElements) {
+ inputElement.setAttribute(attributeName, attributeValue);
+ }
+}
+
+function removeAttribute(typeString, attributeName) {
+ let inputElements = document.querySelectorAll("input[type=\"" + typeString + "\"]");
+ for (let inputElement of inputElements) {
+ inputElement.removeAttribute(attributeName);
+ }
+}
+
+debug("Initial state.");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+// Define a minimum.
+debug("Set a valid minimum on number.");
+setAttribute("number", "min", "42");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a valid minimum on range.");
+setAttribute("range", "min", "42");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value above minimum on number.");
+setAttribute("number", "value", "43");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value above minimum on range.");
+setAttribute("range", "value", "43");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value under minimum on number.");
+setAttribute("number", "value", "41");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
+
+debug("Set a value under minimum on range.");
+setAttribute("range", "value", "41");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
+
+debug("Set an invalid minimum on number.");
+setAttribute("number", "min", "WebKit!");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set an invalid minimum on range.");
+setAttribute("range", "min", "WebKit!");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+// Define a maximum.
+debug("Set a valid maximum on number.");
+setAttribute("number", "max", "101");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a valid maximum on range.");
+setAttribute("range", "max", "101");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value under maximum on number.");
+setAttribute("number", "value", "0");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value under maximum on range.");
+setAttribute("range", "value", "0");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set a value over maximum on number.");
+setAttribute("number", "value", "103");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
+
+debug("Set a value over maximum on range.");
+setAttribute("range", "value", "103");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
+
+debug("Set an invalid maximum on number.");
+setAttribute("number", "max", "WebKit!");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Set an invalid maximum on range.");
+setAttribute("range", "max", "WebKit!");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+// Set a full state in range.
+debug("Set values, min and max in range on both");
+setAttribute("range", "value", "42");
+setAttribute("range", "min", "1");
+setAttribute("range", "max", "103");
+setAttribute("number", "value", "-42");
+setAttribute("number", "min", "-100");
+setAttribute("number", "max", "-3");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+// A disabled input should not match either selectors.
+debug("Disable range");
+setAttribute("range", "disabled", "");
+shouldBe("inRange()", "['number-with-renderer', 'number-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Disable number");
+setAttribute("number", "disabled", "");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Set number out of range");
+setAttribute("number", "value", "55");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Set range out of range");
+setAttribute("range", "value", "1024");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Re-enable range");
+removeAttribute("range", "disabled");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Re-enable number");
+removeAttribute("number", "disabled");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "['number-with-renderer', 'number-without-renderer']");
+
+// A readonly input should not match either selectors.
+debug("Make number read-only");
+setAttribute("number", "readonly", "");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Make range read-only");
+setAttribute("range", "readonly", "");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Set range in range");
+setAttribute("range", "value", "74");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Set number in range");
+setAttribute("number", "value", "-69");
+shouldBe("inRange()", "[]");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove read-only from number");
+removeAttribute("number", "readonly");
+shouldBe("inRange()", "['number-with-renderer', 'number-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove read-only from range");
+removeAttribute("range", "readonly");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove min from number");
+removeAttribute("number", "min");
+shouldBe("inRange()", "['number-with-renderer', 'range-with-renderer', 'number-without-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove max from number");
+removeAttribute("number", "max");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove min from range");
+removeAttribute("range", "min");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+debug("Remove max from range");
+removeAttribute("range", "min");
+shouldBe("inRange()", "['range-with-renderer', 'range-without-renderer']");
+shouldBe("outOfRange()", "[]");
+
+// Hides the elements to make the result page pretty.
+document.getElementById("with-renderer").style.display = "none";
+</script>
+<script src=""
+</html>
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (202158 => 202159)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,5 +1,14 @@
2016-06-16 Benjamin Poulain <[email protected]>
+ :in-range & :out-of-range CSS pseudo-classes shouldn't match disabled or readonly inputs
+ https://bugs.webkit.org/show_bug.cgi?id=156530
+
+ Reviewed by Simon Fraser.
+
+ * web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt:
+
+2016-06-16 Benjamin Poulain <[email protected]>
+
:in-range & :out-of-range CSS pseudo-classes shouldn't match inputs without range limitations
https://bugs.webkit.org/show_bug.cgi?id=156558
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt (202158 => 202159)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,9 +1,9 @@
-FAIL ':in-range' matches all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow assert_array_equals: lengths differ, expected 10 got 7
+FAIL ':in-range' matches all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow assert_array_equals: lengths differ, expected 10 got 5
FAIL ':out-of-range' matches all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow assert_array_equals: lengths differ, expected 12 got 2
-FAIL ':in-range' update number1's value < min assert_array_equals: lengths differ, expected 9 got 6
+FAIL ':in-range' update number1's value < min assert_array_equals: lengths differ, expected 9 got 4
FAIL ':out-of-range' update number1's value < min assert_array_equals: lengths differ, expected 13 got 3
-FAIL ':in-range' update number3's min < value assert_array_equals: lengths differ, expected 10 got 7
+FAIL ':in-range' update number3's min < value assert_array_equals: lengths differ, expected 10 got 5
FAIL ':out-of-range' update number3's min < value assert_array_equals: lengths differ, expected 12 got 2
Modified: trunk/Source/WebCore/ChangeLog (202158 => 202159)
--- trunk/Source/WebCore/ChangeLog 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/Source/WebCore/ChangeLog 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,3 +1,32 @@
+2016-06-16 Benjamin Poulain <[email protected]>
+
+ :in-range & :out-of-range CSS pseudo-classes shouldn't match disabled or readonly inputs
+ https://bugs.webkit.org/show_bug.cgi?id=156530
+
+ Reviewed by Simon Fraser.
+
+ Elements should only match :in-range and :out-of-range
+ when they are candidate for constraint validation.
+
+ Tests: fast/css/pseudo-in-range-on-disabled-input-basics.html
+ fast/css/pseudo-in-range-on-readonly-input-basics.html
+ fast/css/pseudo-in-range-out-of-range-on-disabled-input-trivial.html
+ fast/css/pseudo-out-of-range-on-disabled-input-basics.html
+ fast/css/pseudo-out-of-range-on-readonly-input-basics.html
+ fast/selectors/in-range-out-of-range-style-update.html
+
+ * html/BaseDateAndTimeInputType.cpp:
+ (WebCore::BaseDateAndTimeInputType::minOrMaxAttributeChanged):
+ * html/NumberInputType.cpp:
+ (WebCore::NumberInputType::minOrMaxAttributeChanged):
+ I forgot to handle style update in r202143.
+ This is covered by the new style invalidation test.
+
+ * html/BaseDateAndTimeInputType.h:
+ * html/HTMLInputElement.cpp:
+ (WebCore::HTMLInputElement::isInRange):
+ (WebCore::HTMLInputElement::isOutOfRange):
+
2016-06-16 Frederic Wang <[email protected]>
Add separate MathOperator for selection/measuring/drawing of stretchy operators
Modified: trunk/Source/WebCore/html/BaseDateAndTimeInputType.cpp (202158 => 202159)
--- trunk/Source/WebCore/html/BaseDateAndTimeInputType.cpp 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/Source/WebCore/html/BaseDateAndTimeInputType.cpp 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,5 +1,6 @@
/*
* Copyright (C) 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@@ -92,6 +93,11 @@
return true;
}
+void BaseDateAndTimeInputType::minOrMaxAttributeChanged()
+{
+ element().setNeedsStyleRecalc();
+}
+
Decimal BaseDateAndTimeInputType::parseToNumber(const String& source, const Decimal& defaultValue) const
{
DateComponents date;
Modified: trunk/Source/WebCore/html/BaseDateAndTimeInputType.h (202158 => 202159)
--- trunk/Source/WebCore/html/BaseDateAndTimeInputType.h 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/Source/WebCore/html/BaseDateAndTimeInputType.h 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,5 +1,6 @@
/*
* Copyright (C) 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@@ -66,6 +67,7 @@
bool typeMismatch() const override;
bool valueMissing(const String&) const override;
Decimal defaultValueForStepUp() const override;
+ void minOrMaxAttributeChanged() override;
bool isSteppable() const override;
virtual String serializeWithMilliseconds(double) const;
String localizeValue(const String&) const override;
Modified: trunk/Source/WebCore/html/HTMLInputElement.cpp (202158 => 202159)
--- trunk/Source/WebCore/html/HTMLInputElement.cpp 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/Source/WebCore/html/HTMLInputElement.cpp 2016-06-17 05:19:29 UTC (rev 202159)
@@ -2,7 +2,7 @@
* Copyright (C) 1999 Lars Knoll ([email protected])
* (C) 1999 Antti Koivisto ([email protected])
* (C) 2001 Dirk Mueller ([email protected])
- * Copyright (C) 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013, 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013, 2014, 2016 Apple Inc. All rights reserved.
* (C) 2006 Alexey Proskuryakov ([email protected])
* Copyright (C) 2007 Samuel Weinig ([email protected])
* Copyright (C) 2010 Google Inc. All rights reserved.
@@ -1370,12 +1370,12 @@
bool HTMLInputElement::isInRange() const
{
- return m_inputType->isInRange(value());
+ return willValidate() && m_inputType->isInRange(value());
}
bool HTMLInputElement::isOutOfRange() const
{
- return m_inputType->isOutOfRange(value());
+ return willValidate() && m_inputType->isOutOfRange(value());
}
bool HTMLInputElement::needsSuspensionCallback()
Modified: trunk/Source/WebCore/html/NumberInputType.cpp (202158 => 202159)
--- trunk/Source/WebCore/html/NumberInputType.cpp 2016-06-17 04:56:57 UTC (rev 202158)
+++ trunk/Source/WebCore/html/NumberInputType.cpp 2016-06-17 05:19:29 UTC (rev 202159)
@@ -1,6 +1,6 @@
/*
* Copyright (C) 2010 Google Inc. All rights reserved.
- * Copyright (C) 2011 Apple Inc. All rights reserved.
+ * Copyright (C) 2011, 2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@@ -299,9 +299,10 @@
void NumberInputType::minOrMaxAttributeChanged()
{
InputType::minOrMaxAttributeChanged();
-
- if (element().renderer())
- element().renderer()->setNeedsLayoutAndPrefWidthsRecalc();
+ HTMLInputElement& element = this->element();
+ element.setNeedsStyleRecalc();
+ if (RenderObject* renderer = element.renderer())
+ renderer->setNeedsLayoutAndPrefWidthsRecalc();
}
void NumberInputType::stepAttributeChanged()
