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, 15and select the various resources created by this page in the left column of the 16Resources panel. Note that for test-4 ... 17test-11, the -sync and -async versions should show the same Form Data, 18Request 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"; 30Hovering over either parm should yield a tooltip: 31<i>"Double-Click to toggle between URL encoded and decoded formats"</i>. 32Double-clicking on either parm should toggle between encoded and decoded 33versions of the string. The decoded form is initially displayed. 34The 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: äbc" and "parm2: d ě 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 68by double-clicking on one of the parameters. The values should be: 69<pre> 70parm1: %C3%A4bc 71parm2: 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 76is 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)", 80with the parenthesized part in red. 81<br>Form Data (2): "parm1: % (unable to decode value)" and "parm2: % (unable to decode value)", 82with the parenthesized part in red. 83<p>Note that you should view the encoded values of the query string parameters 84by 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 88by pressing the submit button. The Resources panel should have a "test-form" 89resource, with the following data: 90<p>Form Data (2): "field1: value ä;b;c" and "field2:value d;ě;f" 91<p>Note that you should view the encoded values of the query string parameters 92by double-clicking on one of the parameters. The values should be: 93<pre> 94field1: value+%C3%A4%3Bb%3Bc 95field2: 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 ä;b;c"><br> 101<span style="font-size:200%">field2:</span> <input style="font-size:200%" type="text" name="field2" value="value d;ě;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&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%">ä</span> - LATIN SMALL LETTER A WITH DIAERESIS 119Unicode: 0x00E4 == 228 120UTF8: C3 A4 121HTML: &auml; 122 123<span style="font-size:300%">ě</span> - LATIN SMALL LETTER E WITH CARON 124Unicode: 0x011B == 283 125UTF8: C4 9B 126HTML: &#x11B; 127</pre> 128 129<script> 130 131function 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 142function 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 156function 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 199var headersPlain = [ 200 ["Content-Type", "text/plain"] 201]; 202 203var headersForm = [ 204 ["Content-Type", "application/x-www-form-urlencoded"] 205]; 206 207var headersFormExtra1 = [ 208 ["Content-Type", "application/x-www-form-urlencoded;something-else=here"] 209]; 210 211var headersFormExtra2 = [ 212 ["Content-Type", "application/x-www-form-urlencoded ; something-else=here"] 213]; 214 215var headersBinary = [ 216 ["Content-Type", "application/octet-stream"] 217]; 218 219var longText = "some text with a \n"; 220for (var i=0; i<40; i++) { 221 longText += "very-"; 222} 223longText += "long\nline in it"; 224 225var binaryData = "some text with binary data\n"; 226for (var i=0; i<256; i++) { 227 binaryData += String.fromCharCode(i); 228} 229binaryData += "\nin the middle of it"; 230 231 232sendXHR("http://example.org/test-4^"); 233sendXHR("http://example.org/test-5^?parm1=abc"); 234sendXHR("http://example.org/test-6^?parm1=def&parm2=g%20h+i&parm3=jj++kk%20%20ll"); 235 236sendXHR("http://example.org/test-7^", "POST", null, longText); 237sendXHR("http://example.org/test-8^", "POST", headersPlain, longText); 238sendXHR("http://example.org/test-9^", "POST", headersBinary, binaryData); 239sendXHR("http://example.org/test-10^", "POST", headersForm, "parm1=abc"); 240sendXHR("http://example.org/test-11^", "POST", headersForm, "parm1=def&parm2=g%20h+i"); 241sendXHR("http://example.org/test-12^?parm1=abc&parm2=d%20e+f", "POST", headersForm, "parm1=ghi&parm2=j%20k+l"); 242sendXHR("http://example.org/test-13^?parm1=%C3%A4bc&parm2=d%20%C4%9B+f", "POST", headersFormExtra1, "parm1=ghi&parm2=j%20k+l"); 243sendXHR("http://example.org/test-14^?parm1=%C3%A4bc&parm2=d%20%C4%9B+f", "POST", headersFormExtra2, "parm1=ghi&parm2=j%20k+l"); 244sendXHR("http://example.org/test-15^?parm1=%&parm2=%", "POST", headersForm, "parm1=%&parm2=%"); 245 246</script> 247 248</body> 249</html>