Skip to content

Commit

Permalink
:in-range & :out-of-range CSS pseudo-classes shouldn't match disabled…
Browse files Browse the repository at this point in the history 
… or readonly inputs

https://bugs.webkit.org/show_bug.cgi?id=156530

Patch by Benjamin Poulain <bpoulain@apple.com> on 2016-06-16
Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

* web-platform-tests/html/semantics/selectors/pseudo-classes/inrange-outofrange-expected.txt:

Source/WebCore:

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

LayoutTests:

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

Canonical link: https://commits.webkit.org/176937@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@202159 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
@webkit-commit-queue
Benjamin Poulain authored and webkit-commit-queue committed Jun 17, 2016
1 parent 6aa6fe0 commit 5916341
Show file tree
Hide file tree
Showing 20 changed files with 1,490 additions and 10 deletions.
20 changes: 20 additions & 0 deletions LayoutTests/ChangeLog
View file
@@ -1,3 +1,23 @@
2016-06-16 Benjamin Poulain <bpoulain@apple.com>

: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 <gyuyoung.kim@webkit.org>

[EFL][GTK] LayoutTest doesn't run on Ubuntu 16.04
Expand Down
123 changes: 123 additions & 0 deletions LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics-expected.html
View file
@@ -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>
129 changes: 129 additions & 0 deletions LayoutTests/fast/css/pseudo-in-range-on-disabled-input-basics.html
View file
@@ -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>

0 comments on commit 5916341

Please sign in to comment.