| <!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> |
