Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(139)

Unified Diff: third_party/WebKit/LayoutTests/custom-elements/spec/parsing.html

Issue 2200613002: The HTML parser synchronously creates custom elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add tests for innerHTML. Created 4 years, 4 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 side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/custom-elements/spec/parsing.html
diff --git a/third_party/WebKit/LayoutTests/custom-elements/spec/parsing.html b/third_party/WebKit/LayoutTests/custom-elements/spec/parsing.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2163b2a0e5731519e969851dc4c42080c723828
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/custom-elements/spec/parsing.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/custom-elements-helpers.js"></script>
+<body>
+<script>
+'use strict';
+
+// Looks up the preceeding element (which should be a template
+// element) and creates a Promise test. The test name is taken from
+// the template's data-test attribute.
+//
+// The content of the template is loaded into an iframe. On load, f
+// is passed the frame's content window to run assertions.
+function test_with_content(f) {
+ let t = document.currentScript.previousElementSibling;
+ test_with_window(f, t.dataset.test, t.innerHTML);
+}
+
+// Searches the document for an iframe with the specified content window.
+function findFrameWithWindow(w) {
+ Array.prototype.forEach.call(document.querySelectorAll('iframe'), (f) => {
domenic 2016/08/05 08:39:50 What does this function do? Returning from within
dominicc (has gone to gerrit) 2016/08/15 01:33:15 Oops. Fixed! :P
+ if (f.contentWindow === w) {
+ return f;
+ }
+ return undefined;
+ });
+ return null;
+}
+</script>
+
+<template data-test="the parser synchronously creates elements">
+ <script>
+ 'use strict';
+
+ window.invocations = [];
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ invocations.push('constructor');
+ }
+ static get observedAttributes() { return ['x']; }
+ attributeChangedCallback(name, oldValue, newValue, nsuri) {
+ invocations.push(`${name}="${newValue}"`);
+ }
+ connectedCallback() {
+ invocations.push('connected');
+ }
+ });
+ </script>
+ <a-a x="y">
+ <script>
+ 'use strict';
+
+ invocations.push('script');
+ </script>
+ </a-a>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ assert_array_equals(w.invocations,
+ ['constructor', 'x="y"', 'connected', 'script']);
+});
+</script>
+
+<template data-test="element creation failure produces unknown element">
+ <script>
+ 'use strict';
+
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ return document.documentElement;
+ }
+ });
+ </script>
+ <a-a>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ let e = w.document.querySelector('a-a');
+ assert_true(e.matches(':not(:defined)'));
+ assert_equals(Object.getPrototypeOf(e), w.HTMLUnknownElement.prototype);
+});
+</script>
+
+
+<template data-test="remove during creation">
domenic 2016/08/05 08:39:50 What is this testing? That removing works? (It's a
dominicc (has gone to gerrit) 2016/08/15 01:33:15 I just figured this is something which could go wr
+ <script>
+ 'use strict';
+
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ parent.findFrameWithWindow(window).remove();
+ }
+ });
+ </script>
+ <a-a>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ assert_equals(findFrameWithWindow(w), null);
+});
+</script>
+
+<template data-test="modify tree during creation">
+ <script>
+ 'use strict';
+
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ document.querySelector('b').remove();
+ }
+ });
+ </script>
+ <b>
+ <a-a>
+ </b>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ assert_equals(w.document.querySelectorAll('b').length, 0);
+});
+</script>
+
+<template data-test="destructive writes are blocked during construction">
+ <script>
+ 'use strict';
+
+ window.invocations = [];
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ invocations.push('constructor');
+ document.write(
+ `<script>'use strict'; invocations.push('written');</scr${'i'}pt>`);
+ }
+ connectedCallback() {
+ invocations.push('connected');
+ }
+ });
+ </script>
+ <a-a>
+ <script>
+ 'use strict';
+ invocations.push('parsed');
+ </script>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ assert_array_equals(
+ w.invocations,
+ ['constructor', 'connected', 'parsed'],
+ 'the destructive document.write content should have been ignored');
+});
+</script>
+
+<template data-test="non-destructive writes are not blocked">
+ <script>
+ 'use strict';
+
+ window.invocations = [];
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ invocations.push('constructor');
+ document.write(
+ `<script>'use strict'; invocations.push('written');</scr${'i'}pt>`);
+ }
+ connectedCallback() {
+ invocations.push('connected');
+ }
+ });
+ document.write('<a-a>');
+ invocations.push('post write');
+ </script>
+ <script>
+ 'use strict';
+ invocations.push('parsed');
+ </script>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ assert_array_equals(
+ w.invocations,
+ ['constructor', 'connected', 'post write', 'written', 'parsed'],
+ 'the non-destructive document.write content should have been inserted');
+});
+</script>
+
+<template data-test="innerHTML is not blocked by custom element constructors">
+ <script>
+ 'use strict';
+
+ window.invocations = [];
+ customElements.define('a-a', class extends HTMLElement {
+ constructor() {
+ super();
+ invocations.push(`construct ${this.id}`);
+ if (!this.id) {
+ // If the ID attribute is not set, this was created
+ // synchronously by the parser. Adding children at this point
+ // would cause creation to fail, so embiggen the previous
+ // element instead.
+ document.querySelector('span').innerHTML = `<a-a id="r">`;
+ }
+ }
+ connectedCallback() {
+ invocations.push(`connected ${this.parentNode.localName}/${this.id}`);
+ }
+ });
+ </script>
+ <span></span>
+ <a-a id="q"></a-a>
+ <script>
+ 'use strict';
+ invocations.push('parsed');
+ </script>
+</template>
+<script>
+'use strict';
+
+test_with_content((w) => {
+ console.log(w.invocations.join());
+ assert_array_equals(
+ w.invocations,
+ ['construct ', 'construct r', 'connected span/r', 'connected body/q',
+ 'parsed'],
+ 'custom element constructors should not block innerHTML');
+});
+</script>

Powered by Google App Engine
This is Rietveld 408576698