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 { Identifier, Node } from 'estree';
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';
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
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'] },
allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] },
async: { applies_to: ['script'] },
@ -349,7 +350,9 @@ const attribute_lookup = {
formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] },
hidden: {},
indeterminate: { applies_to: ['input'] },
inert: {},
ismap: { property_name: 'isMap', applies_to: ['img'] },
itemscope: {},
loop: { applies_to: ['audio', 'bgsound', 'video'] },
multiple: { applies_to: ['input', 'select'] },
muted: { applies_to: ['audio', 'video'] },

@ -1,5 +1,5 @@
// source: https://html.spec.whatwg.org/multipage/indices.html
export const boolean_attributes = new Set([
const _boolean_attributes = [
'allowfullscreen',
'allowpaymentrequest',
'async',
@ -12,6 +12,7 @@ export const boolean_attributes = new Set([
'disabled',
'formnovalidate',
'hidden',
'indeterminate',
'inert',
'ismap',
'itemscope',
@ -26,4 +27,7 @@ export const boolean_attributes = new Set([
'required',
'reversed',
'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 {
// 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: {
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