Skip to content
Permalink
Browse files
Update the current matching of :read-only and :read-write to the late…
…st spec

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

Reviewed by Antti Koivisto.

Source/WebCore:

WebKit's implementation of :read-only and :read-write dated from 2008 and
it was based on the web form spec (http://www.w3.org/TR/web-forms-2/).
That spec is very dead now.

There are new definitions of :read-only and :read-write in three specs:
-the HTML living spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#selector-read-only
-Selectors level 4: http://dev.w3.org/csswg/selectors4/#rw-pseudos
-CSS 3 UI: http://www.w3.org/TR/css3-ui/

All the definitions say about the same thing. The definitions of Selector Level 4 and
CSS 3 UI are very vague and poorly worded. I used the HTML when something was ambiguous.

In the new definitions, :read-only and :read-write are opposite. It is no longer possible to
match both selector simultaneously for the same element.
Consequently, I got rid of Element:matchesReadOnlyPseudoClass(). Matching :read-only is now equivalent
to :not(:read-write).

The existing definition of :read-write was matching the spec so I could reuse that.

There is one more part to the new spec that is not addressed here: the pseudo class :read-write should
now also match arbitrary editable HTMLElement (e.g. an element with contenteditable). This will be fixed
in a follow up.

Tests: fast/css/read-only-read-write-input-basics.html
       fast/css/read-only-read-write-textarea-basics.html
       fast/selectors/read-only-read-write-input-basics.html
       fast/selectors/read-only-read-write-input-in-fieldset.html
       fast/selectors/read-only-read-write-textarea-basics.html
       fast/selectors/read-only-read-write-textarea-in-fieldset.html

* css/SelectorCheckerTestFunctions.h:
(WebCore::matchesReadOnlyPseudoClass):
* dom/Element.cpp:
(WebCore::Element::matchesReadOnlyPseudoClass): Deleted.
* dom/Element.h:
* html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::matchesReadOnlyPseudoClass): Deleted.
* html/HTMLInputElement.h:
* html/HTMLTextAreaElement.cpp:
(WebCore::HTMLTextAreaElement::matchesReadOnlyPseudoClass): Deleted.
* html/HTMLTextAreaElement.h:
* html/shadow/SliderThumbElement.cpp:
(WebCore::SliderThumbElement::matchesReadOnlyPseudoClass): Deleted.
* html/shadow/SliderThumbElement.h:
* html/shadow/SpinButtonElement.cpp:
(WebCore::SpinButtonElement::matchesReadOnlyPseudoClass): Deleted.
* html/shadow/SpinButtonElement.h:
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::isReadOnlyControl):

LayoutTests:

* fast/css/readonly-pseudoclass-opera-005.html:
This was one of the original test.
With the new definition, input[type=radio] is always :read-only.

* fast/forms/input-live-pseudo-selectors-expected.txt:
* fast/forms/resources/input-live-pseudo-selectors.js:
* fast/forms/resources/live-pseudo-selectors.css:
(:read-only): Deleted.
* fast/forms/resources/select-live-pseudo-selectors.js:
* fast/forms/resources/textarea-live-pseudo-selectors.js:
* fast/forms/textarea-live-pseudo-selectors-expected.txt:
Those various tests were mostly testing form validation. The selectors
for :read-only and :read-write were in the way of testing.

They were only 3 cases tested and they are covered by the new tests.

* fast/css/read-only-read-write-input-basics-expected.html: Added.
* fast/css/read-only-read-write-input-basics.html: Added.
* fast/css/read-only-read-write-textarea-basics-expected.html: Added.
* fast/css/read-only-read-write-textarea-basics.html: Added.
* fast/selectors/read-only-read-write-input-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-input-basics.html: Added.
* fast/selectors/read-only-read-write-input-in-fieldset-expected.txt: Added.
* fast/selectors/read-only-read-write-input-in-fieldset.html: Added.
* fast/selectors/read-only-read-write-textarea-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-textarea-basics.html: Added.
* fast/selectors/read-only-read-write-textarea-in-fieldset-expected.txt: Added.
* fast/selectors/read-only-read-write-textarea-in-fieldset.html: Added.
New tests covering basic features for <input> and <textarea>. The definition for
other editable content is ignored for now.


Canonical link: https://commits.webkit.org/154390@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@173328 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
BenjaminPoulain committed Sep 5, 2014
1 parent 4188535 commit e43e8b104975b7213b2eb90c7ef01e2331116e94
Showing with 3,182 additions and 42 deletions.
  1. +38 −0 LayoutTests/ChangeLog
  2. +163 −0 LayoutTests/fast/css/read-only-read-write-input-basics-expected.html
  3. +163 −0 LayoutTests/fast/css/read-only-read-write-input-basics.html
  4. +35 −0 LayoutTests/fast/css/read-only-read-write-textarea-basics-expected.html
  5. +41 −0 LayoutTests/fast/css/read-only-read-write-textarea-basics.html
  6. +5 −1 LayoutTests/fast/css/readonly-pseudoclass-opera-005.html
  7. +1 −1 LayoutTests/fast/forms/input-live-pseudo-selectors-expected.txt
  8. +1 −2 LayoutTests/fast/forms/resources/input-live-pseudo-selectors.js
  9. +0 −1 LayoutTests/fast/forms/resources/live-pseudo-selectors.css
  10. +0 −1 LayoutTests/fast/forms/resources/select-live-pseudo-selectors.js
  11. +1 −2 LayoutTests/fast/forms/resources/textarea-live-pseudo-selectors.js
  12. +1 −1 LayoutTests/fast/forms/textarea-live-pseudo-selectors-expected.txt
  13. +1,907 −0 LayoutTests/fast/selectors/read-only-read-write-input-basics-expected.txt
  14. +121 −0 LayoutTests/fast/selectors/read-only-read-write-input-basics.html
  15. +29 −0 LayoutTests/fast/selectors/read-only-read-write-input-in-fieldset-expected.txt
  16. +71 −0 LayoutTests/fast/selectors/read-only-read-write-input-in-fieldset.html
  17. +278 −0 LayoutTests/fast/selectors/read-only-read-write-textarea-basics-expected.txt
  18. +168 −0 LayoutTests/fast/selectors/read-only-read-write-textarea-basics.html
  19. +29 −0 LayoutTests/fast/selectors/read-only-read-write-textarea-in-fieldset-expected.txt
  20. +71 −0 LayoutTests/fast/selectors/read-only-read-write-textarea-in-fieldset.html
  21. +57 −0 Source/WebCore/ChangeLog
  22. +1 −1 Source/WebCore/css/SelectorCheckerTestFunctions.h
  23. +0 −5 Source/WebCore/dom/Element.cpp
  24. +0 −1 Source/WebCore/dom/Element.h
  25. +0 −5 Source/WebCore/html/HTMLInputElement.cpp
  26. +0 −1 Source/WebCore/html/HTMLInputElement.h
  27. +0 −5 Source/WebCore/html/HTMLTextAreaElement.cpp
  28. +0 −1 Source/WebCore/html/HTMLTextAreaElement.h
  29. +0 −6 Source/WebCore/html/shadow/SliderThumbElement.cpp
  30. +0 −1 Source/WebCore/html/shadow/SliderThumbElement.h
  31. +0 −5 Source/WebCore/html/shadow/SpinButtonElement.cpp
  32. +0 −1 Source/WebCore/html/shadow/SpinButtonElement.h
  33. +1 −1 Source/WebCore/rendering/RenderTheme.cpp
@@ -1,3 +1,41 @@
2014-09-05 Benjamin Poulain <benjamin@webkit.org>

Update the current matching of :read-only and :read-write to the latest spec
https://bugs.webkit.org/show_bug.cgi?id=136566

Reviewed by Antti Koivisto.

* fast/css/readonly-pseudoclass-opera-005.html:
This was one of the original test.
With the new definition, input[type=radio] is always :read-only.

* fast/forms/input-live-pseudo-selectors-expected.txt:
* fast/forms/resources/input-live-pseudo-selectors.js:
* fast/forms/resources/live-pseudo-selectors.css:
(:read-only): Deleted.
* fast/forms/resources/select-live-pseudo-selectors.js:
* fast/forms/resources/textarea-live-pseudo-selectors.js:
* fast/forms/textarea-live-pseudo-selectors-expected.txt:
Those various tests were mostly testing form validation. The selectors
for :read-only and :read-write were in the way of testing.

They were only 3 cases tested and they are covered by the new tests.

* fast/css/read-only-read-write-input-basics-expected.html: Added.
* fast/css/read-only-read-write-input-basics.html: Added.
* fast/css/read-only-read-write-textarea-basics-expected.html: Added.
* fast/css/read-only-read-write-textarea-basics.html: Added.
* fast/selectors/read-only-read-write-input-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-input-basics.html: Added.
* fast/selectors/read-only-read-write-input-in-fieldset-expected.txt: Added.
* fast/selectors/read-only-read-write-input-in-fieldset.html: Added.
* fast/selectors/read-only-read-write-textarea-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-textarea-basics.html: Added.
* fast/selectors/read-only-read-write-textarea-in-fieldset-expected.txt: Added.
* fast/selectors/read-only-read-write-textarea-in-fieldset.html: Added.
New tests covering basic features for <input> and <textarea>. The definition for
other editable content is ignored for now.

2014-09-05 Carlos Alberto Lopez Perez <clopez@igalia.com>

[GTK] Unreviewed GTK gardening.
@@ -0,0 +1,163 @@
<!doctype html>
<html>
<head>
<style>
div {
float: left;
border: 1px solid red;
}
input {
background-color: white;
color: black;
}
input:read-only {
background-color: lime;
}
input:read-write {
color: red;
}
</style>
</head>
<body>
<p>Test the basic styling of the &lt;input&gt; types with the selectors :read-only and :read-write.</p>
<div>
<input type="hidden" value="hidden">
<input type="hidden" value="hidden" readonly>
<input type="hidden" value="hidden" disabled>
<input type="hidden" value="hidden" readonly disabled>
</div>
<div>
<input type="text" value="text">
<input type="text" value="text" readonly>
<input type="text" value="text" disabled>
<input type="text" value="text" readonly disabled>
</div>
<div>
<input type="search" value="search">
<input type="search" value="search" readonly>
<input type="search" value="search" disabled>
<input type="search" value="search" readonly disabled>
</div>
<div>
<input type="tel" value="tel">
<input type="tel" value="tel" readonly>
<input type="tel" value="tel" disabled>
<input type="tel" value="tel" readonly disabled>
</div>
<div>
<input type="url" value="url">
<input type="url" value="url" readonly>
<input type="url" value="url" disabled>
<input type="url" value="url" readonly disabled>
</div>
<div>
<input type="email" value="email">
<input type="email" value="email" readonly>
<input type="email" value="email" disabled>
<input type="email" value="email" readonly disabled>
</div>
<div>
<input type="password" value="password">
<input type="password" value="password" readonly>
<input type="password" value="password" disabled>
<input type="password" value="password" readonly disabled>
</div>
<div>
<input type="datetime" value="datetime">
<input type="datetime" value="datetime" readonly>
<input type="datetime" value="datetime" disabled>
<input type="datetime" value="datetime" readonly disabled>
</div>
<div>
<input type="date" value="date">
<input type="date" value="date" readonly>
<input type="date" value="date" disabled>
<input type="date" value="date" readonly disabled>
</div>
<div>
<input type="month" value="month">
<input type="month" value="month" readonly>
<input type="month" value="month" disabled>
<input type="month" value="month" readonly disabled>
</div>
<div>
<input type="week" value="week">
<input type="week" value="week" readonly>
<input type="week" value="week" disabled>
<input type="week" value="week" readonly disabled>
</div>
<div>
<input type="time" value="time">
<input type="time" value="time" readonly>
<input type="time" value="time" disabled>
<input type="time" value="time" readonly disabled>
</div>
<div>
<input type="datetime-local" value="datetime-local">
<input type="datetime-local" value="datetime-local" readonly>
<input type="datetime-local" value="datetime-local" disabled>
<input type="datetime-local" value="datetime-local" readonly disabled>
</div>
<div>
<input type="number" value="number">
<input type="number" value="number" readonly>
<input type="number" value="number" disabled>
<input type="number" value="number" readonly disabled>
</div>
<div>
<input type="range" value="range">
<input type="range" value="range" readonly>
<input type="range" value="range" disabled>
<input type="range" value="range" readonly disabled>
</div>
<div>
<input type="color" value="color">
<input type="color" value="color" readonly>
<input type="color" value="color" disabled>
<input type="color" value="color" readonly disabled>
</div>
<div>
<input type="checkbox" value="checkbox">
<input type="checkbox" value="checkbox" readonly>
<input type="checkbox" value="checkbox" disabled>
<input type="checkbox" value="checkbox" readonly disabled>
</div>
<div>
<input type="radio" value="radio">
<input type="radio" value="radio" readonly>
<input type="radio" value="radio" disabled>
<input type="radio" value="radio" readonly disabled>
</div>
<div>
<input type="file" value="file">
<input type="file" value="file" readonly>
<input type="file" value="file" disabled>
<input type="file" value="file" readonly disabled>
</div>
<div>
<input type="submit" value="submit">
<input type="submit" value="submit" readonly>
<input type="submit" value="submit" disabled>
<input type="submit" value="submit" readonly disabled>
</div>
<div>
<input type="image" value="image">
<input type="image" value="image" readonly>
<input type="image" value="image" disabled>
<input type="image" value="image" readonly disabled>
</div>
<div>
<input type="reset" value="reset">
<input type="reset" value="reset" readonly>
<input type="reset" value="reset" disabled>
<input type="reset" value="reset" readonly disabled>
</div>
<div>
<input type="button" value="button">
<input type="button" value="button" readonly>
<input type="button" value="button" disabled>
<input type="button" value="button" readonly disabled>
</div>

</body>
</html>
@@ -0,0 +1,163 @@
<!doctype html>
<html>
<head>
<style>
div {
float: left;
border: 1px solid red;
}
input {
background-color: white;
color: black;
}
.read-only {
background-color: lime;
}
.read-write {
color: red;
}
</style>
</head>
<body>
<p>Test the basic styling of the &lt;input&gt; types with the selectors :read-only and :read-write.</p>
<div>
<input type="hidden" value="hidden" class="read-only">
<input type="hidden" value="hidden" readonly class="read-only">
<input type="hidden" value="hidden" disabled class="read-only">
<input type="hidden" value="hidden" readonly disabled class="read-only">
</div>
<div>
<input type="text" value="text" class="read-write">
<input type="text" value="text" readonly class="read-only">
<input type="text" value="text" disabled class="read-only">
<input type="text" value="text" readonly disabled class="read-only">
</div>
<div>
<input type="search" value="search" class="read-write">
<input type="search" value="search" readonly class="read-only">
<input type="search" value="search" disabled class="read-only">
<input type="search" value="search" readonly disabled class="read-only">
</div>
<div>
<input type="tel" value="tel" class="read-write">
<input type="tel" value="tel" readonly class="read-only">
<input type="tel" value="tel" disabled class="read-only">
<input type="tel" value="tel" readonly disabled class="read-only">
</div>
<div>
<input type="url" value="url" class="read-write">
<input type="url" value="url" readonly class="read-only">
<input type="url" value="url" disabled class="read-only">
<input type="url" value="url" readonly disabled class="read-only">
</div>
<div>
<input type="email" value="email" class="read-write">
<input type="email" value="email" readonly class="read-only">
<input type="email" value="email" disabled class="read-only">
<input type="email" value="email" readonly disabled class="read-only">
</div>
<div>
<input type="password" value="password" class="read-write">
<input type="password" value="password" readonly class="read-only">
<input type="password" value="password" disabled class="read-only">
<input type="password" value="password" readonly disabled class="read-only">
</div>
<div>
<input type="datetime" value="datetime" class="read-write">
<input type="datetime" value="datetime" readonly class="read-only">
<input type="datetime" value="datetime" disabled class="read-only">
<input type="datetime" value="datetime" readonly disabled class="read-only">
</div>
<div>
<input type="date" value="date" class="read-write">
<input type="date" value="date" readonly class="read-only">
<input type="date" value="date" disabled class="read-only">
<input type="date" value="date" readonly disabled class="read-only">
</div>
<div>
<input type="month" value="month" class="read-write">
<input type="month" value="month" readonly class="read-only">
<input type="month" value="month" disabled class="read-only">
<input type="month" value="month" readonly disabled class="read-only">
</div>
<div>
<input type="week" value="week" class="read-write">
<input type="week" value="week" readonly class="read-only">
<input type="week" value="week" disabled class="read-only">
<input type="week" value="week" readonly disabled class="read-only">
</div>
<div>
<input type="time" value="time" class="read-write">
<input type="time" value="time" readonly class="read-only">
<input type="time" value="time" disabled class="read-only">
<input type="time" value="time" readonly disabled class="read-only">
</div>
<div>
<input type="datetime-local" value="datetime-local" class="read-write">
<input type="datetime-local" value="datetime-local" readonly class="read-only">
<input type="datetime-local" value="datetime-local" disabled class="read-only">
<input type="datetime-local" value="datetime-local" readonly disabled class="read-only">
</div>
<div>
<input type="number" value="number" class="read-write">
<input type="number" value="number" readonly class="read-only">
<input type="number" value="number" disabled class="read-only">
<input type="number" value="number" readonly disabled class="read-only">
</div>
<div>
<input type="range" value="range" class="read-only">
<input type="range" value="range" readonly class="read-only">
<input type="range" value="range" disabled class="read-only">
<input type="range" value="range" readonly disabled class="read-only">
</div>
<div>
<input type="color" value="color" class="read-only">
<input type="color" value="color" readonly class="read-only">
<input type="color" value="color" disabled class="read-only">
<input type="color" value="color" readonly disabled class="read-only">
</div>
<div>
<input type="checkbox" value="checkbox" class="read-only">
<input type="checkbox" value="checkbox" readonly class="read-only">
<input type="checkbox" value="checkbox" disabled class="read-only">
<input type="checkbox" value="checkbox" readonly disabled class="read-only">
</div>
<div>
<input type="radio" value="radio" class="read-only">
<input type="radio" value="radio" readonly class="read-only">
<input type="radio" value="radio" disabled class="read-only">
<input type="radio" value="radio" readonly disabled class="read-only">
</div>
<div>
<input type="file" value="file" class="read-only">
<input type="file" value="file" readonly class="read-only">
<input type="file" value="file" disabled class="read-only">
<input type="file" value="file" readonly disabled class="read-only">
</div>
<div>
<input type="submit" value="submit" class="read-only">
<input type="submit" value="submit" readonly class="read-only">
<input type="submit" value="submit" disabled class="read-only">
<input type="submit" value="submit" readonly disabled class="read-only">
</div>
<div>
<input type="image" value="image" class="read-only">
<input type="image" value="image" readonly class="read-only">
<input type="image" value="image" disabled class="read-only">
<input type="image" value="image" readonly disabled class="read-only">
</div>
<div>
<input type="reset" value="reset" class="read-only">
<input type="reset" value="reset" readonly class="read-only">
<input type="reset" value="reset" disabled class="read-only">
<input type="reset" value="reset" readonly disabled class="read-only">
</div>
<div>
<input type="button" value="button" class="read-only">
<input type="button" value="button" readonly class="read-only">
<input type="button" value="button" disabled class="read-only">
<input type="button" value="button" readonly disabled class="read-only">
</div>

</body>
</html>

0 comments on commit e43e8b1

Please sign in to comment.