mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-10-22 02:25:05 +00:00
116 lines
2.9 KiB
HTML
116 lines
2.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 showAlert() {
|
|
document.getElementById('alert').hidden = false;
|
|
}
|
|
|
|
function hideAlert() {
|
|
document.getElementById('alert').hidden = true;
|
|
}
|
|
|
|
function ariaShowBack() {
|
|
document.getElementById('back').setAttribute('aria-hidden', false);
|
|
}
|
|
|
|
function ariaHideBack() {
|
|
document.getElementById('back').setAttribute('aria-hidden', true);
|
|
}
|
|
|
|
function ariaShowIframe() {
|
|
document.getElementById('iframe').setAttribute('aria-hidden', false);
|
|
}
|
|
|
|
function ariaHideIframe() {
|
|
document.getElementById('iframe').setAttribute('aria-hidden', true);
|
|
}
|
|
|
|
function renameFruit() {
|
|
document.getElementById('fruit').setAttribute('aria-label', 'banana');
|
|
}
|
|
|
|
function renameSlider() {
|
|
document.getElementById('slider').setAttribute(
|
|
'aria-label', 'mover');
|
|
}
|
|
|
|
function changeSliderValue() {
|
|
document.getElementById('slider').setAttribute('aria-valuenow', '5');
|
|
document.getElementById('slider').setAttribute(
|
|
'aria-valuetext', 'medium');
|
|
}
|
|
|
|
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>
|