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> |