mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
81 lines
1.9 KiB
HTML
81 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Traversal Rule test document</title>
|
|
<meta charset="utf-8" />
|
|
<script>
|
|
var frameContents = "<html>" +
|
|
"<head><title>such app</title></head>" +
|
|
"<body>" +
|
|
"<h1>wow</h1>" +
|
|
"<ul>" +
|
|
'<li><label><input type="checkbox">many option</label></li>' +
|
|
"</ul>" +
|
|
'<label for="r">much range</label>' +
|
|
'<input min="0" max="10" value="5" type="range" id="r">' +
|
|
"</body>" +
|
|
"</html>";
|
|
|
|
function hideAlert() {
|
|
document.getElementById("alert").hidden = true;
|
|
}
|
|
|
|
function toggleLight() {
|
|
var lightSwitch = document.getElementById("light");
|
|
lightSwitch.setAttribute("aria-checked",
|
|
lightSwitch.getAttribute("aria-checked") === "true" ? "false" : "true");
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
#windows {
|
|
position: relative;
|
|
width: 320px;
|
|
height: 480px;
|
|
}
|
|
|
|
#windows > iframe {
|
|
z-index: 1;
|
|
}
|
|
|
|
#windows > div[role='dialog'] {
|
|
z-index: 2;
|
|
background-color: pink;
|
|
}
|
|
|
|
#windows > * {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div>Phone status bar</div>
|
|
<div id="windows">
|
|
<button id="back">Back</button>
|
|
<div role="dialog" id="alert" hidden>
|
|
<h1>This is an alert!</h1>
|
|
<p>Do you agree?</p>
|
|
<button onclick="setTimeout(hideAlert, 500)">Yes</button>
|
|
<button onclick="hideAlert()">No</button>
|
|
</div>
|
|
<div id="appframe"></div>
|
|
</div>
|
|
<button id="home">Home</button>
|
|
<button id="fruit" aria-label="apple"></button>
|
|
<span id="light" role="switch" aria-label="Light" aria-checked="false" onclick="toggleLight()"></span>
|
|
<div id="live" aria-live="polite" aria-label="live">
|
|
<div id="slider" role="slider" aria-label="slider" aria-valuemin="0"
|
|
aria-valuemax="10" aria-valuenow="0"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|