1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html>
<meta name="timeout" content="long">
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/pull/7991">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function isAsciiLowerAlpha(codePoint) {
return codePoint >= 0x61 && codePoint <= 0x7A;
}
function isAsciiUpperAlpha(codePoint) {
return codePoint >= 0x41 && codePoint <= 0x5A;
}
function isAsciiAlpha(codePoint) {
return isAsciiLowerAlpha(codePoint) || isAsciiUpperAlpha(codePoint);
}
function isAsciiDigit(codePoint) {
return codePoint >= 0x30 && codePoint <= 0x39;
}
function isAsciiWhitespace(codePoint) {
return codePoint == 0x9 || codePoint == 0xA || codePoint == 0xC || codePoint == 0xD || codePoint == 0x20;
}
function debugString(str) {
const codePoints = [];
for (const c of str) {
codePoints.push(c.codePointAt(0));
}
return `code points: ${JSON.stringify(codePoints)}, string: "${str}"`;
}
const validCustomElementNames = [
'annotation-xml-custom',
];
const invalidCustomElementNames = [
'',
'annotation-xml',
'color-profile',
'font-face',
'font-face-src',
'font-face-uri',
'font-face-format',
'font-face-name',
'missing-glyph',
];
const testCodePoints = [0x1F171, 0x1F196, 0x10000];
for (let i = 0; i < 0x80; i++) {
testCodePoints.push(i);
}
const elementLocalNameRegex = /^(?:[A-Za-z][^\0\t\n\f\r\u0020/>]*|[:_\u0080-\u{10FFFF}][A-Za-z0-9-.:_\u0080-\u{10FFFF}]*)$/u;
function isValidCustomElementName(str) {
if (!str.length) {
return false;
}
if (!str.includes('-')) {
return false;
}
let first = true;
for (const c of str) {
const codePoint = c.codePointAt(0);
if (first) {
if (!isAsciiLowerAlpha(codePoint)) {
return false;
}
first = false;
}
if (isAsciiUpperAlpha(codePoint)) {
return false;
}
}
return elementLocalNameRegex.test(str);
}
// In order to test the branching logic of valid element local names and the
// requirement of having a '-' character, this method generates different
// variations of potential custom element names given two code points.
function createStringWithSeparatorMode(codePoint, prefix, separatorMode) {
const str = String.fromCodePoint(codePoint);
if (separatorMode == 0) {
return `${prefix}${str}`;
} else if (separatorMode == 1) {
return `${prefix}-${str}`;
} else if (separatorMode == 2) {
return `${prefix}${str}-element`;
}
}
for (const prefix of ['', 'a', 'A', ' ', '\0']) {
for (const codePoint of testCodePoints) {
for (const separatorMode of [0, 1, 2]) {
const str = createStringWithSeparatorMode(
codePoint, prefix, separatorMode);
if (isValidCustomElementName(str)) {
validCustomElementNames.push(str);
} else {
invalidCustomElementNames.push(str);
}
}
}
}
let nextClassNumber = 1;
function createElementClass() {
const name = `CustomElement${nextClassNumber++}`;
const newClass = function() {};
newClass.prototype = HTMLElement;
return newClass;
}
for (const validName of validCustomElementNames) {
promise_test(async t => {
const newClass = createElementClass();
customElements.define(validName, newClass);
await customElements.whenDefined(validName);
}, `Valid custom element name: ${debugString(validName)}`);
}
for (const invalidName of invalidCustomElementNames) {
promise_test(async t => {
const newClass = createElementClass();
assert_throws_dom(
'SyntaxError',
() => customElements.define(invalidName, newClass),
`customElements.define should have thrown`);
await promise_rejects_dom(t, 'SyntaxError',
customElements.whenDefined(invalidName),
`customElements.whenDefined should have thrown`);
}, `Invalid custom element name: ${debugString(invalidName)}`);
}
</script>
|
