Andreas Hocevar
200 lines
3.8 KiB
HTML
200 lines
3.8 KiB
HTML
<!DOCTYPE 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">
|
|
<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>
|