fix: better handling of inert attribute (add tests) (#7944)

* add inert to attribute_lookup

* typed for preventing a repeat of the tragedy

* add tests

* revert unnecessary change

* add more test

---------

Co-authored-by: fcrozatier <frederic.crozatier@protonmail.com>
pull/8331/head
Yuichiro Yamashita 2 years ago committed by GitHub
parent ca531519a8
commit 1f3d2f7646
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -9,7 +9,7 @@ import Text from '../../../nodes/Text';
import handle_select_value_binding from './handle_select_value_binding'; import handle_select_value_binding from './handle_select_value_binding';
import { Identifier, Node } from 'estree'; import { Identifier, Node } from 'estree';
import { namespaces } from '../../../../utils/namespaces'; import { namespaces } from '../../../../utils/namespaces';
import { boolean_attributes } from '../../../../../shared/boolean_attributes'; import { BooleanAttributes, boolean_attributes } from '../../../../../shared/boolean_attributes';
import { regex_double_quotes } from '../../../../utils/patterns'; import { regex_double_quotes } from '../../../../utils/patterns';
const non_textlike_input_types = new Set([ const non_textlike_input_types = new Set([
@ -324,7 +324,8 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
} }
// source: https://html.spec.whatwg.org/multipage/indices.html // source: https://html.spec.whatwg.org/multipage/indices.html
const attribute_lookup = { type AttributeMetadata = { property_name?: string, applies_to?: string[] };
const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [key in string]: AttributeMetadata } = {
allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] }, allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] },
allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] }, allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] },
async: { applies_to: ['script'] }, async: { applies_to: ['script'] },
@ -349,7 +350,9 @@ const attribute_lookup = {
formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] }, formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] },
hidden: {}, hidden: {},
indeterminate: { applies_to: ['input'] }, indeterminate: { applies_to: ['input'] },
inert: {},
ismap: { property_name: 'isMap', applies_to: ['img'] }, ismap: { property_name: 'isMap', applies_to: ['img'] },
itemscope: {},
loop: { applies_to: ['audio', 'bgsound', 'video'] }, loop: { applies_to: ['audio', 'bgsound', 'video'] },
multiple: { applies_to: ['input', 'select'] }, multiple: { applies_to: ['input', 'select'] },
muted: { applies_to: ['audio', 'video'] }, muted: { applies_to: ['audio', 'video'] },

@ -1,5 +1,5 @@
// source: https://html.spec.whatwg.org/multipage/indices.html // source: https://html.spec.whatwg.org/multipage/indices.html
export const boolean_attributes = new Set([ const _boolean_attributes = [
'allowfullscreen', 'allowfullscreen',
'allowpaymentrequest', 'allowpaymentrequest',
'async', 'async',
@ -12,6 +12,7 @@ export const boolean_attributes = new Set([
'disabled', 'disabled',
'formnovalidate', 'formnovalidate',
'hidden', 'hidden',
'indeterminate',
'inert', 'inert',
'ismap', 'ismap',
'itemscope', 'itemscope',
@ -26,4 +27,7 @@ export const boolean_attributes = new Set([
'required', 'required',
'reversed', 'reversed',
'selected' 'selected'
]); ] as const;
export type BooleanAttributes = typeof _boolean_attributes[number];
export const boolean_attributes: Set<string> = new Set([..._boolean_attributes]);

@ -1,8 +1,4 @@
export default { export default {
// This is a bit of a funny one — there's no equivalent attribute,
// so it can't be server-rendered
skip_if_ssr: true,
props: { props: {
indeterminate: true indeterminate: true
}, },

@ -0,0 +1,11 @@
export default {
props: {
inert: true
},
test({ assert, target, component }) {
const div = target.querySelector('div');
assert.ok(div.inert);
component.inert = false;
assert.ok(!div.inert);
}
};

@ -0,0 +1,5 @@
<script>
export let inert;
</script>
<div {inert}>some div <button>click</button></div>

@ -0,0 +1,11 @@
export default {
props: {
itemscope: true
},
test({ assert, target, component }) {
const div = target.querySelector('div');
assert.ok(div.itemscope);
component.itemscope = false;
assert.ok(!div.itemscope);
}
};

@ -0,0 +1,5 @@
<script>
export let itemscope;
</script>
<div {itemscope} />
Loading…
Cancel
Save