test_position.xhtml

mozilla-central/toolkit/content/tests/chrome/test_position.xhtml (file symbol)

Enable keyboard shortcuts

Source code

File a bug in Toolkit :: UI Widgets

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

This test gets skipped with pattern: os == 'android'
Manifest: toolkit/content/tests/chrome/chrome.toml

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>

<!--

  XUL Widget Test for positioning

-->

<window title="position" width="500" height="600"

        onload="setTimeout(runTest, 0);"

        style="margin: 0; border: 0; padding; 0;"

        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

<hbox id="box1">

  <button label="0" style="width: 100px; height: 40px; margin: 3px;"/>

</hbox>

<scrollbox id="box2" orient="vertical" align="start"

           style="height: 50px; overflow: hidden; margin-left: 2px; padding: 1px;">

  <deck>

    <scrollbox id="box3" orient="vertical" align="start"

               style="height: 100px; overflow: scroll; margin: 1px; padding: 0;">

      <vbox id="innerscroll" style="width: 200px" align="start">

        <button id="button1" label="1" style="width: 90px; max-width: 100px; min-width: 80px; min-height: 25px; height: 35px; max-height: 50px; margin: 5px; border: 4px; padding: 7px; appearance: none;"/>

        <menu id="menu">

          <menupopup id="popup" style="appearance: none; margin:0; border: 0; padding: 0;"

                                onpopupshown="menuOpened()"

                                onpopuphidden="if (event.target == this) SimpleTest.finish()">

            <menuitem label="One"/>

            <menu id="submenu" label="Three">

              <menupopup id="subpopup" style="appearance: none; margin:0; border: 0; padding: 0;"

                         onpopupshown="submenuOpened()">

                <menuitem label="Four"/>

              </menupopup>

            </menu>

          </menupopup>

        </menu>

        <button label="2" style="max-width: 100px; max-height: 20px; margin: 5px;"/>

        <button label="3" style="max-width: 100px; max-height: 20px; margin: 5px;"/>

        <button label="4" style="max-width: 100px; max-height: 20px; margin: 5px;"/>

      </vbox>

      <box style="height: 200px"/>

    </scrollbox>

  </deck>

</scrollbox>

<body xmlns="http://www.w3.org/1999/xhtml">

<p id="display"></p>

<div id="content" style="display: none">

</div>

<pre id="test">

</pre>

</body>

<script>

<![CDATA[

SimpleTest.waitForExplicitFinish();

function runTest()

  var winwidth = document.documentElement.getBoundingClientRect().width;

  var box1 = $("box1");

  checkPosition("box1", box1, 0, 0, winwidth, 46);

  var box2 = $("box2");

  checkPosition("box2", box2, 2, 46, winwidth, 96);

  // height is height(box1) = 46 + margin-top(box3) = 1 + margin-top(button1) = 5

  var button1 = $("button1");

  checkPosition("button1", button1, 9, 53, 99, 88);

  box2.scrollTo(7, 16);

  // clientRect height is offset from root so is 16 pixels vertically less

  checkPosition("button1 scrolled", button1, 9, 37, 99, 72);

  var box3 = $("box3");

  box3.scrollTo(1, 2);

  checkPosition("button1 scrolled", button1, 9, 35, 99, 70);

  $("menu").open = true;

function menuOpened()

  $("submenu").open = true;

function submenuOpened()

  var menu = $("menu");

  var menuleft = Math.round(menu.getBoundingClientRect().left);

  var menubottom = Math.round(menu.getBoundingClientRect().bottom);

  var submenu = $("submenu");

  var submenutop = Math.round(submenu.getBoundingClientRect().top);

  var submenuright = Math.round(submenu.getBoundingClientRect().right);

  checkPosition("popup", $("popup"), menuleft, menubottom, -1, -1);

  checkPosition("subpopup", $("subpopup"), submenuright, submenutop, -1, -1);

  menu.open = false;

function checkPosition(testid, elem, cleft, ctop, cright, cbottom)

  // -1 for right or bottom means that the exact size should not be

  // checked, just ensure it is larger then the left or top position

  var rect = elem.getBoundingClientRect();

  is(Math.round(rect.left), cleft, testid + " client rect left");

  if (testid != "popup")

    is(Math.round(rect.top), ctop, testid + " client rect top");

  if (cright >= 0)

    is(Math.round(rect.right), cright, testid + " client rect right");

  else

    ok(rect.right - rect.left > 20, testid + " client rect right");

  if (cbottom >= 0)

    is(Math.round(rect.bottom), cbottom, testid + " client rect bottom");

  else

    ok(rect.bottom - rect.top > 15, testid + " client rect bottom");

]]>

</script>

</window>