diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/reactions/customized-builtins')
28 files changed, 1248 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLAreaElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLAreaElement.html new file mode 100644 index 0000000000..3d53ff87ff --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLAreaElement.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLAreaElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="alt, coords, shape, target, download, ping, rel, + referrerPolicy of HTMLAreaElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-area-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<map name="yellow" id="map"> +</map> +<img usemap="#yellow" src="/images/yellow.png" alt="yellow pic"> + +<script> + +function getParentElement() { + let map = document.getElementById('map'); + return map; +} + +function setAttributes(instance) { + instance.setAttribute('href', '/images/yellow.png'); +} + +testReflectAttributeWithDependentAttributes( + 'alt', 'alt', 'yellow pic', + 'yellow pic2', 'alt on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); +testReflectAttributeWithParentNode( + 'coords', 'coords', '1, 1, 5, 5', + '2, 2, 6, 6', 'coords on HTMLAreaElement', 'area', + getParentElement, HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'shape', 'shape', 'rectangle', + 'default', 'shape on HTMLAreaElement', 'area', + getParentElement, instance => instance.setAttribute('coords', '1, 1, 5, 5'), + HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'target', 'target', '_blank', + '_top', 'target on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'download', 'download', 'pic1', + 'pic2', 'download on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'ping', 'ping', 'location.href', + `${location.protocol}\/\/${location.host}`, 'ping on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'rel', 'rel', 'help', + 'noreferrer', 'rel on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); +testReflectAttributeWithDependentAttributes( + 'referrerPolicy', 'referrerpolicy', 'same-origin', + 'origin', 'referrerPolicy on HTMLAreaElement', 'area', + getParentElement, instance => setAttributes(instance), HTMLAreaElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLBaseElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLBaseElement.html new file mode 100644 index 0000000000..8d8470074c --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLBaseElement.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<head> +<title>Custom Elements: CEReactions on HTMLBaseElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="href, target of HTMLBaseElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-base-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> +</head> +<script> + +function getParentElement() { + return document.head; +} + +testReflectAttributeWithParentNode('href', 'href', '/', 'http://example.com/', 'href on HTMLBaseElement', 'base', getParentElement, HTMLBaseElement); +testReflectAttributeWithParentNode('target', 'target', '_blank', '_self', 'target on HTMLBaseElement', 'base', getParentElement, HTMLBaseElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLButtonElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLButtonElement.html new file mode 100644 index 0000000000..62f8b7b0c9 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLButtonElement.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLButtonElement interface</title> +<meta name="author" title="Zhang Xiaoyu" href="xiaoyux.zhang@intel.com"> +<meta name="assert" content=" autofocus, disabled, formAction, formEnctype, + formMethod, formNoValidate, formTarget, name, type, value + of HTMLButtonElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#htmlbuttonelement"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> +<body> +<script> + +function getParentElement(parentElementName) { + let parentElement = document.createElement(parentElementName); + document.body.appendChild(parentElement); + return parentElement; +} + +function setAttributes(instance) { + instance.setAttribute('type', 'submit'); +} + +testReflectBooleanAttribute( + 'autofocus', 'autofocus', 'autofocus on HTMLButtonElement', + 'button', HTMLButtonElement +); +testReflectBooleanAttribute( + 'disabled', 'disabled','disabled on HTMLButtonElement', + 'button', HTMLButtonElement +); +testReflectAttribute( + 'name', 'name', 'intel', + 'intel1', 'name on HTMLButtonElement', 'button', + HTMLButtonElement +); +testReflectAttribute( + 'value', 'value', 'HTML', + 'CSS', 'value on HTMLButtonElement', 'button', + HTMLButtonElement +); +testReflectAttributeWithParentNode( + 'type', 'type', 'submit', + 'reset', 'type on HTMLButtonElement', 'button', + () => getParentElement('form'), HTMLButtonElement +); +testReflectAttributeWithDependentAttributes( + 'formAction', 'formaction', 'intel.asp', + 'intel1.asp', 'formAction on HTMLButtonElement', 'button', + () => getParentElement('form'), instance => setAttributes(instance), + HTMLButtonElement +); +testReflectAttributeWithDependentAttributes( + 'formEnctype', 'formenctype', 'text/plain', 'multipart/form-data', + 'formEnctype on HTMLButtonElement', 'button', () => getParentElement('form'), + instance => setAttributes(instance), + HTMLButtonElement +); +testReflectAttributeWithDependentAttributes( + 'formMethod', 'formmethod', 'get', + 'post', 'formMethod on HTMLButtonElement', 'button', + () => getParentElement('form'), instance => setAttributes(instance), + HTMLButtonElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'formNoValidate', 'formnovalidate', 'formNoValidate on HTMLButtonElement', + 'button', () => getParentElement('form'), + instance => setAttributes(instance), + HTMLButtonElement +); +testReflectAttributeWithDependentAttributes( + 'formTarget', 'formtarget', '_blank', + '_self', 'formTarget on HTMLButtonElement', 'button', + () => getParentElement('form'), instance => setAttributes(instance), + HTMLButtonElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLCanvasElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLCanvasElement.html new file mode 100644 index 0000000000..6c7119252e --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLCanvasElement.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLCanvasElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="width, height of HTMLCanvasElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-canvas-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('width', 'width', '15', '20', 'width on HTMLCanvasElement', 'canvas', HTMLCanvasElement); +testReflectAttribute('height', 'height', '23', '45', 'height on HTMLCanvasElement', 'canvas', HTMLCanvasElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDataElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDataElement.html new file mode 100644 index 0000000000..f078c6aa02 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDataElement.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLDataElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="value of HTMLDataElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-data-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('value', 'value', '1234', '2345', 'name on HTMLDataElement', 'data', HTMLDataElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDetailsElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDetailsElement.html new file mode 100644 index 0000000000..4d81e3e627 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLDetailsElement.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLDetailsElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="open of HTMLDetailsElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-details-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectBooleanAttribute('open', 'open', 'open on HTMLDetailsElement', 'details', HTMLDetailsElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLEmbedElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLEmbedElement.html new file mode 100644 index 0000000000..923bde7583 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLEmbedElement.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLEmbedElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="src, type, width, height of + HTMLEmbedElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-embed-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute( + 'src', 'src', '/media/movie_5.mp4', + '/media/sound_5.mp3', 'src on HTMLEmbedElement', 'embed', + HTMLEmbedElement +); +testReflectAttribute( + 'type', 'type', 'video/webm', + 'video/mp4', 'type on HTMLEmbedElement', 'embed', + HTMLEmbedElement +); +testReflectAttribute( + 'width', 'width', '100', + '120', 'width on HTMLEmbedElement', 'embed', + HTMLEmbedElement +); +testReflectAttribute( + 'height', 'height', '100', + '120', 'height on HTMLEmbedElement', 'embed', + HTMLEmbedElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLFieldSetElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLFieldSetElement.html new file mode 100644 index 0000000000..517523551b --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLFieldSetElement.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLFieldSetElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="disabled, name of + HTMLFieldSetElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-fieldset-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement() { + let form = document.createElement("form"); + document.body.appendChild(form); + return form; +} + +testReflectBooleanAttributeWithParentNode( + 'disabled', 'disabled', 'disabled on HTMLFieldSetElement', + 'fieldset', getParentElement, HTMLFieldSetElement +); +testReflectAttributeWithParentNode( + 'name', 'name', 'fieldset1', + 'fieldset2', 'name on HTMLFieldSetElement', 'fieldset', + getParentElement, HTMLFieldSetElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLImageElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLImageElement.html new file mode 100644 index 0000000000..656e29eb17 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLImageElement.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLImageElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="alt, src, srcset, sizes, crossOrigin, useMap, + isMap, width, height, referrerPolicy, decoding of + HTMLImageElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-img-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<map name="yellow"></map> +<map name="green"></map> +<a href="/" id="a"> +</a> +<body> +<script> + +function getParentElement() { + return document.body; +} + +function setAttributes(instance) { + instance.setAttribute('src', '/images/green-1x1.png'); +} + +testReflectAttributeWithDependentAttributes( + 'alt', 'alt', 'image1', + 'image2', 'alt on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithParentNode( + 'src', 'src', '/images/green-1x1.png', + '/images/green-2x2.png', 'src on HTMLImageElement', 'img', + getParentElement, HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'srcset', 'srcset', '/images/green.png', + '/images/green-2x2.png', 'srcset on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'sizes', 'sizes', '(max-width: 32px) 28px', + '(max-width: 48px) 44px', 'sizes on HTMLImageElement', 'img', + getParentElement, instance => { + instance.setAttribute('src', '/images/green-1x1.png'); + instance.setAttribute('srcset', '/images/green-2x2.png 1x'); + }, HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'crossOrigin', 'crossorigin', 'use-credentials', + 'anonymous', 'crossOrigin on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'useMap', 'usemap', '#yellow', + '#green', 'useMap on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'isMap', 'ismap', 'isMap on HTMLImageElement', + 'img', () => { return document.getElementById('a') }, + instance => setAttributes(instance), + HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'width', 'width', '1', + '2', 'width on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'height', 'height', '1', + '2', 'height on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'referrerPolicy', 'referrerpolicy', 'same-origin', + 'origin', 'referrerPolicy on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); +testReflectAttributeWithDependentAttributes( + 'decoding', 'decoding', 'async', + 'sync', 'decoding on HTMLImageElement', 'img', + getParentElement, instance => setAttributes(instance), HTMLImageElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLInputElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLInputElement.html new file mode 100644 index 0000000000..adf43ee74d --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLInputElement.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Custom Elements: CEReactions on HTMLInputElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Wanming Lin" href="mailto:wanming.lin@intel.com"> +<meta name="assert" content="capture of HTMLInputElement interface must have CEReactions"> +<meta name="help" content="https://www.w3.org/TR/html-media-capture/#the-capture-attribute"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> +<body> +<script> +if ('capture' in HTMLInputElement.prototype) { + test(() => { + const element = define_build_in_custom_element(['capture'], HTMLInputElement, 'input'); + const instance = document.createElement('input', { is: element.name }); + + assert_array_equals(element.takeLog().types(), ['constructed']); + instance['capture'] = 'user'; + const logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), {name: 'capture', oldValue: null, newValue: 'user', namespace: null}); + }, 'capture on HTMLInputElement must enqueue an attributeChanged reaction when adding new attribute'); + + test(() => { + const element = define_build_in_custom_element(['capture'], HTMLInputElement, 'input'); + const instance = document.createElement('input', { is: element.name }); + + instance['capture'] = 'user'; + assert_array_equals(element.takeLog().types(), ['constructed', 'attributeChanged']); + instance['capture'] = 'environment'; + const logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), {name: 'capture', oldValue: 'user', newValue: 'environment', namespace: null}); + }, 'capture on HTMLInputElement must enqueue an attributeChanged reaction when replacing an existing attribute'); + + test(() => { + const element = define_build_in_custom_element(['capture'], HTMLInputElement, 'input'); + const instance = document.createElement('input', { is: element.name }); + + assert_array_equals(element.takeLog().types(), ['constructed']); + instance['capture'] = 'asdf'; + const logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), {name: 'capture', oldValue: null, newValue: 'asdf', namespace: null}); + }, 'capture on HTMLInputElement must enqueue an attributeChanged reaction when adding invalid value default'); + + test(() => { + const element = define_build_in_custom_element(['capture'], HTMLInputElement, 'input'); + const instance = document.createElement('input', { is: element.name }); + + instance['capture'] = 'user'; + assert_array_equals(element.takeLog().types(), ['constructed', 'attributeChanged']); + instance['capture'] = ''; + const logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), {name: 'capture', oldValue: 'user', newValue: '', namespace: null}); + }, 'capture on HTMLInputElement must enqueue an attributeChanged reaction when removing the attribute'); +} else { + // testharness.js doesn't allow a test file with no tests. + test(() => { + }, 'No tests if HTMLInputEement has no "capture" IDL attribute'); +} +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLIElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLIElement.html new file mode 100644 index 0000000000..adba2addf6 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLIElement.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLLIElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" + content="value of HTMLLIElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-li-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement(parentElementName) { + let parentElement = document.createElement(parentElementName); + document.body.appendChild(parentElement); + return parentElement; +} + +testReflectAttributeWithParentNode( + 'value', 'value', '3', + '5', 'value on HTMLLIElement in ol', 'li', + () => getParentElement('ol'), HTMLLIElement +); +testReflectAttributeWithParentNode( + 'value', 'value', '3', + '5', 'value on HTMLLIElement in ul', 'li', + () => getParentElement('ul'), HTMLLIElement +); +testReflectAttributeWithParentNode( + 'value', 'value', '3', + '5', 'value on HTMLLIElement in menu', 'li', + () => getParentElement('menu'), HTMLLIElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLabelElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLabelElement.html new file mode 100644 index 0000000000..2fe2741dad --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLLabelElement.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLLabelElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" + content="htmlFor of HTMLLabelElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-label-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<form id="form"> + <input type="radio" name="gender" id="male" value="male"> + <input type="radio" name="gender" id="female" value="female"> +</form> +<script> + +function getParentElement() { + let parentElement = document.getElementById("form"); + return parentElement; +} + +testReflectAttributeWithParentNode( + 'htmlFor', 'for', 'male', + 'female', 'htmlFor on HTMLLabelElement', 'label', + getParentElement, HTMLLabelElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMapElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMapElement.html new file mode 100644 index 0000000000..5b2e674afb --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMapElement.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLMapElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="name of HTMLMapElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-map-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<img usemap="#yellow" src="/images/yellow.png" alt="yellow pic"> +<img usemap="#green" src="/images/green.png" alt="green pic"> +<script> + +testReflectAttribute('name', 'name', 'yellow', 'green', 'name on HTMLMapElement', 'map', HTMLMapElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html new file mode 100644 index 0000000000..58e002c52c --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLMediaElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="src, crossOrigin, preload, autoplay, loop, + controls, defaultMuted of HTMLMediaElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#media-elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement() { + return document.body; +} + +function setAttributes(instance, value) { + instance.setAttribute('src', value); +} + +testReflectAttribute( + 'src', 'src', '/media/sound_0.mp3', + '/media/sound_5.mp3', 'src on HTMLMediaElement in audio', 'audio', + HTMLAudioElement +); +testReflectAttributeWithDependentAttributes( + 'crossOrigin', 'crossorigin', 'use-credentials', + 'anonymous', 'crossOrigin on HTMLMediaElement in audio', 'audio', + getParentElement, instance => setAttributes(instance, '/media/sound_5.mp3'), + HTMLAudioElement +); +testReflectAttributeWithDependentAttributes( + 'preload', 'preload', 'auto', + 'none', 'preload on HTMLMediaElement in audio', 'audio', + getParentElement, instance => setAttributes(instance, '/media/sound_5.mp3'), + HTMLAudioElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'autoplay', 'autoplay', 'autoplay on HTMLMediaElement in audio', + 'audio', getParentElement, + instance => setAttributes(instance, '/media/sound_5.mp3'), + HTMLAudioElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'loop', 'loop', 'loop on HTMLMediaElement in audio', + 'audio', getParentElement, + instance => setAttributes(instance, '/media/sound_5.mp3'), HTMLAudioElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'controls', 'controls', 'controls on HTMLMediaElement in audio', + 'audio', getParentElement, + instance => setAttributes(instance, '/media/sound_5.mp3'), + HTMLAudioElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'defaultMuted', 'muted', 'defaultMuted on HTMLMediaElement in audio', + 'audio', getParentElement, + instance => setAttributes(instance, '/media/sound_5.mp3'), + HTMLAudioElement +); + +testReflectAttribute( + 'src', 'src', '/media/video.ogv', + '/media/movie_5.mp4', 'src on HTMLMediaElement in video', 'video', + HTMLVideoElement +); +testReflectAttributeWithDependentAttributes( + 'crossOrigin', 'crossorigin', 'use-credentials', + 'anonymous', 'crossOrigin on HTMLMediaElement in video', 'video', + getParentElement, instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); +testReflectAttributeWithDependentAttributes( + 'preload', 'preload', 'auto', + 'none', 'preload on HTMLMediaElement in video', 'video', + getParentElement, instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'autoplay', 'autoplay', 'autoplay on HTMLMediaElement in video', + 'video', getParentElement, + instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'loop', 'loop', 'loop on HTMLMediaElement in video', + 'video', getParentElement, + instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'controls', 'controls', 'controls on HTMLMediaElement in video', + 'video', getParentElement, + instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); +testReflectBooleanAttributeWithDependentAttributes( + 'defaultMuted', 'muted', 'defaultMuted on HTMLMediaElement in video', + 'video', getParentElement, + instance => setAttributes(instance, '/media/movie_5.mp4'), + HTMLVideoElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMetaElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMetaElement.html new file mode 100644 index 0000000000..b6e8c06546 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMetaElement.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLMetaElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="name, httpEquiv, content of + HTMLMetaElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-meta-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +function getParentElement() { + return document.head; +} + +function setAttributes(instance, attribute, value) { + instance.setAttribute(attribute, value); +} + +testReflectAttributeWithDependentAttributes( + 'name', 'name', 'description', + 'keywords', 'name on HTMLMetaElement', 'meta', + getParentElement, + instance => setAttributes(instance, 'content', 'HTMLMetaElement'), + HTMLMetaElement +); +testReflectAttributeWithDependentAttributes( + 'content', 'content', 'name1', + 'name2', 'content on HTMLMetaElement', 'meta', + getParentElement, instance => setAttributes(instance, 'name', 'author'), + HTMLMetaElement +); + +test(() => { + let element = define_build_in_custom_element( + ['http-equiv'], HTMLMetaElement, 'meta' + ); + let instance = document.createElement('meta', { is: element.name }); + + assert_array_equals(element.takeLog().types(), ['constructed']); + document.head.appendChild(instance); + assert_array_equals(element.takeLog().types(), ['connected']); + instance['content'] = '300'; + instance['httpEquiv'] = 'refresh'; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), { + name: 'http-equiv', oldValue: null, newValue: 'refresh', namespace: null + }); +}, 'httpEquiv on HTMLMetaElement must enqueue an attributeChanged' + + ' reaction when adding a new attribute'); + +test(() => { + let element = define_build_in_custom_element( + ['http-equiv'], HTMLMetaElement, 'meta' + ); + let instance = document.createElement('meta', { is: element.name }); + document.head.appendChild(instance); + + assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); + instance['content'] = 'text/html; charset=UTF-8'; + instance['httpEquiv'] = 'content-type'; + assert_array_equals(element.takeLog().types(), ['attributeChanged']); + instance['content'] = '300'; + instance['httpEquiv'] = 'refresh'; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry(logEntries.last(), { + name: 'http-equiv', oldValue: 'content-type', + newValue: 'refresh', namespace: null + }); +}, 'httpEquiv on HTMLMetaElement must enqueue an attributeChanged' + + ' reaction when replacing an existing attribute'); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMeterElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMeterElement.html new file mode 100644 index 0000000000..707e56c605 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMeterElement.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLMeterElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="value, min, max, low, high, optimum of + HTMLMeterElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-meter-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement() { + return document.body; +} + +function setAttributes(instance) { + instance.setAttribute('value', '0.6'); +} + +testReflectAttribute( + 'value', 'value', '0.3', + '0.4', 'value on HTMLMeterElement', 'meter', + HTMLMeterElement +); +testReflectAttributeWithDependentAttributes( + 'min', 'min', '0.1', + '0.2', 'min on HTMLMeterElement', 'meter', + getParentElement, instance => setAttributes(instance), HTMLMeterElement +); +testReflectAttributeWithDependentAttributes( + 'max', 'max', '2', + '3', 'max on HTMLMeterElement', 'meter', + getParentElement, instance => setAttributes(instance), HTMLMeterElement +); +testReflectAttributeWithDependentAttributes( + 'low', 'low', '0.1', + '0.2', 'low on HTMLMeterElement', 'meter', + getParentElement, instance => setAttributes(instance), HTMLMeterElement +); +testReflectAttributeWithDependentAttributes( + 'high', 'high', '2', + '3', 'high on HTMLMeterElement', 'meter', + getParentElement, instance => setAttributes(instance), HTMLMeterElement +); +testReflectAttributeWithDependentAttributes( + 'optimum', 'optimum', '0.3', + '0.4', 'optimum on HTMLMeterElement', 'meter', + getParentElement, instance => setAttributes(instance), HTMLMeterElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLModElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLModElement.html new file mode 100644 index 0000000000..cfdbba4464 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLModElement.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLModElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="cite, dateTime of HTMLModElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#attributes-common-to-ins-and-del-elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('cite', 'cite', '../resources/custom-elements-helpers.js', './resources/reactions.js', 'cite on ins use HTMLModElement', 'ins', HTMLModElement); +testReflectAttribute('dateTime', 'datetime', '2018-12-19 00:00Z', '2018-12-20 00:00Z', 'dateTime on ins use HTMLModElement', 'ins', HTMLModElement); +testReflectAttribute('cite', 'cite', '../resources/custom-elements-helpers.js', './resources/reactions.js', 'cite on del use HTMLModElement', 'del', HTMLModElement); +testReflectAttribute('dateTime', 'datetime', '2018-10-11T01:25-07:00', '2018-10-12T01:25-07:00', 'dateTime on del use HTMLModElement', 'del', HTMLModElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOListElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOListElement.html new file mode 100644 index 0000000000..b62f31b489 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOListElement.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLOListElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="reversed, start, type of HTMLOListElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-ol-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectBooleanAttribute('reversed', 'reversed', 'reversed on HTMLOListElement', 'ol', HTMLOListElement); +testReflectAttribute('start', 'start', '2', '5', 'start on HTMLOListElement', 'ol', HTMLOListElement); +testReflectAttribute('type', 'type', '1', 'a', 'type on HTMLOListElement', 'ol', HTMLOListElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOptGroupElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOptGroupElement.html new file mode 100644 index 0000000000..ca34e81e3b --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLOptGroupElement.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLOptGroupElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="disabled, label of + HTMLOptGroupElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-optgroup-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement() { + let element = document.createElement('select'); + document.body.appendChild(element); + return element; +} + +function setAttributes(instance) { + instance.setAttribute('label', 'group1'); +} + +testReflectBooleanAttributeWithDependentAttributes( + 'disabled', 'disabled', 'disabled on HTMLOptGroupElement', + 'optgroup', getParentElement, instance => setAttributes(instance), + HTMLOptGroupElement +); + +testReflectAttributeWithParentNode( + 'label', 'label', 'group1', + 'group2', 'label on HTMLOptGroupElement', 'optgroup', + getParentElement, HTMLOptGroupElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLParamElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLParamElement.html new file mode 100644 index 0000000000..eb3a13962f --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLParamElement.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLParamElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="name, value of HTMLParamElement + interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-param-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<body> +<script> + +function getParentElement() { + let element = document.createElement('object'); + element['type'] = 'image/png'; + element['data'] = '/images/blue.png'; + document.body.appendChild(element); + return element; +} + +function setAttributes(instance, attribute, value) { + instance.setAttribute(attribute, value); +} + +testReflectAttributeWithDependentAttributes( + 'name', 'name', 'image1', + 'image2', 'name on HTMLParamElement', 'param', + getParentElement, instance => setAttributes(instance, 'value', 'blue'), + HTMLParamElement +); +testReflectAttributeWithDependentAttributes( + 'value', 'value', 'blue1', + 'blue2', 'value on HTMLParamElement', 'param', + getParentElement, instance => setAttributes(instance, 'name', 'image'), + HTMLParamElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLProgressElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLProgressElement.html new file mode 100644 index 0000000000..42683f4ede --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLProgressElement.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLProgressElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="value, max of HTMLProgressElement + interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-progress-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute( + 'value', 'value', '0.15', + '0.2', 'value on HTMLProgressElement', 'progress', + HTMLProgressElement +); +testReflectAttribute( + 'max', 'max', '2', + '4', 'max on HTMLProgressElement', 'progress', + HTMLProgressElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLQuoteElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLQuoteElement.html new file mode 100644 index 0000000000..f9c3d7538c --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLQuoteElement.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLQuoteElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="cite of HTMLQuoteElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-blockquote-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('cite', 'cite', '../resources/custom-elements-helpers.js', './resources/reactions.js', 'cite on blockquote use HTMLQuoteElement', 'blockquote', HTMLQuoteElement); +testReflectAttribute('cite', 'cite', '../resources/custom-elements-helpers.js', './resources/reactions.js', 'cite on q use HTMLQuoteElement', 'q', HTMLQuoteElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSlotElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSlotElement.html new file mode 100644 index 0000000000..56871873b4 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSlotElement.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLSlotElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="name of HTMLSlotElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-slot-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('name', 'name', 'slot1', 'slot2', 'name on HTMLSlotElement', 'slot', HTMLSlotElement); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html new file mode 100644 index 0000000000..f7d567ebcb --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLSourceElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="src, type, srcset, sizes, media of + HTMLSourceElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-source-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<video controls id='video' width='5' height='5'></video> +<picture id='pic'> + <img src='/images/green-1x1.png'> +</picture> +<body> +<script> + +function getParentElement(id) { + let element = document.getElementById(id); + return element; +} + +testReflectAttributeWithParentNode( + 'src', 'src', '/media/video.ogv', + '/media/white.mp4', 'src on HTMLSourceElement', 'source', + () => getParentElement('video'), HTMLSourceElement +); +testReflectAttributeWithDependentAttributes( + 'type', 'type', 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"', + 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"', 'type on HTMLSourceElement', + 'source', + () => getParentElement('video'), + instance => instance.setAttribute('src', '/media/white.mp4'), HTMLSourceElement +); + +function testReflectAttributeWithContentValuesAndParentNode( + jsAttributeName, contentAttributeName, validValue1, + contentValue1, validValue2, contentValue2, + name, elementName, getParentElement, + interfaceName) { + + let parentElement = getParentElement(); + + test(() => { + let element = define_build_in_custom_element( + [contentAttributeName], interfaceName, elementName + ); + let instance = document.createElement(elementName, { is: element.name }); + + assert_array_equals(element.takeLog().types(), ['constructed']); + // source element as a child of a picture element, before the img element + parentElement.prepend(instance); + assert_array_equals(element.takeLog().types(), ['connected']); + instance[jsAttributeName] = validValue1; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry( + logEntries.last(), + { name: contentAttributeName, oldValue: null, + newValue: contentValue1, namespace: null + } + ); + }, name + ' must enqueue an attributeChanged reaction when adding a new attribute'); + + test(() => { + let element = define_build_in_custom_element( + [contentAttributeName], interfaceName, elementName + ); + let instance = document.createElement(elementName, { is: element.name }); + // source element as a child of a picture element, before the img element + parentElement.prepend(instance); + + assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); + instance[jsAttributeName] = validValue1; + assert_array_equals(element.takeLog().types(), ['attributeChanged']); + instance[jsAttributeName] = validValue2; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry( + logEntries.last(), + { name: contentAttributeName, oldValue: contentValue1, + newValue: contentValue2, namespace: null + } + ); + }, name + ' must enqueue an attributeChanged reaction when replacing an existing attribute'); +} + +function testReflectAttributeWithParentNode( + jsAttributeName, contentAttributeName, validValue1, + validValue2, name, elementName, + getParentElement, interfaceName) { + + testReflectAttributeWithContentValuesAndParentNode( + jsAttributeName, contentAttributeName, validValue1, + validValue1, validValue2, validValue2, + name, elementName, getParentElement, + interfaceName + ); +} + +function testReflectAttributeWithContentValuesAndDependentAttributes( + jsAttributeName, contentAttributeName, validValue1, + contentValue1, validValue2, contentValue2, + name, elementName, getParentElement, + setAttributes, interfaceName) { + + let parentElement = getParentElement(); + + test(() => { + let element = define_build_in_custom_element( + [contentAttributeName], interfaceName, elementName + ); + let instance = document.createElement(elementName, { is: element.name }); + + assert_array_equals(element.takeLog().types(), ['constructed']); + // source element as a child of a picture element, before the img element + parentElement.prepend(instance); + assert_array_equals(element.takeLog().types(), ['connected']); + setAttributes(instance); + instance[jsAttributeName] = validValue1; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry( + logEntries.last(), + { name: contentAttributeName, oldValue: null, + newValue: contentValue1, namespace: null + } + ); + }, name + ' must enqueue an attributeChanged reaction when adding a new attribute'); + + test(() => { + let element = define_build_in_custom_element( + [contentAttributeName], interfaceName, elementName + ); + let instance = document.createElement(elementName, { is: element.name }); + // source element as a child of a picture element, before the img element + parentElement.prepend(instance); + setAttributes(instance); + instance[jsAttributeName] = validValue1; + + assert_array_equals( + element.takeLog().types(), + ['constructed', 'connected', 'attributeChanged'] + ); + instance[jsAttributeName] = validValue2; + let logEntries = element.takeLog(); + assert_array_equals(logEntries.types(), ['attributeChanged']); + assert_attribute_log_entry( + logEntries.last(), + { name: contentAttributeName, oldValue: contentValue1, + newValue: contentValue2, namespace: null + } + ); + }, name + ' must enqueue an attributeChanged reaction when replacing an existing attribute'); +} + +function testReflectAttributeWithDependentAttributes( + jsAttributeName, contentAttributeName, validValue1, + validValue2, name, elementName, + getParentElement, setAttributes, interfaceName) { + + testReflectAttributeWithContentValuesAndDependentAttributes( + jsAttributeName, contentAttributeName, validValue1, + validValue1, validValue2, validValue2, + name, elementName, getParentElement, + setAttributes, interfaceName); +} + +testReflectAttributeWithParentNode( + 'srcset', 'srcset', '/images/green.png', + '/images/green-1x1.png', 'srcset on HTMLSourceElement', 'source', + () => getParentElement('pic'), HTMLSourceElement +); +testReflectAttributeWithDependentAttributes( + 'sizes', 'sizes', '(max-width: 32px) 28px', + '(max-width: 48px) 44px', 'sizes on HTMLSourceElement', 'source', + () => getParentElement('pic'), + instance => instance.setAttribute('srcset', '/images/green.png 3x'), + HTMLSourceElement +); +testReflectAttributeWithDependentAttributes( + 'media', 'media', '(max-width: 7px)', + '(max-width: 9px)', 'media on HTMLSourceElement', 'source', + () => getParentElement('pic'), + instance => instance.setAttribute('srcset', '/images/green.png 3x'), + HTMLSourceElement +); + +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLStyleElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLStyleElement.html new file mode 100644 index 0000000000..d68d5cb76d --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLStyleElement.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLStyleElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="media of HTMLStyleElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-style-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +function getParentElement() { + return document.head; +} + +testReflectAttributeWithParentNode( + 'media', 'media', 'print', + 'screen', 'media on HTMLStyleElement', 'style', + getParentElement, HTMLStyleElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableCellElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableCellElement.html new file mode 100644 index 0000000000..95a8459df8 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableCellElement.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLTableCellElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="colSpan, rowSpan, headers, scope, abbr of + HTMLTableCellElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-td-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<table><tr id="colSpan"></table> +<table><tr id="rowSpan"><tr><tr></table> +<table><tr><th id="id1"><th id="id2"><tr id="td_headers"><tr id="th_headers"></table> +<script> + +function getParentElement(id) { + let parentElement = document.getElementById(id); + return parentElement; +} + +testReflectAttributeWithParentNode( + 'colSpan', 'colspan', '2', + '3', 'colSpan on HTMLTableCellElement in td', 'td', + () => getParentElement('colSpan'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'colSpan', 'colspan', '2', + '3', 'colSpan on HTMLTableCellElement in th', 'th', + () => getParentElement('colSpan'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'rowSpan', 'rowspan', '2', + '3', 'rowSpan on HTMLTableCellElement in td', 'td', + () => getParentElement('rowSpan'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'rowSpan', 'rowspan', '2', + '3', 'rowSpan on HTMLTableCellElement in th', 'th', + () => getParentElement('rowSpan'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'headers', 'headers', 'id1', + 'id2', 'headers on HTMLTableCellElement in td', 'td', + () => getParentElement('td_headers'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'headers', 'headers', 'id1', + 'id2', 'headers on HTMLTableCellElement in th', 'th', + () => getParentElement('th_headers'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'scope', 'scope', 'row', + 'col', 'scope on HTMLTableCellElement in th', 'th', + () => getParentElement('colSpan'), HTMLTableCellElement +); +testReflectAttributeWithParentNode( + 'abbr', 'abbr', 'Model1', + 'Model2', 'abbr on HTMLTableCellElement in th', 'th', + () => getParentElement('colSpan'), HTMLTableCellElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableColElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableColElement.html new file mode 100644 index 0000000000..8e4d1359d8 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTableColElement.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLTableColElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="span of HTMLTableColElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-colgroup-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<table id="tbl"></table> +<script> + +function getParentElement() { + let parentElement = document.getElementById('tbl'); + return parentElement; +} + +testReflectAttributeWithParentNode( + 'span', 'span', '2', + '1', 'span on HTMLTableColElement', 'colgroup', + getParentElement, HTMLTableColElement +); + +</script> diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTimeElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTimeElement.html new file mode 100644 index 0000000000..b2f4cc8af7 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLTimeElement.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Custom Elements: CEReactions on HTMLTimeElement interface</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<meta name="assert" content="name of HTMLTimeElement interface must have CEReactions"> +<meta name="help" content="https://html.spec.whatwg.org/#the-time-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/custom-elements-helpers.js"></script> +<script src="../resources/reactions.js"></script> + +<script> + +testReflectAttribute('dateTime', 'datetime', '2018-12-10', '2018-12-12', 'dateTime on HTMLTimeElement', 'time', HTMLTimeElement); + +</script> |