Popup chaining test suite

by limd

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Popup chaining test suite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
  </head>

  <body>

    <div data-role="page" id="page1" data-theme="a">

      <div data-role="header">
        <h1>Popup chaining tests</h1>
      </div>

      <div data-role="content">
        <div class="outer ui-btn-up-a ui-corner-all">
          <p class="notes ui-corner-all" style="">
            <span class="ui-li-desc">
          <strong><big>Notes:</big></strong><br />
          <strong>Immediate open/close popups programmatically (tests 1 & 3) seems not to work at all</strong></br>
          IE7 needs a timeout around 100 ms for test 2<br />
          Firefox 12: Test 1 popup 2 flashes in/out, Test 2 & 4 ok<br />
          Firefox 14, Safari 5.1.4, 5.1.7 Win, iOS 5.1, Chrome 21, IE8: Test 2 and 4 ok<br />
          </span>
          </p>
          <div class="ui-bar">
            <label for="tout">Timeout for Test 2 and 4 in milliseconds:</label>
            <input type="range" id="tout" min="10" max="600" step="10" value=50 data-highlight="true" />
          </div>
          <div class="ui-bar ui-bar-b ui-corner-top">1) Open the first popup. Clicking the button there will close the first and immediately open the second popup.
            <a href="#pop1" id="btn1" data-rel="popup">popup chain close > open</a>
          </div>

          <div class="ui-bar ui-bar-d">2) Open the first popup. Clicking the button there will close the first and open the second popup after <span class="time">50</span> milliseconds.
            <a href="#pop1" id="btn2" data-rel="popup">popup chain with timeout</a>
          </div>

  ...

CSS

.ui-header .ui-title {
  margin: .6em 5% .8em !important;
}

#picdiv {
  background-color: #111;
  margin: 8px;
  padding: 5px;
  border: 3px solid #222;
}

#pic {
  max-width: 90%;
}

div.outer {
  min-width: 250px;
  max-width: 600px;
  margin: auto;
  padding: .9em;
}

p.header2 {
  position: absolute;
  font-weight: bold;
  color: cornsilk;
  text-shadow: 1px 1px 0 black;
  text-align: center;
  bottom: 10px;
  left: 10px
}

div.ui-bar:first-letter {
  font-size: 135%;
}

.notes {
  margin: -.5em .3em .5em !important;
  padding-top: 1em !important;
  line-height: 1.2em;
}

#pop2:before {
  content: "fake-chained Popup";
  position: absolute;
  top: -44px;
  left: 12px;
  color: #dedede;
  background: firebrick;
  padding: .6em 1em;
}