mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content with opacity < 1 in region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that content with opacity < 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.">
|
||||
<link rel="match" href="reference/content-node-layers-001-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: #5555FF;
|
||||
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
|
||||
opacity: 0.5;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a purple square below.</li>
|
||||
</ol>
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
<div id="region"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content with scrollbars in region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that content with scrollbars is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.">
|
||||
<link rel="match" href="reference/content-node-layers-002-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: none;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square below with a vertical scrollbar.</li>
|
||||
<li>You should be able to drag the scrollbars</li>
|
||||
</ol>
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
<div id="region"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content that's relatively positioned and get fragmented</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that content that's relatively positioned gets properly fragmented between regions.">
|
||||
<link rel="match" href="reference/content-node-layers-003-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
.region {
|
||||
margin: .5em;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see two green squares below.</li>
|
||||
</ol>
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
<div class="region"></div>
|
||||
<div class="region"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content with opacity < 1 and opacity = 1 in region</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that content nodes with mixed opacity < 1 and opacity = 1
|
||||
is correctly flowed into regions. This might fail on implementations that use layers for
|
||||
compositing but don't properly handle content flowing.">
|
||||
<link rel="match" href="reference/content-node-layers-004-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
flow-into: f;
|
||||
}
|
||||
.translucent {
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.opaque {
|
||||
color: blue;
|
||||
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
|
||||
opacity: 1;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
background-color: red;
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see four alternating purple and blue rectangles below.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content with position: absolute and clip</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that absolutely positioned content that has the clip property applied is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing or the clipping shapes.">
|
||||
<link rel="match" href="reference/content-node-layers-005-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-color: lightgreen;
|
||||
flow-into: f;
|
||||
}
|
||||
#content-child {
|
||||
position: absolute;
|
||||
color: green;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
clip: rect(0px, 100px, 80px, 20px);
|
||||
}
|
||||
.outside {
|
||||
color: red;
|
||||
}
|
||||
#region {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-color: red;
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="content-child">
|
||||
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
|
||||
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
|
||||
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br>
|
||||
<span class="outside">x</span>xxxx<span class="outside">xxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="region"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: document.elementFromPoint() for overlapping, positioned regions with non-auto z-index</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that document.elementFromPoint() returns the correct
|
||||
region when multiple regions are absolutely positioned, overlap and have non-auto z-index.">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-left: 20px solid lightblue;
|
||||
background-color: green;
|
||||
flow-from: f;
|
||||
}
|
||||
.region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.front {
|
||||
z-index: 42;
|
||||
border-left-color: orange;
|
||||
}
|
||||
.middle {
|
||||
z-index: 32;
|
||||
border-left-color: lightblue;
|
||||
}
|
||||
.back {
|
||||
z-index: 16;
|
||||
border-left-color: yellow;
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.center {
|
||||
top: 90px;
|
||||
left: 100px;
|
||||
}
|
||||
.right {
|
||||
top: 130px;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
#log {
|
||||
margin-top: 250px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="block1">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div id="block2">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div id="block3">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function applyClasses(selector, classes) {
|
||||
var elements = document.querySelectorAll(selector),
|
||||
length = elements.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
elements[i].className = "region " + classes[i];
|
||||
}
|
||||
document.body.offsetTop;
|
||||
}
|
||||
|
||||
function runTests() {
|
||||
var regionsEnabled = document.querySelector(".region p").getBoundingClientRect().width == 0;
|
||||
|
||||
test(function() {
|
||||
applyClasses(".region", [ "middle", "front", "back" ]);
|
||||
|
||||
assert_true(regionsEnabled, "Regions is enabled");
|
||||
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"));
|
||||
}, "document.elementFromPoint() for point on region border, with regions partially overlapping with non-auto z-index");
|
||||
|
||||
test(function() {
|
||||
applyClasses(".region", [ "right middle", "center front", " left back" ]);
|
||||
|
||||
assert_true(regionsEnabled, "Regions is enabled");
|
||||
//we're checking the "right middle" region, inside it
|
||||
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>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: JavaScript event handlers on overlapping, positioned regions with non-auto z-index</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that JavaScript event handlers set on regions trigger
|
||||
when multiple regions are absolutely positioned, overlap and have non-auto z-index.">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-left: 20px solid lime;
|
||||
background-color: green;
|
||||
overflow: hidden;
|
||||
flow-from: f;
|
||||
}
|
||||
.region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#front {
|
||||
height: 40px;
|
||||
left: 90px;
|
||||
top: 90px;
|
||||
z-index: 42;
|
||||
border-left-color: orange;
|
||||
}
|
||||
#front:hover {
|
||||
border-color: black;
|
||||
}
|
||||
#middle {
|
||||
left: 30px;
|
||||
top: 70px;
|
||||
z-index: 32;
|
||||
border-left-color: lightblue;
|
||||
}
|
||||
#back {
|
||||
left: 70px;
|
||||
z-index: 16;
|
||||
border-left-color: yellow;
|
||||
}
|
||||
|
||||
#region-container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red or the word "FAIL".</li>
|
||||
<li>Move the mouse over the orange rectangle.</li>
|
||||
<li>The orange rectangle should turn black.</li>
|
||||
<li>Click on the black rectangle.</li>
|
||||
<li>You should see the word "PASS", in green, below.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="block1">
|
||||
xxx<br>xxx<br>xxx
|
||||
</div>
|
||||
<div id="block2">
|
||||
xxx<br>xxx<br>xxx
|
||||
</div>
|
||||
<div id="block3">
|
||||
xxx<br>xxx<br>xxx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="region-container">
|
||||
<div class="region" id="back">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region" id="front">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="region" id="middle">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
|
||||
<script>
|
||||
var result = document.querySelector("#result");
|
||||
|
||||
function successHandler() {
|
||||
console.log("this")
|
||||
result.innerHTML = "PASS";
|
||||
result.style.color = "green";
|
||||
}
|
||||
function failHandler() {
|
||||
console.log("that")
|
||||
result.innerHTML = "FAIL";
|
||||
result.style.color = "red";
|
||||
}
|
||||
|
||||
if (document.querySelector(".region p").getBoundingClientRect().width == 0) {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.querySelector("#front").addEventListener("click", successHandler);
|
||||
|
||||
document.querySelector("#middle").addEventListener("click", failHandler);
|
||||
document.querySelector("#back").addEventListener("click", failHandler);
|
||||
});
|
||||
} else {
|
||||
failHandler();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a purple square below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square below with a vertical scrollbar.</li>
|
||||
<li>You should be able to drag the scrollbars</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
.region {
|
||||
margin: .5em;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see two green squares below.</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.translucent {
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.opaque {
|
||||
color: blue;
|
||||
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
|
||||
opacity: 1;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see four alternating purple and blue rectangles below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#content-child {
|
||||
position: absolute;
|
||||
color: green;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="content-child">
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<dialog id="region">
|
||||
<div id="content"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0px;
|
||||
background-color: green;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square inside a gray square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<dialog id="content"></dialog>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
z-index: 42;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: 0.9;
|
||||
color: red;
|
||||
}
|
||||
#region-parent {
|
||||
background-color: blue;
|
||||
float: left;
|
||||
}
|
||||
#region {
|
||||
opacity: 0.5;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red or blue.</li>
|
||||
<li>Test passes if you see a purple square.</li>
|
||||
</ol>
|
||||
<div id="region-parent">
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: 10px solid lime;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square with a light green border around its top half.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<dialog id="region">
|
||||
<div id="content"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing modal dialog elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<dialog id="content"></dialog>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.back {
|
||||
z-index: 1;
|
||||
}
|
||||
.middle {
|
||||
z-index: 10;
|
||||
}
|
||||
.front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div class="right front"></div>
|
||||
<div class="left back"></div>
|
||||
<div class="center middle region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
#container {
|
||||
opacity: 0.7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="container">
|
||||
<div class="left"></div>
|
||||
<div class="center region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
opacity: .7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a green square, a blue square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="container">
|
||||
<div class="left region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: -75px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: -150px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* the properties below are needed to force the region in creating a stacking context */
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#dummy {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -75px;
|
||||
margin-left: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see four colored overlapping squares, from back to front: a purple square, a green square, a blue square and a yellow square.</li>
|
||||
</ol>
|
||||
|
||||
<div id="region">
|
||||
<div class="left"></div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<div id="dummy"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#front {
|
||||
z-index: 10;
|
||||
color: blue;
|
||||
}
|
||||
#back {
|
||||
z-index: 1;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: .999;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#front-region {
|
||||
margin-top: -50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see two colored overlapping squares: a green square on top of a blue square.</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<span id="front">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</span>
|
||||
</div>
|
||||
<div id="front-region" class="region">
|
||||
<span id="back">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions Test: flowing content in dialog</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Test checks that content is correctly flowed into dialog elements.">
|
||||
<link rel="match" href="reference/regions-dialog-001-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: gray;
|
||||
flow-from: f;
|
||||
}
|
||||
.red {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<div id="content"></div>
|
||||
<dialog id="region">
|
||||
<div class="red"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions Test: flowing dialog elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Test checks that dialog elements are correctly flowed into a region.">
|
||||
<link rel="match" href="reference/regions-dialog-002-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0px;
|
||||
background-color: green;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
flow-from: f;
|
||||
}
|
||||
.red {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square inside a gray square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ol>
|
||||
<dialog id="content"></dialog>
|
||||
<div id="region">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content in regions that have a non-auto z-index</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that making the region create a stacking context by
|
||||
setting a non-auto z-index does not affect rendering of the content flowed in the region.">
|
||||
<link rel="match" href="reference/regions-layers-001-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
z-index: 42;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-from: f;
|
||||
}
|
||||
#region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="content-child">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content in regions that have opacity < 1 with the content also having opacity < 1</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that region's opacity is properly composited with
|
||||
content opacity.">
|
||||
<link rel="match" href="reference/regions-layers-002-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: 0.9;
|
||||
color: red;
|
||||
flow-into: f;
|
||||
}
|
||||
#region-parent {
|
||||
background-color: blue;
|
||||
float: left;
|
||||
}
|
||||
#region {
|
||||
opacity: 0.5;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-from: f;
|
||||
}
|
||||
#region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red or blue.</li>
|
||||
<li>Test passes if you see a purple square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div id="region-parent">
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing content in regions that are absolutely positioned and have visual overflow</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that region's visual overflow is displayed when region
|
||||
is absolutely positioned and has visual overflow.">
|
||||
<link rel="match" href="reference/regions-layers-003-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: f;
|
||||
}
|
||||
#behind-region {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 60px;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: 10px solid lime;
|
||||
border-bottom-width: 0;
|
||||
flow-from: f;
|
||||
}
|
||||
#region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square with a light green border around its top half.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div id="behind-region"></div>
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions Test: flowing content in a modal dialog</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Test checks that content is correctly flowed into modal dialog elements.">
|
||||
<link rel="match" href="reference/regions-modal-dialog-001-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
flow-from: f;
|
||||
}
|
||||
.red {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<div id="content"></div>
|
||||
<dialog id="region">
|
||||
<div class="red"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Regions Test: flowing modal dialog elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Test checks that modal dialog elements are correctly flowed into a region.">
|
||||
<link rel="match" href="reference/regions-modal-dialog-002-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
flow-into: f;
|
||||
}
|
||||
#region {
|
||||
flow-from: f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<dialog id="content"></dialog>
|
||||
<div id="region"></div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: regions as part of the root stacking context</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that regions respect stacking rules when part of the root stacking context.">
|
||||
<link rel="match" href="reference/regions-stacking-context-001-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
.region {
|
||||
flow-from: flow;
|
||||
}
|
||||
.region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.back {
|
||||
z-index: 1;
|
||||
}
|
||||
.middle {
|
||||
z-index: 10;
|
||||
}
|
||||
.front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="right front"></div>
|
||||
<div class="left back"></div>
|
||||
<div class="center middle region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: regions as part of a non-root stacking context</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that regions respect stacking rules when part of a non-root stacking context.">
|
||||
<link rel="match" href="reference/regions-stacking-context-002-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
.region {
|
||||
flow-from: flow;
|
||||
}
|
||||
.region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#container {
|
||||
opacity: 0.7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div id="container">
|
||||
<div class="left"></div>
|
||||
<div class="center region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: regions as part of the same stacking context as the node</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that regions respect stacking and painting rules when
|
||||
both the region and the content nodes are part of the same, non-root stacking context.">
|
||||
<link rel="match" href="reference/regions-stacking-context-003-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
flow-into: flow;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-from: flow;
|
||||
}
|
||||
.region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
opacity: .7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a green square, a blue square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="container">
|
||||
<div class="left region"></div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: regions create stacking contexts</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that regions create stacking contexts for content flowed into them.">
|
||||
<link rel="match" href="reference/regions-stacking-context-004-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
opacity: 0.7;
|
||||
}
|
||||
#content > div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-into: flow;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: -75px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: -150px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
flow-from: flow;
|
||||
}
|
||||
#region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#dummy {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -75px;
|
||||
margin-left: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see four colored overlapping squares, from back to front: a green square, a blue square, a yellow square and a purple square.</li>
|
||||
<!-- The purple square should be painted on top of the other ones because the region creates a stackign context for its contents. -->
|
||||
</ol>
|
||||
|
||||
<div id="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="dummy"></div>
|
||||
|
||||
<div id="content">
|
||||
<div class="left"></div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: regions changing stacking order when as part of a stacking context</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that regions stacking rules take precedence over content stacking rules.">
|
||||
<link rel="match" href="reference/regions-stacking-context-005-ref.html">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: .999;
|
||||
flow-into: flow;
|
||||
}
|
||||
#front {
|
||||
z-index: 10;
|
||||
color: blue;
|
||||
}
|
||||
#back {
|
||||
z-index: 1;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flow-from: flow;
|
||||
}
|
||||
.region p{
|
||||
background-color: red;
|
||||
width: 50%;
|
||||
}
|
||||
#front-region {
|
||||
margin-top: -50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see two colored overlapping squares: a green square on top of a blue square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<span id="front">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br></span>
|
||||
<span id="back">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</span>
|
||||
</div>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
<div id="front-region" class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue