tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

non-modal-dialog-layout.html (2620B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=author href="mailto:falken@chromium.org">
      4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
      5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=382594">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style>
     10 /* Remove body margin and dialog styles for easier positioning expected values */
     11 body {
     12  height: 10000px;
     13  margin: 0;
     14 }
     15 
     16 dialog {
     17  margin: 0;
     18  border: 0;
     19  padding: 0;
     20  width: auto;
     21  height: auto;
     22  max-width: initial;
     23  max-height: initial;
     24 }
     25 
     26 #absolute-div {
     27  position: absolute;
     28  top: 800px;
     29  height: 50px;
     30  width: 90%;
     31 }
     32 
     33 #relative-div {
     34  position: relative;
     35  top: 20px;
     36  height: 30px;
     37 }
     38 </style>
     39 
     40 <div id="absolute-div">
     41  <div id="relative-div">
     42    <dialog id="dialog">It is my dialog.</dialog>
     43  </div>
     44 </div>
     45 
     46 <script>
     47 test(() => {
     48  const dialog = document.querySelector('#dialog');
     49  const div = document.querySelector('#div-dialog');
     50  const relativeContainer = document.querySelector('#relative-div');
     51  const offset = 50;
     52  dialog.style.top = offset + 'px';
     53  dialog.style.left = offset + 'px';
     54 
     55  dialog.style.position = 'absolute';
     56  dialog.show();
     57  assert_equals(
     58    dialog.getBoundingClientRect().top,
     59    relativeContainer.getBoundingClientRect().top + offset,
     60    'Absolute position.');
     61  assert_equals(
     62    dialog.getBoundingClientRect().left,
     63    relativeContainer.getBoundingClientRect().left + offset,
     64    'Absolute position.');
     65 
     66  dialog.style.position = 'static';
     67  assert_true(dialog.open);
     68  assert_equals(
     69    dialog.getBoundingClientRect().top,
     70    relativeContainer.getBoundingClientRect().top,
     71    'Static position.');
     72  assert_equals(
     73    dialog.getBoundingClientRect().left,
     74    relativeContainer.getBoundingClientRect().left,
     75    'Static position.');
     76  dialog.close();
     77 
     78  dialog.style.position = 'relative';
     79  dialog.show();
     80  assert_equals(
     81    dialog.getBoundingClientRect().top,
     82    relativeContainer.getBoundingClientRect().top + offset,
     83    'Relative position.');
     84  assert_equals(
     85    dialog.getBoundingClientRect().left,
     86    relativeContainer.getBoundingClientRect().left + offset,
     87    'Relative position.');
     88  dialog.close();
     89 
     90  dialog.style.position = 'fixed';
     91  dialog.show();
     92  assert_equals(
     93    dialog.getBoundingClientRect().top,
     94    offset,
     95    'Fixed position.');
     96  assert_equals(
     97    dialog.getBoundingClientRect().left,
     98    offset,
     99    'Fixed position.');
    100  dialog.close();
    101 }, 'Tests layout of non-modal dialogs.');
    102 </script>