diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html')
-rw-r--r-- | testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html | 191 |
1 files changed, 191 insertions, 0 deletions
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> |