accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
201 lines (175 loc) • 3.94 kB
HTML
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
Author: eae@google.com (Emil A Eklund)
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8" />
<title>Closure Unit Tests - goog.positioning</title>
<script src="../base.js"></script>
<style>
.box1 {
border: 1px solid black;
margin: 10px;
padding: 5px;
height: 150px;
}
.outerbox {
border: 1px solid gray;
padding: 3px;
margin: 5px 5px 5px 100px;
}
.box2 {
position: relative;
padding: 0px; /* If the padding has >0 value, IE6 fails some tests. */
margin: -2px;
}
.box8 {
position: absolute;
padding: 0px; /* If the padding has >0 value, IE6 fails some tests. */
margin: -2px;
width: 500px;
height: 100px;
}
.box9 {
border: 1px solid black;
margin: 10px;
padding: 5px;
height: 150px;
width: 150px;
}
.anchorFrame {
overflow: auto;
width: 100px;
height: 100px;
}
#popup1, #popup2, #popup3, #popup5, #popup6, #popup7 {
position: absolute;
border: 1px solid red;
width: 100px;
height: 100px;
}
#popup9 {
border: 1px solid green;
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
}
#popup8 {
position: absolute;
border: 1px solid red;
width: 100px;
height: 100px;
}
#anchor1 {
border: 1px solid blue;
}
#anchor4 {
position: absolute;
left: 2px;
}
#test-area {
height: 1000px;
position: relative;
width: 1000px;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
</style>
</head>
<body>
<div id='offscreen-anchor'
style='position: absolute; left: -1000px; top: -1000px'></div>
<div id="ltr" dir="ltr">
Left to right element.
</div>
<div id="rtl" dir="rtl">
Right to left element.
</div>
<div class="outerbox">
<div id="box1" class="box1">
<span id="anchor1">Anchor LTR.</span>
</div>
<div class="box2">
<div id="popup1">
<div>Popup ltr.</div>
</div>
</div>
</div>
<div class="outerbox" dir="rtl">
<div class="box1">
<span id="anchor2">Anchor RTL.</span>
</div>
<div class="box2">
<div id="popup2">
<div>Popup rtl.</div>
</div>
</div>
</div>
<div id="anchor4">
Anchor 4.
</div>
<div id="popup3">
Popup.
</div>
<div dir="rtl" style="border: 1px solid red;">
<div dir="rtl" style="position: relative; overflow: auto; width: 150px; height: 100px; border: 1px solid black;">
<div style="height: 200px;">
<span id="anchor5">Anchor 5.</span>
</div>
<div id="popup5">
Popup.
</div>
</div>
</div>
<iframe id="iframe-standard" src="positioning_test_standard.html" class="anchorFrame">
</iframe>
<iframe id="iframe-quirk" src="positioning_test_quirk.html" class="anchorFrame">
</iframe>
<div id="popup6">Popup6</div>
<div style="position:relative;height:100px;width:100px;overflow:auto;">
I hate positioning!
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div id="popup7">Popup7</div>
</div>
<iframe id="nested-outer" src="positioning_test_iframe1.html"
style="overflow:auto;width:150px;height:150px;"></iframe>
<div class="outerbox" dir="rtl">
<div class="box1">
<span id="anchor8">Anchor8 RTL.</span>
</div>
<div class="box8 overflow-auto">
<div id="popup8">
<div>Popup8 rtl.</div>
</div>
<div style="width:10000px;"> </div>
</div>
</div>
<div id="box9" class="box9">
<div id="popup9">
<div>Popup9</div>
</div>
<span id="anchor9">Anchor9</span>
</div>
<div id="test-area"></div>
<script>
goog.require('goog.positioningTest');
</script>
</body>
</html>