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>

    <div class="ui-bar ui-bar-e">3) Open the first popup. Clicking the button there will close the...

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; }