charset/singlebyte/table.html

<!DOCTYPE HTML>
<head>
<style>
.match {
  background-color: green;
  color: white;
}
.not-match {
  background-color: red;
  color: white;
}
</style>
<body>

<table>
<thead><tr><th>Original Byte<th>Result String
<tbody>
</table>

<iframe style=display:none src=dummy></iframe>

<script>
  var query = (location.search || '?').substring (1).split (/;/);
  var charset = decodeURIComponent (query[0] || '');
  var plain = query[1] == 'plain';
  var iframe = document.getElementsByTagName ('iframe')[0];
  var tbody = document.getElementsByTagName ('tbody')[0];
  var nextByte = -1;
  var lastTimer;
  var results = [];
  var timeoutError = true;

  var mappingTables = {};
  var mappingTableNames = ['ie7vista', 'safari31vista', 'opera92vista', 'fx2vista'];
  var theadtr = document.getElementsByTagName ('thead')[0].firstChild;
  for (var i = 0; i < mappingTableNames.length; i++) {
    readMappingTable (charset, mappingTableNames[i]);
    theadtr.appendChild (document.createElement ('th'))
        .appendChild (document.createTextNode (mappingTableNames[i]));
  }

  doNext ();

  function readMappingTable (charset, uaid) {
    var c = charset.replace (/[^A-Za-z0-9_-]/g, '_');
    var fileName = 'result/' + c + '-' + uaid + '.txt';
    var xhr = new XMLHttpRequest ();
    xhr.open ('GET', fileName, false);
    xhr.send (null);
    if (xhr.status < 400) {
      mappingTables[uaid] = xhr.responseText.split ('\n');
    }
  } // readMappingTable
  
  function doNext () {
    clearTimeout (lastTimer);
    timeoutError = false

    if (nextByte == -1) {
      if (document.all && !window.opera) {
        iframe.onreadystatechange = function () {
          if (this.readyState == 'complete') {
            doNext ();
          }
        };
      } else {
        iframe.onload = doNext;
      }
      nextByte++;
      iframe.src = 'about:blank';
    } else if (nextByte <= 0xFF) {
      if (document.all && !window.opera) {
        iframe.onreadystatechange = function () {
          if (this.readyState == 'complete') {
            addTableRow ();
          }
        };
      } else {
        iframe.onload = addTableRow;
      }
      lastTimer = setTimeout (function () {
        timeoutError = true;
        iframe.onload = null;
        iframe.onreadystatechange = null;
        addTableRow ();
      }, 5000);
      iframe.src = 'charset.cgi/' + encodeURIComponent (charset)
          + '?' + nextByte++ + (plain ? ';plain' : '');
    } else {
      iframe.onload = null;
      iframe.onreadystatechange = null;
      doLast ();
    }
  } // doNext

  function addTableRow () {
    var tr = document.createElement ('tr');

    tr.appendChild (document.createElement ('th'))
        .appendChild (document.createTextNode (getByteCode (nextByte - 1)));

    var td = tr.appendChild (document.createElement ('td'));
    var docbody = iframe.contentWindow.document.body;
    var value = timeoutError ? '' : docbody.firstChild ? docbody.firstChild.firstChild ? docbody.firstChild.firstChild.data : docbody.firstChild.data || '' : '';
    for (var i = 0; i < value.length; i++) {
      td.appendChild (document.createTextNode (getCharCode (value.charCodeAt (i)) + ' '));
    }
    results[nextByte - 1] = td.innerText || td.textContent;

    for (var i = 0; i < mappingTableNames.length; i++) {
      var tableid = mappingTableNames[i];
      var cell = tr.appendChild (document.createElement ('td'));
      var cellValue = '';
      if (mappingTables[tableid]) {
        cellValue = mappingTables[tableid][nextByte - 1];
        cell.appendChild (document.createTextNode (cellValue));
        if (cellValue != results[nextByte - 1]) {
          cell.className = 'not-match';
        } else {
          cell.className = 'match';
        }
      } else {
        cell.className = 'no-data';
      }
    }

    tbody.appendChild (tr);

    doNext ();
  } // addTableRow

  function doLast () {
    var ta = document.createElement ('textarea');
    ta.value = results.join ('\n');
    document.body.appendChild (ta);
  } // doLast

  function getByteCode (c) {
    var r = c.toString (16).toUpperCase ();
    if (r.length < 2) {
      r = '0' + r;
    }
    return '0x' + r;
  } // getByteCode

  function getCharCode (c) {
    var r = c.toString (16).toUpperCase ();
    if (r.length < 2) {
      r = '000' + r;
    } else if (r.length < 3) {
      r = '00' + r;
    } else if (r.length < 4) {
      r= '0' + r;
    }
    return 'U+' + r;
  } // getCharCode

</script>
1	<!DOCTYPE HTML>
2	<head>
3	<style>
4	.match {
5	background-color: green;
6	color: white;
7	}
8	.not-match {
9	background-color: red;
10	color: white;
11	}
12	</style>
13	<body>
14
15	<table>
16	<thead><tr><th>Original Byte<th>Result String
17	<tbody>
18	</table>
19
20	<iframe style=display:none src=dummy></iframe>
21
22	<script>
23	var query = (location.search \|\| '?').substring (1).split (/;/);
24	var charset = decodeURIComponent (query[0] \|\| '');
25	var plain = query[1] == 'plain';
26	var iframe = document.getElementsByTagName ('iframe')[0];
27	var tbody = document.getElementsByTagName ('tbody')[0];
28	var nextByte = -1;
29	var lastTimer;
30	var results = [];
31	var timeoutError = true;
32
33	var mappingTables = {};
34	var mappingTableNames = ['ie7vista', 'safari31vista', 'opera92vista', 'fx2vista'];
35	var theadtr = document.getElementsByTagName ('thead')[0].firstChild;
36	for (var i = 0; i < mappingTableNames.length; i++) {
37	readMappingTable (charset, mappingTableNames[i]);
38	theadtr.appendChild (document.createElement ('th'))
39	.appendChild (document.createTextNode (mappingTableNames[i]));
40	}
41
42	doNext ();
43
44	function readMappingTable (charset, uaid) {
45	var c = charset.replace (/[^A-Za-z0-9_-]/g, '_');
46	var fileName = 'result/' + c + '-' + uaid + '.txt';
47	var xhr = new XMLHttpRequest ();
48	xhr.open ('GET', fileName, false);
49	xhr.send (null);
50	if (xhr.status < 400) {
51	mappingTables[uaid] = xhr.responseText.split ('\n');
52	}
53	} // readMappingTable
54
55	function doNext () {
56	clearTimeout (lastTimer);
57	timeoutError = false
58
59	if (nextByte == -1) {
60	if (document.all && !window.opera) {
61	iframe.onreadystatechange = function () {
62	if (this.readyState == 'complete') {
63	doNext ();
64	}
65	};
66	} else {
67	iframe.onload = doNext;
68	}
69	nextByte++;
70	iframe.src = 'about:blank';
71	} else if (nextByte <= 0xFF) {
72	if (document.all && !window.opera) {
73	iframe.onreadystatechange = function () {
74	if (this.readyState == 'complete') {
75	addTableRow ();
76	}
77	};
78	} else {
79	iframe.onload = addTableRow;
80	}
81	lastTimer = setTimeout (function () {
82	timeoutError = true;
83	iframe.onload = null;
84	iframe.onreadystatechange = null;
85	addTableRow ();
86	}, 5000);
87	iframe.src = 'charset.cgi/' + encodeURIComponent (charset)
88	+ '?' + nextByte++ + (plain ? ';plain' : '');
89	} else {
90	iframe.onload = null;
91	iframe.onreadystatechange = null;
92	doLast ();
93	}
94	} // doNext
95
96	function addTableRow () {
97	var tr = document.createElement ('tr');
98
99	tr.appendChild (document.createElement ('th'))
100	.appendChild (document.createTextNode (getByteCode (nextByte - 1)));
101
102	var td = tr.appendChild (document.createElement ('td'));
103	var docbody = iframe.contentWindow.document.body;
104	var value = timeoutError ? '' : docbody.firstChild ? docbody.firstChild.firstChild ? docbody.firstChild.firstChild.data : docbody.firstChild.data \|\| '' : '';
105	for (var i = 0; i < value.length; i++) {
106	td.appendChild (document.createTextNode (getCharCode (value.charCodeAt (i)) + ' '));
107	}
108	results[nextByte - 1] = td.innerText \|\| td.textContent;
109
110	for (var i = 0; i < mappingTableNames.length; i++) {
111	var tableid = mappingTableNames[i];
112	var cell = tr.appendChild (document.createElement ('td'));
113	var cellValue = '';
114	if (mappingTables[tableid]) {
115	cellValue = mappingTables[tableid][nextByte - 1];
116	cell.appendChild (document.createTextNode (cellValue));
117	if (cellValue != results[nextByte - 1]) {
118	cell.className = 'not-match';
119	} else {
120	cell.className = 'match';
121	}
122	} else {
123	cell.className = 'no-data';
124	}
125	}
126
127	tbody.appendChild (tr);
128
129	doNext ();
130	} // addTableRow
131
132	function doLast () {
133	var ta = document.createElement ('textarea');
134	ta.value = results.join ('\n');
135	document.body.appendChild (ta);
136	} // doLast
137
138	function getByteCode (c) {
139	var r = c.toString (16).toUpperCase ();
140	if (r.length < 2) {
141	r = '0' + r;
142	}
143	return '0x' + r;
144	} // getByteCode
145
146	function getCharCode (c) {
147	var r = c.toString (16).toUpperCase ();
148	if (r.length < 2) {
149	r = '000' + r;
150	} else if (r.length < 3) {
151	r = '00' + r;
152	} else if (r.length < 4) {
153	r= '0' + r;
154	}
155	return 'U+' + r;
156	} // getCharCode
157
158	</script>