Skip to content
This repository was archived by the owner on Dec 18, 2018. It is now read-only.

Commit 3d8594a

Browse files
rhauckrhauck
committed
Merge pull request #109 from mibalan/contentEditable
[merge] [css3-regions] (Smoke) tests for regions and contentEditable The CSS test repo has recently undergone a big reorganization. We're taking care of all of the open PRs created previously from the old directory structure, merging them in as unreviewed, moving them to the correct new locations, and marking them unreviewed in Shepherd. Full details of this are explained here: http://lists.w3.org/Archives/Public/public-css-testsuite/2014Jun/0023.html.
2 parents bb6ffad + 83798a9 commit 3d8594a

24 files changed

Lines changed: 1413 additions & 0 deletions

‎contributors/adobe/submitted/regions/contentEditable/contentEditable-001.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Regions: named flow content has contentEditable attribute set</title>
5+
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
6+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
7+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
8+
<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
9+
<meta name="flags" content="dom interact">
10+
<meta name="assert" content="Test checks that setting the contentEditable attribute on
11+
elements that get flowed in a region does not affect their rendering in the regions. Also,
12+
such elements should be editable just as they are outside of the region.">
13+
<link rel="match" href="reference/contentEditable-001-ref.html">
14+
<link rel="stylesheet" href="support/common.css">
15+
<style>
16+
.content {
17+
flow-into: flow;
18+
font-family: Times, serif;
19+
font-size: 20px;
20+
line-height: 1em;
21+
}
22+
.region {
23+
flow-from: flow;
24+
width: 300px;
25+
height: 300px;
26+
border: 2px solid black;
27+
}
28+
.region p {
29+
width: 100%;
30+
height: 50%;
31+
background-color: red;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<ol>
37+
<li>Below you should see a square with a black border with some text inside it. No red
38+
should be visible at any time during this test.</li>
39+
<li>Click between the two colored markers (green and blue) and type &ldquo;<strong>foobar
40+
bazquux</strong>&rdquo;</li>
41+
<li>Test passes if the text you typed is displayed at the cursor position between the
42+
two markers and the lines of text wrap inside the black border.</li>
43+
</ol>
44+
<p contentEditable="true" class="content">This is some text content. It contains two colored
45+
markers: <span class="inline-marker green"></span> <span id="marked">and</span> <span class="inline-marker blue"></span>.<br>
46+
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
47+
48+
<div class="region">
49+
<p>&nbsp;</p>
50+
</div>
51+
52+
<script type="text/javascript" src="support/helpers.js"></script>
53+
<script type="text/javascript">
54+
insertText("#marked", "foobar bazquux");
55+
</script>
56+
</body>
57+
</html>

‎contributors/adobe/submitted/regions/contentEditable/contentEditable-002.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Regions: named flow content has a child with contentEditable attribute set</title>
5+
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
6+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
7+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
8+
<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
9+
<meta name="flags" content="dom interact">
10+
<meta name="assert" content="Test checks that setting the contentEditable attribute on
11+
elements that get flowed in a region does not affect their rendering in the regions. Also,
12+
such elements should be editable just as they are outside of the region, even if they are
13+
not the only elements in the named flow.">
14+
<link rel="match" href="reference/contentEditable-002-ref.html">
15+
<link rel="stylesheet" href="support/common.css">
16+
<style>
17+
.content {
18+
flow-into: flow;
19+
font-family: Times, serif;
20+
font-size: 20px;
21+
line-height: 1em;
22+
}
23+
.region {
24+
flow-from: flow;
25+
width: 300px;
26+
height: 300px;
27+
border: 2px solid black;
28+
}
29+
.region p {
30+
width: 100%;
31+
height: 50%;
32+
background-color: red;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<ol>
38+
<li>Below you should see a square with a black border with some text inside it. No red
39+
should be visible at any time during this test.</li>
40+
<li>Click between the two gray markers and type &ldquo;<strong>foobar bazquux</strong>&rdquo;
41+
<ul>
42+
<li>No (new) text should appear between the gray markers</li>
43+
</ul>
44+
</li>
45+
<li>Click between the two colored markers (green and blue) and type &ldquo;<strong>foobar
46+
bazquux</strong>&rdquo;
47+
<ul>
48+
<li>The text you typed is displayed at the cursor position between the
49+
two markers and the lines of text wrap inside the black border</li>
50+
</ul>
51+
</li>
52+
</ol>
53+
<div class="content">This is some text that must not be editable. Not even the text between
54+
<em><span class="inline-marker gray"></span> <span id="marked-inactive">these two markers</span>
55+
<span class="inline-marker gray"></span>.</em>
56+
<div contentEditable="true">
57+
However, this text <em><span class="inline-marker green"></span> <span id="marked-active">
58+
between these colored markers</span> <span class="inline-marker blue"></span></em>
59+
should be editable.
60+
</div>
61+
And another non-editable text.
62+
</div>
63+
<div class="region">
64+
<p>&nbsp;</p>
65+
</div>
66+
<script type="text/javascript" src="support/helpers.js"></script>
67+
<script type="text/javascript">
68+
insertText("#marked-inactive", "foobar bazquux");
69+
insertText("#marked-active", "foobar bazquux");
70+
</script>
71+
</body>
72+
</html>

‎contributors/adobe/submitted/regions/contentEditable/contentEditable-003.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Regions: named flow content is child of an element that has contentEditable attribute set</title>
5+
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
6+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
7+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
8+
<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
9+
<meta name="flags" content="dom interact">
10+
<meta name="assert" content="Test checks that setting the contentEditable attribute on the
11+
parent of an element that gets flowed in a region does not affect its rendering in the regions.
12+
Also, the element should be editable outside and inside the region without differences.">
13+
<link rel="match" href="reference/contentEditable-003-ref.html">
14+
<link rel="stylesheet" href="support/common.css">
15+
<style>
16+
.flowed {
17+
flow-into: flow;
18+
}
19+
.content {
20+
font-family: Times, serif;
21+
font-size: 20px;
22+
line-height: 1em;
23+
}
24+
.container {
25+
width: 300px;
26+
height: 200px;
27+
border: 2px solid blue;
28+
}
29+
.region {
30+
flow-from: flow;
31+
width: 300px;
32+
height: 200px;
33+
border: 2px solid black;
34+
margin: 0.5em 0 0.5em 0;
35+
}
36+
.region > p {
37+
background-color: red;
38+
width: 100%;
39+
height: 50%;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<ol>
45+
<li>Below you should see a rectangle with a blue border with some text inside it and below
46+
it a rectangle with a black border with some text inside it. No red should be visible
47+
at any time during this test.</li>
48+
<li>Click between the two colored markers (green and blue) inside the blue rectangle and
49+
type &ldquo;<strong>foobar bazquux</strong>&rdquo;
50+
<ul>
51+
<li>The text you typed is displayed at the cursor position between the
52+
two markers and the lines of text wrap inside the blue border</li>
53+
</ul>
54+
</li>
55+
<li>Click between the two colored markers (green and blue) inside the black rectangle and
56+
type &ldquo;<strong>foobar bazquux</strong>&rdquo;
57+
<ul>
58+
<li>The text you typed is displayed at the cursor position between the
59+
two markers and the lines of text wrap inside the black border</li>
60+
</ul>
61+
</li>
62+
</ol>
63+
<div class="container">
64+
<div class="content" contentEditable="true">
65+
<!-- On a single line since new lines in contentEditable elements are messy :( -->
66+
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-out">these two markers</span> <span class="inline-marker blue"></span></em>.
67+
68+
<div class="flowed">
69+
<!-- On a single line since new lines in contentEditable elements are messy :( -->
70+
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-in">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="region">
76+
<p>&nbsp;</p>
77+
</div>
78+
79+
<script type="text/javascript" src="support/helpers.js"></script>
80+
<script type="text/javascript">
81+
insertText("#marked-out", "foobar bazquux");
82+
insertText("#marked-in", "foobar bazquux");
83+
</script>
84+
</body>
85+
</html>

‎contributors/adobe/submitted/regions/contentEditable/contentEditable-004.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Regions: element has contentEditable attribute set and both it and a child of it are
5+
flowed in a the same region</title>
6+
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
7+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
8+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
9+
<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
10+
<meta name="flags" content="dom interact">
11+
<meta name="assert" content="Test checks that flowing both and element and one of its
12+
children in a region, when said element has the contentEditable attribute set does not
13+
affect their rendering in the regions and the ability to edit it.">
14+
<link rel="match" href="reference/contentEditable-004-ref.html">
15+
<link rel="stylesheet" href="support/common.css">
16+
<style>
17+
.flowed {
18+
flow-into: flow;
19+
}
20+
.content {
21+
font-family: Times, serif;
22+
font-size: 20px;
23+
line-height: 1em;
24+
}
25+
.region {
26+
flow-from: flow;
27+
width: 300px;
28+
height: 200px;
29+
border: 2px solid black;
30+
margin: 0.5em 0 0.5em 0;
31+
}
32+
.region > p {
33+
background-color: red;
34+
width: 100%;
35+
height: 50%;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<ol>
41+
<li>Below you should see a rectangle with a black border with some text inside it. No
42+
red should be visible at any time during this test.</li>
43+
<li>Click between the first pair of green and blue colored markers and type
44+
&ldquo;<strong>foobar bazquux</strong>&rdquo;
45+
<ul>
46+
<li>The text you typed is displayed at the cursor position between the
47+
two markers and the lines of text wrap inside the black border</li>
48+
</ul>
49+
</li>
50+
<li>Click between the second pair of green and blue colored markers and type
51+
&ldquo;<strong>foobar bazquux</strong>&rdquo;
52+
<ul>
53+
<li>The text you typed is displayed at the cursor position between the
54+
two markers and the lines of text wrap inside the black border</li>
55+
</ul>
56+
</li>
57+
</ol>
58+
<div class="content flowed" contentEditable="true">
59+
First line of editable content.<br>
60+
<div class="flowed">
61+
<!-- On a single line since new lines in contentEditable elements are messy :( -->
62+
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-child">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
63+
</div>
64+
65+
<!-- On a single line since new lines in contentEditable elements are messy :( -->
66+
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-parent">these two markers</span> <span class="inline-marker blue"></span></em>.
67+
</div>
68+
69+
<div class="region">
70+
<p>&nbsp;</p>
71+
</div>
72+
73+
<script type="text/javascript" src="support/helpers.js"></script>
74+
<script type="text/javascript">
75+
insertText("#marked-parent", "foobar bazquux");
76+
insertText("#marked-child", "foobar bazquux");
77+
</script>
78+
</body>
79+
</html>

‎contributors/adobe/submitted/regions/contentEditable/contentEditable-005.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Regions: named flow content has contentEditable attribute set and is fragmented</title>
5+
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
6+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
7+
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
8+
<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
9+
<meta name="flags" content="dom interact">
10+
<meta name="assert" content="Test checks that setting the contentEditable attribute on
11+
elements that get flowed in a region does not affect their rendering and the ability to edit
12+
them even when they get fragmented in multiple regions.">
13+
<link rel="match" href="reference/contentEditable-005-ref.html">
14+
<link rel="stylesheet" href="support/common.css">
15+
<style>
16+
.flowed {
17+
flow-into: flow;
18+
}
19+
.content {
20+
font-family: Times, serif;
21+
font-size: 20px;
22+
line-height: 1em;
23+
}
24+
.region {
25+
flow-from: flow;
26+
width: 300px;
27+
height: 75px;
28+
border: 2px solid black;
29+
margin: 0.5em 0 0.5em 0;
30+
}
31+
.region > p {
32+
background-color: red;
33+
width: 100%;
34+
height: 50%;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<ol>
40+
<li>Below you should see a rectangle with a black border with some text inside it. No
41+
red should be visible at any time during this test.</li>
42+
<li>Click between the first pair of green and blue colored markers and type
43+
&ldquo;<strong>foobar bazquux</strong>&rdquo;
44+
<ul>
45+
<li>The text you typed is displayed at the cursor position between the
46+
two markers and the lines of text wrap inside the black border</li>
47+
</ul>
48+
</li>
49+
<li>Click between the second pair of green and blue colored markers and type
50+
&ldquo;<strong>foobar bazquux</strong>&rdquo;
51+
<ul>
52+
<li>The text you typed is displayed at the cursor position between the
53+
two markers and the lines of text wrap inside the black border</li>
54+
</ul>
55+
</li>
56+
</ol>
57+
<div class="content flowed" contentEditable="true">
58+
<!-- On a single line since new lines in contentEditable elements are messy :( -->
59+
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.<br>
60+
61+
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">between these colored markers</span> <span class="inline-marker blue"></span></em> should be editable.
62+
</div>
63+
64+
<div class="region">
65+
<p>&nbsp;</p>
66+
</div>
67+
<div class="region">
68+
<p>&nbsp;</p>
69+
</div>
70+
71+
<script type="text/javascript" src="support/helpers.js"></script>
72+
<script type="text/javascript">
73+
insertText("#marked-one", "foobar bazquux");
74+
insertText("#marked-two", "foobar bazquux");
75+
</script>
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)