mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
114 lines
No EOL
3.1 KiB
HTML
114 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<meta charset="UTF-8" />
|
|
<title>CSS Regions: JavaScript event handlers for elements in a region's scroll overflow</title>
|
|
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
|
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
|
|
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help" />
|
|
<meta 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" name="assert" />
|
|
<meta content="dom interact" name="flags" />
|
|
<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"> </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> |