Chromium Code Reviews| 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> |