Skip to content
Permalink
Browse files
[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
  • Loading branch information
kyungtae committed Nov 2, 2014
1 parent 5b3d36b commit 328258f5f8fe843641c37acd67bc4d54529b027d
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 0 deletions.
@@ -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
@@ -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

@@ -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>
@@ -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

@@ -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>

0 comments on commit 328258f

Please sign in to comment.