[CSS] Add tests for :read-only and :read-write

https://bugs.webkit.org/show_bug.cgi?id=92473 Add test case for :readonly and :readwrite pseudoclass for common elements Reviewed by Benjamin Poulain. * fast/css/readonly-pseudoclass-common-element-expected.txt: Added. * fast/css/readonly-pseudoclass-common-element.html: Added. * fast/css/readwrite-pseudoclass-editable-expected.txt: Added. * fast/css/readwrite-pseudoclass-editable.html: Added. Canonical link: https://commits.webkit.org/156132@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@175461 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Nov 2, 2014 · 328258f5f8fe843641c37acd67bc4d54529b027d · 328258f
1 parent 5b3d36b
commit 328258f5f8fe843641c37acd67bc4d54529b027d
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 0 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,17 @@
+2014-11-01  KyungTae Kim  <ktf.kim@samsung.com>
+
+        [CSS] Add tests for :read-only and :read-write
+        https://bugs.webkit.org/show_bug.cgi?id=92473
+
+        Add test case for :readonly and :readwrite pseudoclass for common elements
+
+        Reviewed by Benjamin Poulain.
+
+        * fast/css/readonly-pseudoclass-common-element-expected.txt: Added.
+        * fast/css/readonly-pseudoclass-common-element.html: Added.
+        * fast/css/readwrite-pseudoclass-editable-expected.txt: Added.
+        * fast/css/readwrite-pseudoclass-editable.html: Added.
+
 2014-11-01  Alexey Proskuryakov  <ap@apple.com>
 
         REGRESSION: Using a media element changes window.name

diff --git a/LayoutTests/fast/css/readonly-pseudoclass-common-element-expected.txt b/LayoutTests/fast/css/readonly-pseudoclass-common-element-expected.txt
@@ -0,0 +1,28 @@
+Tests read-only pseudo-class properties are applied to not user-alterable elements
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS backgroundColor('readwrite1') is not "rgb(255, 0, 0)"
+PASS backgroundColor('readwrite2') is not "rgb(255, 0, 0)"
+PASS backgroundColor('readwrite3') is not "rgb(255, 0, 0)"
+PASS backgroundColor('body') is "rgb(255, 0, 0)"
+PASS backgroundColor('inside-readwrite1') is not "rgb(255, 0, 0)"
+PASS backgroundColor('readonly2') is "rgb(255, 0, 0)"
+PASS backgroundColor('readonly3') is "rgb(255, 0, 0)"
+PASS backgroundColor('readonly4') is "rgb(255, 0, 0)"
+PASS backgroundColor('readonly5') is "rgb(255, 0, 0)"
+PASS backgroundColor('svg') is "rgb(255, 0, 0)"
+PASS backgroundColor('svg_path') is "rgb(255, 0, 0)"
+PASS backgroundColor('svg_contenteditable') is "rgb(255, 0, 0)"
+PASS backgroundColor('mathml') is "rgb(255, 0, 0)"
+PASS backgroundColor('mathml_msup') is "rgb(255, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
+x
+2
+0
+
diff --git a/LayoutTests/fast/css/readonly-pseudoclass-common-element.html b/LayoutTests/fast/css/readonly-pseudoclass-common-element.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="../../resources/js-test-pre.js"></script>
+        <style>
+            :read-only {
+                background-color: red;
+            }
+        </style>
+    </head>
+    <body id="body">
+        <div id="readwrite1" contenteditable>
+            <div id="inside-readwrite1"></div>
+            <input type="text" readonly id="readonly2"/>
+        </div>
+        <p id="readonly3" contenteditable="false"></p>
+        <span id="readonly4">
+            <textarea type="text" readonly id="readonly5"></textarea>
+            <input type="text" id="readwrite2"/>
+            <textarea type="text" id="readwrite3"></textarea>
+        </span>
+        <svg id="svg" height="210" width="250">
+          <path id="svg_path" d="M150 0 L75 200 L225 200 Z"/>
+        </svg>
+        <svg id="svg_contenteditable" height="210" width="250" contenteditable>
+          <path d="M150 0 L75 200 L225 200 Z"/>
+        </svg>
+        <math id="mathml" xmlns="http://www.w3.org/1998/Math/MathML">
+          <mrow>
+              <msup id="mathml_msup"><mi>x</mi><mn>2</mn></msup>
+              <mo>=</mo><mn>0</mn>
+          </mrow>
+        </math>
+
+        <script>
+            function backgroundColor(identifier) { return getComputedStyle(document.getElementById(identifier)).getPropertyValue("background-color"); }
+            var readOnlyColor = "rgb(255, 0, 0)";
+
+            description('Tests read-only pseudo-class properties are applied to not user-alterable elements');
+            shouldNotBeEqualToString("backgroundColor('readwrite1')", readOnlyColor);
+            shouldNotBeEqualToString("backgroundColor('readwrite2')", readOnlyColor);
+            shouldNotBeEqualToString("backgroundColor('readwrite3')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('body')", readOnlyColor);
+            shouldNotBeEqualToString("backgroundColor('inside-readwrite1')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('readonly2')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('readonly3')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('readonly4')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('readonly5')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('svg')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('svg_path')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('svg_contenteditable')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('mathml')", readOnlyColor);
+            shouldBeEqualToString("backgroundColor('mathml_msup')", readOnlyColor);
+        </script>
+        <script src="../../resources/js-test-post.js"></script>
+    </body>
+</html>
diff --git a/LayoutTests/fast/css/readwrite-pseudoclass-editable-expected.txt b/LayoutTests/fast/css/readwrite-pseudoclass-editable-expected.txt
@@ -0,0 +1,27 @@
+Tests read-write pseudo-class properties are applied to editable elements and not to non-editable elements
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS backgroundColor('editable1') is "rgb(255, 0, 0)"
+PASS backgroundColor('editable2') is "rgb(255, 0, 0)"
+PASS backgroundColor('editable3') is "rgb(255, 0, 0)"
+PASS backgroundColor('editable4') is "rgb(255, 0, 0)"
+PASS backgroundColor('div_in_editable') is "rgb(255, 0, 0)"
+PASS backgroundColor('readonly_in_editable') is not "rgb(255, 0, 0)"
+PASS backgroundColor('disabled_in_editable') is not "rgb(255, 0, 0)"
+PASS backgroundColor('non_editable') is not "rgb(255, 0, 0)"
+PASS backgroundColor('svg') is not "rgb(255, 0, 0)"
+PASS backgroundColor('svg_path') is not "rgb(255, 0, 0)"
+PASS backgroundColor('svg_contenteditable') is not "rgb(255, 0, 0)"
+PASS backgroundColor('mathml') is not "rgb(255, 0, 0)"
+PASS backgroundColor('mathml_msup') is not "rgb(255, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
+x
+2
+0
+
diff --git a/LayoutTests/fast/css/readwrite-pseudoclass-editable.html b/LayoutTests/fast/css/readwrite-pseudoclass-editable.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="../../resources/js-test-pre.js"></script>
+        <style>
+            :read-write {
+                background-color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="editable1" contenteditable>
+            <div id="div_in_editable"></div>
+            <input type="text" readonly id="readonly_in_editable"/>
+            <input type="text" disabled id="disabled_in_editable"/>
+        </div>
+        <p id="editable2" contenteditable="true"></p>
+        <span id="editable3" contenteditable="plaintext-only"></span>
+        <h1 id="editable4" contenteditable=""></h1>
+        <h2 id="non_editable" contenteditable="false"></h2>
+        <svg id="svg" height="210" width="400">
+          <path id="svg_path" d="M150 0 L75 200 L225 200 Z" />
+        </svg>
+        <svg id="svg_contenteditable" height="210" width="250" contenteditable>
+          <path d="M150 0 L75 200 L225 200 Z"/>
+        </svg>
+        <math id="mathml" xmlns="http://www.w3.org/1998/Math/MathML">
+          <mrow>
+              <msup id="mathml_msup"><mi>x</mi><mn>2</mn></msup>
+              <mo>=</mo><mn>0</mn>
+          </mrow>
+        </math>
+        <script>
+            function backgroundColor(identifier) { return getComputedStyle(document.getElementById(identifier)).getPropertyValue("background-color"); }
+            var readWriteColor = "rgb(255, 0, 0)";
+
+            description('Tests read-write pseudo-class properties are applied to editable elements and not to non-editable elements');
+
+            shouldBeEqualToString("backgroundColor('editable1')", readWriteColor);
+            shouldBeEqualToString("backgroundColor('editable2')", readWriteColor);
+            shouldBeEqualToString("backgroundColor('editable3')", readWriteColor);
+            shouldBeEqualToString("backgroundColor('editable4')", readWriteColor);
+            shouldBeEqualToString("backgroundColor('div_in_editable')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('readonly_in_editable')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('disabled_in_editable')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('non_editable')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('svg')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('svg_path')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('svg_contenteditable')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('mathml')", readWriteColor);
+            shouldNotBeEqualToString("backgroundColor('mathml_msup')", readWriteColor);
+        </script>
+        <script src="../../resources/js-test-post.js"></script>
+    </body>
+</html>