WebKitSite/misc/DatabaseTester.html

   1 <html>
   2 <head>
   3 <title>Database Tester</title>
   4 <style>
   5 div.Experiment { border: 1px solid black;
   6                  padding: 1 1 1 1; }
   7 </style>
   8 <script>
   9
  10 var junkDB;
  11
  12 openJunkDatabase();
  13
  14 function openJunkDatabase()
  15 {
  16     if (!window.openDatabase)
  17         return;
  18
  19     try {
  20         junkDB = openDatabase("JunkDataTest", "1.0", "Repository for junk data to test quota management", 1);
  21     } catch(err) { alert("Failed to open database - " + err); }
  22
  23     junkDB.transaction(function(tx) {
  24         tx.executeSql("SELECT COUNT(*) FROM JunkDataTable", [], null, function(tx, error) {
  25             tx.executeSql("CREATE TABLE JunkDataTable (data TEXT)", []);
  26         });
  27     }, function(err) {
  28         alert("Error - " + err.code);
  29     });
  30
  31     return junkDB;
  32 }
  33
  34 var totalAdded = 0;
  35
  36 function addData()
  37 {
  38     if (!junkDB && !openJunkDatabase())
  39         return;
  40
  41     var length = Number(dataSizeElement().value);
  42     var data = makeStringOfLength(length);
  43
  44     junkDB.transaction(function(tx) {
  45         tx.executeSql("INSERT INTO JunkDataTable (data) VALUES (?)", [data], function(tx, result) {
  46             totalAdded += length;
  47             updateTotal();
  48         }, function(tx, err) {
  49             alert("Failed to insert data into database - (" + err.code + ") " + err.message);
  50         });
  51     }, function(err) {
  52         alert("Failed to open transaction with junk database - (" + err.code + ") " + err.message);
  53     });
  54 }
  55
  56 function makeStringOfLength(n)
  57 {
  58     var str = "X";
  59     while (str.length < n)
  60         str += ((str.length << 1) < n ? str : makeStringOfLength(n - str.length));
  61
  62     return str;
  63 }
  64
  65 var _dataSizeElement;
  66 function dataSizeElement()
  67 {
  68     if (!_dataSizeElement)
  69         _dataSizeElement = document.getElementById("DataSize");
  70
  71     return _dataSizeElement;
  72 }
  73
  74 function updateDataSize()
  75 {
  76     var num = Number(dataSizeElement().value);
  77     document.getElementById("DataSizeDisplay").value = "Data size: " + num;
  78 }
  79
  80 function updateTotal()
  81 {
  82     document.getElementById("TotalAdded").innerHTML = "Total characters added: " + totalAdded;
  83 }
  84
  85 </script>
  86 </head>
  87 <body>
  88 <p>This page is a dumping ground for various tests and features for the HTML5 client side database storage spec.</p>
  89 <p>Any manual tests or experiments needing for development of the storage API can be placed here so they are accessible on a live web page</p>
  90
  91 <div class="Experiment">
  92 <input id="DataSize" type="range" min="0" max="1048576" step="1024" value="1024" oninput="updateDataSize();"><br>
  93 <textarea id="DataSizeDisplay" rows="1" cols="15" readonly style="resize:none"></textarea><br>
  94 <textarea id="TotalAdded" rows="1" cols="25" readonly style="resize:none">Total characters added: 0</textarea><br>
  95 <script>updateDataSize();</script>
  96 <button onclick="addData();">Add Data</button>
  97 </div>
  98 </body>
  99 </html>