ManualTests/inspector/display-form-data.html

   1 <html>
   2 <head>
   3 <title>Tests for Bug 22920</title>
   4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   5 </head>
   6
   7 <body>
   8 <p>Tests for
   9 <ul>
  10 <li><p><a href="https://bugs.webkit.org/show_bug.cgi?id=22920">Bug 22920: Inspector Request Headers Should Show Data/Variables/Parameters Sent With Request</a>
  11 <li><p><a href="https://bugs.webkit.org/show_bug.cgi?id=28970">Bug 28970: content-type parameters not taken into account when building form-data</a>
  12 </ul>
  13
  14 <p>To test, open the Inspector on this page, go to the Resources panel,
  15 and select the various resources created by this page in the left column of the
  16 Resources panel.  Note that for test-4 ...
  17 test-11, the -sync and -async versions should show the same Form Data,
  18 Request Payload and/or Query String Parameter values.
  19
  20 <ul>
  21
  22 <li><p><b>test-1</b>:
  23 <br>no Form Data, Request Payload or Query String Parameters
  24
  25 <li><p><b>test-2</b>:
  26 <br>Query String Parameters (1): "parm1: abc"
  27
  28 <li><p><b>test-3</b>:
  29 <br>Query String Parameters (2): "parm1: def" and "parm2: g h i";
  30 Hovering over either parm should yield a tooltip:
  31 <i>"Double-Click to toggle between URL encoded and decoded formats"</i>.
  32 Double-clicking on either parm should toggle between encoded and decoded
  33 versions of the string.  The decoded form is initially displayed.
  34 The encoded form of parm2 is "g%20h+i".
  35
  36 <li><p><b>test-4</b>:
  37 <br>no Form Data, Request Payload or Query String Parameters
  38
  39 <li><p><b>test-5</b>:
  40 <br>Query String Parameters (1): "parm1: abc"
  41
  42 <li><p><b>test-6</b>:
  43 <br>Query String Parameters (3): "parm1: def" and "parm2: g h i" and "parm3: jj kk ll"
  44
  45 <li><p><b>test-7</b>:
  46 <br>Request Payload: 3 lines of text data with a very long 2nd line which should wrap
  47
  48 <li><p><b>test-8</b>:
  49 <br>Request Payload: 3 lines of text data with a very long 2nd line which should wrap
  50
  51 <li><p><b>test-9</b>:
  52 <br>Request Payload: 3 lines of text data with a very long 2nd line of binary data which should wrap
  53
  54 <li><p><b>test-10</b>:
  55 <br>Form Data (1): "parm1: abc"
  56
  57 <li><p><b>test-11</b>:
  58 <br>Form Data (2): "parm1: def" and "parm2: g h i"
  59
  60 <li><p><b>test-12</b>:
  61 <br>Query String Parameters (2): "parm1: abc" and "parm2: d e f"
  62 <br>Form Data (2): "parm1: ghi" and "parm2: j k l"
  63
  64 <li><p><b>test-13</b>:
  65 <br>Query String Parameters (2): "parm1: &auml;bc" and "parm2: d &#x11B; f"
  66 <br>Form Data (2): "parm1: ghi" and "parm2: j k l"
  67 <p>Note that you should view the encoded values of the query string parameters
  68 by double-clicking on one of the parameters.  The values should be:
  69 <pre>
  70 parm1: %C3%A4bc
  71 parm2: d%20%C4%9B+f
  72 </pre>
  73
  74 <li><p><b>test-14</b>:
  75 <br>Same results as for test-13, a slightly different but compatible Content-Type
  76 is used for the form data.
  77
  78 <li><p><b>test-15</b>:
  79 <br>Query String Parameters (2): "parm1: % (unable to decode value)" and "parm2: % (unable to decode value)",
  80 with the parenthesized part in red.
  81 <br>Form Data (2): "parm1: % (unable to decode value)" and "parm2: % (unable to decode value)",
  82 with the parenthesized part in red.
  83 <p>Note that you should view the encoded values of the query string parameters
  84 by double-clicking on one of the parameters.  The values for all four parameters should be "%".
  85
  86 <li><p><b>test-form</b>:
  87 <br>For this test, invoke the form at the bottom of the page
  88 by pressing the submit button.  The Resources panel should have a "test-form"
  89 resource, with the following data:
  90 <p>Form Data (2): "field1: value &auml;;b;c" and "field2:value d;&#x11B;;f"
  91 <p>Note that you should view the encoded values of the query string parameters
  92 by double-clicking on one of the parameters.  The values should be:
  93 <pre>
  94 field1: value+%C3%A4%3Bb%3Bc
  95 field2: value+d%3B%C4%9B%3Bf</pre>
  96 </ul>
  97
  98 <p><b>test-form</b>
  99 <form id="form" action="http://example.org/test-form" method="post" enctype="application/x-www-form-urlencoded">
 100 <span style="font-size:200%">field1:</span> <input style="font-size:200%" type="text" name="field1" value="value &auml;;b;c"><br>
 101 <span style="font-size:200%">field2:</span> <input style="font-size:200%" type="text" name="field2" value="value d;&#x11B;;f"><br>
 102 <input type="submit">
 103 </form>
 104
 105 <div style="display:none">
 106
 107 <img src="http://example.org/test-1">
 108 <img src="http://example.org/test-2?parm1=abc">
 109 <img src="http://example.org/test-3?parm1=def&amp;parm2=g%20h+i">
 110
 111 </div>
 112
 113 <hr>
 114
 115 <p><b>NLS sample info</b>
 116
 117 <pre>
 118 <span style="font-size:300%">&auml;</span> - LATIN SMALL LETTER A WITH DIAERESIS
 119 Unicode: 0x00E4 == 228
 120 UTF8:    C3 A4
 121 HTML:    &amp;auml;
 122
 123 <span style="font-size:300%">&#x11B;</span> - LATIN SMALL LETTER E WITH CARON
 124 Unicode: 0x011B == 283
 125 UTF8:    C4 9B
 126 HTML:    &amp;#x11B;
 127 </pre>
 128
 129 <script>
 130
 131 function getReadyState(num) {
 132     switch(num) {
 133         case 0: return "uninitialized";
 134         case 1: return "loading";
 135         case 2: return "loaded";
 136         case 3: return "interactive";
 137         case 4: return "complete";
 138         default: return "unknown: " + num;
 139     }
 140 }
 141
 142 function getProcessXHR(request) {
 143     return function() {
 144         if (true) return;
 145         var rs = getReadyState(request.readyState);
 146         console.log("ready state change for " + request.url);
 147         console.log("   ready state:   " + rs);
 148         console.log("   response text: " + request.responseText);
 149         if (request.readyState == 4) {
 150             console.log("   status:        " + request.status);
 151             console.log("   status text:   " + request.statusText);
 152         }
 153     }
 154 }
 155
 156 function sendXHR(url, method, headers, body) {
 157     if (!method) method = "GET";
 158     if (!headers) headers = [];
 159     if (!body) body="";
 160
 161     // copy headers
 162     var headersNew = [];
 163     for (var i=0; i<headers.length; i++) {
 164         headersNew.push(headers[i]);
 165     }
 166     headers = headersNew;
 167
 168     if (body != "") {
 169         headers.push(["Content-Length", body.length.toString()]);
 170     }
 171
 172     // sync
 173     var req = new XMLHttpRequest();
 174
 175     req.url = url.replace("^","-sync");
 176     req.onreadystatechange = getProcessXHR(req);
 177     req.open(method, req.url, false);
 178
 179     for (var i=0; i<headers.length; i++) {
 180         req.setRequestHeader(headers[i][0], headers[i][1]);
 181     }
 182
 183     req.send(body);
 184
 185     // async
 186     var req = new XMLHttpRequest();
 187
 188     req.url = url.replace("^","-async");
 189     req.onreadystatechange = getProcessXHR(req);
 190     req.open(method, req.url, true);
 191
 192     for (var i=0; i<headers.length; i++) {
 193         req.setRequestHeader(headers[i][0], headers[i][1]);
 194     }
 195
 196     req.send(body);
 197 }
 198
 199 var headersPlain = [
 200     ["Content-Type", "text/plain"]
 201 ];
 202
 203 var headersForm = [
 204     ["Content-Type", "application/x-www-form-urlencoded"]
 205 ];
 206
 207 var headersFormExtra1 = [
 208     ["Content-Type", "application/x-www-form-urlencoded;something-else=here"]
 209 ];
 210
 211 var headersFormExtra2 = [
 212     ["Content-Type", "application/x-www-form-urlencoded ; something-else=here"]
 213 ];
 214
 215 var headersBinary = [
 216     ["Content-Type", "application/octet-stream"]
 217 ];
 218
 219 var longText = "some text with a \n";
 220 for (var i=0; i<40; i++) {
 221     longText += "very-";
 222 }
 223 longText += "long\nline in it";
 224
 225 var binaryData = "some text with binary data\n";
 226 for (var i=0; i<256; i++) {
 227     binaryData += String.fromCharCode(i);
 228 }
 229 binaryData += "\nin the middle of it";
 230
 231
 232 sendXHR("http://example.org/test-4^");
 233 sendXHR("http://example.org/test-5^?parm1=abc");
 234 sendXHR("http://example.org/test-6^?parm1=def&parm2=g%20h+i&parm3=jj++kk%20%20ll");
 235
 236 sendXHR("http://example.org/test-7^", "POST", null, longText);
 237 sendXHR("http://example.org/test-8^", "POST", headersPlain, longText);
 238 sendXHR("http://example.org/test-9^", "POST", headersBinary, binaryData);
 239 sendXHR("http://example.org/test-10^", "POST", headersForm, "parm1=abc");
 240 sendXHR("http://example.org/test-11^", "POST", headersForm, "parm1=def&parm2=g%20h+i");
 241 sendXHR("http://example.org/test-12^?parm1=abc&parm2=d%20e+f", "POST", headersForm, "parm1=ghi&parm2=j%20k+l");
 242 sendXHR("http://example.org/test-13^?parm1=%C3%A4bc&parm2=d%20%C4%9B+f", "POST", headersFormExtra1, "parm1=ghi&parm2=j%20k+l");
 243 sendXHR("http://example.org/test-14^?parm1=%C3%A4bc&parm2=d%20%C4%9B+f", "POST", headersFormExtra2, "parm1=ghi&parm2=j%20k+l");
 244 sendXHR("http://example.org/test-15^?parm1=%&parm2=%", "POST", headersForm, "parm1=%&parm2=%");
 245
 246 </script>
 247
 248 </body>
 249 </html>