testing/web-platform/tests/custom-elements/reactions/HTMLButtonElement.html
author kaixinjxq <xiuqix.jiang@intel.com>
Tue, 05 Mar 2019 12:17:47 +0000
changeset 464573 49b20d703832f84944761ca959f005e50fc90011
parent 464549 2f840f6a520912ad49da1fc461244b4edf3dfadd
child 464667 21ae0e9fd9073645a2b247ac613ea09ea11806bf
permissions -rw-r--r--
Bug 1529055 [wpt PR 15404] - Modify HTMLButtonElement CEReactions tests for boolean attributes, a=testonly Automatic update from web-platform-tests Fix HTMLButtonElement CEReactions tests for boolean attributes Closes #15167. -- wpt-commits: 02ccac44500d8b6011f1281e3496211f51a1f277 wpt-pr: 15404

<!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;
}

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);
testReflectAttrWithDepAttr('formAction', 'formaction', 'type', 'intel.asp', 'intel1.asp', 'submit', 'formAction on HTMLButtonElement', 'button', 'form', HTMLButtonElement);
testReflectAttrWithDepAttr('formEnctype', 'formenctype', 'type', 'text/plain', 'multipart/form-data', 'submit', 'formEnctype on HTMLButtonElement', 'button', 'form', HTMLButtonElement);
testReflectAttrWithDepAttr('formMethod', 'formmethod', 'type', 'get', 'post', 'submit', 'formMethod on HTMLButtonElement', 'button', 'form', HTMLButtonElement);
testReflectAttrWithContentValuesAndDepAttr('formNoValidate', 'formnovalidate', 'type', true, '', false, null, 'submit', 'formNoValidate on HTMLButtonElement', 'button', 'form', HTMLButtonElement);
testReflectAttrWithDepAttr('formTarget', 'formtarget', 'type', '_blank', '_self', 'submit', 'formTarget on HTMLButtonElement', 'button', 'form', HTMLButtonElement);

//In parent node, sub node's observeAttribute which depends another attribute can enqueue by changing attribute value
//Test reflect attribute with content values and dependent attribute 
function testReflectAttrWithContentValuesAndDepAttr(jsAtName, coAtName, deAtName, jsAtValue1, coAtValue1, jsAtValue2, coAtValue2, deAtValue, name, elementName, pElementName, interfaceName) {
    var parentElement = document.createElement(pElementName);
    document.body.appendChild(parentElement);

    test(() => {
        var element = define_build_in_custom_element([coAtName], interfaceName, elementName);
        var instance = document.createElement(elementName, { is: element.name });

        assert_array_equals(element.takeLog().types(), ['constructed']);
        parentElement.appendChild(instance);
        assert_array_equals(element.takeLog().types(), ['connected']);
        instance.setAttribute(deAtName, deAtValue);
        instance[jsAtName] = jsAtValue1;
        var logEntries = element.takeLog();
        assert_array_equals(logEntries.types(), ['attributeChanged']);
        assert_attribute_log_entry(logEntries.last(), { name: coAtName, oldValue: null, newValue: coAtValue1, namespace: null });

    }, name + ' must enqueue an attributeChanged reaction when adding a new attribute');

    test(() => {
        var element = define_build_in_custom_element([coAtName], interfaceName, elementName);
        var instance = document.createElement(elementName, { is: element.name });
        parentElement.appendChild(instance);
        instance.setAttribute(deAtName, deAtValue);
        instance[jsAtName] = jsAtValue1;

        assert_array_equals(element.takeLog().types(), ['constructed', 'connected', 'attributeChanged']);
        instance[jsAtName] = jsAtValue2;
        var logEntries = element.takeLog();
        assert_array_equals(logEntries.types(), ['attributeChanged']);
        assert_attribute_log_entry(logEntries.last(), { name: coAtName, oldValue: coAtValue1, newValue: coAtValue2, namespace: null });

    }, name + ' must enqueue an attributeChanged reaction when replacing an existing attribute');

    parentElement.parentNode.removeChild(parentElement);
}

//Package reflect attribute with dependent attribute
function testReflectAttrWithDepAttr(jsAtName, coAtName, deAtName, jsAtValue1, jsAtValue2, deAtValue, name, elementName, pElementName, interfaceName) {
    testReflectAttrWithContentValuesAndDepAttr(jsAtName, coAtName, deAtName, jsAtValue1, jsAtValue1, jsAtValue2, jsAtValue2, deAtValue, name, elementName, pElementName, interfaceName);
}

</script>
</body>