chao
/
mini_cocopi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							<!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">
<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;">&nbsp;</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>