Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-09 15:35:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

52
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-cursor-001.html Normal file
View file

@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: CSS cursor on content 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="assert" content="CSS cursors are properly displayed for content flowed into regions.">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lightblue;
}
#content p {
flow-into: f;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==") 1 17, w-resize;
}
#region {
width: 100px;
height: 100px;
flow-from: f;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<p>The test fails if you see any red or if any of the expected results below don't happen.</p>
<ol>
<li>You should see a blue square below.</li>
<li>
Move the mouse over the blue square. <strong>Expected: </strong>The mouse cursor should change to a large, left pointing, black arrow.</li>
</li>
</ol>
<div id="content">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region">
<p></p>
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-cursor-002.html Normal file
View file

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: CSS cursor on 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="assert" content="CSS cursors are properly displayed even when an element is turned into a region">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lightgreen;
}
#content p {
flow-into: f;
}
#region {
width: 100px;
height: 100px;
flow-from: f;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==") 1 17, w-resize;
border-left: 100px solid lightblue;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<p>The test fails if you see any red or if any of the expected results below don't happen.</p>
<ol>
<li>You should see a green and a blue square below.</li>
<li>
Move the mouse over the blue square. <strong>Expected: </strong>The mouse cursor should change to a large, left pointing, black arrow.</li>
</li>
</ol>
<div id="content">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region">
<p></p>
</div>
</body>
</html>

49
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-content-001.html Normal file
View file

@ -0,0 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content nodes</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="assert" content="CSS rules using the :hover pseudo class are applied to content nodes">
<meta name="flags" content="interact">
<style>
#source {
background-color: blue;
width: 100px;
height: 100px;
flow-into: f;
}
#source:hover {
background-color: lime;
}
#region {
flow-from: f;
}
.region {
width: 200px;
height: 200px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a blue square below</li>
<li>Move the mouse over the blue square</li>
<li>The blue square should turn green</li>
</ol>
<div id="source">
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-content-002.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node parent when the parent is in the named flow and rendered as a sibling of its child</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="assert" content="CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions even when they're visually rendered as siblings">
<meta name="flags" content="interact ahem">
<style>
#source {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
flow-into: f;
}
#parent:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 200px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>Move the mouse over the yellow square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-content-003.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node parent when the parent is not in the named flow</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="assert" content="CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions">
<meta name="flags" content="interact">
<style>
#source {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
}
#parent:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the yellow square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

60
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-content-004.html Normal file
View file

@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on content node when the content node has position:fixed</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="assert" content="CSS rules using the :hover pseudo class are applied to content nodes that have position:fixed.">
<meta name="flags" content="interact">
<style>
#source {
position: fixed;
right: 0;
top: 0;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
width: 100px;
height: 100px;
background-color: yellow;
}
#source:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 100px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the blue square</li>
<li>The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-content-005.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS :hover on content node when the content node has position:relative</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="assert" content="CSS rules using the :hover pseudo class are applied to content nodes that are relatively positioned">
<meta name="flags" content="interact">
<style>
#source {
position: relative;
left: 5em;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#parent {
color: blue;
background-color: yellow;
}
#source:hover {
color: lime;
}
#region {
flow-from: f;
}
.region {
width: 200px;
height: 100px;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a blue square below</li>
<li>Move the mouse over the blue square <strong>Expected:</strong> The blue square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

54
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-region-001.html Normal file
View file

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on region that has borders</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="assert" content="CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region border">
<meta name="flags" content="interact">
<style>
#source {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#region {
flow-from: f;
}
.region {
border-left: 100px solid yellow;
width: 100px;
height: 100px;
}
.region:hover {
border-left: 100px solid lime;
color: red;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square below</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

55
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-region-002.html Normal file
View file

@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on regions that have padding</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="assert" content="CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region padding">
<meta name="flags" content="interact">
<style>
#source {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#region {
flow-from: f;
}
.region {
background-color: yellow;
padding-left: 100px;
width: 100px;
height: 100px;
}
.region:hover {
background-color: lime;
color: red;
}
.region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div class="region" id="region">
<p></p>
</div>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-region-003.html Normal file
View file

@ -0,0 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on region when content nodes are relatively positioned</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="assert" content="CSS rules using the :hover pseudo class are applied to regions when
moving the mouse over the region and the content flowed in it is relatively positioned. Also, the :hover
rules for the content do not apply when moving the mouse over the box placeholder.">
<meta name="flags" content="interact">
<style>
#source {
position: relative;
left: 5em;
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 5em;
height: 5em;
flow-into: f;
}
#source:hover {
color: red;
}
#region {
background-color: yellow;
width: 200px;
height: 100px;
flow-from: f;
}
#region:hover {
color: red;
background-color: lime;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test</li>
<li>You should see a yellow and a blue square</li>
<li>Move the mouse over the yellow square</li>
<li>The yellow square should turn green and the blue square should remain blue</li>
</ol>
<div id="parent">
<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
</div>
<div id="region">
<p></p>
</div>
</body>
</html>

75
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/css-hover-on-region-004.html Normal file
View file

@ -0,0 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: :hover on regions that have rounded corners</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="assert" content="CSS rules using the :hover pseudo class are applied to regions that have rounded borders.">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
#content p{
font-family: Ahem;
font-size: 20px;
line-height: 1em;
flow-into: f;
color: yellow;
}
#parent {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QMWCgYsObOZcQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVRYw+2Wuw6AMAhFL8T//2LlOjjooAnQKoOcyURpT3i0Ak3T/B3Jh652Pi/6kcBqgMp9GAEYozIBAaPvc+KQnCrg3Twuob60S6Ky1x4ZEtBko07LgLza3+oftdFRTWfgXcoFHIUiB5aXCRnI7s9ZJbCkgS+u/CQsvwsCU6ACbHyuLXG8j52c5f8DTdOUswNDYysBxD+bOgAAAABJRU5ErkJggg==") no-repeat 0px 0px, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QMWCgYsObOZcQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAkUlEQVRYw+2Wuw6AMAhFL8T//2LlOjjooAnQKoOcyURpT3i0Ak3T/B3Jh652Pi/6kcBqgMp9GAEYozIBAaPvc+KQnCrg3Twuob60S6Ky1x4ZEtBko07LgLza3+oftdFRTWfgXcoFHIUiB5aXCRnI7s9ZJbCkgS+u/CQsvwsCU6ACbHyuLXG8j52c5f8DTdOUswNDYysBxD+bOgAAAABJRU5ErkJggg==") no-repeat 140px 140px, lightblue;
position: relative;
font-family: monospace;
margin: 1em;
width: 170px;
height: 170px;
}
#region {
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid black;
background-color: yellow;
flow-from: f;
overflow: hidden; /*So that the content flowed does not go outside the rounded corners*/
}
#region:hover {
background-color: red;
border-color: red;
}
#parent:hover {
background-color: lime;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>You should see a blue square, with a yellow circle inside it.</li>
<li>There should be two blue dots in side the square, near the top left and bottom right corners</li>
<li>Move the mouse over the top-left blue dot <strong>Expected:</strong> The color of the square turns green. No red.</li>
<li>Move the mouse over the bottom-right blue dot <strong>Expected:</strong> The color of the square turns green. No red.</li>
</ol>
<div id="content">
<p>xxxx<br>xxxx<br>xxxx<br>xxxx</p>
</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
</body>
</html>

117
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/elementFromPoint-001.html Normal file
View file

@ -0,0 +1,117 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() on for elements that get split between regions</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="assert" content="document.elementFromPoint() should return the correct element when provided with coordinates of points inside content fragments">
<meta name="flags" content="dom interact">
<style>
body {
font-size: 16px;
}
p {
margin: 0;
}
ol {
padding-left: 0;
}
#content {
flow-into: f;
}
.region {
flow-from: f;
margin: .25em;
margin-left: 40px;
width: 200px;
height: 150px;
background-color: lightgray;
}
.region p {
font-weight: bold;
color: red;
}
.narrow {
width: 75px;
height: 20px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="content">
</div>
<div class="region narrow">
<p>FAIL</p>
</div>
<div class="region" id="target">
<p>FAIL</p>
</div>
<div id="log"></div>
<script type="text/javascript">
var testElements = [
{ tag: "p", content: "Some text here", description: "Block content" },
{ tag: "span", content: "Some text here", description: "Inline content", around: " mmm " },
{ tag: "img", description: "Replaced content", src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==", style: { width: "32px", height: "32px"} },
{ tag: "li", content: "Some text here", description: "Elements with parents", parent: "ol"},
{ tag: "foobar", content: "Some text here", description: "Unknown element type" },
{ tag: "div", content: "Floating<br>content", description: "Floating content", style: { float: "left" } },
],
regionBox = document.querySelector("#target").getBoundingClientRect();
function insertElement(elem) {
var node, parent, content;
node = document.createElement(elem.tag);
node.innerHTML = elem.content;
if (elem.parent) {
parent = document.createElement(elem.parent);
parent.appendChild(node);
}
if (elem.src) {
node.src = elem.src;
}
for (var prop in elem.style) {
node.style[prop] = elem.style[prop];
}
if (elem.around) {
content = elem.around + (parent ? parent.outerHTML : node.outerHTML) + elem.around;
} else {
content = (parent ? parent.outerHTML : node.outerHTML);
}
document.querySelector("#content").innerHTML = content;
}
function pointForElement(elem) {
// We just assume that (10px, 10px) relative to the second region should fall inside the
// second block of the flowed content. Currently getBoundingClientRects() is not
// implemented and there isn't a more reliable way of computing it.
result = {
top : regionBox.top + 10,
left : regionBox.left + 10
}
return result;
}
testElements.forEach(function(elem) {
test(function() {
var point, fromSelector;
insertElement(elem);
point = pointForElement(elem);
fromSelector = document.querySelector("#content " + elem.tag);
assert_equals(fromSelector, document.elementFromPoint(point.left, point.top));
}, elem.description)
});
</script>
</body>
</html>

125
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/elementFromPoint-002.html Normal file
View file

@ -0,0 +1,125 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() for elements flowed into regions</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="assert" content="document.elementFromPoint() should return the correct element when provided with coordinates of points corresponding to elements flowed into regions">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
ol {
padding: 0;
margin: 0;
}
#content {
flow-into: f;
}
#region {
flow-from: f;
margin-left: 40px;
width: 200px;
height: 150px;
background-color: lightgray;
}
#region p {
font-weight: bold;
color: red;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="content">
</div>
<div id="region">
<p>FAIL</p>
</div>
<div id="log"></div>
<script type="text/javascript">
var testElements = [
{ tag: "p", content: "Some text here", description: "Block content" },
{ tag: "span", content: "Some text here", description: "Inline content", around: "mmm" },
{ tag: "img", description: "Replaced content", src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAT0lEQVR42u2WMQoAIAwD+/9Px9VFoUJNhjvoKDmKhVQBQA9tYw3/LiGngJwChBN+CtfjWMOvEp0HIwL2DUT8gYgrQAKJyD4Q0YgiOiHACAvTEtAwKdXD6AAAAABJRU5ErkJggg==", style: { width: "32px", height: "32px"} },
{ tag: "li", content: "Some text here", description: "Elements with parents", parent: "ol"},
{ tag: "foobar", content: "Some text here", description: "Unknown element type" },
{ tag: "div", content: "Floating content", description: "Floating content", style: { float: "right" } },
],
regionBox = document.querySelector("#region").getBoundingClientRect();
function insertElement(elem) {
var node, parent, content;
node = document.createElement(elem.tag);
node.appendChild(document.createTextNode(elem.content));
if (elem.parent) {
parent = document.createElement(elem.parent);
parent.appendChild(node);
}
if (elem.src) {
node.src = elem.src;
}
for (var prop in elem.style) {
node.style[prop] = elem.style[prop];
}
if (elem.around) {
content = elem.around + (parent ? parent.outerHTML : node.outerHTML) + elem.around;
} else {
content = (parent ? parent.outerHTML : node.outerHTML);
}
document.querySelector("#content").innerHTML = content;
}
function pointForElement(elem) {
var elemBox, result, aroundElem, aroundBox;
elemBox = document.querySelector("#content " + elem.tag).getBoundingClientRect();
result = {
top : regionBox.top + elemBox.height/2,
left : regionBox.left + elemBox.width/2
};
if (elem.around) {
aroundElem = document.createElement("span");
aroundElem.innerHTML = elem.around;
aroundElem.style.visibility = "hidden";
document.body.insertBefore(aroundElem, null);
document.body.offsetTop;
aroundBox = aroundElem.getBoundingClientRect();
document.body.removeChild(aroundElem);
result.left += aroundBox.width;
}
if (elem.style && elem.style.float == "right") {
result.left = regionBox.right - (aroundBox ? aroundBox.width : 0) - elemBox.width/2;
}
return result;
}
testElements.forEach(function(elem) {
test(function() {
var point, fromSelector;
insertElement(elem);
point = pointForElement(elem);
fromSelector = document.querySelector("#content " + elem.tag);
assert_equals(fromSelector, document.elementFromPoint(point.left, point.top));
}, elem.description)
});
</script>
</body>
</html>

64
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-001.html Normal file
View file

@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Changing an element's named flow when hovering over its parent</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="assert" content="Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
#content {
color: green;
background-color: yellow;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#content:hover p {
flow-into: g;
}
#region1 {
flow-from: f;
}
#region1 p {
width: 100%;
height: 50%;
background-color: red;
}
#region2 {
flow-from: g;
}
</style>
</head>
<body>
<ol>
<li>You should see no red before or during this test.</li>
<li>Move the mouse over the yellow square.</li>
<li>The blue and green squares should swap places.</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region1" class="box">
<p></p>
</div>
<div id="region2" class="box">
<p></p>
</div>
</body>
</html>

66
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-002.html Normal file
View file

@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Changing an element's named flow when hovering over a sibling</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="assert" content="Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
.box {
float: left;
width: 100px;
height: 200px;
margin: 10px;
}
#content {
background-color: lightgray;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#content p:first-child {
color: lightblue;
}
#content p:first-child:hover + p {
flow-into: g;
}
#region1 {
flow-from: f;
}
#region1 p {
width: 100%;
height: 50%;
background-color: red;
}
#region2 {
flow-from: g;
}
</style>
</head>
<body>
<ol>
<li>You should see no red before or during this test.</li>
<li>Move the mouse over the blue square.</li>
<li>The black square below the blue square should appear on the right of the blue square.</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region1" class="box">
<p></p>
</div>
<div id="region2" class="box">
<p></p>
</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-003.html Normal file
View file

@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove child element from named flow on CSS hover when parent and child are rendered as siblings 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="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
width: 100px;
height: 100px;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
background-color: yellow;
flow-into: f;
}
#content p {
flow-into: f;
}
#content:hover p {
flow-into: none;
}
#region {
background-color: yellow;
height: 200px;
flow-from: f;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a yellow square above a black square</li>
<li>Move the mouse over the yellow square</li>
<li>The two squares should swap places</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region" class="box"></div>
</body>
</html>

54
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-004.html Normal file
View file

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove child element from named flow on CSS hover</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="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
width: 100px;
height: 100px;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
background-color: yellow;
}
#content p {
flow-into: f;
}
#content:hover p {
flow-into: none;
}
#region {
background-color: yellow;
flow-from: f;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a yellow square above a black square</li>
<li>Move the mouse over the yellow square</li>
<li>The two squares should swap places</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region" class="box"></div>
</body>
</html>

62
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-005.html Normal file
View file

@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove element from named flow on CSS hover</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="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
float: left;
width: 100px;
height: 200px;
margin: 10px;
}
#content {
background-color: lightgray;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#content p:last-child {
color: lightblue;
}
#content p:last-child:hover {
flow-into: none;
}
#region {
background-color: lightgreen;
flow-from: f;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a tall gray rectangle alongside with a black and a blue square</li>
<li>Move the mouse over the blue square.</li>
<li>The blue square should appear in the gray rectangle on the left.</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region" class="box">
<p></p>
</div>
</body>
</html>

61
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/flow-change-on-hover-006.html Normal file
View file

@ -0,0 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove element sibling from named flow on CSS hover</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="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
float: left;
width: 100px;
height: 200px;
margin: 10px;
}
#content {
background-color: lightgray;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#content p:first-child {
color: lightblue;
}
#content p:first-child:hover + p {
flow-into: none;
}
#region {
flow-from: f;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a tall gray rectangle alongside with a blue and a black square</li>
<li>Move the mouse over the blue square.</li>
<li>The black square below the blue square should appear in the gray rectangle on the left.</li>
</ol>
<div id="content" class="box">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region" class="box">
<p></p>
</div>
</body>
</html>

129
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/mouse-events-001.html Normal file
View file

@ -0,0 +1,129 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: mouse events don't trigger for region children</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="assert" content="Children of regions (elements with flow-from) are removed from the document flow and JavaScript event handlers set on them should not fire">
<meta name="flags" content="dom interact">
<style>
body {
margin: 0;
padding: 20px;
}
p {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 20px;
}
#source {
background-color: lightcyan;
}
#source p {
width: 100%;
height: 100px;
background-color: green;
flow-into: flow;
}
#region {
background-color: yellow;
flow-from: flow;
}
#region p {
margin-top: 100px;
width: 100%;
height: 100px;
background-color: red;
}
#result {
clear: both;
font-weight: bold;
}
.pass {
color: green;
}
.fail {
color: red;
}
</style>
</head>
<body>
<ol>
<li>Mouse over the green rectangle and click</li>
<li>Mouse over the yellow rectangle and click</li>
<li>You should see "PASS" appearing below</li>
<li>You should not see any red, or the word "FAIL"</li>
</ol>
<div id="source" class="box">
<p></p>
</div>
<div id="region" class="box">
<p></p>
</div>
<div id="result" class=""></div>
<script type="text/javascript">
var contentCalls = 0,
regionCalls = false;
function setResult(value) {
var tag = document.querySelector("#result");
tag.innerHTML = value;
tag.classList.add(value.toLowerCase());
}
function contentEventHandler(evt) {
contentCalls++;
if (contentCalls == 3) {
setResult("PASS");
finishTest();
}
}
function regionChildEventHandler(evt) {
regionCalls = true;
setResult("FAIL");
finishTest();
}
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function runScriptedTest() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var boxLocation = document.querySelector("#region").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + 40, boxLocation.top + 50);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width - 40, boxLocation.top + boxLocation.height - 40);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
var events = [ "mouseover", "mouseout", "click" ],
regionChild = document.querySelector("#region p"),
content = document.querySelector("#source p");
events.forEach(function(item) {
regionChild.addEventListener(item, regionChildEventHandler);
content.addEventListener(item, contentEventHandler);
})
runScriptedTest();
</script>
</body>
</html>

200
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/mouse-events-002.html Normal file
View file

@ -0,0 +1,200 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: mouse events on contents node made up by unknown tags</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="assert" content="Mouse event handlers set on content nodes, even if they're unknown elements should fire">
<meta name="flags" content="dom interact">
<style>
body {
margin: 0;
padding: 20px;
}
p {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 20px;
}
.smallbox {
width: 75px;
height: 200px;
float: left;
margin: 20px;
}
#source {
color: green;
background-color: lightcyan;
}
#source foobar {
flow-into: flow1;
}
#region1 {
flow-from: flow1;
}
#source barbaz {
flow-into: flow2;
}
#region2 {
flow-from: flow2;
}
#source bazzaz {
flow-into: flow3;
}
#region3 {
flow-from: flow3;
}
foo,
foobar,
barbaz,
barbaz span,
bazzaz {
display: block;
width: 100%;
height: 100px;
background-color: green;
}
.region {
background-color: yellow;
}
.region p {
margin-top: 100px;
width: 100%;
height: 100px;
background-color: red;
}
#result {
clear: both;
font-weight: bold;
}
.pass {
color: green;
}
.fail {
color: red;
}
</style>
</head>
<body>
For each of the three narrow boxes on the right of the cyan square:
<ol>
<li>Mouse over the green rectangle and click</li>
<li>Mouse over the yellow rectangle and click</li>
<li>You should see "PASS" appearing below</li>
<li>You should not see any red, or the word "FAIL"</li>
</ol>
<div id="source" class="box">
<foobar>
Some text here
</foobar>
<barbaz>
<span>Some text here</span>
</barbaz>
<bazzaz>
<foo>Some text here</foo>
</bazzaz>
</div>
<div id="region1" class="region smallbox">
<p></p>
</div>
<div id="region2" class="region smallbox">
<p></p>
</div>
<div id="region3" class="region smallbox">
<p></p>
</div>
<div id="result" class=""></div>
<script type="text/javascript">
var calls = { totalCalls: 0, individualCalls: {} },
regionCalls = false;
function setResult(value) {
var tag = document.querySelector("#result");
tag.innerHTML += value + "<br>";
tag.classList.add(value.toLowerCase());
}
function contentEventHandlerForItem(item) {
return function(evt) {
calls.totalCalls++;
calls.individualCalls[item].calls++;
if (calls.totalCalls == 9) {
var pass = true;
for (var c in calls.individualCalls) {
if (calls.individualCalls[c].calls !== 3) {
pass = false;
}
}
setResult(pass ? "PASS" : "FAIL");
finishTest();
}
}
}
function regionChildEventHandler(evt) {
regionCalls = true;
setResult("FAIL");
finishTest();
}
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function testRegion(regionSelector) {
if (window.testRunner) {
var boxLocation = document.querySelector(regionSelector).getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + 40, boxLocation.top + 50);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.mouseMoveTo(boxLocation.left, boxLocation.top + 120);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
function runScriptedTest(contentSelectors) {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
contentSelectors.forEach(function(item) {
testRegion(item);
})
}
}
var events = [ "mouseover", "mouseout", "click" ],
regionChildren = Array.prototype.slice.call(document.querySelectorAll(".region p")),
contents = [ "#source foobar", "#source barbaz span", "#source foo" ];
events.forEach(function(event) {
regionChildren.forEach(function(item) {
item.addEventListener(event, regionChildEventHandler);
});
contents.forEach(function(item) {
calls.individualCalls[item] = {};
calls.individualCalls[item].calls = 0;
document.querySelector(item).addEventListener(event, contentEventHandlerForItem(item));
});
})
runScriptedTest(contents);
</script>
</body>
</html>

101
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/mouse-events-003.html Normal file
View file

@ -0,0 +1,101 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: mouse over DOM location of content flowed in a 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="assert" content="Mouse events should not fire over the would-be location of the content nodes (where they would have been rendered were they not flowed in a region)">
<meta name="flags" content="dom interact">
<style>
body {
margin: 0;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 20px;
}
#source {
background-color: lightblue;
}
#source p {
flow-into: flow;
}
#region {
background-color: lightgreen;
flow-from: flow;
}
#shield {
opacity: 0.01;
background-color: white;
z-index: 100;
position: relative;
left: -240px;
}
#result {
clear: both;
}
.pass {
color: green;
font-weight: bold;
}
.fail {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
This test passes if you never see red during the test or the word "FAIL" and all expected results happen when following the steps below:
<ol>
<li>You should see a blue empty square and a green square with text</li>
<li>Move the mouse over the blue empty square <strong>Expected:</strong> The text "PASS" appears under the blue square.</li>
</ol>
<div id="source" class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae eveniet. Explicabo veritatis adipisci praesentium placeat voluptates dolorum pariatur architecto itaque.</p>
</div>
<div id="region" class="box"></div>
<div class="box" id="shield"></div>
<div id="result" class=""></div>
<script type="text/javascript">
var target = document.querySelector("#source p");
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
target.parentElement.addEventListener("mouseover", function(evt) {
var tag = document.querySelector("#result");
result;
if (evt.target != evt.currentTarget) {
result = "FAIL";
} else {
result = "PASS";
}
tag.innerHTML = result;
tag.classList.add(result.toLowerCase());
finishTest();
}, true);
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
eventSender.enableDOMUIEventLogging();
eventSender.mouseMoveTo(10, 40);
eventSender.mouseMoveTo(100, 100);
eventSender.mouseUp();
}
</script>
</body>
</html>

159
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/mouse-events-004.html Normal file
View file

@ -0,0 +1,159 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Removing content nodes on mouse events</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="assert" content="Altering the contents of the named flow via DOM manipulation in response to user gestures (mouse move, mouse click) should works as without regions.">
<meta name="flags" content="dom interact">
<style>
body {
margin: 0;
padding: 20px;
}
p {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 20px;
}
#content {
background-color: red;
}
#content p {
width: 100%;
height: 100px;
flow-into: flow;
}
#region {
background-color: yellow;
flow-from: flow;
}
#region p {
margin-top: 100px;
width: 100%;
height: 100px;
background-color: red;
}
#result {
clear: both;
font-weight: bold;
}
.pass {
color: green;
}
.fail {
color: red;
}
.phase0 {
background-color: green;
}
.phase1 {
background-color: seagreen;
}
.phase2 {
background-color: lime;
}
.phase3 {
background-color: lightgreen;
}
</style>
</head>
<body>
The test fails if you see any red, the text "FAIL" below the two rectangles below or if any of the expected results below don't happen.
<ol>
<li>You should see a green and a yellow rectangle, stacked vertically.</li>
<li>Move the mouse over the green rectangle. <strong>Expected: </strong>The color should change to a lighter green.</li>
<li>Click in the green rectangle. <strong>Expected: </strong>The color should change again to a yet lighter green.</li>
<li>Move the mouse over the yellow rectangle.</li>
<li><strong>Expected: </strong>The color of the green rectangle should change yet again to a pale green. There should be a green text below that says "PASS".</li>
</ol>
<div id="content">
<p class="phase0"></p>
</div>
<div id="region" class="box">
<p></p>
</div>
<div id="result"></div>
<script type="text/javascript">
var events = [ {
name: "mouseover",
hit: false
}, {
name: "click",
hit: false
}, {
name: "mouseout",
hit: false
} ],
target = document.querySelector("#content"),
callCount = 0;
function setResult(value) {
var tag = document.querySelector("#result");
tag.innerHTML = value;
tag.classList.add(value.toLowerCase());
}
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function handlerForEvent(eventName, index) {
return function(evt) {
if ((evt.target === evt.currentTarget) || (events[index].hit))
return;
callCount++;
events[index].hit = true;
var nodeToRemove = document.querySelector("#content p"),
nodeParent = nodeToRemove.parentNode;
nodeParent.removeChild(nodeToRemove);
document.body.offsetTop;
var newNode = document.createElement("p");
newNode.classList.add("phase" + callCount);
nodeParent.appendChild(newNode);
if (callCount == 3) {
setResult("PASS");
finishTest();
}
}
}
function runScript() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var boxLocation = document.querySelector("#region").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + 40, boxLocation.top + 50);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width - 40, boxLocation.top + boxLocation.height - 40);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
events.forEach(function(item, index) {
target.addEventListener(item.name, handlerForEvent(item, index));
});
runScript();
</script>
</body>
</html>

191
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/mouse-events-005.html Normal file
View file

@ -0,0 +1,191 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Adding and removing regions on mouse events</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="assert" content="Altering the region chain via DOM manipulation in response to user gestures should not change the rendering of the content inside regions">
<meta name="flags" content="interact">
<style>
body {
margin: 0;
padding: 20px;
}
p {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 20px;
position: absolute;
}
.smallbox {
width: 200px;
height: 90px;
float: left;
margin: 20px;
position: absolute;
}
#wrapper {
position: relative;
height: 240px;
}
#content {
background-color: lightcyan;
top: 0;
left: 0;
}
#content p {
margin-bottom: 10px;
width: 100%;
height: 80px;
flow-into: flow;
}
.region {
flow-from: flow;
}
.region p {
margin-top: 100px;
width: 100%;
height: 100px;
background-color: red;
}
.first-region {
top: 0;
left: 33%;
}
.second-region {
top: 0;
left: 66%;
}
#result {
font-weight: bold;
}
.pass {
color: green;
}
.fail {
color: red;
}
.clickable {
background-color: yellow;
}
.phase0 {
background-color: green;
}
.phase1 {
background-color: seagreen;
}
.phase2 {
background-color: lime;
}
.phase3 {
background-color: lightgreen;
}
</style>
</head>
<body>
The test fails if you see any red, the text "FAIL" below the three rectangles below or if any of the expected results below don't happen.
<ol>
<li>Move the mouse over the yellow rectangle on the right. <strong>Expected: </strong>The green rectangle in the middle should change to a lighter green.</li>
<li>Click in the yellow rectangle. <strong>Expected: </strong>The green rectangle in the middle should change again to a yet lighter green.</li>
<li>Move the mouse out from the yellow rectangle.</li>
<li><strong>Expected: </strong>The color of the green rectangle should change yet again to a pale green. There should be a green text below that says "PASS".</li>
</ol>
<div id="wrapper">
<div class="box" id="content">
<p></p>
<p class="clickable"></p>
</div>
<div class="first-region region smallbox phase0">
<p></p>
</div>
<div class="second-region region box">
<p></p>
</div>
</div>
<div id="result"></div>
<script type="text/javascript">
var events = [ {
name: "mouseover",
hit: false
}, {
name: "click",
hit: false
}, {
name: "mouseout",
hit: false
} ],
target = document.querySelector("#content"),
callCount = 0;
function setResult(value) {
var tag = document.querySelector("#result");
tag.innerHTML = value;
tag.classList.add(value.toLowerCase());
}
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function handlerForEvent(eventName, index) {
return function(evt) {
if ((evt.target === evt.currentTarget) || (events[index].hit))
return;
callCount++;
events[index].hit = true;
var nodeToRemove = document.querySelector(".first-region"),
nodeParent = nodeToRemove.parentNode;
nodeParent.removeChild(nodeToRemove);
document.body.offsetTop;
var newNode = document.createElement("div");
newNode.classList.add("first-region", "region", "smallbox", "phase" + callCount);
nodeParent.insertBefore(newNode, document.querySelector(".second-region"));
document.body.offsetTop;
if (callCount == 3) {
setResult("PASS");
finishTest();
}
}
}
function runScript() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var boxLocation = document.querySelector(".second-region").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + 40, boxLocation.top + 50);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width - 40, boxLocation.top + boxLocation.height - 40);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
events.forEach(function(item, index) {
target.addEventListener(item.name, handlerForEvent(item, index));
});
runScript();
</script>
</body>
</html>

97
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-elementFromPoint-001.html Normal file
View file

@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() for elements in a region's hidden 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="assert" content="For regions that have hidden overflow calling document.elementFromPoint() on the location of the element should not return the element">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow: hidden;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that calling <code>document.elementFromPoint()</code> on an element displayed in a region's
hidden overflow will not return that element (but the element "underneath" it).<br>
You should see "PASS" being displayed below.
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function runScript() {
var fromSelector, fromPoint,
parent = document.querySelector("#parent");
boxLocation = document.querySelector("#region").getBoundingClientRect(),
result = document.querySelector("#result");
fromSelector = document.querySelector(".highlite");
fromPoint = document.elementFromPoint(boxLocation.left + boxLocation.width/2, boxLocation.top + boxLocation.height + 35);
if ((fromSelector != fromPoint) && (fromPoint == parent)) {
result.innerHTML = "PASS";
} else {
result.innerHTML = "FAIL";
result.style.color = "red";
}
if (window.testRunner) {
testRunner.notifyDone();
}
}
document.addEventListener("DOMContentLoaded", runScript);
</script>
</body>
</html>

106
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-elementFromPoint-002.html Normal file
View file

@ -0,0 +1,106 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() for elements in a region's scroll 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="assert" content="For regions that have scroll overflow, scrolling an element flowed in them into view and then calling document.elementFromPoint() on the visible location of the element should return the element">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
xbackground-color: yellow;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow-y: scroll;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that calling <code>document.elementFromPoint()</code> on an element displayed in a region's
visible overflow will actually return that element (and not the element "underneath" it).<br>
You should see "PASS" being displayed below.
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function runScript() {
var region, regionBox, target, targetBox, fromPoint;
region = document.querySelector("#region");
region.scrollTop = 200;
regionBox = region.getBoundingClientRect();
document.body.offsetTop;
target = document.querySelector(".highlite");
targetBox = target.getBoundingClientRect();
fromPoint = document.elementFromPoint(targetBox.left + targetBox.width/2, targetBox.top + targetBox.height/2);
// Check we get the same element via DOM selection and via elementFromPoint() AND
// the element we get is in the visible part of the region
if ((fromPoint == target) && (targetBox.bottom <= regionBox.bottom)) {
result.innerHTML = "PASS";
} else {
result.innerHTML = "FAIL";
result.style.color = "red";
}
if (window.testRunner) {
testRunner.notifyDone();
}
}
document.addEventListener("DOMContentLoaded", runScript);
</script>
</body>
</html>

96
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-elementFromPoint-003.html Normal file
View file

@ -0,0 +1,96 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: document.elementFromPoint() for elements in a region's visible 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="assert" content="For regions that have visible overflow calling document.elementFromPoint() on the visible location of the element should return the element">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
xbackground-color: yellow;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that calling <code>document.elementFromPoint()</code> on an element displayed in a region's
visible overflow will actually return that element (and not the element "underneath" it).<br>
You should see "PASS" being displayed below.
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function runScript() {
var fromSelector, fromPoint,
boxLocation = document.querySelector("#region").getBoundingClientRect(),
result = document.querySelector("#result");
fromSelector = document.querySelector(".highlite");
fromPoint = document.elementFromPoint(boxLocation.left + boxLocation.width/2, boxLocation.top + boxLocation.height + 35);
if (fromSelector == fromPoint) {
result.innerHTML = "PASS";
} else {
result.innerHTML = "FAIL";
result.style.color = "red";
}
if (window.testRunner) {
testRunner.notifyDone();
}
}
document.addEventListener("DOMContentLoaded", runScript);
</script>
</body>
</html>

110
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-events-001.html Normal file
View file

@ -0,0 +1,110 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: JavaScript event handlers for elements in a region's hidden 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="assert" content="For regions that have hidden overflow, JavaScript events on elements that are in the hidden overflow should not trigger">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow: hidden;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that elements displayed in a region's visible overflow handle mouse events.
<ol>
<li>You should not see any red before or during this test.</li>
<li>You should only see one word (<em>This</em>) at the bottom of the gray square.</li>
<li>You shouldn't be able to scroll or make visible more text in the gray square.</li> <!-- yeah, I know it's fishy but don't have a better idea for negative testing :) -->
</ol>
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
var word = document.querySelector(".highlite");
word.addEventListener("click", function(evt) {
document.querySelector("#result").innerHTML = "FAIL";
finishTest();
});
var parent = document.querySelector("#parent");
parent.addEventListener("click", function(evt) {
var result = document.querySelector("#result");
if (result.innerHTML == "&nbsp;") {
document.querySelector("#result").innerHTML = "PASS";
}
finishTest();
})
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function runScript() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var boxLocation = document.querySelector("#region").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width/2, boxLocation.top + boxLocation.height + 35);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
runScript();
</script>
</body>
</html>

115
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-events-002.html Normal file
View file

@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: JavaScript event handlers for elements in a region's scroll 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="assert" content="For regions that have scroll overflow, JavaScript events on elements that are in the scrollable overflow should trigger once the element is scrolled into view and the corresponding user gesture is made">
<meta name="flags" content="dom interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow-y: scroll;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that elements displayed in a region's scrollable overflow can be scrolled into view and handle mouse events.
<ol>
<li>You should not see any red before or during this test.</li>
<li>Scroll the contents of the square below so that the blue word (<em>overflows</em>) scrolls into view.</li>
<li>Click on the blue word (<em>overflows</em>) outside the gray square.</li>
<li>You should see "PASS" word being displayed in green, below.</li>
</ol>
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
var word = document.querySelector(".highlite");
word.addEventListener("click", function(evt) {
document.querySelector("#result").innerHTML = "PASS";
finishTest();
});
var parent = document.querySelector("#parent");
parent.addEventListener("click", function(evt) {
var result = document.querySelector("#result");
if (result.innerHTML != "&nbsp;") {
result.innerHTML = "FAIL";
result.style.color = "red";
}
finishTest();
})
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function runScript() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var region = document.querySelector("#region");
region.scrollTop = 100;
var boxLocation = document.querySelector(".highlite").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width/2, boxLocation.top + boxLocation.height/2);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
runScript();
</script>
</body>
</html>

112
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-events-003.html Normal file
View file

@ -0,0 +1,112 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Mouse events in visible overflow of a 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="assert" content="Mouse events set up on elements displayed in a region's visible overflow should trigger">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
display: inline-block;
height: 50px;
}
#parent {
height: 200px;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
#result {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
This tests that elements displayed in a region's visible overflow handle mouse events.
<ol>
<li>You should not see any red before or during this test.</li>
<li>Click on the blue word (<em>overflows</em>) outside the gray square.</li>
<li>You should see "PASS" word being displayed in green, below.</li>
</ol>
<div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div>
<div id="result">&nbsp;</div>
<div id="parent">
<div id="region">
<p></p>
</div>
</div>
<script type="text/javascript">
var word = document.querySelector(".highlite");
word.addEventListener("click", function(evt) {
document.querySelector("#result").innerHTML = "PASS";
finishTest();
});
var parent = document.querySelector("#parent");
parent.addEventListener("click", function(evt) {
var result = document.querySelector("#result");
//TODO This might need reworking if the event propagation model for regions changes in a way
// that allows events to be caught by the content and also by the region's parents
if (result.innerHTML != "PASS") {
result.innerHTML = "FAIL";
result.style.color = "red";
}
finishTest();
})
function finishTest() {
if (window.testRunner) {
testRunner.notifyDone();
}
}
function runScript() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
var boxLocation = document.querySelector("#region").getBoundingClientRect();
eventSender.mouseMoveTo(boxLocation.left + boxLocation.width/2, boxLocation.top + boxLocation.height + 35);
eventSender.mouseDown();
eventSender.mouseUp();
}
}
runScript();
</script>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-selection-001.html Normal file
View file

@ -0,0 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Selection for elements in a region's hidden 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="assert" content="For regions that have hidden overflow, the contents in the hidden overflow should not be scrollable or selectable">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow: hidden;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test.</li>
<li>You should only see one word (<em>This</em>) at the bottom of the gray square.</li>
<li>You shouldn't be able to scroll or make visible more text in the gray square.</li> <!-- yeah, I know it's fishy but don't have a better idea for negative testing :) -->
</ol>
<div id="content"><span class="spacer"></span>This text <span class="highlite">overflows</span>.</div>
<div id="region">
<p></p>
</div>
</body>
</html>

62
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-selection-002.html Normal file
View file

@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Selection for elements in a region's scroll 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="assert" content="For regions that have scroll overflow, their content should be scrollable into view and selectable as without regions">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
overflow-y: scroll;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test.</li>
<li>Scroll the contents of the square below until a blue word (<em>overflows</em>) becomes visible.</li>
<li>Select the blue word.</li>
<li>You should see the selection highlight drawn around the word.</li>
<li>If you copy the selected word and paste it in the text box below you should get only the word <em>overflows</em>.</li>
</ol>
<input type="text">
<div id="content"><span class="spacer"></span>This text <span class="highlite">overflows</span>.</div>
<div id="region">
<p></p>
</div>
</body>
</html>

60
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/overflow-and-selection-003.html Normal file
View file

@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Selection for elements in a region's visible 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="assert" content="For regions that have visible overflow, their content should be selectable as without regions">
<meta name="flags" content="interact">
<style>
p {
margin: 0;
}
input {
width: 100px;
}
#content {
font-family: monospace;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
.spacer {
width: 100%;
height: 80px;
display: block;
}
.highlite {
color: deepskyblue;
}
#region {
border: 2px solid black;
background-color: lightgray;
width: 100px;
height: 100px;
flow-from: f;
}
#region p {
background-color: red;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<ol>
<li>You should not see any red before or during this test.</li>
<li>Using the mouse select the blue word (<em>overflows</em>) outside the gray square.</li>
<li>You should see the selection highlight drawn around the word.</li>
<li>If you copy the selected word and paste it in the text box below you should get only the word <em>overflows</em>.</li>
</ol>
<input type="text">
<div id="content"><span class="spacer"></span>This text <span class="highlite">overflows</span>.</div>
<div id="region">
<p></p>
</div>
</body>
</html>

54
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/region-chain-change-on-hover-001.html Normal file
View file

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove element from named flow when hovering the 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="assert" content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
width: 100px;
height: 100px;
}
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
#region {
flow-from: f;
border-left: 100px solid lime;
float: left;
}
#region:hover + div.content {
flow-into: none;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a green and a black square side by side.</li>
<li>Move the mouse over the green square. <strong>Expected:</strong> The black square moves under the green square.</li>
</ol>
<div id="region" class="box">
<p></p>
</div>
<div class="box content">
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/region-chain-change-on-hover-002.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove region from region chain on CSS :hover</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="assert" content="Changing the flow-from property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
width: 100px;
height: 100px;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#region {
flow-from: f;
border-left: 100px solid lime;
background-color: lime;
}
#region:hover {
/*Remove the line below or make it to _NOT_ change the actual value of the flow-from property and it will trigger as expected*/
flow-from: none;
border-color: red;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a green and a black square side by side.</li>
<li>Move the mouse over the green square. <strong>Expected:</strong> The black square will turn green.</li>
</ol>
<div id="content">
<p>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</p>
</div>
<div id="region" class="box">
<p></p>
</div>
</body>
</html>

52
tests/wpt/web-platform-tests/css/css-regions/interactivity/hit-testing/region-chain-change-on-hover-003.html Normal file
View file

@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Regions: Remove region from region chain on CSS hover</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="assert" content="Changing the flow-from property should be possible in rules that use the :hover pseudoclass">
<meta name="flags" content="interact ahem">
<style>
p {
margin: 0;
}
.box {
width: 100px;
height: 100px;
}
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
flow-into: f;
}
#region {
flow-from: f;
border-left: 100px solid lime;
}
div.content:hover + #region {
flow-from: none;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a green and a black square side by side</li>
<li>Move the mouse over the black square. <strong>Expected: </strong> The black square will disappear.</li>
</ol>
<div class="box content">
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
</div>
<div id="region" class="box">
</div>
</body>
</html>