<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[173441] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/173441">173441</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-09-09 14:03:29 -0700 (Tue, 09 Sep 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add support for :read-write/:read-only matching editable content
https://bugs.webkit.org/show_bug.cgi?id=136668
Reviewed by Antti Koivisto.
Source/WebCore:
This is the second part of the update of :read-write/:read-only to the latest spec
(http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#selectors).
The selectors :read-write/:read-only should match elements that are editable. The exact definition is:
"elements that are editing hosts or editable and are neither input elements nor textarea elements".
Matching that definition is really easy. It was done by updating HTMLElement's matchesReadWritePseudoClass()
to consider both contentEditable and designMode.
The tricky part is making that efficient in all cases. Matching contentEditable is horribly inefficient
compared to the other primitives. We don't want to execute that for every element.
Since matchesReadWritePseudoClass() was used by the theming code, that code was adjusted to
-Avoid calling that on regular HTMLElement, limiting the query to <input> and <textarea> where it is fast.
-Avoid the call entirely when possible.
Tests: fast/css/read-only-read-write-contenteditable-basics.html
fast/css/read-only-read-write-designmode-basics.html
fast/css/read-only-read-write-webkit-user-modify.html
fast/selectors/read-only-read-write-contenteditable-basics.html
fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html
fast/selectors/read-only-read-write-designmode-basics.html
fast/selectors/read-only-read-write-style-update.html
* html/HTMLElement.cpp:
(WebCore::contentEditableType):
This code is a generalization of the code that was in HTMLElement::contentEditable().
It is used by both matchesReadWritePseudoClass() and contentEditable() to determine
a valid state from the value of contentEditable.
(WebCore::HTMLElement::matchesReadWritePseudoClass):
Per the definition of editable content, we first check if the current element is an editing host,
if not we look for an editing host. If there are none, test for designMode.
(WebCore::HTMLElement::contentEditable):
(WebCore::RenderTheme::isReadOnlyControl):
The old definition would only match <input> and <textarea>. The code was updated to keep the same
behavior after matchesReadWritePseudoClass() is udpated. This avoids the performance problem of calling
matchesReadWritePseudoClass() on regular HTMLElement.
* platform/ControlStates.h:
ReadOnlyState was only used by ThemeMac for convertControlStatesToThemeDrawState().
In turn, convertControlStatesToThemeDrawState() was only used for painting
"-webkit-inner-spin-button". Buttons are not read-write to begin with.
The whole code looks like legacy from styling of input elements and was removed.
Removing ReadOnlyState removes the expensive part of extractControlStatesForRenderer().
* html/HTMLElement.h:
* html/HTMLFormControlElement.cpp:
(WebCore::HTMLFormControlElement::readOnlyAttributeChanged):
* platform/mac/ThemeMac.mm:
(WebCore::convertControlStatesToThemeDrawState):
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::extractControlStatesForRenderer):
LayoutTests:
* fast/css/read-only-read-write-contenteditable-basics-expected.html: Added.
* fast/css/read-only-read-write-contenteditable-basics.html: Added.
* fast/css/read-only-read-write-designmode-basics-expected.html: Added.
* fast/css/read-only-read-write-designmode-basics.html: Added.
* fast/css/read-only-read-write-webkit-user-modify-expected.txt: Added.
* fast/css/read-only-read-write-webkit-user-modify.html: Added.
* fast/selectors/read-only-read-write-contenteditable-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-contenteditable-basics.html: Added.
* fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt: Added.
* fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html: Added.
* fast/selectors/read-only-read-write-designmode-basics-expected.txt: Added.
* fast/selectors/read-only-read-write-designmode-basics.html: Added.
* fast/selectors/read-only-read-write-style-update-expected.txt: Added.
* fast/selectors/read-only-read-write-style-update.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLElementcpp">trunk/Source/WebCore/html/HTMLElement.cpp</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLElementh">trunk/Source/WebCore/html/HTMLElement.h</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLFormControlElementcpp">trunk/Source/WebCore/html/HTMLFormControlElement.cpp</a></li>
<li><a href="#trunkSourceWebCoreplatformControlStatesh">trunk/Source/WebCore/platform/ControlStates.h</a></li>
<li><a href="#trunkSourceWebCoreplatformmacThemeMacmm">trunk/Source/WebCore/platform/mac/ThemeMac.mm</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderThemecpp">trunk/Source/WebCore/rendering/RenderTheme.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritecontenteditablebasicsexpectedhtml">trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritecontenteditablebasicshtml">trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritedesignmodebasicsexpectedhtml">trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritedesignmodebasicshtml">trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritewebkitusermodifyexpectedtxt">trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssreadonlyreadwritewebkitusermodifyhtml">trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablebasicsexpectedtxt">trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablebasicshtml">trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablesvgforeignObjectexpectedtxt">trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablesvgforeignObjecthtml">trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritedesignmodebasicsexpectedtxt">trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritedesignmodebasicshtml">trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritestyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/read-only-read-write-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsreadonlyreadwritestyleupdatehtml">trunk/LayoutTests/fast/selectors/read-only-read-write-style-update.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/LayoutTests/ChangeLog 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2014-09-09 Benjamin Poulain <benjamin@webkit.org>
+
+ Add support for :read-write/:read-only matching editable content
+ https://bugs.webkit.org/show_bug.cgi?id=136668
+
+ Reviewed by Antti Koivisto.
+
+ * fast/css/read-only-read-write-contenteditable-basics-expected.html: Added.
+ * fast/css/read-only-read-write-contenteditable-basics.html: Added.
+ * fast/css/read-only-read-write-designmode-basics-expected.html: Added.
+ * fast/css/read-only-read-write-designmode-basics.html: Added.
+ * fast/css/read-only-read-write-webkit-user-modify-expected.txt: Added.
+ * fast/css/read-only-read-write-webkit-user-modify.html: Added.
+ * fast/selectors/read-only-read-write-contenteditable-basics-expected.txt: Added.
+ * fast/selectors/read-only-read-write-contenteditable-basics.html: Added.
+ * fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt: Added.
+ * fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html: Added.
+ * fast/selectors/read-only-read-write-designmode-basics-expected.txt: Added.
+ * fast/selectors/read-only-read-write-designmode-basics.html: Added.
+ * fast/selectors/read-only-read-write-style-update-expected.txt: Added.
+ * fast/selectors/read-only-read-write-style-update.html: Added.
+
</ins><span class="cx"> 2014-09-09 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> [Mac] Unreviewed gardening. Mark two media-source tests as failing.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritecontenteditablebasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics-expected.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics-expected.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+* {
+ background-color: pink;
+ color: black;
+}
+.read-write {
+ background-color: white;
+ color: green;
+}
+</style>
+</head>
+<body>
+ <!-- In the reference, we cannot use :read-only/:read-write for styling. The attributes must remain the same since they can be used by the theme. -->
+ <p>This test checks the styling of element with :read-only and :read-write. Every element where text can be entered/changed should have green text over a white background. Every element that cannot be edited should have black text over pink background.</p>
+ <div>
+ <!-- Default is true -->
+ <div contenteditable class="read-write">
+ <div class="read-write">WebKit rocks! Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div contenteditable=true class="read-write">
+ <div class="read-write">Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div contenteditable="TrUe" class="read-write">
+ <div class="read-write">Editable</div>
+ <div contenteditable="FaLsE">
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div contenteditable="plaintext-only" class="read-write">
+ <div class="read-write">Editable</div>
+ <div contenteditable="false">
+ <div>Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div contenteditable=true class="read-write">
+ <div class="read-write">Editable</div>
+ <input type="text" value="read-write input" class="read-write">
+ <input type="text" disabled value="read-only input">
+ <input type="text" readonly value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled value="read-only input">
+ <input type="text" contenteditable=true readonly value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div contenteditable=true class="read-write">
+ <div class="read-write">Editable</div>
+ <textarea class="read-write">Editable text area</textarea>
+ <textarea disabled>Non editable text area</textarea>
+ <textarea readonly>Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled>Non editable text area</textarea>
+ <textarea contenteditable=true readonly>Non editable text area</textarea>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritecontenteditablebasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-contenteditable-basics.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+* {
+ background-color: white;
+ color: black;
+}
+:read-only {
+ background-color: pink;
+}
+:read-write {
+ color: green;
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling of element with :read-only and :read-write. Every element where text can be entered/changed should have green text over a white background. Every element that cannot be edited should have black text over pink background.</p>
+ <div>
+ <!-- Default is true -->
+ <div contenteditable>
+ <div>WebKit rocks! Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div contenteditable="TrUe">
+ <div>Editable</div>
+ <div contenteditable="FaLsE">
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div contenteditable="plaintext-only">
+ <div>Editable</div>
+ <div contenteditable="false">
+ <div id="non-editable-subblock-4">Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <input type="text" value="read-write input">
+ <input type="text" disabled value="read-only input">
+ <input type="text" readonly value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled value="read-only input">
+ <input type="text" contenteditable=true readonly value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <textarea>Editable text area</textarea>
+ <textarea disabled>Non editable text area</textarea>
+ <textarea readonly>Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled>Non editable text area</textarea>
+ <textarea contenteditable=true readonly>Non editable text area</textarea>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritedesignmodebasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics-expected.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics-expected.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+* {
+ background-color: white;
+ color: green;
+}
+.read-only {
+ background-color: pink;
+ color: black;
+}
+</style>
+</head>
+<body>
+ <!-- In the reference, we cannot use :read-only/:read-write for styling. The attributes must remain the same since they can be used by the theme. -->
+ <p>This test checks the styling of element with :read-only and :read-write. Every element where text can be entered/changed should have green text over a white background. Every element that cannot be edited should have black text over pink background.</p>
+ <div>
+ <!-- Default is true -->
+ <div contenteditable>
+ <div>WebKit rocks! Editable</div>
+ <div contenteditable=false>
+ <div class="read-only">Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <div contenteditable=false>
+ <div class="read-only">Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div contenteditable="TrUe">
+ <div>Editable</div>
+ <div contenteditable="FaLsE">
+ <div class="read-only">Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div contenteditable="plaintext-only">
+ <div>Editable</div>
+ <div contenteditable="false">
+ <div class="read-only">Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <input type="text" value="read-write input">
+ <input class="read-only" type="text" disabled value="read-only input">
+ <input class="read-only" type="text" readonly value="read-only input">
+ </div>
+ <input class="read-only" type="text" contenteditable=true disabled value="read-only input">
+ <input class="read-only" type="text" contenteditable=true readonly value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <textarea>Editable text area</textarea>
+ <textarea class="read-only" disabled>Non editable text area</textarea>
+ <textarea class="read-only" readonly>Non editable text area</textarea>
+ </div>
+ <textarea class="read-only" contenteditable=true disabled>Non editable text area</textarea>
+ <textarea class="read-only" contenteditable=true readonly>Non editable text area</textarea>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritedesignmodebasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-designmode-basics.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,73 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+* {
+ background-color: white;
+ color: black;
+}
+:read-only {
+ background-color: pink;
+}
+:read-write {
+ color: green;
+}
+</style>
+<script>
+document.designMode = "on";
+</script>
+</head>
+<body>
+ <p>This test checks the styling of element with :read-only and :read-write. Every element where text can be entered/changed should have green text over a white background. Every element that cannot be edited should have black text over pink background.</p>
+ <div>
+ <!-- Default is true -->
+ <div contenteditable>
+ <div>WebKit rocks! Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <div contenteditable=false>
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div contenteditable="TrUe">
+ <div>Editable</div>
+ <div contenteditable="FaLsE">
+ <div>Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div contenteditable="plaintext-only">
+ <div>Editable</div>
+ <div contenteditable="false">
+ <div>Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <input type="text" value="read-write input">
+ <input type="text" disabled value="read-only input">
+ <input type="text" readonly value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled value="read-only input">
+ <input type="text" contenteditable=true readonly value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <textarea>Editable text area</textarea>
+ <textarea disabled>Non editable text area</textarea>
+ <textarea readonly>Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled>Non editable text area</textarea>
+ <textarea contenteditable=true readonly>Non editable text area</textarea>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritewebkitusermodifyexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify-expected.txt (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify-expected.txt 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,59 @@
</span><ins>+The CSS Property (-webkit-)user-modify must not have any effect on the resolution of ":read-write" and ":read-only". If a selector were to depend on a CSS property, it would create a style-depends-on-style loop and make a giant mess of querySelector.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[13]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[14]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[15]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS document.querySelectorAll("#test-block :read-write").length is 6
+PASS document.querySelectorAll("#test-block :read-write")[0].id is "editing-host-1"
+PASS document.querySelectorAll("#test-block :read-write")[1].id is "editable-block-1"
+PASS document.querySelectorAll("#test-block :read-write")[2].id is "editing-host-2"
+PASS document.querySelectorAll("#test-block :read-write")[3].id is "read-write-input"
+PASS document.querySelectorAll("#test-block :read-write")[4].id is "editing-host-3"
+PASS document.querySelectorAll("#test-block :read-write")[5].id is "read-write-textarea"
+PASS document.querySelectorAll("#test-block :read-only").length is 10
+PASS document.querySelectorAll("#test-block :read-only")[0].id is "non-editable-block-1"
+PASS document.querySelectorAll("#test-block :read-only")[1].id is "non-editable-subblock-1"
+PASS document.querySelectorAll("#test-block :read-only")[2].id is "read-only-input-1"
+PASS document.querySelectorAll("#test-block :read-only")[3].id is "read-only-input-2"
+PASS document.querySelectorAll("#test-block :read-only")[4].id is "read-only-input-3"
+PASS document.querySelectorAll("#test-block :read-only")[5].id is "read-only-input-4"
+PASS document.querySelectorAll("#test-block :read-only")[6].id is "read-only-textarea-1"
+PASS document.querySelectorAll("#test-block :read-only")[7].id is "read-only-textarea-2"
+PASS document.querySelectorAll("#test-block :read-only")[8].id is "read-only-textarea-3"
+PASS document.querySelectorAll("#test-block :read-only")[9].id is "read-only-textarea-4"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreadonlyreadwritewebkitusermodifyhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify.html (rev 0)
+++ trunk/LayoutTests/fast/css/read-only-read-write-webkit-user-modify.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,100 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+#test-block * {
+ background-color: white;
+ color: black;
+}
+#test-block :read-only {
+ background-color: red;
+}
+#test-block :read-write {
+ color: lime;
+}
+* {
+ -webkit-user-modify: read-write;
+ -moz-user-modify: read-write;
+ user-modify: read-write;
+}
+</style>
+</head>
+<body>
+ <div style="display:none;" id="test-block">
+ <div id="editing-host-1" contenteditable>
+ <div id="editable-block-1">Editable</div>
+ <div id="non-editable-block-1" contenteditable=false>
+ <div id="non-editable-subblock-1">Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div id="editing-host-2" contenteditable=true>
+ <input type="text" id="read-write-input" value="read-write input">
+ <input type="text" disabled id="read-only-input-1" value="read-only input">
+ <input type="text" readonly id="read-only-input-2" value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled id="read-only-input-3" value="read-only input">
+ <input type="text" contenteditable=true readonly id="read-only-input-4" value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div id="editing-host-3" contenteditable=true>
+ <textarea id="read-write-textarea">Editable text area</textarea>
+ <textarea disabled id="read-only-textarea-1">Non editable text area</textarea>
+ <textarea readonly id="read-only-textarea-2">Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled id="read-only-textarea-3">Non editable text area</textarea>
+ <textarea contenteditable=true readonly id="read-only-textarea-4">Non editable text area</textarea>
+ </div>
+</body>
+<script>
+description('The CSS Property (-webkit-)user-modify must not have any effect on the resolution of ":read-write" and ":read-only". If a selector were to depend on a CSS property, it would create a style-depends-on-style loop and make a giant mess of querySelector.');
+
+var editableElements = [
+ "editing-host-1",
+ "editable-block-1",
+ "editing-host-2",
+ "read-write-input",
+ "editing-host-3",
+ "read-write-textarea",
+];
+
+var nonEditableElements = [
+ "non-editable-block-1",
+ "non-editable-subblock-1",
+ "read-only-input-1",
+ "read-only-input-2",
+ "read-only-input-3",
+ "read-only-input-4",
+ "read-only-textarea-1",
+ "read-only-textarea-2",
+ "read-only-textarea-3",
+ "read-only-textarea-4"
+];
+
+function testQuerySelector(selector, expectedResults)
+{
+ shouldBe('document.querySelectorAll("' + selector + '").length', "" + expectedResults.length);
+ for (var i = 0; i < expectedResults.length; ++i)
+ shouldBeEqualToString('document.querySelectorAll("' + selector + '")[' + i + '].id', expectedResults[i]);
+}
+
+function testStyling(expectedReadOnlyElements)
+{
+ var allTestCases = document.querySelectorAll('#test-block *');
+ for (var i = 0; i < allTestCases.length; ++i) {
+ var isReadOnly = expectedReadOnlyElements.indexOf(allTestCases[i].id) >= 0;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).color', isReadOnly ? 'rgb(0, 0, 0)' : 'rgb(0, 255, 0)')
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).backgroundColor', isReadOnly ? 'rgb(255, 0, 0)' : 'rgb(255, 255, 255)')
+ }
+}
+
+testStyling(nonEditableElements);
+
+testQuerySelector("#test-block :read-write", editableElements);
+testQuerySelector("#test-block :read-only", nonEditableElements);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablebasicsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics-expected.txt (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics-expected.txt 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+Test the basic features of ":read-only", ":read-write" on elements with the contenteditable attribute. The definition is that ":read-write" is matches for "elements that are editing hosts or editable and are neither input elements nor textarea elements"
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[13]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[13]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[14]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[15]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[16]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[16]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[17]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[17]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[18]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[19]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[20]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[21]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[22]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[22]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[23]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[23]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[24]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[25]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[26]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[27]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS document.querySelectorAll("#test-block :read-write").length is 12
+PASS document.querySelectorAll("#test-block :read-write")[0].id is "editing-host-1"
+PASS document.querySelectorAll("#test-block :read-write")[1].id is "editable-block-1"
+PASS document.querySelectorAll("#test-block :read-write")[2].id is "editing-host-2"
+PASS document.querySelectorAll("#test-block :read-write")[3].id is "editable-block-2"
+PASS document.querySelectorAll("#test-block :read-write")[4].id is "editing-host-3"
+PASS document.querySelectorAll("#test-block :read-write")[5].id is "editable-block-3"
+PASS document.querySelectorAll("#test-block :read-write")[6].id is "editing-host-4"
+PASS document.querySelectorAll("#test-block :read-write")[7].id is "editable-block-4"
+PASS document.querySelectorAll("#test-block :read-write")[8].id is "editing-host-5"
+PASS document.querySelectorAll("#test-block :read-write")[9].id is "read-write-input"
+PASS document.querySelectorAll("#test-block :read-write")[10].id is "editing-host-6"
+PASS document.querySelectorAll("#test-block :read-write")[11].id is "read-write-textarea"
+PASS document.querySelectorAll("#test-block :read-only").length is 16
+PASS document.querySelectorAll("#test-block :read-only")[0].id is "non-editable-block-1"
+PASS document.querySelectorAll("#test-block :read-only")[1].id is "non-editable-subblock-1"
+PASS document.querySelectorAll("#test-block :read-only")[2].id is "non-editable-block-2"
+PASS document.querySelectorAll("#test-block :read-only")[3].id is "non-editable-subblock-2"
+PASS document.querySelectorAll("#test-block :read-only")[4].id is "non-editable-block-3"
+PASS document.querySelectorAll("#test-block :read-only")[5].id is "non-editable-subblock-3"
+PASS document.querySelectorAll("#test-block :read-only")[6].id is "non-editable-block-4"
+PASS document.querySelectorAll("#test-block :read-only")[7].id is "non-editable-subblock-4"
+PASS document.querySelectorAll("#test-block :read-only")[8].id is "read-only-input-1"
+PASS document.querySelectorAll("#test-block :read-only")[9].id is "read-only-input-2"
+PASS document.querySelectorAll("#test-block :read-only")[10].id is "read-only-input-3"
+PASS document.querySelectorAll("#test-block :read-only")[11].id is "read-only-input-4"
+PASS document.querySelectorAll("#test-block :read-only")[12].id is "read-only-textarea-1"
+PASS document.querySelectorAll("#test-block :read-only")[13].id is "read-only-textarea-2"
+PASS document.querySelectorAll("#test-block :read-only")[14].id is "read-only-textarea-3"
+PASS document.querySelectorAll("#test-block :read-only")[15].id is "read-only-textarea-4"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablebasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-basics.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,129 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+#test-block * {
+ background-color: white;
+ color: black;
+}
+#test-block :read-only {
+ background-color: red;
+}
+#test-block :read-write {
+ color: lime;
+}
+</style>
+</head>
+<body>
+ <div style="display:none;" id="test-block">
+ <!-- Default is true -->
+ <div id="editing-host-1" contenteditable>
+ <div id="editable-block-1">Editable</div>
+ <div id="non-editable-block-1" contenteditable=false>
+ <div id="non-editable-subblock-1">Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div id="editing-host-2" contenteditable=true>
+ <div id="editable-block-2">Editable</div>
+ <div id="non-editable-block-2" contenteditable=false>
+ <div id="non-editable-subblock-2">Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div id="editing-host-3" contenteditable="TrUe">
+ <div id="editable-block-3">Editable</div>
+ <div id="non-editable-block-3" contenteditable="FaLsE">
+ <div id="non-editable-subblock-3">Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div id="editing-host-4" contenteditable="plaintext-only">
+ <div id="editable-block-4">Editable</div>
+ <div id="non-editable-block-4" contenteditable="false">
+ <div id="non-editable-subblock-4">Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div id="editing-host-5" contenteditable=true>
+ <input type="text" id="read-write-input" value="read-write input">
+ <input type="text" disabled id="read-only-input-1" value="read-only input">
+ <input type="text" readonly id="read-only-input-2" value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled id="read-only-input-3" value="read-only input">
+ <input type="text" contenteditable=true readonly id="read-only-input-4" value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div id="editing-host-6" contenteditable=true>
+ <textarea id="read-write-textarea">Editable text area</textarea>
+ <textarea disabled id="read-only-textarea-1">Non editable text area</textarea>
+ <textarea readonly id="read-only-textarea-2">Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled id="read-only-textarea-3">Non editable text area</textarea>
+ <textarea contenteditable=true readonly id="read-only-textarea-4">Non editable text area</textarea>
+ </div>
+</body>
+<script>
+description('Test the basic features of ":read-only", ":read-write" on elements with the contenteditable attribute. The definition is that ":read-write" is matches for "elements that are editing hosts or editable and are neither input elements nor textarea elements"');
+
+var editableElements = [
+ "editing-host-1",
+ "editable-block-1",
+ "editing-host-2",
+ "editable-block-2",
+ "editing-host-3",
+ "editable-block-3",
+ "editing-host-4",
+ "editable-block-4",
+ "editing-host-5",
+ "read-write-input",
+ "editing-host-6",
+ "read-write-textarea",
+];
+
+var nonEditableElements = [
+ "non-editable-block-1",
+ "non-editable-subblock-1",
+ "non-editable-block-2",
+ "non-editable-subblock-2",
+ "non-editable-block-3",
+ "non-editable-subblock-3",
+ "non-editable-block-4",
+ "non-editable-subblock-4",
+ "read-only-input-1",
+ "read-only-input-2",
+ "read-only-input-3",
+ "read-only-input-4",
+ "read-only-textarea-1",
+ "read-only-textarea-2",
+ "read-only-textarea-3",
+ "read-only-textarea-4"
+];
+
+function testQuerySelector(selector, expectedResults)
+{
+ shouldBe('document.querySelectorAll("' + selector + '").length', "" + expectedResults.length);
+ for (var i = 0; i < expectedResults.length; ++i)
+ shouldBeEqualToString('document.querySelectorAll("' + selector + '")[' + i + '].id', expectedResults[i]);
+}
+
+function testStyling(expectedReadOnlyElements)
+{
+ var allTestCases = document.querySelectorAll('#test-block *');
+ for (var i = 0; i < allTestCases.length; ++i) {
+ var isReadOnly = expectedReadOnlyElements.indexOf(allTestCases[i].id) >= 0;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).color', isReadOnly ? 'rgb(0, 0, 0)' : 'rgb(0, 255, 0)')
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).backgroundColor', isReadOnly ? 'rgb(255, 0, 0)' : 'rgb(255, 255, 255)')
+ }
+}
+
+testStyling(nonEditableElements);
+
+testQuerySelector("#test-block :read-write", editableElements);
+testQuerySelector("#test-block :read-only", nonEditableElements);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablesvgforeignObjectexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject-expected.txt 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+At the time of writing this test, there is no specification for contenteditable for SVG. Adding contenteditable on an SVG element does not create an editing host. This test verify that having a SVG or HTML attribute "contenteditable" does not interfere with the selectors :read-write and :read-only.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).color is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-block *")[12]).backgroundColor is "rgb(255, 255, 255)"
+PASS document.querySelectorAll("#test-block :read-write").length is 6
+PASS document.querySelectorAll("#test-block :read-write")[0].id is "editing-host-1"
+PASS document.querySelectorAll("#test-block :read-write")[1].id is "editable-block-1"
+PASS document.querySelectorAll("#test-block :read-write")[2].id is "editing-host-2"
+PASS document.querySelectorAll("#test-block :read-write")[3].id is "editable-block-2"
+PASS document.querySelectorAll("#test-block :read-write")[4].id is "nested-editing-host-2"
+PASS document.querySelectorAll("#test-block :read-write")[5].id is "editable-block-3"
+PASS document.querySelectorAll("#test-block :read-only").length is 7
+PASS document.querySelectorAll("#test-block :read-only")[0].id is "svg-root-1"
+PASS document.querySelectorAll("#test-block :read-only")[1].id is "fake-contenteditable-group-1"
+PASS document.querySelectorAll("#test-block :read-only")[2].id is "foreign-object-1"
+PASS document.querySelectorAll("#test-block :read-only")[3].id is "non-editable-block-1"
+PASS document.querySelectorAll("#test-block :read-only")[4].id is "svg-root-2"
+PASS document.querySelectorAll("#test-block :read-only")[5].id is "fake-contenteditable-group-2"
+PASS document.querySelectorAll("#test-block :read-only")[6].id is "foreign-object-2"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritecontenteditablesvgforeignObjecthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,94 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+#test-block * {
+ background-color: white;
+ color: black;
+}
+#test-block :read-only {
+ background-color: red;
+}
+#test-block :read-write {
+ color: lime;
+}
+</style>
+</head>
+<body>
+ <div id="test-block" style="display:none;">
+ <svg id="svg-root-1" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+ <g id="fake-contenteditable-group-1" contenteditable xhtml:contenteditable>
+ <foreignObject id="foreign-object-1" x="10" y="10" width="800" height="150">
+ <body xmlns="http://www.w3.org/1999/xhtml">
+ <div id="non-editable-block-1">Not Editable</div>
+ <div id="editing-host-1" contenteditable>
+ <div id="editable-block-1">Editable</div>
+ </div>
+ </body>
+ </foreignObject>
+ </g>
+ </svg>
+ <div contenteditable id="editing-host-2">
+ <svg id="svg-root-2" xmlns="http://www.w3.org/2000/svg">
+ <g id="fake-contenteditable-group-2" contenteditable="false" xhtml:contenteditable="false">
+ <foreignObject id="foreign-object-2" x="10" y="10" width="800" height="150">
+ <body xmlns="http://www.w3.org/1999/xhtml">
+ <div id="editable-block-2">Editable</div>
+ <div id="nested-editing-host-2" contenteditable>
+ <div id="editable-block-3">Editable</div>
+ </div>
+ </body>
+ </foreignObject>
+ </g>
+ </svg>
+ </div>
+ </div>
+</body>
+<script>
+description('At the time of writing this test, there is no specification for contenteditable for SVG. Adding contenteditable on an SVG element does not create an editing host. This test verify that having a SVG or HTML attribute "contenteditable" does not interfere with the selectors :read-write and :read-only.');
+
+var editableElements = [
+ "editing-host-1",
+ "editable-block-1",
+ "editing-host-2",
+ "editable-block-2",
+ "nested-editing-host-2",
+ "editable-block-3",
+];
+
+var nonEditableElements = [
+ "svg-root-1",
+ "fake-contenteditable-group-1",
+ "foreign-object-1",
+ "non-editable-block-1",
+ "svg-root-2",
+ "fake-contenteditable-group-2",
+ "foreign-object-2",
+];
+
+function testQuerySelector(selector, expectedResults)
+{
+ shouldBe('document.querySelectorAll("' + selector + '").length', "" + expectedResults.length);
+ for (var i = 0; i < expectedResults.length; ++i)
+ shouldBeEqualToString('document.querySelectorAll("' + selector + '")[' + i + '].id', expectedResults[i]);
+}
+
+function testStyling(expectedReadOnlyElements)
+{
+ var allTestCases = document.querySelectorAll('#test-block *');
+ for (var i = 0; i < allTestCases.length; ++i) {
+ var isReadOnly = expectedReadOnlyElements.indexOf(allTestCases[i].id) >= 0;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).color', isReadOnly ? 'rgb(0, 0, 0)' : 'rgb(0, 255, 0)')
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-block *")[' + i + ']).backgroundColor', isReadOnly ? 'rgb(255, 0, 0)' : 'rgb(255, 255, 255)')
+ }
+}
+
+testStyling(nonEditableElements);
+
+testQuerySelector("#test-block :read-write", editableElements);
+testQuerySelector("#test-block :read-only", nonEditableElements);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritedesignmodebasicsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics-expected.txt (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics-expected.txt 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Test the basic features of ":read-only", ":read-write" on elements with the design mode enabled. The definition is that ":read-write" is matches for "elements that are editing hosts or editable and are neither input elements nor textarea elements"
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS testQuerySelector() is true
+PASS testStyling() is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritedesignmodebasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-designmode-basics.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,139 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style id="toNukeAfterTest">
+* {
+ background-color: white;
+ color: black;
+}
+:read-only {
+ background-color: red;
+}
+:read-write {
+ color: lime;
+}
+</style>
+</head>
+<body>
+ <div style="display:none;" id="test-block">
+ <!-- Default is true -->
+ <div contenteditable>
+ <div>Editable</div>
+ <div id="non-editable-block-1" contenteditable=false>
+ <div id="non-editable-subblock-1">Not editable</div>
+ </div>
+ </div>
+ <!-- True is true :) -->
+ <div contenteditable=true>
+ <div>Editable</div>
+ <div id="non-editable-block-2" contenteditable=false>
+ <div id="non-editable-subblock-2">Not editable</div>
+ </div>
+ </div>
+ <!-- The case of the attribute's value is irrelevant. -->
+ <div contenteditable="TrUe">
+ <div>Editable</div>
+ <div id="non-editable-block-3" contenteditable="FaLsE">
+ <div id="non-editable-subblock-3">Not editable</div>
+ </div>
+ </div>
+ <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. -->
+ <div contenteditable="plaintext-only">
+ <div>Editable</div>
+ <div id="non-editable-block-4" contenteditable="false">
+ <div id="non-editable-subblock-4">Not editable</div>
+ </div>
+ </div>
+
+ <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. -->
+ <div contenteditable=true>
+ <input type="text" id="read-write-input" value="read-write input">
+ <input type="text" disabled id="read-only-input-1" value="read-only input">
+ <input type="text" readonly id="read-only-input-2" value="read-only input">
+ </div>
+ <input type="text" contenteditable=true disabled id="read-only-input-3" value="read-only input">
+ <input type="text" contenteditable=true readonly id="read-only-input-4" value="read-only input">
+
+ <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. -->
+ <div contenteditable=true>
+ <textarea id="read-write-textarea">Editable text area</textarea>
+ <textarea disabled id="read-only-textarea-1">Non editable text area</textarea>
+ <textarea readonly id="read-only-textarea-2">Non editable text area</textarea>
+ </div>
+ <textarea contenteditable=true disabled id="read-only-textarea-3">Non editable text area</textarea>
+ <textarea contenteditable=true readonly id="read-only-textarea-4">Non editable text area</textarea>
+ </div>
+</body>
+<script>
+description('Test the basic features of ":read-only", ":read-write" on elements with the design mode enabled. The definition is that ":read-write" is matches for "elements that are editing hosts or editable and are neither input elements nor textarea elements"');
+
+// This test is derivative from the contenteditable test. Unlike that one, here designMode is enabled, everything is editable unless explicitely disabled.
+document.designMode = "on";
+
+var nonEditableElements = [
+ "non-editable-block-1",
+ "non-editable-subblock-1",
+ "non-editable-block-2",
+ "non-editable-subblock-2",
+ "non-editable-block-3",
+ "non-editable-subblock-3",
+ "non-editable-block-4",
+ "non-editable-subblock-4",
+ "read-only-input-1",
+ "read-only-input-2",
+ "read-only-input-3",
+ "read-only-input-4",
+ "read-only-textarea-1",
+ "read-only-textarea-2",
+ "read-only-textarea-3",
+ "read-only-textarea-4"
+];
+
+// Since altering the DOM changes the results, everything needs to be done prior to showing the results.
+function testQuerySelector()
+{
+ var allReadWrite = document.querySelectorAll(":read-write");
+ for (var i = 0; i < allReadWrite.length; ++i) {
+ if (nonEditableElements.indexOf(allReadWrite[i].id) >= 0) {
+ debug("Element i = " + i + " id = " + allReadWrite[i].id + "was expected to be read-write.");
+ return false;
+ }
+ }
+
+ var allReadOnly = document.querySelectorAll(":read-only");
+ for (var i = 0; i < allReadOnly.length; ++i) {
+ if (nonEditableElements.indexOf(allReadOnly[i].id) === -1) {
+ debug("Element i = " + i + " id = " + allReadWrite[i].id + "was expected to be read-only.");
+ return false;
+ }
+ }
+ return true;
+}
+shouldBeTrue("testQuerySelector()");
+
+function testStyling()
+{
+ var allTestCases = document.querySelectorAll('*');
+ for (var i = 0; i < allTestCases.length; ++i) {
+ var isReadOnly = nonEditableElements.indexOf(allTestCases[i].id) >= 0;
+ var expectedColor = isReadOnly ? 'rgb(0, 0, 0)' : 'rgb(0, 255, 0)';
+ if (getComputedStyle(allTestCases[i]).color != expectedColor) {
+ debug("Expected color " + expectedColor + " on element i = " + i + " id = \"" + allTestCases[i].id + "\". Got " + getComputedStyle(allTestCases[i]).color);
+ return false;
+ }
+
+ var expectedBackgroundColor = isReadOnly ? 'rgb(255, 0, 0)' : 'rgb(255, 255, 255)';
+ if (getComputedStyle(allTestCases[i]).backgroundColor != expectedBackgroundColor) {
+ debug("Expected background color " + expectedBackgroundColor + "on element i = " + i + " id = " + allTestCases[i].id + ". Got " + getComputedStyle(allTestCases[i]).backgroundColor);
+ return false;
+ }
+ }
+ return true;
+}
+shouldBeTrue("testStyling()");
+
+document.getElementById("toNukeAfterTest").innerHTML = ""; // To style the results properly.
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritestyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-style-update-expected.txt (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-style-update-expected.txt 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+Test that the style is invalidated and updated properly when properties causing :read-only/:read-write change.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initially, the target should be read only.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Changing content editable via the API.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Changing content editable via the attributes.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Changing content editable on the parent via the API.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Changing content editable via the attributes.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Moving the document to design mode.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+Setting the target's contenteditable to true should not change a thing now.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+Setting the target's contenteditable to false should still be respected in design mode.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+Let's remove the contenteditable attribute on the target, we should still be read-write because of design mode.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(0, 255, 0)"
+Disabling design mode.
+PASS getComputedStyle(document.getElementById("target")).backgroundColor is "rgb(255, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsreadonlyreadwritestyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/read-only-read-write-style-update.html (0 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/read-only-read-write-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/read-only-read-write-style-update.html 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -0,0 +1,111 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+}
+target:read-only {
+ background-color: red;
+}
+target:read-write {
+ background-color: lime;
+}
+</style>
+</head>
+<body>
+ <div style="display:none">
+ <target></target>
+ <target id="target"></target>
+ <target></target>
+ </div>
+</body>
+<script>
+description('Test that the style is invalidated and updated properly when properties causing :read-only/:read-write change.');
+
+function testStyle(expectReadOnly)
+{
+ shouldBeEqualToString('getComputedStyle(document.getElementById("target")).backgroundColor', expectReadOnly ? 'rgb(255, 0, 0)' : 'rgb(0, 255, 0)');
+}
+
+debug("Initially, the target should be read only.");
+testStyle(true);
+
+debug("Changing content editable via the API.");
+var target = document.getElementById('target');
+target.contentEditable = "true";
+testStyle(false);
+
+target.contentEditable = "false";
+testStyle(true);
+
+target.contentEditable = "plaintext-only";
+testStyle(false);
+
+target.contentEditable = false;
+testStyle(true);
+
+debug("Changing content editable via the attributes.");
+target.setAttribute("CoNtEnTeDiTaBlE", "true");
+testStyle(false);
+
+target.setAttribute("CoNtEnTeDiTaBlE", "false");
+testStyle(true);
+
+target.setAttribute("CoNtEnTeDiTaBlE", "");
+testStyle(false);
+
+target.removeAttribute("contenteditable");
+testStyle(true);
+
+debug("Changing content editable on the parent via the API.");
+var parent = target.parentElement;
+parent.contentEditable = "true";
+testStyle(false);
+
+parent.contentEditable = "false";
+testStyle(true);
+
+parent.contentEditable = "plaintext-only";
+testStyle(false);
+
+parent.contentEditable = false;
+testStyle(true);
+
+debug("Changing content editable via the attributes.");
+parent.setAttribute("CoNtEnTeDiTaBlE", "true");
+testStyle(false);
+
+parent.setAttribute("CoNtEnTeDiTaBlE", "false");
+testStyle(true);
+
+parent.setAttribute("CoNtEnTeDiTaBlE", "");
+testStyle(false);
+
+parent.removeAttribute("contenteditable");
+testStyle(true);
+
+debug("Moving the document to design mode.");
+document.designMode = "on";
+testStyle(false);
+
+debug("Setting the target's contenteditable to true should not change a thing now.");
+target.contentEditable = "true";
+testStyle(false);
+
+debug("Setting the target's contenteditable to false should still be respected in design mode.");
+target.contentEditable = "false";
+testStyle(true);
+
+debug("Let's remove the contenteditable attribute on the target, we should still be read-write because of design mode.");
+target.removeAttribute("contenteditable");
+testStyle(false);
+
+debug("Disabling design mode.");
+document.designMode = "off";
+testStyle(true);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/ChangeLog 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -1,3 +1,67 @@
</span><ins>+2014-09-09 Benjamin Poulain <benjamin@webkit.org>
+
+ Add support for :read-write/:read-only matching editable content
+ https://bugs.webkit.org/show_bug.cgi?id=136668
+
+ Reviewed by Antti Koivisto.
+
+ This is the second part of the update of :read-write/:read-only to the latest spec
+ (http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#selectors).
+
+ The selectors :read-write/:read-only should match elements that are editable. The exact definition is:
+ "elements that are editing hosts or editable and are neither input elements nor textarea elements".
+
+ Matching that definition is really easy. It was done by updating HTMLElement's matchesReadWritePseudoClass()
+ to consider both contentEditable and designMode.
+
+ The tricky part is making that efficient in all cases. Matching contentEditable is horribly inefficient
+ compared to the other primitives. We don't want to execute that for every element.
+
+ Since matchesReadWritePseudoClass() was used by the theming code, that code was adjusted to
+ -Avoid calling that on regular HTMLElement, limiting the query to <input> and <textarea> where it is fast.
+ -Avoid the call entirely when possible.
+
+ Tests: fast/css/read-only-read-write-contenteditable-basics.html
+ fast/css/read-only-read-write-designmode-basics.html
+ fast/css/read-only-read-write-webkit-user-modify.html
+ fast/selectors/read-only-read-write-contenteditable-basics.html
+ fast/selectors/read-only-read-write-contenteditable-svg-foreignObject.html
+ fast/selectors/read-only-read-write-designmode-basics.html
+ fast/selectors/read-only-read-write-style-update.html
+
+ * html/HTMLElement.cpp:
+ (WebCore::contentEditableType):
+ This code is a generalization of the code that was in HTMLElement::contentEditable().
+ It is used by both matchesReadWritePseudoClass() and contentEditable() to determine
+ a valid state from the value of contentEditable.
+
+ (WebCore::HTMLElement::matchesReadWritePseudoClass):
+ Per the definition of editable content, we first check if the current element is an editing host,
+ if not we look for an editing host. If there are none, test for designMode.
+
+ (WebCore::HTMLElement::contentEditable):
+
+ (WebCore::RenderTheme::isReadOnlyControl):
+ The old definition would only match <input> and <textarea>. The code was updated to keep the same
+ behavior after matchesReadWritePseudoClass() is udpated. This avoids the performance problem of calling
+ matchesReadWritePseudoClass() on regular HTMLElement.
+
+ * platform/ControlStates.h:
+ ReadOnlyState was only used by ThemeMac for convertControlStatesToThemeDrawState().
+ In turn, convertControlStatesToThemeDrawState() was only used for painting
+ "-webkit-inner-spin-button". Buttons are not read-write to begin with.
+ The whole code looks like legacy from styling of input elements and was removed.
+
+ Removing ReadOnlyState removes the expensive part of extractControlStatesForRenderer().
+
+ * html/HTMLElement.h:
+ * html/HTMLFormControlElement.cpp:
+ (WebCore::HTMLFormControlElement::readOnlyAttributeChanged):
+ * platform/mac/ThemeMac.mm:
+ (WebCore::convertControlStatesToThemeDrawState):
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::extractControlStatesForRenderer):
+
</ins><span class="cx"> 2014-09-09 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> [MSE] media/media-source tests broken after r173318
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLElement.cpp (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLElement.cpp 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/html/HTMLElement.cpp 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -336,6 +336,55 @@
</span><span class="cx"> map.add(customTable[i].attributeName.localName().impl(), customTable[i].eventName);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+enum class ContentEditableType {
+ Inherit,
+ True,
+ False,
+ PlaintextOnly
+};
+
+static ContentEditableType contentEditableType(const HTMLElement& element)
+{
+ const AtomicString& value = element.fastGetAttribute(contenteditableAttr);
+
+ if (value.isNull())
+ return ContentEditableType::Inherit;
+ if (value.isEmpty() || equalIgnoringCase(value, "true"))
+ return ContentEditableType::True;
+ if (equalIgnoringCase(value, "false"))
+ return ContentEditableType::False;
+ if (equalIgnoringCase(value, "plaintext-only"))
+ return ContentEditableType::PlaintextOnly;
+
+ return ContentEditableType::Inherit;
+}
+
+bool HTMLElement::matchesReadWritePseudoClass() const
+{
+ const Element* currentElement = this;
+ do {
+ if (currentElement->isHTMLElement()) {
+ switch (contentEditableType(toHTMLElement(*currentElement))) {
+ case ContentEditableType::True:
+ case ContentEditableType::PlaintextOnly:
+ return true;
+ case ContentEditableType::False:
+ return false;
+ case ContentEditableType::Inherit:
+ break;
+ }
+ }
+ currentElement = currentElement->parentElement();
+ } while (currentElement);
+
+ const Document& document = this->document();
+ if (document.isHTMLDocument()) {
+ const HTMLDocument& htmlDocument = toHTMLDocument(document);
+ return htmlDocument.inDesignMode();
+ }
+ return false;
+}
+
</ins><span class="cx"> void HTMLElement::parseAttribute(const QualifiedName& name, const AtomicString& value)
</span><span class="cx"> {
</span><span class="cx"> if (name == HTMLNames::idAttr || name == HTMLNames::classAttr || name == HTMLNames::styleAttr)
</span><span class="lines">@@ -680,17 +729,16 @@
</span><span class="cx">
</span><span class="cx"> String HTMLElement::contentEditable() const
</span><span class="cx"> {
</span><del>- const AtomicString& value = fastGetAttribute(contenteditableAttr);
-
- if (value.isNull())
</del><ins>+ switch (contentEditableType(*this)) {
+ case ContentEditableType::Inherit:
</ins><span class="cx"> return ASCIILiteral("inherit");
</span><del>- if (value.isEmpty() || equalIgnoringCase(value, "true"))
</del><ins>+ case ContentEditableType::True:
</ins><span class="cx"> return ASCIILiteral("true");
</span><del>- if (equalIgnoringCase(value, "false"))
</del><ins>+ case ContentEditableType::False:
</ins><span class="cx"> return ASCIILiteral("false");
</span><del>- if (equalIgnoringCase(value, "plaintext-only"))
</del><ins>+ case ContentEditableType::PlaintextOnly:
</ins><span class="cx"> return ASCIILiteral("plaintext-only");
</span><del>-
</del><ins>+ }
</ins><span class="cx"> return ASCIILiteral("inherit");
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLElement.h (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLElement.h 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/html/HTMLElement.h 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -111,6 +111,7 @@
</span><span class="cx"> void applyAlignmentAttributeToStyle(const AtomicString&, MutableStyleProperties&);
</span><span class="cx"> void applyBorderAttributeToStyle(const AtomicString&, MutableStyleProperties&);
</span><span class="cx">
</span><ins>+ virtual bool matchesReadWritePseudoClass() const;
</ins><span class="cx"> virtual void parseAttribute(const QualifiedName&, const AtomicString&) override;
</span><span class="cx"> virtual bool isPresentationAttribute(const QualifiedName&) const override;
</span><span class="cx"> virtual void collectStyleForPresentationAttribute(const QualifiedName&, const AtomicString&, MutableStyleProperties&) override;
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLFormControlElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLFormControlElement.cpp (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLFormControlElement.cpp 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/html/HTMLFormControlElement.cpp 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -162,8 +162,6 @@
</span><span class="cx"> {
</span><span class="cx"> setNeedsWillValidateCheck();
</span><span class="cx"> setNeedsStyleRecalc();
</span><del>- if (renderer() && renderer()->style().hasAppearance())
- renderer()->theme().stateChanged(*renderer(), ControlStates::ReadOnlyState);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void HTMLFormControlElement::requiredAttributeChanged()
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformControlStatesh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/ControlStates.h (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/ControlStates.h 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/platform/ControlStates.h 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -45,11 +45,10 @@
</span><span class="cx"> FocusState = 1 << 2,
</span><span class="cx"> EnabledState = 1 << 3,
</span><span class="cx"> CheckedState = 1 << 4,
</span><del>- ReadOnlyState = 1 << 5,
- DefaultState = 1 << 6,
- WindowInactiveState = 1 << 7,
- IndeterminateState = 1 << 8,
- SpinUpState = 1 << 9, // Sub-state for HoverState and PressedState.
</del><ins>+ DefaultState = 1 << 5,
+ WindowInactiveState = 1 << 6,
+ IndeterminateState = 1 << 7,
+ SpinUpState = 1 << 8, // Sub-state for HoverState and PressedState.
</ins><span class="cx"> AllStates = 0xffffffff
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformmacThemeMacmm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/mac/ThemeMac.mm (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/mac/ThemeMac.mm 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/platform/mac/ThemeMac.mm 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -243,12 +243,10 @@
</span><span class="cx"> {
</span><span class="cx"> ControlStates::States states = controlStates->states();
</span><span class="cx">
</span><del>- if (states & ControlStates::ReadOnlyState)
- return kThemeStateUnavailableInactive;
</del><span class="cx"> if (!(states & ControlStates::EnabledState))
</span><span class="cx"> return kThemeStateUnavailableInactive;
</span><span class="cx">
</span><del>- // Do not process PressedState if !EnabledState or ReadOnlyState.
</del><ins>+ // Do not process PressedState if !EnabledState.
</ins><span class="cx"> if (states & ControlStates::PressedState) {
</span><span class="cx"> if (kind == kThemeIncDecButton || kind == kThemeIncDecButtonSmall || kind == kThemeIncDecButtonMini)
</span><span class="cx"> return states & ControlStates::SpinUpState ? kThemeStatePressedUp : kThemeStatePressedDown;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderThemecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (173440 => 173441)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2014-09-09 20:56:55 UTC (rev 173440)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2014-09-09 21:03:29 UTC (rev 173441)
</span><span class="lines">@@ -752,8 +752,6 @@
</span><span class="cx"> states |= ControlStates::EnabledState;
</span><span class="cx"> if (isChecked(o))
</span><span class="cx"> states |= ControlStates::CheckedState;
</span><del>- if (isReadOnlyControl(o))
- states |= ControlStates::ReadOnlyState;
</del><span class="cx"> if (isDefault(o))
</span><span class="cx"> states |= ControlStates::DefaultState;
</span><span class="cx"> if (!isActive(o))
</span><span class="lines">@@ -845,7 +843,7 @@
</span><span class="cx"> bool RenderTheme::isReadOnlyControl(const RenderObject& o) const
</span><span class="cx"> {
</span><span class="cx"> Node* node = o.node();
</span><del>- if (!node || !node->isElementNode())
</del><ins>+ if (!node || !node->isElementNode() || !toElement(node)->isFormControlElement())
</ins><span class="cx"> return false;
</span><span class="cx"> return !toElement(node)->matchesReadWritePseudoClass();
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>