third_party/WebKit/LayoutTests/custom-elements/spec/define-element.html - Issue 2089383003: Added test for step 2, 14 in define element.

Side by Side Diff: third_party/WebKit/LayoutTests/custom-elements/spec/define-element.html

Issue 2089383003: Added test for step 2, 14 in define element. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: observedAttributes should not be invoked test update Created 4 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <title>Custom Elements: defineElement</title>	2 <title>Custom Elements: defineElement</title>

3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus tomelementsregistry">	3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus tomelementsregistry">

4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">	4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">

5 <script src="../../resources/testharness.js"></script>	5 <script src="../../resources/testharness.js"></script>

6 <script src="../../resources/testharness-helpers.js"></script>	6 <script src="../../resources/testharness-helpers.js"></script>

7 <script src="../../resources/testharnessreport.js"></script>	7 <script src="../../resources/testharnessreport.js"></script>

8 <script src="resources/custom-elements-helpers.js"></script>	8 <script src="resources/custom-elements-helpers.js"></script>

9 <body>	9 <body>

10 <script>	10 <script>

(...skipping 46 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
57 test_with_window((w) => {	57 test_with_window((w) => {

58 class X extends w.HTMLElement {}	58 class X extends w.HTMLElement {}

59 class Y extends w.HTMLElement {}	59 class Y extends w.HTMLElement {}

60 w.customElements.define('a-a', X);	60 w.customElements.define('a-a', X);

61 assert_throws('NotSupportedError', () => {	61 assert_throws('NotSupportedError', () => {

62 w.customElements.define('a-a', Y);	62 w.customElements.define('a-a', Y);

63 }, 'defining an element with a name that is already defined should throw ' +	63 }, 'defining an element with a name that is already defined should throw ' +

64 'a NotSupportedError');	64 'a NotSupportedError');

65 }, 'Duplicate name');	65 }, 'Duplicate name');

66	66

67 // TODO(dominicc): Update this (perhaps by removing this comment) when

68 // https://github.com/whatwg/html/pull/1333 lands/issue

69 // https://github.com/whatwg/html/issues/1329 is closed.

70 test_with_window((w) => {	67 test_with_window((w) => {

71 class Y extends w.HTMLElement {}	68 class Y extends w.HTMLElement {}

72 let X = (function () {}).bind({});	69 let X = (function () {}).bind({});

73 Object.defineProperty(X, 'prototype', {	70 Object.defineProperty(X, 'prototype', {

74 get() {	71 get() {

75 assert_throws('NotSupportedError', () => {	72 assert_throws('NotSupportedError', () => {

76 w.customElements.define('a-a', Y);	73 w.customElements.define('a-a', Y);

77 }, 'defining an element with a name that is being defined should ' +	74 }, 'defining an element with a name that is being defined should ' +

78 'throw a NotSupportedError');	75 'throw a NotSupportedError');

79 return new Object();	76 return new Object();

80 }	77 }

81 });	78 });

82 // TODO(dominicc): When callback retrieval is implemented, change this

83 // to pass a valid constructor and recursively call define when retrieving

84 // callbacks instead; then it is possible to assert the first definition

85 // worked:

86 // let element = Reflect.construct(HTMLElement, [], X);

87 // assert_equals(element.localName, 'a-a');

88 w.customElements.define('a-a', X);	79 w.customElements.define('a-a', X);

	80 assert_equals(w.customElements.get('a-a'), X, 'the first definition should hav e worked');

89 }, 'Duplicate name defined recursively');	81 }, 'Duplicate name defined recursively');

90	82

91 test_with_window((w) => {	83 test_with_window((w) => {

92 class X extends w.HTMLElement {}	84 class X extends w.HTMLElement {}

93 w.customElements.define('a-a', X);	85 w.customElements.define('a-a', X);

94 assert_throws('NotSupportedError', () => {	86 assert_throws('NotSupportedError', () => {

95 w.customElements.define('a-b', X);	87 w.customElements.define('a-b', X);

96 }, 'defining an element with a constructor that is already in the ' +	88 }, 'defining an element with a constructor that is already in the ' +

97 'registry should throw a NotSupportedError');	89 'registry should throw a NotSupportedError');

98 }, 'Reused constructor');	90 }, 'Reused constructor');

99	91

100 // TODO(dominicc): Update this (perhaps by removing this comment) when

101 // https://github.com/whatwg/html/pull/1333 lands/issue

102 // https://github.com/whatwg/html/issues/1329 is closed.

103 test_with_window((w) => {	92 test_with_window((w) => {

104 let X = (function () {}).bind({});	93 let X = (function () {}).bind({});

105 Object.defineProperty(X, 'prototype', {	94 Object.defineProperty(X, 'prototype', {

106 get() {	95 get() {

107 assert_throws('NotSupportedError', () => {	96 assert_throws('NotSupportedError', () => {

108 w.customElements.define('second-name', X);	97 w.customElements.define('second-name', X);

109 }, 'defining an element with a constructor that is being defined ' +	98 }, 'defining an element with a constructor that is being defined ' +

110 'should throw a NotSupportedError');	99 'should throw a NotSupportedError');

111 return new Object();	100 return new Object();

112 }	101 }

113 });	102 });

114 // TODO(dominicc): When callback retrieval is implemented, change this

115 // to pass a valid constructor and recursively call define when retrieving

116 // callbacks instead; then it is possible to assert the first definition

117 // worked:

118 // let element = Reflect.construct(HTMLElement, [], X);

119 // assert_equals(element.localName, 'a-a');

120 w.customElements.define('first-name', X);	103 w.customElements.define('first-name', X);

	104 assert_equals(w.customElements.get('first-name'), X, 'asserting that the first definition worked');
	dominicc (has gone to gerrit) 2016/06/28 03:54:57 Be consistent; consider using the same description Be consistent; consider using the same description as line 80.
121 }, 'Reused constructor recursively');	105 }, 'Reused constructor recursively');

122	106

123 test_with_window((w) => {	107 test_with_window((w) => {

124 function F() {}

125 F.prototype = 42;

126 assert_throws(TypeError.prototype, () => {

127 w.customElements.define('a-a', F);

128 }, 'defining an element with a constructor with a prototype that is not an ' +

129 'object should throw a TypeError');

130 }, 'Retrieved prototype is a non-object');

131

132 test_with_window((w) => {

133 assert_throws(TypeError.prototype, () => {	108 assert_throws(TypeError.prototype, () => {

134 let not_a_constructor = () => {};	109 let not_a_constructor = () => {};

135 let invalid_name = 'annotation-xml';	110 let invalid_name = 'annotation-xml';

136 w.customElements.define(invalid_name, not_a_constructor);	111 w.customElements.define(invalid_name, not_a_constructor);

137 }, 'defining an element with an invalid name and invalid constructor ' +	112 }, 'defining an element with an invalid name and invalid constructor ' +

138 'should throw a TypeError for the constructor and not a SyntaxError');	113 'should throw a TypeError for the constructor and not a SyntaxError');

139	114

140 class C extends w.HTMLElement {}	115 class C extends w.HTMLElement {}

141 w.customElements.define('a-a', C);	116 w.customElements.define('a-a', C);

142 assert_throws('SYNTAX_ERR', () => {	117 assert_throws('SYNTAX_ERR', () => {

(...skipping 59 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
202 constructor() {	177 constructor() {

203 super();	178 super();

204 invocations.push(this);	179 invocations.push(this);

205 }	180 }

206 }	181 }

207 w.customElements.define('a-a', C);	182 w.customElements.define('a-a', C);

208 assert_array_equals([a], invocations,	183 assert_array_equals([a], invocations,

209 'the constructor should have been invoked once for the ' +	184 'the constructor should have been invoked once for the ' +

210 'elements in the shadow tree');	185 'elements in the shadow tree');

211 }, 'Upgrade: shadow tree');	186 }, 'Upgrade: shadow tree');

	187

	188 // last statement in 14
	dominicc (has gone to gerrit) 2016/06/28 03:54:57 Could you add a step number, and maybe some text, Could you add a step number, and maybe some text, here? The spec could change; adding some more clues will make it easier to work out if it has changed.
	189 test_with_window((w) => {

	190 class Y extends w.HTMLElement {}

	191 let X = (function () {}).bind({});

	192 Object.defineProperty(X, 'prototype', {

	193 get() { throw { name: 42 }; }

	194 });

	195 assert_throws({ name: 42 }, () => {

	196 w.customElements.define('a-a', X);

	197 }, 'should rethrow constructor exception');

	198 w.customElements.define('a-a', Y);

	199 assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');

	200 }, 'If an exception is thrown, rethrow that exception and terminate the algorith m');

	201

	202 // 14.1

	203 test_with_window((w) => {

	204 let X = (function () {}).bind({});

	205 Object.defineProperty(X, 'prototype', {

	206 get() { throw { name: 'prototype throws' }; }

	207 });

	208 assert_throws({ name: 'prototype throws' }, () => {

	209 w.customElements.define('a-a', X);

	210 }, 'Get(constructor, prototype) should throw');

	211 }, 'Rethrow any exceptions thrown while getting prototype');

	212

	213 // 14.2

	214 test_with_window((w) => {

	215 function F() {}

	216 F.prototype = 42;

	217 assert_throws(TypeError.prototype, () => {

	218 w.customElements.define('a-a', F);

	219 }, 'defining an element with a constructor with a prototype that is not an ' +

	220 'object should throw a TypeError');

	221 }, 'Retrieved prototype is a non-object');

	222

	223 // 14.3, 14.5, 14.7

	224 test_with_window((w) => {

	225 let callbacks = ['connectedCallback', 'disconnectedCallback', 'attributeChange dCallback'];

	226 function F() {}

	227 F.prototype = new Object();
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 I don't think you need this line; functions get a I don't think you need this line; functions get a prototype property with a fresh Object automatically. Below too.
	228 for(var i=0; i < callbacks.length; i++ ){

	229 Object.defineProperty(F.prototype, callbacks[i], {

	230 get() { throw { name: callbacks[i] }; }

	231 });

	232 assert_throws({ name: callbacks[i] }, () => {

	233 w.customElements.define('a-a', F);
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 Wow, this is clever. I guess callbacks are in the Wow, this is clever. I guess callbacks are in the reverse order they're retrieved. Could you put a brief comment on the callbacks = line explaining that? If we add callbacks in future, the person editing this file will need to be aware of that.
	234 }, 'Get(prototype, callback) should throw');
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 If this fails, it will not be clear which one is b If this fails, it will not be clear which one is buggy. Maybe include callbacks[i] in the message?
	235 }

	236 }, 'Rethrow any exceptions thrown while getting a callback');

	237

	238 // 14.4, 14.6, 14.9.1

	239 test_with_window((w) => {

	240 let callbacks = ['connectedCallback', 'disconnectedCallback', 'attributeChange dCallback'];
	dominicc (has gone to gerrit) 2016/06/28 03:54:57 Consider moving this outside the test and reusing Consider moving this outside the test and reusing it.
	241 function F() {}

	242 F.prototype = new Object();

	243 for(var i=0; i < callbacks.length; i++){

	244 Object.defineProperty(F.prototype, callbacks[i], {

	245 get() {return new Object(); }

	246 });

	247 assert_throws(TypeError.prototype, () => {

	248 w.customElements.define('a-a', F);

	249 }, 'defining an element with a constructor with a callback that is ' +

	250 'not undefined and not callable should throw a TypeError');

	251 }

	252 }, 'Retrieved callback is not undefined and not callable');

	253

	254 // 14.9.2

	255 test_with_window((w) => {
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 As with my comment with the other file, maybe usin As with my comment with the other file, maybe using class syntax is more illustrative and succinct here?
	256 let X = (function () {}).bind({});

	257 X.prototype = new Object();

	258 Object.defineProperty(X.prototype, 'attributeChangedCallback', {

	259 get() { return function(){}; }

	260 });

	261 Object.defineProperty(X, 'observedAttributes', {

	262 get() { throw { name: 'observedAttributes throws' }; }

	263 });

	264 assert_throws({ name: 'observedAttributes throws' }, () => {

	265 w.customElements.define('a-a', X);

	266 }, 'Get(constructor, observedAttributes) should throw');

	267 }, 'Rethrow any exceptions thrown while getting observedAttributes');

	268

	269 // 14.9.2 test Get(constructor, observedAttributes) does not throw if

	270 // attributeChangedCallback is undefined.

	271 test_with_window((w) => {

	272 let observedAttributes_invoked = false;

	273 let X = (function () {}).bind({});

	274 X.prototype = new Object();

	275 Object.defineProperty(X, 'observedAttributes', {

	276 get() { observedAttributes_invoked = true; }

	277 });

	278 assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes ) should not be invoked');

	279 }, 'Get(constructor, observedAttributes) should not execute if ' +

	280 'attributeChangedCallback is undefined');
	dominicc (has gone to gerrit) 2016/06/28 03:54:57 Be consistent with indentation; compare this to li Be consistent with indentation; compare this to line 293. I think the style you have on line 293 where the 's line up is more readable, but at least be consistent.
	281

	282 // step 2

	283 // 2. If constructor is an interface object whose corresponding interface either is

	284 // HTMLElement or has HTMLElement in its set of inherited interfaces, throw

	285 // a TypeError and abort these steps.

	286 // 3. If name is not a valid custom element name, then throw a "SyntaxError" DOM Exception

	287 // and abort these steps.

	288 test_with_window((w) => {

	289 let invalid_name = 'annotation-xml';

	290 assert_throws('SYNTAX_ERR', () => {

	291 w.customElements.define(invalid_name, HTMLElement);
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 Indenting JavaScript is surprisingly hard, with ar Indenting JavaScript is surprisingly hard, with arrow functions, promise chains, multiline string literals, etc. In general your style is good. I think in this case, this needs to be indented a couple of spaces to set the body of the arrow function off from the closing brace. Below too.
	292 }, 'defining a constructor that is an interface object whose interface is HT MLElement' +

	293 'should throw TypeError not SyntaxError');

	294 }, 'Invalid constructor');

	295

	296 // step 2

	297 test_with_window((w) => {

	298 let invalid_name = 'annotation-xml';

	299 assert_throws('SYNTAX_ERR', () => {

	300 w.customElements.define(invalid_name, HTMLButtonElement);

	301 }, 'defining a constructor that is an interface object who has HTMLElement i n its set of inhertied interfaces' +

	302 'should throw TypeError not SyntaxError');

	303 }, 'Invalid constructor');

	304

	305 // 2

	306 test_with_window((w) => {

	307 let invalid_name = 'annotation-xml';

	308 assert_throws('SYNTAX_ERR', () => {

	309 w.customElements.define(invalid_name, class extends HTMLElement {});

	310 }, 'defining author-defined custom element constructor' +

	311 'should pass this step without throwing TypeError');
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 Here's another opportunity to be consistent. You p Here's another opportunity to be consistent. You probably want to make a string literal as long as possible before wrapping it, and then choose a good place to wrap it (I try to put the space between words at the end of the earlier line.) In this case there's a bit of a visual difference between 301 and 310; 301 is much longer. Go for making this as long is will fit within 80 columns, then wrapping. That way everything will be a consistent length.
	312 }, 'Invalid constructor');

	313

	314 // this test throws Invalid Constructor Error

	315 test_with_window((w) => {

	316 let element = w.document.createElement('a-a');

	317 w.document.body.appendChild(element);

	318 class Foo extends Set{

	319 constructor(){

	320 return Reflect.construct(HTMLElement, [], Foo);

	321 }

	322 }

	323 w.customElements.define('a-a', Foo);

	324 }, 'Invalid constructor');

212 </script>	325 </script>

	326 </body>
	dominicc (has gone to gerrit) 2016/06/28 03:54:58 Thanks for adding this; makes sense to add it sinc Thanks for adding this; makes sense to add it since we wrote the open tag.
OLD	NEW

« no previous file with comments | « no previous file | no next file » | no next file with comments »