mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -37,7 +37,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
xxxxx<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
|
|
@ -39,4 +39,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a continuous run of text over a cube (with blue, teal and purple sides) and no red.</p>
|
||||
|
||||
|
||||
<div class="flow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, veniam, dolorum earum molestias iusto corrupti quaerat unde. Nihil, ex, architecto enim doloremque amet ipsa distinctio quibusdam iste eveniet minima quisquam.</div>
|
||||
<div id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
|
|
@ -43,4 +43,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<p contenteditable="true" class="content">This is some text content. It contains two colored
|
||||
markers: <span class="inline-marker green"></span> <span id="marked">and</span> <span class="inline-marker blue"></span>.<br>
|
||||
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
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>.
|
||||
|
||||
|
||||
<div class="flowed">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="help">
|
||||
<meta content="dom interact" name="flags">
|
||||
<meta content="Test checks that flowing both and element and one of its
|
||||
<meta content="Test checks that flowing both and element and one of its
|
||||
children in a region, when said element has the contentEditable attribute set does not
|
||||
affect their rendering in the regions and the ability to edit it." name="assert">
|
||||
<link href="reference/contentEditable-004-ref.htm" rel="match">
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
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>.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@
|
|||
<div contenteditable="true" class="content flowed">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
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>
|
||||
|
||||
|
||||
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.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,10 +60,10 @@
|
|||
<div contenteditable="true" class="content flowed">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
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>
|
||||
|
||||
|
||||
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.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
in the black rectangle. The expected results are the same as for the previous step.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div contenteditable="true" id="editable">
|
||||
<p>
|
||||
This text should be displayed outside of the black border and <span id="marked-outside">editable</span>.
|
||||
|
|
@ -62,11 +62,11 @@
|
|||
This text should be displayed inside the black border and it should also be <span id="marked-inside">editable</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="support/helpers.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@
|
|||
</ol>
|
||||
<div class="content flowed">
|
||||
This is some text that should not be editable. Not 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>.
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
|
||||
<p> </p>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<script type="text/javascript">
|
||||
insertText("#marked-one", "foobar bazquux");
|
||||
insertText("#marked-two", "foobar bazquux");
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -48,9 +48,9 @@
|
|||
</ol>
|
||||
<div class="content flowed">
|
||||
This is some text that should not be editable. Not 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>.
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p contenteditable="true">
|
||||
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<script type="text/javascript">
|
||||
insertText("#marked-one", "foobar bazquux");
|
||||
insertText("#marked-two", "foobar bazquux");
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
Not 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>.
|
||||
</div>
|
||||
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
|
||||
<p> </p>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<script type="text/javascript">
|
||||
insertText("#marked-one", "foobar bazquux");
|
||||
insertText("#marked-two", "foobar bazquux");
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<div contenteditable="true" class="content flowed">
|
||||
This is some text that should be editable. Just like the <em><span class="inline-marker green"></span> <span id="marked-one">editable</span> <span class="inline-marker blue"></span></em> text between these markers.
|
||||
</div>
|
||||
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
<p>
|
||||
This is some editable text that you should not be able to see, with <span class="inline-marker green"></span> <span id="marked-two">colored markers</span> <span class="inline-marker blue"></span>.
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<script type="text/javascript">
|
||||
insertText("#marked-one", "foobar bazquux");
|
||||
insertText("#marked-two", "foobar bazquux");
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</p>
|
||||
|
||||
|
||||
<div contenteditable="true" class="container">
|
||||
<span class="inline-marker blue">+</span>
|
||||
<div class="region">
|
||||
|
|
|
|||
|
|
@ -39,10 +39,11 @@
|
|||
<li>The blue square should turn green</li>
|
||||
</ol>
|
||||
<div id="source">
|
||||
|
||||
|
||||
</div>
|
||||
<div id="region" class="region">
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
background-color: red;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
|
||||
#parent:hover {
|
||||
background-color: lime;
|
||||
}
|
||||
|
|
@ -71,4 +71,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
}
|
||||
|
||||
var zeroAttributes = [
|
||||
["div", "offsetTop"],
|
||||
["div", "offsetTop"],
|
||||
["div", "offsetLeft"],
|
||||
["div", "offsetWidth"],
|
||||
["div", "offsetHeight"],
|
||||
["img", "offsetTop"],
|
||||
["img", "offsetTop"],
|
||||
["img", "offsetLeft"],
|
||||
["img", "offsetWidth"],
|
||||
["img", "offsetHeight"],
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
element.style.setProperty("flow-into", "named-flow");
|
||||
var clientRectList = element.getClientRects();
|
||||
document.body.removeChild(element);
|
||||
return clientRectList;
|
||||
return clientRectList;
|
||||
}
|
||||
|
||||
function testGetBoundingClientRect() {
|
||||
|
|
@ -68,26 +68,26 @@
|
|||
var domRect = element.getBoundingClientRect();
|
||||
document.body.removeChild(element);
|
||||
return [
|
||||
domRect.x,
|
||||
domRect.y,
|
||||
domRect.width,
|
||||
domRect.x,
|
||||
domRect.y,
|
||||
domRect.width,
|
||||
domRect.height
|
||||
];
|
||||
];
|
||||
}
|
||||
|
||||
zeroAttributes.forEach(function(name) {
|
||||
test (function() { assert_equals(testZeroAttribute(name[0], name[1]), 0)},
|
||||
"test " + name[1] + " for " + name[0])
|
||||
test (function() { assert_equals(testZeroAttribute(name[0], name[1]), 0)},
|
||||
"test " + name[1] + " for " + name[0])
|
||||
}
|
||||
);
|
||||
|
||||
test (function() { assert_equals(testOffsetParent(), null)},
|
||||
test (function() { assert_equals(testOffsetParent(), null)},
|
||||
"test that offsetParent is null");
|
||||
|
||||
test (function() { assert_equals(testGetClientRects().length, 0)},
|
||||
test (function() { assert_equals(testGetClientRects().length, 0)},
|
||||
"test that getClientRects() returns an empty list");
|
||||
|
||||
test (function() { assert_equals(testGetBoundingClientRect(), [0,0,0,0])},
|
||||
test (function() { assert_equals(testGetBoundingClientRect(), [0,0,0,0])},
|
||||
"test that getBoundingClientRect() returns a zeroed-out DOMRect");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
result = {
|
||||
top : regionBox.top + elemBox.height/2,
|
||||
left : regionBox.left + elemBox.width/2
|
||||
|
||||
|
||||
};
|
||||
|
||||
if (elem.around) {
|
||||
|
|
@ -122,4 +122,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,14 +8,14 @@
|
|||
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow." name="assert">
|
||||
<link href="reference/extract-list-items-003-ref.htm" rel="match">
|
||||
<style>
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-2 ol {
|
||||
color: blue;
|
||||
}
|
||||
#outer-ordered-2 ol ol {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
#outer-ordered-1 > li {
|
||||
flow-into: f1;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
#r2 {
|
||||
flow-from: f2;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
|
|
@ -78,4 +78,5 @@
|
|||
</ol>
|
||||
<div id="r2" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
#r2 {
|
||||
flow-from: f2;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
|
|
@ -79,4 +79,5 @@
|
|||
</ul>
|
||||
<div id="r2" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
#r1 {
|
||||
flow-from: f1;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
|
|
@ -60,4 +60,5 @@
|
|||
</ol>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
#r2 {
|
||||
flow-from: f2;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
|
|
@ -64,4 +64,5 @@
|
|||
</ul>
|
||||
<div id="r2" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
#r1 {
|
||||
flow-from: f1;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
</ol>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
in the normal document flow while others are rendered in a region. Both the items that remain
|
||||
in the normal flow and items in the named flow should preserve their number/marks just as regions
|
||||
were not applied at all. -->
|
||||
|
|
@ -74,4 +74,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
in the normal document flow while others are rendered in a region. Pseudo-elements are used
|
||||
to format the extracted list items. Things like children counting should not be affected by
|
||||
the items being extracted in the named flow. -->
|
||||
|
|
@ -72,4 +72,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
in the normal document flow while others are rendered in a region. Pseudo-elements are used
|
||||
to extract the list items and format them. -->
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
|
||||
|
|
@ -67,4 +67,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
<!-- Individual list items are extracted from ordered/unordered lists. Some of them remain
|
||||
in the normal document flow while others are rendered in a region.
|
||||
Pseudo-elements are used to extract the list items and then, other, equivalent
|
||||
pseudo-elements are used to format them. -->
|
||||
|
|
@ -75,4 +75,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<p>Test passes if you see two rectangles, one green and one blue, as described below. Except where noted, all list items should be rendered on two lines.<br>
|
||||
The green rectangle should contain three lists, separated by a small vertical space, each with two items. The <strong>first list</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second list</strong> should use a square-shaped bullet and the text on the second line should not come under the bullet. The <strong>third list</strong> should be numbered with roman numerals starting with 20 (XX) and the text on the second line should start below the number.<br>
|
||||
The blue rectangle should contain a list with items numbered/marked in different ways, as follows. The <strong>first item</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second item</strong> should use a square-shaped bullet and the bullet should be outside of the blue rectangle. The <strong>third and fourth items</strong> should be one-line and numbered with letters A and B respectively. The third item should be indented while the fourth item should have the number outside the blue rectangle. The <strong>fifth item</strong> should be numbered with the roman numeral 22 (XXII) and the text on the second line should start below the number.</p>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<ul id="first">
|
||||
<li>Custom bullet list, item 1<br><em>Another line of text here</em></li>
|
||||
|
|
@ -85,4 +85,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<p>Test passes if you see two rectangles, one green and one blue, as described below.</p>
|
||||
<p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p>
|
||||
<p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<ul class="ordered">
|
||||
<li class="extract">Ordered list, item a</li>
|
||||
|
|
@ -62,4 +62,5 @@
|
|||
</div>
|
||||
<div id="r1" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<li>List 2-1, item 1</li>
|
||||
<li>List 2-1, item 2</li>
|
||||
</ol>
|
||||
<ol id="list22">
|
||||
<ol id="list22">
|
||||
<li>List 2-2, item 1</li>
|
||||
<li>List 2-2, item 2</li>
|
||||
</ol>
|
||||
|
|
@ -87,4 +87,5 @@
|
|||
<div id="region2" class="region"></div>
|
||||
<div id="region3" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
</ol>
|
||||
<ol class="double" id="list21">
|
||||
<li>List 2-1, item B</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item F</li>
|
||||
</ol>
|
||||
<ol start="4" class="double" id="list22">
|
||||
|
|
@ -112,4 +112,5 @@
|
|||
<div id="region2" class="region"></div>
|
||||
<div id="region3" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
ol.chapter>li::after {
|
||||
content: "\2026\ " counter(chapter, decimal);
|
||||
}
|
||||
|
||||
|
||||
ol.section {
|
||||
counter-reset: section 0;
|
||||
}
|
||||
|
|
@ -117,4 +117,5 @@
|
|||
<div id="r1" class="region"></div>
|
||||
<div id="r2" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<li>Unordered list 2-1, item 1</li>
|
||||
<li>Unordered list 2-1, item 2</li>
|
||||
</ul>
|
||||
<ul id="list22">
|
||||
<ul id="list22">
|
||||
<li>Unordered list 2-2, item 1</li>
|
||||
<li>Unordered list 2-2, item 2</li>
|
||||
</ul>
|
||||
|
|
@ -86,4 +86,5 @@
|
|||
<div id="region2" class="region"></div>
|
||||
<div id="region3" class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
Test passes if you see four regularly spaced green squares.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="float green"></div>
|
||||
<div class="float green"></div>
|
||||
<div class="region float"></div>
|
||||
|
|
@ -57,4 +57,5 @@
|
|||
xxxxx
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
Test passes if you see a green square with a thick black outline.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region float"></div>
|
||||
|
||||
<article class="flow">
|
||||
|
|
@ -47,4 +47,5 @@
|
|||
xxxxx
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
wide as the page.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region"></div>
|
||||
|
||||
<article class="flow">
|
||||
|
|
@ -68,4 +68,5 @@
|
|||
xxxxx
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
should be blue and they should be flush to one another.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="sized left region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -72,4 +72,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -83,4 +83,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
clear: left;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -83,4 +83,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -39,10 +39,11 @@
|
|||
</p>
|
||||
<div class="flow">
|
||||
<div class="float"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -45,10 +45,11 @@
|
|||
<div class="flow">
|
||||
<div class="float right"></div>
|
||||
<div class="float left"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -60,10 +60,11 @@
|
|||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
<div class="floater left"></div>
|
||||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
filler text. This is filler text. This is filler text. This is filler text.
|
||||
filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
xxxxxxxxxx
|
||||
xxxxxxxxxx
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -73,4 +73,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -55,10 +55,10 @@
|
|||
xxx
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -66,4 +66,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="Test checks that floats in named flow contents are sized
|
||||
<meta content="Test checks that floats in named flow contents are sized
|
||||
relatively to the region they are laid out in." name="assert">
|
||||
<link href="reference/floats-in-named-flow-006-ref.htm" rel="match">
|
||||
<style>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
xxxxxxxxxx
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -74,4 +74,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -65,4 +65,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -80,4 +80,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -51,11 +51,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region-parent">
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="Test checks that floats flowed in a fixed size region and
|
||||
<meta content="Test checks that floats flowed in a fixed size region and
|
||||
overflowing it do no interact with line boxes outside of the region. This is another
|
||||
side effect of the fact that regions create block formatting contexts." name="assert">
|
||||
<link href="reference/floats-in-named-flow-013-ref.htm" rel="match">
|
||||
|
|
@ -55,10 +55,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="error">zambare</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="Test checks that the painting order for floats flowed in a
|
||||
<meta content="Test checks that the painting order for floats flowed in a
|
||||
region is the same as if the floats were direct children of the region." name="assert">
|
||||
<link href="reference/floats-in-named-flow-013-ref.htm" rel="match">
|
||||
<style>
|
||||
|
|
@ -58,4 +58,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
clear: left;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -81,4 +81,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -75,4 +75,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
.flow {
|
||||
flow-into: f;
|
||||
|
||||
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
|
|
@ -66,4 +66,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
.flow {
|
||||
flow-into: f;
|
||||
|
||||
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
|
|
@ -102,4 +102,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
flow-into: f;
|
||||
color: blue;
|
||||
margin-left: 120px;
|
||||
border: 10px solid lightblue;
|
||||
border: 10px solid lightblue;
|
||||
}
|
||||
|
||||
.float {
|
||||
|
|
@ -67,4 +67,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.break {
|
||||
break-before: region;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
margin: 1em 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
|
|
@ -87,4 +87,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -15,16 +15,16 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.spaced {
|
||||
margin: 1em 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
|
|
@ -85,4 +85,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
margin: 2px 4px 8px 16px;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
flow-from: f;
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br>
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
|
|
@ -83,4 +83,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br>
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
|
|
@ -84,4 +84,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.flow {
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</ul>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
|
|
@ -87,4 +87,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
flow-into: f;
|
||||
}
|
||||
#content:hover p {
|
||||
flow-into: g;
|
||||
flow-into: g;
|
||||
}
|
||||
#region1 {
|
||||
flow-from: f;
|
||||
|
|
@ -60,4 +60,5 @@
|
|||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
color: lightblue;
|
||||
}
|
||||
#content p:first-child:hover + p {
|
||||
flow-into: g;
|
||||
flow-into: g;
|
||||
}
|
||||
#region1 {
|
||||
flow-from: f;
|
||||
|
|
@ -62,4 +62,5 @@
|
|||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
color: lightblue;
|
||||
}
|
||||
#content p:first-child:hover + p {
|
||||
flow-into: none;
|
||||
flow-into: none;
|
||||
}
|
||||
#region {
|
||||
flow-from: f;
|
||||
|
|
@ -57,4 +57,5 @@
|
|||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.source{
|
||||
color: green;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
.region{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
flow-from: block;
|
||||
}
|
||||
.floatLeft{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.sourceWrapper{
|
||||
background-color: lightgreen;
|
||||
|
|
|
|||
|
|
@ -8,19 +8,19 @@
|
|||
<meta content="dom" name="flags">
|
||||
<meta content="Value specified for the flow-into property should be parsed correctly." name="assert">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function testParse(declaration) {
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("style", declaration);
|
||||
return div.style.flowInto;
|
||||
}
|
||||
|
||||
|
||||
function testComputedStyle(value) {
|
||||
var div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
document.body.removeChild(parentDiv);
|
||||
return childFlowComputedValue;
|
||||
}
|
||||
|
||||
test(function() {assert_equals(testParse("flow-into: none"), "none")}, "Test Parse none");
|
||||
|
||||
test(function() {assert_equals(testParse("flow-into: none"), "none")}, "Test Parse none");
|
||||
test(function() {assert_equals(testParse("flow-into: first-flow"), "first-flow")}, "Test Parse first-flow");
|
||||
test(function() {assert_equals(testParse("flow-into: \'first flow\'"), "")}, "Test Parse 'first-flow'");
|
||||
test(function() {assert_equals(testParse("flow-into: ;"), "")}, "Test Parse ;");
|
||||
|
|
@ -64,4 +64,5 @@
|
|||
test(function() {assert_equals(testNotInherited("parent-flow", "child-flow"), "child-flow")}, "Test Non-Inherited parent-flow, child-flow");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<video width="432" loop="" muted="" autoplay="" controls="" height="240">
|
||||
<source src="support/big-buck-bunny-240p.webm" type="video/webm">
|
||||
|
|
@ -56,9 +56,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "video");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<img width="320" alt="A picture of a cat" height="240" src="support/cat.jpg">
|
||||
</div>
|
||||
|
|
@ -52,9 +52,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "img");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<span>
|
||||
xxxxx<br>
|
||||
|
|
@ -64,9 +64,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content span");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<p>
|
||||
xxxxx<br>
|
||||
|
|
@ -63,9 +63,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content p");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<p>
|
||||
xxxxxx<br>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
xxxxxx
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -73,9 +73,10 @@
|
|||
</div>
|
||||
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content p");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content-parent">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
|
|
@ -69,9 +69,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#content-parent");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
|
@ -60,9 +60,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
|
@ -60,9 +60,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</div>
|
||||
|
|
@ -67,9 +67,10 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", "#region");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</ol>
|
||||
<button>Go full screen</button>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<div>
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
|
|
@ -79,9 +79,10 @@
|
|||
</div>
|
||||
|
||||
<div id="fail-marker"></div>
|
||||
|
||||
|
||||
<script>
|
||||
makeFullScreenToggle("button", ".second.region");
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
|
@ -107,14 +107,14 @@
|
|||
applyClasses(".region", [ "middle", "front", "back" ]);
|
||||
|
||||
assert_true(regionsEnabled, "Regions is enabled");
|
||||
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
|
||||
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
|
||||
}, "document.elementFromPoint() for point on region border, with all regions overlapping with non-auto z-index");
|
||||
|
||||
test(function() {
|
||||
applyClasses(".region", [ "right middle", "left front", " center back" ]);
|
||||
|
||||
assert_true(regionsEnabled, "Regions is enabled");
|
||||
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
|
||||
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
|
||||
}, "document.elementFromPoint() for point on region border, with regions partially overlapping with non-auto z-index");
|
||||
|
||||
test(function() {
|
||||
|
|
@ -122,11 +122,12 @@
|
|||
|
||||
assert_true(regionsEnabled, "Regions is enabled");
|
||||
//we're checking the "right middle" region, inside it
|
||||
assert_equals(document.elementFromPoint(180, 210), document.querySelector("#block1"));
|
||||
assert_equals(document.elementFromPoint(180, 210), document.querySelector("#block1"));
|
||||
}, "document.elementFromPoint() for point inside region (effectively, content node), with regions partially overlapping with non-auto z-index");
|
||||
}
|
||||
|
||||
runTests();
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
|
@ -118,4 +118,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
function contentEventHandler(evt) {
|
||||
contentCalls++;
|
||||
|
||||
|
||||
if (contentCalls == 3) {
|
||||
setResult("PASS");
|
||||
finishTest();
|
||||
|
|
@ -125,4 +125,5 @@
|
|||
runScriptedTest();
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<div class="region smallbox" id="region3">
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="" id="result"></div>
|
||||
<script type="text/javascript">
|
||||
var calls = { totalCalls: 0, individualCalls: {} },
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
return function(evt) {
|
||||
calls.totalCalls++;
|
||||
calls.individualCalls[item].calls++;
|
||||
|
||||
|
||||
if (calls.totalCalls == 9) {
|
||||
var pass = true;
|
||||
for (var c in calls.individualCalls) {
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
if (window.testRunner) {
|
||||
testRunner.dumpAsText();
|
||||
testRunner.waitUntilDone();
|
||||
|
||||
|
||||
contentSelectors.forEach(function(item) {
|
||||
testRegion(item);
|
||||
})
|
||||
|
|
@ -196,4 +196,5 @@
|
|||
runScriptedTest(contents);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -92,9 +92,10 @@
|
|||
|
||||
eventSender.mouseMoveTo(10, 40);
|
||||
eventSender.mouseMoveTo(100, 100);
|
||||
|
||||
|
||||
eventSender.mouseUp();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -82,13 +82,13 @@
|
|||
</div>
|
||||
<div id="result"></div>
|
||||
<script type="text/javascript">
|
||||
var events = [ {
|
||||
var events = [ {
|
||||
name: "mouseover",
|
||||
hit: false
|
||||
}, {
|
||||
}, {
|
||||
name: "click",
|
||||
hit: false
|
||||
}, {
|
||||
}, {
|
||||
name: "mouseout",
|
||||
hit: false
|
||||
} ],
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
testRunner.notifyDone();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handlerForEvent(eventName, index) {
|
||||
return function(evt) {
|
||||
if ((evt.target === evt.currentTarget) || (events[index].hit))
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
eventSender.mouseUp();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
events.forEach(function(item, index) {
|
||||
target.addEventListener(item.name, handlerForEvent(item, index));
|
||||
});
|
||||
|
|
@ -155,4 +155,5 @@
|
|||
runScript();
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -111,16 +111,16 @@
|
|||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="result"></div>
|
||||
<script type="text/javascript">
|
||||
var events = [ {
|
||||
var events = [ {
|
||||
name: "mouseover",
|
||||
hit: false
|
||||
}, {
|
||||
}, {
|
||||
name: "click",
|
||||
hit: false
|
||||
}, {
|
||||
}, {
|
||||
name: "mouseout",
|
||||
hit: false
|
||||
} ],
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
testRunner.notifyDone();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handlerForEvent(eventName, index) {
|
||||
return function(evt) {
|
||||
if ((evt.target === evt.currentTarget) || (events[index].hit))
|
||||
|
|
@ -180,11 +180,12 @@
|
|||
eventSender.mouseUp();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
events.forEach(function(item, index) {
|
||||
target.addEventListener(item.name, handlerForEvent(item, index));
|
||||
});
|
||||
runScript();
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br>
|
||||
|
|
@ -34,4 +34,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,11 +18,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -25,11 +25,12 @@
|
|||
<li>Test passes if the text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p contenteditable="true" class="content">This is some text content. It contains two colored
|
||||
markers: <span class="inline-marker green"></span> <span id="marked">foobar bazquux</span> <span class="inline-marker blue"></span>.<br>
|
||||
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<div class="container">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em>.
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,4 +62,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
First line of editable content.<br>
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
|
|
@ -49,4 +49,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -37,14 +37,15 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span>.</em>
|
||||
|
||||
|
||||
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">foobar bazquux</span> <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
in the black rectangle. The expected results are the same as for the previous step.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div contenteditable="true" class="editable-container">
|
||||
<p class="editable">
|
||||
This text should be displayed outside of the black border and <span id="marked-outside">foobar bazquux</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true">
|
||||
<p class="editable">
|
||||
|
|
@ -55,4 +55,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,12 +28,13 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
<div class="content flowed">
|
||||
This is some text that should not be editable. Not 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>.
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
This is some text that should not be editable.<br>
|
||||
|
|
@ -35,4 +35,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,11 +28,12 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content flowed">
|
||||
This is some text that should be editable. Just like the <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span></em> text between these markers.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-2 ol {
|
||||
color: blue;
|
||||
}
|
||||
|
|
@ -67,4 +67,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ol class="roman">
|
||||
<li>Numbered sub-list, item I</li>
|
||||
<li>Numbered sub-list, item I</li>
|
||||
</ol>
|
||||
<ul class="circle">
|
||||
<li>Bullet sub-list, item 1</li>
|
||||
|
|
@ -74,4 +74,5 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* We use visibility:hidden and height:0 to visually skip list items
|
||||
while forcing the counter to increse its value. */
|
||||
.hide {
|
||||
|
|
@ -52,4 +52,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div id="region2" class="region">
|
||||
<ol class="double" id="list21">
|
||||
<li>List 2-1, item B</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item F</li>
|
||||
</ol>
|
||||
<ol start="4" class="double" id="list22">
|
||||
|
|
@ -91,4 +91,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
.disc>li::before {
|
||||
content: counter(items, disc) " ";
|
||||
}
|
||||
|
||||
|
||||
.slim-wrap {
|
||||
counter-reset: items 2;
|
||||
padding-left: 0;
|
||||
|
|
@ -98,4 +98,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue