Skip to content

Instantly share code, notes, and snippets.

@dperini

dperini/namespaces-and-tag-name-case.html

Last active May 25, 2018 11:48
Show Gist options
  • Save dperini/ccc8e424d923c9bfbd25d4b95519ed32 to your computer and use it in GitHub Desktop.
Save dperini/ccc8e424d923c9bfbd25d4b95519ed32 to your computer and use it in GitHub Desktop.
Download ZIP
Influence of namespace in tag name case (lower, upper, mixed)
Raw
namespaces-and-tag-name-case.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Namespace testing</title>
<style>
body { font: 16px monospace; text-align: center; }
.table { display: table; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }
.row { display: table-row; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }
.col { display: table-cell; border-width: 1px 0 0 1px; border-style: solid; border-color: #000; }
.col { padding: 16px; text-align: center; }
.table { width: 50%; margin: 16px auto; }
.table:nth-of-type(1) .row:nth-of-type(1) .col:nth-of-type(1) { color: #d00; }
.table:nth-of-type(1) .row:nth-of-type(2) .col:nth-of-type(1) { color: #d00; }
.table:nth-of-type(2) .row:nth-of-type(1) .col:nth-of-type(1) { color: #d00; }
.table:nth-of-type(2) .row:nth-of-type(2) .col:nth-of-type(1) { color: #d00; }
.table:nth-of-type(1) .row { background-color: #fed; }
.table:nth-of-type(1) .row:nth-of-type(1) { background-color: #dcb; }
.table:nth-of-type(1) .col:nth-of-type(1) { background-color: #dcb; }
.table:nth-of-type(1) .row:nth-of-type(2) { background-color: #edc; }
.table:nth-of-type(2) .row { background-color: #fde; }
.table:nth-of-type(2) .row:nth-of-type(1) { background-color: #dbc; }
.table:nth-of-type(2) .col:nth-of-type(1) { background-color: #dbc; }
.table:nth-of-type(2) .row:nth-of-type(2) { background-color: #ecd; }
div > span { color: #d00; }
</style>
<script>
window.onload = function() {
var d = document, table, rows, row, cols, col, txt, cases,
type = 0 > d.contentType.indexOf('xml') ? 'HTML' : 'XHTML';
cases = Array('LowerCase', 'UpperCase', 'MixedCase');
txt = d.createTextNode('Content-Type: ' + d.contentType);
d.body.appendChild(d.createElement('h1')).appendChild(txt);
txt = d.createTextNode('namespaceURI: ' + d.documentElement.namespaceURI);
d.body.appendChild(d.createElement('h2')).appendChild(txt);
test_tag('div', 0, 3);
test_tag('svg', 3, 6);
function test_tag(name, a, l) {
txt = d.createTextNode(
(name == 'div' ? 'THE' : 'NON') +
' NATIVE ' + name.toUpperCase() +
' TAG IN A ' + type + ' DOCUMENT');
d.body.appendChild(d.createElement('h3')).appendChild(txt);
(table = d.createElement('div')).setAttribute('class', 'table');
(row = d.createElement('div')).setAttribute('class', 'row');
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode('USED'));
for (i = 0; 3 > i; ++i) {
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode(cases[i]));
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode(cases[i]));
}
table.appendChild(row);
(row = d.createElement('div')).setAttribute('class', 'row');
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode('TYPE'));
for (i = 0; 3 > i; ++i) {
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode('nodeName'));
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode('localName'));
}
table.appendChild(row);
rows = navigator.test.split('\n');
rows.pop();
for (i = a; l > i; ++i) {
(row = d.createElement('div')).setAttribute('class', 'row');
cols = rows[i].split('-');
for (j = 0, k = cols.length; k > j; ++j) {
(col = d.createElement('div')).setAttribute('class', 'col');
row.appendChild(col).appendChild(d.createTextNode(cols[j]));
}
table.appendChild(row);
}
d.body.appendChild(table);
}
d.body.appendChild(d.createElement('div')).innerHTML = '<span>USED</span> = case of element tag name used during creation';
d.body.appendChild(d.createElement('div')).innerHTML = '<span>TYPE</span> = method used to dynamically create the element';
};
</script>
<script>
(function() {
var i, k, out, d = document, s = ' - ',
types = Array('PARSED', 'NORMAL', 'PREFIX'),
parserNode = d.createElementNS(null, 'DIV'), html = '',
tags = Array('div', 'DIV', 'DiV', 'svg', 'SVG', 'sVg'),
type = 0 > d.contentType.indexOf('xml') ? 'HTML' : 'XHTML',
env = {
'PARSED': function(x) { return parserNode.children[x]; },
'NORMAL': function(x) { return d.createElement(tags[x]); },
'PREFIX': function(x) { return d.createElementNS('', tags[x]); }
};
for (i = 0; 6 > i; ++i) { parserNode.innerHTML += '\x3c' + tags[i] + '>\x3c/' + tags[i] + '>'; }
console.log('%cContent-Type: %s', 'color: #00f; font-size: 32px', d.contentType);
console.log('%cnamespaceURI: %s', 'color: #c90; font-size: 16px', d.documentElement.namespaceURI);
console.log('\n THE NATIVE %cDIV %cTAG IN A %c%s %cDOCUMENT\n\n',
'color: #0c0', 'color: #000', 'color: #c00', type, 'color: #000');
create_mode(0, 3);
console.log('\n NON NATIVE %cSVG %cTAG IN A %c%s %cDOCUMENT\n\n',
'color: #0c0', 'color: #000', 'color: #c00', type, 'color: #000');
create_mode(3, 6);
// save and avoid a global
navigator.test = html;
function create_mode(a, b) {
for (j = 0; 3 > j; ++j) {
out = types[j] + ' - ';
for (i = a; b > i; ++i) {
k = env[types[j]](i);
out += (i > a ? s : '') +
k.nodeName + s + k.localName;
}
html += out + '\x0a';
console.log(out);
}
}
})();
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment