@samitouri / QOS-React / commits / d7fcdd9c7a

Use proper SVG tags for all SVG attributes and read using a special function (#10545)

Sebastian Markbåge committed Aug 25, 2017 at 17:27 UTC d7fcdd9c7af5e57d7a86d418f8eadee67dae8d34
1 file changed +1510 -372
fixtures/attribute-behavior/src/App.js
+1510 -372
@@ -122,7 +122,21 @@ function getProperty(propertyName) {
122 }
123
124 function getAttribute(attributeName) {
125 - return el => el.getAttribute(attributeName);
125 + return el => {
126 + if (el.namespaceURI === '') {
127 + throw new Error('Not an HTML element.');
128 + }
129 + return el.getAttribute(attributeName);
130 + };
131 +}
132 +
133 +function getSVGAttribute(attributeName) {
134 + return el => {
135 + if (el.namespaceURI !== 'http://www.w3.org/2000/svg') {
136 + throw new Error('Not an SVG element.');
137 + }
138 + return el.getAttribute(attributeName);
139 + };
140 }
141
142 const attributes = [
@@ -132,19 +146,19 @@ const attributes = [
146 name: 'accent-Height',
147 containerTagName: 'svg',
148 tagName: 'font-face',
135 - read: getAttribute('accent-height'),
149 + read: getSVGAttribute('accent-height'),
150 },
151 {
152 name: 'accent-height',
153 containerTagName: 'svg',
154 tagName: 'font-face',
141 - read: getAttribute('accent-height'),
155 + read: getSVGAttribute('accent-height'),
156 },
157 {
158 name: 'accentHeight',
159 containerTagName: 'svg',
160 tagName: 'font-face',
147 - read: getAttribute('accent-height'),
161 + read: getSVGAttribute('accent-height'),
162 },
163 {name: 'accept', tagName: 'input'},
164 {name: 'accept-charset', tagName: 'form', read: getProperty('acceptCharset')},
@@ -155,26 +169,26 @@ const attributes = [
169 name: 'accumulate',
170 containerTagName: 'svg',
171 tagName: 'animate',
158 - read: getAttribute('accumulate'),
172 + read: getSVGAttribute('accumulate'),
173 },
174 {name: 'action', tagName: 'form', overrideStringValue: 'https://reactjs.com'},
175 {
176 name: 'additive',
177 containerTagName: 'svg',
178 tagName: 'animate',
165 - read: getAttribute('additive'),
179 + read: getSVGAttribute('additive'),
180 },
181 {
182 name: 'alignment-baseline',
183 containerTagName: 'svg',
184 tagName: 'textPath',
171 - read: getAttribute('alignment-baseline'),
185 + read: getSVGAttribute('alignment-baseline'),
186 },
187 {
188 name: 'alignmentBaseline',
189 containerTagName: 'svg',
190 tagName: 'textPath',
177 - read: getAttribute('alignment-baseline'),
191 + read: getSVGAttribute('alignment-baseline'),
192 },
193 {
194 name: 'allowFullScreen',
@@ -186,69 +200,66 @@ const attributes = [
200 tagName: 'iframe',
201 read: getProperty('allowFullscreen'),
202 },
189 - {
190 - name: 'allowFullscreen',
191 - tagName: 'iframe',
192 - },
203 + {name: 'allowFullscreen', tagName: 'iframe'},
204 {
205 name: 'allowReorder',
206 containerTagName: 'svg',
207 tagName: 'switch',
197 - read: getAttribute('allowreorder'),
208 + read: getSVGAttribute('allowReorder'),
209 },
210 {
211 name: 'allowTransparency',
212 containerTagName: 'svg',
213 tagName: 'path',
203 - read: getAttribute('allowtransparency'),
214 + read: getSVGAttribute('allowtransparency'),
215 },
216 {
217 name: 'alphabetic',
218 containerTagName: 'svg',
208 - tagName: 'path',
209 - read: getAttribute('alphabetic'),
219 + tagName: 'font-face',
220 + read: getSVGAttribute('alphabetic'),
221 },
222 {name: 'alt', tagName: 'img'},
223 {
224 name: 'amplitude',
225 containerTagName: 'svg',
215 - tagName: 'path',
216 - read: getAttribute('amplitude'),
226 + tagName: 'feFuncA',
227 + read: getSVGAttribute('amplitude'),
228 },
229 {
230 name: 'arabic-form',
231 containerTagName: 'svg',
221 - tagName: 'path',
222 - read: getAttribute('arabic-form'),
232 + tagName: 'glyph',
233 + read: getSVGAttribute('arabic-form'),
234 },
235 {
236 name: 'arabicForm',
237 containerTagName: 'svg',
227 - tagName: 'path',
228 - read: getAttribute('arabic-form'),
238 + tagName: 'glyph',
239 + read: getSVGAttribute('arabic-form'),
240 },
241 {name: 'aria', read: getAttribute('aria')},
242 {name: 'aria-', read: getAttribute('aria-')},
243 {name: 'aria-invalidattribute', read: getAttribute('aria-invalidattribute')},
233 - {name: 'as', read: getAttribute('aria-invalidattribute')},
244 + {name: 'as', tagName: 'link'},
245 {
246 name: 'ascent',
247 containerTagName: 'svg',
248 tagName: 'font-face',
238 - read: getAttribute('ascent'),
249 + read: getSVGAttribute('ascent'),
250 },
251 {name: 'async', tagName: 'script'},
252 {
253 name: 'attributeName',
254 containerTagName: 'svg',
255 tagName: 'animate',
245 - read: getAttribute('attributeName'),
256 + read: getSVGAttribute('attributeName'),
257 },
258 {
259 name: 'attributeType',
260 containerTagName: 'svg',
261 tagName: 'animate',
251 - read: getAttribute('attributeType'),
262 + read: getSVGAttribute('attributeType'),
263 },
264 {
265 name: 'autoCapitalize',
@@ -266,93 +277,89 @@ const attributes = [
277 name: 'autoCorrect',
278 tagName: 'input',
279 overrideStringValue: 'off',
269 - read: getAttribute('autocorrect'), // Chrome doesn't support the property.
280 + read: getAttribute('autocorrect'),
281 },
282 {name: 'autoPlay', tagName: 'video', read: getProperty('autoplay')},
283 {
284 name: 'autoReverse',
285 containerTagName: 'svg',
286 tagName: 'animate',
276 - read: getAttribute('autoreverse'),
287 + read: getSVGAttribute('autoreverse'),
288 },
289 {name: 'autoSave', tagName: 'input', read: getAttribute('autosave')},
290 {
291 name: 'azimuth',
292 containerTagName: 'svg',
282 - tagName: 'fedistantlight',
283 - read: getAttribute('azimuth'),
293 + tagName: 'feDistantLight',
294 + read: getSVGAttribute('azimuth'),
295 },
296 {
297 name: 'baseFrequency',
298 containerTagName: 'svg',
288 - tagName: 'feturbulance',
289 - read: getAttribute('baseFrequency'),
299 + tagName: 'feTurbulence',
300 + read: getSVGAttribute('baseFrequency'),
301 },
302 {
303 name: 'baseline-shift',
304 containerTagName: 'svg',
305 tagName: 'textPath',
295 - read: getAttribute('baseline-shift'),
306 + read: getSVGAttribute('baseline-shift'),
307 },
308 {
309 name: 'baselineShift',
310 containerTagName: 'svg',
311 tagName: 'textPath',
301 - read: getAttribute('baseline-shift'),
302 - },
303 - {
304 - name: 'baseProfile',
305 - tagName: 'svg',
306 - read: getAttribute('baseProfile'),
312 + read: getSVGAttribute('baseline-shift'),
313 },
314 + {name: 'baseProfile', tagName: 'svg', read: getSVGAttribute('baseProfile')},
315 {
316 name: 'bbox',
317 containerTagName: 'svg',
318 tagName: 'font-face',
312 - read: getAttribute('bbox'),
319 + read: getSVGAttribute('bbox'),
320 },
321 {
322 name: 'begin',
323 containerTagName: 'svg',
324 tagName: 'animate',
318 - read: getAttribute('begin'),
325 + read: getSVGAttribute('begin'),
326 },
327 {
328 name: 'bias',
329 containerTagName: 'svg',
323 - tagName: 'feconvolvematrix',
324 - read: getAttribute('bias'),
330 + tagName: 'feConvolveMatrix',
331 + read: getSVGAttribute('bias'),
332 },
333 {
334 name: 'by',
335 containerTagName: 'svg',
336 tagName: 'animate',
330 - read: getAttribute('by'),
337 + read: getSVGAttribute('by'),
338 },
339 {
340 name: 'calcMode',
341 containerTagName: 'svg',
342 tagName: 'animate',
343 overrideStringValue: 'discrete',
337 - read: getAttribute('calcMode'),
344 + read: getSVGAttribute('calcMode'),
345 },
346 {
347 name: 'cap-height',
348 containerTagName: 'svg',
349 tagName: 'font-face',
343 - read: getAttribute('cap-height'),
350 + read: getSVGAttribute('cap-height'),
351 },
352 {
353 name: 'capHeight',
354 containerTagName: 'svg',
355 tagName: 'font-face',
349 - read: getAttribute('cap-height'),
356 + read: getSVGAttribute('cap-height'),
357 },
358 {
359 name: 'capture',
360 tagName: 'input',
361 overrideStringValue: 'environment',
355 - read: getAttribute('capture'), // The property is not supported in Chrome.
362 + read: getAttribute('capture'),
363 },
364 {name: 'cellPadding', tagName: 'table'},
365 {name: 'cellSpacing', tagName: 'table'},
@@ -379,93 +386,93 @@ const attributes = [
386 name: 'clip-path',
387 containerTagName: 'svg',
388 tagName: 'path',
382 - read: getAttribute('clip-path'),
389 + read: getSVGAttribute('clip-path'),
390 },
391 {
392 name: 'clipPath',
393 containerTagName: 'svg',
394 tagName: 'path',
388 - read: getAttribute('clip-path'),
395 + read: getSVGAttribute('clip-path'),
396 },
397 {
398 name: 'clipPathUnits',
399 containerTagName: 'svg',
400 tagName: 'clipPath',
394 - read: getAttribute('clipPathUnits'),
401 + read: getSVGAttribute('clipPathUnits'),
402 },
403 {
404 name: 'clip-rule',
405 containerTagName: 'svg',
406 tagName: 'path',
400 - read: getAttribute('clip-rule'),
407 + read: getSVGAttribute('clip-rule'),
408 },
409 {
410 name: 'clipRule',
411 containerTagName: 'svg',
412 tagName: 'path',
406 - read: getAttribute('clip-rule'),
413 + read: getSVGAttribute('clip-rule'),
414 },
415 {
416 name: 'color',
417 containerTagName: 'svg',
418 tagName: 'text',
412 - read: getAttribute('color'),
419 + read: getSVGAttribute('color'),
420 },
421 {
422 name: 'color-interpolation',
423 containerTagName: 'svg',
424 tagName: 'animate',
425 overrideStringValue: 'sRGB',
419 - read: getAttribute('color-interpolation'),
426 + read: getSVGAttribute('color-interpolation'),
427 },
428 {
429 name: 'colorInterpolation',
430 containerTagName: 'svg',
431 tagName: 'animate',
432 overrideStringValue: 'sRGB',
426 - read: getAttribute('color-interpolation'),
433 + read: getSVGAttribute('color-interpolation'),
434 },
435 {
436 name: 'color-interpolation-filters',
437 containerTagName: 'svg',
438 tagName: 'feComposite',
439 overrideStringValue: 'sRGB',
433 - read: getAttribute('color-interpolation-filters'),
440 + read: getSVGAttribute('color-interpolation-filters'),
441 },
442 {
443 name: 'colorInterpolationFilters',
444 containerTagName: 'svg',
445 tagName: 'feComposite',
446 overrideStringValue: 'sRGB',
440 - read: getAttribute('color-interpolation-filters'),
447 + read: getSVGAttribute('color-interpolation-filters'),
448 },
449 {
450 name: 'color-profile',
451 containerTagName: 'svg',
452 tagName: 'image',
453 overrideStringValue: 'sRGB',
447 - read: getAttribute('color-profile'),
454 + read: getSVGAttribute('color-profile'),
455 },
456 {
457 name: 'colorProfile',
458 containerTagName: 'svg',
459 tagName: 'image',
460 overrideStringValue: 'sRGB',
454 - read: getAttribute('color-profile'),
461 + read: getSVGAttribute('color-profile'),
462 },
463 {
464 name: 'color-rendering',
465 containerTagName: 'svg',
466 tagName: 'animate',
467 overrideStringValue: 'optimizeSpeed',
461 - read: getAttribute('color-rendering'),
468 + read: getSVGAttribute('color-rendering'),
469 },
470 {
471 name: 'colorRendering',
472 containerTagName: 'svg',
473 tagName: 'animate',
474 overrideStringValue: 'optimizeSpeed',
468 - read: getAttribute('color-rendering'),
475 + read: getSVGAttribute('color-rendering'),
476 },
477 {name: 'cols', tagName: 'textarea'},
478 {name: 'colSpan', tagName: 'td'},
@@ -474,12 +481,12 @@ const attributes = [
481 {
482 name: 'contentScriptType',
483 tagName: 'svg',
477 - read: getAttribute('contentScriptType'),
484 + read: getSVGAttribute('contentScriptType'),
485 },
486 {
487 name: 'contentStyleType',
488 tagName: 'svg',
482 - read: getAttribute('contentStyleType'),
489 + read: getSVGAttribute('contentStyleType'),
490 },
491 {name: 'contextMenu', read: getAttribute('contextmenu')}, // TODO: Read the property by rendering a menu with the ID.
492 {name: 'controls', tagName: 'video'},
@@ -490,19 +497,19 @@ const attributes = [
497 name: 'cx',
498 containerTagName: 'svg',
499 tagName: 'circle',
493 - read: getAttribute('cx'),
500 + read: getSVGAttribute('cx'),
501 },
502 {
503 name: 'cy',
504 containerTagName: 'svg',
505 tagName: 'circle',
499 - read: getAttribute('cy'),
506 + read: getSVGAttribute('cy'),
507 },
508 {
509 name: 'd',
510 containerTagName: 'svg',
511 tagName: 'path',
505 - read: getAttribute('d'),
512 + read: getSVGAttribute('d'),
513 },
514 {
515 name: 'dangerouslySetInnerHTML',
@@ -526,7 +533,7 @@ const attributes = [
533 name: 'decelerate',
534 containerTagName: 'svg',
535 tagName: 'animate',
529 - read: getAttribute('decelerate'),
536 + read: getSVGAttribute('decelerate'),
537 },
538 {name: 'default', tagName: 'track'},
539 {
@@ -536,23 +543,19 @@ const attributes = [
543 },
544 {name: 'defaultChecked', tagName: 'input'},
545 {name: 'defaultValue', tagName: 'input'},
539 - {
540 - name: 'defaultValuE',
541 - tagName: 'input',
542 - read: getAttribute('defaultValuE'),
543 - },
546 + {name: 'defaultValuE', tagName: 'input', read: getAttribute('defaultValuE')},
547 {name: 'defer', tagName: 'script'},
548 {
549 name: 'descent',
550 containerTagName: 'svg',
551 tagName: 'font-face',
549 - read: getAttribute('descent'),
552 + read: getSVGAttribute('descent'),
553 },
554 {
555 name: 'diffuseConstant',
556 containerTagName: 'svg',
554 - tagName: 'fediffuselighting',
555 - read: getAttribute('diffuseConstant'),
557 + tagName: 'feDiffuseLighting',
558 + read: getSVGAttribute('diffuseConstant'),
559 },
560 {name: 'dir', overrideStringValue: 'rtl'},
561 {
@@ -560,7 +563,7 @@ const attributes = [
563 containerTagName: 'svg',
564 tagName: 'text',
565 overrideStringValue: 'rtl',
563 - read: getAttribute('direction'),
566 + read: getSVGAttribute('direction'),
567 },
568 {name: 'disabled', tagName: 'input'},
569 {
@@ -572,20 +575,20 @@ const attributes = [
575 {
576 name: 'divisor',
577 containerTagName: 'svg',
575 - tagName: 'feconvolvematrix',
576 - read: getAttribute('divisor'),
578 + tagName: 'feConvolveMatrix',
579 + read: getSVGAttribute('divisor'),
580 },
581 {
582 name: 'dominant-baseline',
583 containerTagName: 'svg',
584 tagName: 'text',
582 - read: getAttribute('dominant-baseline'),
585 + read: getSVGAttribute('dominant-baseline'),
586 },
587 {
588 name: 'dominantBaseline',
589 containerTagName: 'svg',
590 tagName: 'text',
588 - read: getAttribute('dominant-baseline'),
591 + read: getSVGAttribute('dominant-baseline'),
592 },
593 {name: 'download', tagName: 'a'},
594 {name: 'dOwNlOaD', tagName: 'a', read: getAttribute('dOwNlOaD')},
@@ -594,56 +597,56 @@ const attributes = [
597 name: 'dur',
598 containerTagName: 'svg',
599 tagName: 'animate',
597 - read: getAttribute('dur'),
600 + read: getSVGAttribute('dur'),
601 },
602 {
603 name: 'dx',
604 containerTagName: 'svg',
602 - tagName: 'dx',
603 - read: getAttribute('dx'),
605 + tagName: 'text',
606 + read: getSVGAttribute('dx'),
607 },
608 {
609 name: 'dX',
610 containerTagName: 'svg',
608 - tagName: 'dX',
609 - read: getAttribute('dX'),
611 + tagName: 'text',
612 + read: getSVGAttribute('dX'),
613 },
614 {
615 name: 'dy',
616 containerTagName: 'svg',
614 - tagName: 'dy',
615 - read: getAttribute('dy'),
617 + tagName: 'text',
618 + read: getSVGAttribute('dy'),
619 },
620 {
621 name: 'dY',
622 containerTagName: 'svg',
620 - tagName: 'dY',
621 - read: getAttribute('dY'),
623 + tagName: 'text',
624 + read: getSVGAttribute('dY'),
625 },
626 {
627 name: 'edgeMode',
628 containerTagName: 'svg',
629 tagName: 'feConvolveMatrix',
630 overrideStringValue: 'wrap',
628 - read: getAttribute('edgeMode'),
631 + read: getSVGAttribute('edgeMode'),
632 },
633 {
634 name: 'elevation',
635 containerTagName: 'svg',
633 - tagName: 'fedistantlight',
634 - read: getAttribute('elevation'),
636 + tagName: 'feDistantLight',
637 + read: getSVGAttribute('elevation'),
638 },
639 {
640 name: 'enable-background',
641 containerTagName: 'svg',
642 tagName: 'path',
640 - read: getAttribute('enable-background'),
643 + read: getSVGAttribute('enable-background'),
644 },
645 {
646 name: 'enableBackground',
647 containerTagName: 'svg',
648 tagName: 'path',
646 - read: getAttribute('enable-background'),
649 + read: getSVGAttribute('enable-background'),
650 },
651 {
652 name: 'encType',
@@ -655,161 +658,350 @@ const attributes = [
658 name: 'end',
659 containerTagName: 'svg',
660 tagName: 'animate',
658 - read: getAttribute('end'),
661 + read: getSVGAttribute('end'),
662 + },
663 + {
664 + name: 'exponent',
665 + read: getSVGAttribute('exponent'),
666 + containerTagName: 'svg',
667 + tagName: 'feFuncA',
668 },
660 - {name: 'exponent', read: getAttribute('exponent')},
669 {
670 name: 'externalResourcesRequired',
671 containerTagName: 'svg',
672 tagName: 'path',
665 - read: getAttribute('externalResourcesRequired'),
673 + read: getSVGAttribute('externalResourcesRequired'),
674 },
675 {
676 name: 'fill',
677 containerTagName: 'svg',
678 tagName: 'path',
671 - read: getAttribute('fill'),
679 + read: getSVGAttribute('fill'),
680 },
681 {
682 name: 'fillOpacity',
683 containerTagName: 'svg',
684 tagName: 'circle',
677 - read: getAttribute('fill-opacity'),
685 + read: getSVGAttribute('fill-opacity'),
686 },
687 {
688 name: 'fill-opacity',
689 containerTagName: 'svg',
690 tagName: 'circle',
683 - read: getAttribute('fill-opacity'),
691 + read: getSVGAttribute('fill-opacity'),
692 },
693 {
694 name: 'fillRule',
695 containerTagName: 'svg',
696 tagName: 'circle',
689 - read: getAttribute('fill-rule'),
697 + read: getSVGAttribute('fill-rule'),
698 },
699 {
700 name: 'fill-rule',
701 containerTagName: 'svg',
702 tagName: 'circle',
695 - read: getAttribute('fill-rule'),
703 + read: getSVGAttribute('fill-rule'),
704 },
705 {
706 name: 'filter',
707 containerTagName: 'svg',
708 tagName: 'g',
701 - read: getAttribute('filter'),
709 + read: getSVGAttribute('filter'),
710 },
711 {
712 name: 'filterRes',
713 containerTagName: 'svg',
714 tagName: 'filter',
707 - read: getAttribute('filterRes'),
715 + read: getSVGAttribute('filterRes'),
716 },
717 {
718 name: 'filterUnits',
719 containerTagName: 'svg',
720 tagName: 'filter',
721 overrideStringValue: 'userSpaceOnUse',
714 - read: getAttribute('filterUnits'),
722 + read: getSVGAttribute('filterUnits'),
723 },
724 {
725 name: 'flood-color',
726 containerTagName: 'svg',
727 tagName: 'feflood',
728 overrideStringValue: 'currentColor',
721 - read: getAttribute('flood-color'),
729 + read: getSVGAttribute('flood-color'),
730 },
731 {
732 name: 'floodColor',
733 containerTagName: 'svg',
734 tagName: 'feflood',
735 overrideStringValue: 'currentColor',
728 - read: getAttribute('flood-color'),
736 + read: getSVGAttribute('flood-color'),
737 },
738 {
739 name: 'flood-opacity',
740 containerTagName: 'svg',
741 tagName: 'feflood',
742 overrideStringValue: 'inherit',
735 - read: getAttribute('flood-opacity'),
743 + read: getSVGAttribute('flood-opacity'),
744 },
745 {
746 name: 'floodOpacity',
747 containerTagName: 'svg',
748 tagName: 'feflood',
749 overrideStringValue: 'inherit',
742 - read: getAttribute('flood-opacity'),
750 + read: getSVGAttribute('flood-opacity'),
751 },
752 {name: 'focusable', tagName: 'p', read: getAttribute('focusable')},
745 - {name: 'font-family', read: getAttribute('font-family')},
746 - {name: 'font-size', read: getAttribute('font-size')},
747 - {name: 'font-size-adjust', read: getAttribute('font-size-adjust')},
748 - {name: 'font-stretch', read: getAttribute('font-stretch')},
749 - {name: 'font-style', read: getAttribute('font-style')},
750 - {name: 'font-variant', read: getAttribute('font-variant')},
751 - {name: 'font-weight', read: getAttribute('font-weight')},
752 - {name: 'fontFamily', read: getAttribute('font-family')},
753 - {name: 'fontSize', read: getAttribute('font-size')},
754 - {name: 'fontSizeAdjust', read: getAttribute('font-size-adjust')},
755 - {name: 'fontStretch', read: getAttribute('font-stretch')},
756 - {name: 'fontStyle', read: getAttribute('font-style')},
757 - {name: 'fontVariant', read: getAttribute('font-variant')},
758 - {name: 'fontWeight', read: getAttribute('font-weight')},
753 + {
754 + name: 'font-family',
755 + read: getSVGAttribute('font-family'),
756 + containerTagName: 'svg',
757 + tagName: 'font-face',
758 + },
759 + {
760 + name: 'font-size',
761 + read: getSVGAttribute('font-size'),
762 + containerTagName: 'svg',
763 + tagName: 'font-face',
764 + },
765 + {
766 + name: 'font-size-adjust',
767 + containerTagName: 'svg',
768 + tagName: 'text',
769 + read: getSVGAttribute('font-size-adjust'),
770 + },
771 + {
772 + name: 'font-stretch',
773 + read: getSVGAttribute('font-stretch'),
774 + containerTagName: 'svg',
775 + tagName: 'font-face',
776 + },
777 + {
778 + name: 'font-style',
779 + read: getSVGAttribute('font-style'),
780 + containerTagName: 'svg',
781 + tagName: 'font-face',
782 + },
783 + {
784 + name: 'font-variant',
785 + read: getSVGAttribute('font-variant'),
786 + containerTagName: 'svg',
787 + tagName: 'font-face',
788 + },
789 + {
790 + name: 'font-weight',
791 + read: getSVGAttribute('font-weight'),
792 + containerTagName: 'svg',
793 + tagName: 'font-face',
794 + },
795 + {
796 + name: 'fontFamily',
797 + read: getSVGAttribute('font-family'),
798 + containerTagName: 'svg',
799 + tagName: 'font-face',
800 + },
801 + {
802 + name: 'fontSize',
803 + read: getSVGAttribute('font-size'),
804 + containerTagName: 'svg',
805 + tagName: 'font-face',
806 + },
807 + {
808 + name: 'fontSizeAdjust',
809 + containerTagName: 'svg',
810 + tagName: 'text',
811 + read: getSVGAttribute('font-size-adjust'),
812 + },
813 + {
814 + name: 'fontStretch',
815 + read: getSVGAttribute('font-stretch'),
816 + containerTagName: 'svg',
817 + tagName: 'font-face',
818 + },
819 + {
820 + name: 'fontStyle',
821 + read: getSVGAttribute('font-style'),
822 + containerTagName: 'svg',
823 + tagName: 'font-face',
824 + },
825 + {
826 + name: 'fontVariant',
827 + read: getSVGAttribute('font-variant'),
828 + containerTagName: 'svg',
829 + tagName: 'font-face',
830 + },
831 + {
832 + name: 'fontWeight',
833 + read: getSVGAttribute('font-weight'),
834 + containerTagName: 'svg',
835 + tagName: 'font-face',
836 + },
837 {name: 'for', tagName: 'label', read: getProperty('htmlFor')},
838 {name: 'fOr', tagName: 'label', read: getProperty('htmlFor')},
761 - {name: 'form', read: getAttribute('form')}, // TODO: Read the property by rendering into a form with id
839 + {name: 'form', read: getAttribute('form')}, // TODO: Read the property by rendering into a form with i
840 {
841 name: 'formAction',
842 tagName: 'input',
843 overrideStringValue: 'https://reactjs.com',
844 },
767 - {name: 'format', read: getAttribute('format')},
845 + {
846 + name: 'format',
847 + read: getSVGAttribute('format'),
848 + containerTagName: 'svg',
849 + tagName: 'altGlyph',
850 + },
851 {name: 'formEncType', tagName: 'input', read: getProperty('formEnctype')},
852 {name: 'formMethod', tagName: 'input', overrideStringValue: 'POST'},
853 {name: 'formNoValidate', tagName: 'input'},
854 {name: 'formTarget', tagName: 'input'},
855 {name: 'frameBorder', tagName: 'frame'},
773 - {name: 'from', read: getAttribute('from')},
774 - {name: 'fx', read: getAttribute('fx')},
775 - {name: 'fX', read: getAttribute('fx')},
776 - {name: 'fY', read: getAttribute('fy')},
777 - {name: 'fy', read: getAttribute('fy')},
778 - {name: 'G1', read: getAttribute('g1')},
779 - {name: 'g1', read: getAttribute('g1')},
780 - {name: 'G2', read: getAttribute('g2')},
781 - {name: 'g2', read: getAttribute('g2')},
782 - {name: 'glyph-name', read: getAttribute('glyph-name')},
856 + {
857 + name: 'from',
858 + read: getSVGAttribute('from'),
859 + containerTagName: 'svg',
860 + tagName: 'animate',
861 + },
862 + {
863 + name: 'fx',
864 + read: getSVGAttribute('fx'),
865 + containerTagName: 'svg',
866 + tagName: 'radialGradient',
867 + },
868 + {
869 + name: 'fX',
870 + containerTagName: 'svg',
871 + tagName: 'radialGradient',
872 + read: getSVGAttribute('fx'),
873 + },
874 + {
875 + name: 'fY',
876 + containerTagName: 'svg',
877 + tagName: 'radialGradient',
878 + read: getSVGAttribute('fy'),
879 + },
880 + {
881 + name: 'fy',
882 + read: getSVGAttribute('fy'),
883 + containerTagName: 'svg',
884 + tagName: 'radialGradient',
885 + },
886 + {
887 + name: 'G1',
888 + containerTagName: 'svg',
889 + tagName: 'hkern',
890 + read: getSVGAttribute('g1'),
891 + },
892 + {
893 + name: 'g1',
894 + read: getSVGAttribute('g1'),
895 + containerTagName: 'svg',
896 + tagName: 'hkern',
897 + },
898 + {
899 + name: 'G2',
900 + containerTagName: 'svg',
901 + tagName: 'hkern',
902 + read: getSVGAttribute('g2'),
903 + },
904 + {
905 + name: 'g2',
906 + read: getSVGAttribute('g2'),
907 + containerTagName: 'svg',
908 + tagName: 'hkern',
909 + },
910 + {
911 + name: 'glyph-name',
912 + read: getSVGAttribute('glyph-name'),
913 + containerTagName: 'svg',
914 + tagName: 'glyph',
915 + },
916 {
917 name: 'glyph-orientation-horizontal',
785 - read: getAttribute('glyph-orientation-horizontal'),
918 + containerTagName: 'svg',
919 + tagName: 'text',
920 + read: getSVGAttribute('glyph-orientation-horizontal'),
921 },
922 {
923 name: 'glyph-orientation-vertical',
789 - read: getAttribute('glyph-orientation-vertical'),
924 + containerTagName: 'svg',
925 + tagName: 'text',
926 + read: getSVGAttribute('glyph-orientation-vertical'),
927 + },
928 + {
929 + name: 'glyphName',
930 + read: getSVGAttribute('glyph-name'),
931 + containerTagName: 'svg',
932 + tagName: 'glyph',
933 },
791 - {name: 'glyphName', read: getAttribute('glyph-name')},
934 {
935 name: 'glyphOrientationHorizontal',
794 - read: getAttribute('glyph-orientation-horizontal'),
936 + containerTagName: 'svg',
937 + tagName: 'text',
938 + read: getSVGAttribute('glyph-orientation-horizontal'),
939 },
940 {
941 name: 'glyphOrientationVertical',
798 - read: getAttribute('glyph-orientation-vertical'),
942 + containerTagName: 'svg',
943 + tagName: 'text',
944 + read: getSVGAttribute('glyph-orientation-vertical'),
945 + },
946 + {
947 + name: 'glyphRef',
948 + read: getSVGAttribute('glyph-ref'),
949 + containerTagName: 'svg',
950 + tagName: 'altGlyph',
951 + },
952 + {
953 + name: 'gradientTransform',
954 + read: getSVGAttribute('gradientTransform'),
955 + containerTagName: 'svg',
956 + tagName: 'linearGradient',
957 + },
958 + {
959 + name: 'gradientUnits',
960 + read: getSVGAttribute('gradientUnits'),
961 + containerTagName: 'svg',
962 + tagName: 'linearGradient',
963 + },
964 + {
965 + name: 'hanging',
966 + read: getSVGAttribute('hanging'),
967 + containerTagName: 'svg',
968 + tagName: 'font-face',
969 },
800 - {name: 'glyphRef', read: getAttribute('glyph-ref')},
801 - {name: 'gradientTransform', read: getAttribute('gradient-transform')},
802 - {name: 'gradientUnits', read: getAttribute('gradient-units')},
803 - {name: 'hanging', read: getAttribute('hanging')},
970 {name: 'hasOwnProperty', read: getAttribute('hasOwnProperty')},
971 {name: 'headers', tagName: 'td'},
972 {name: 'height', tagName: 'img'},
973 + {
974 + name: 'height',
975 + containerTagName: 'svg',
976 + tagName: 'rect',
977 + read: getSVGAttribute('height'),
978 + },
979 {name: 'hidden'},
980 {name: 'high', tagName: 'meter'},
809 - {name: 'horiz-adv-x', read: getAttribute('horiz-adv-x')},
810 - {name: 'horiz-origin-x', read: getAttribute('horiz-origin-x')},
811 - {name: 'horizAdvX', read: getAttribute('horiz-adv-x')},
812 - {name: 'horizOriginX', read: getAttribute('horiz-origin-x')},
981 + {
982 + name: 'horiz-adv-x',
983 + read: getSVGAttribute('horiz-adv-x'),
984 + containerTagName: 'svg',
985 + tagName: 'font',
986 + },
987 + {
988 + name: 'horiz-origin-x',
989 + read: getSVGAttribute('horiz-origin-x'),
990 + containerTagName: 'svg',
991 + tagName: 'font',
992 + },
993 + {
994 + name: 'horizAdvX',
995 + read: getSVGAttribute('horiz-adv-x'),
996 + containerTagName: 'svg',
997 + tagName: 'font',
998 + },
999 + {
1000 + name: 'horizOriginX',
1001 + read: getSVGAttribute('horiz-origin-x'),
1002 + containerTagName: 'svg',
1003 + tagName: 'font',
1004 + },
1005 {name: 'href', tagName: 'a', overrideStringValue: 'https://reactjs.com'},
1006 {name: 'hrefLang', read: getAttribute('hreflang')},
1007 {name: 'htmlFor', tagName: 'label'},
@@ -818,128 +1010,491 @@ const attributes = [
1010 {name: 'icon', tagName: 'command', read: getAttribute('icon')},
1011 {name: 'id'},
1012 {name: 'ID', read: getProperty('id')},
821 - {name: 'ideographic', read: getAttribute('ideographic')},
822 - {name: 'image-rendering', read: getAttribute('image-rendering')},
823 - {name: 'imageRendering', read: getAttribute('image-rendering')},
824 - {name: 'in', read: getAttribute('in')},
825 - {name: 'in2', read: getAttribute('in2')},
1013 + {
1014 + name: 'ideographic',
1015 + read: getSVGAttribute('ideographic'),
1016 + containerTagName: 'svg',
1017 + tagName: 'font-face',
1018 + },
1019 + {
1020 + name: 'image-rendering',
1021 + tagName: 'svg',
1022 + read: getSVGAttribute('image-rendering'),
1023 + },
1024 + {
1025 + name: 'imageRendering',
1026 + tagName: 'svg',
1027 + read: getSVGAttribute('image-rendering'),
1028 + },
1029 + {
1030 + name: 'in',
1031 + read: getSVGAttribute('in'),
1032 + containerTagName: 'svg',
1033 + tagName: 'feBlend',
1034 + },
1035 + {
1036 + name: 'in2',
1037 + read: getSVGAttribute('in2'),
1038 + containerTagName: 'svg',
1039 + tagName: 'feBlend',
1040 + },
1041 {name: 'initialChecked', read: getAttribute('initialchecked')},
1042 {name: 'initialValue', read: getAttribute('initialvalue')},
1043 {name: 'inlist', read: getAttribute('inlist')},
1044 {name: 'inputMode', tagName: 'input', read: getAttribute('inputmode')}, // TODO: Should use property but it's not implemented in Chrome
1045 {name: 'integrity', tagName: 'script'},
831 - {name: 'intercept', read: getAttribute('intercept')},
1046 + {
1047 + name: 'intercept',
1048 + read: getSVGAttribute('intercept'),
1049 + containerTagName: 'svg',
1050 + tagName: 'feFuncA',
1051 + },
1052 {
1053 name: 'is',
1054 tagName: 'button',
1055 overrideStringValue: 'x-test-element',
836 - read: getAttribute('is'),
837 - }, // TODO: This could check if this is an extended custom element but this is a controversial spec.
1056 + read: getAttribute('is'), // TODO: This could check if this is an extended custom element but this is a controversial spec.
1057 + },
1058 {name: 'itemID', read: getAttribute('itemid')},
1059 {name: 'itemProp', read: getAttribute('itemprop')},
1060 {name: 'itemRef', read: getAttribute('itemref')},
1061 {name: 'itemScope', read: getAttribute('itemscope')},
1062 {name: 'itemType', read: getAttribute('itemtype')},
843 - {name: 'k', read: getAttribute('k')},
844 - {name: 'K', read: getAttribute('k')},
845 - {name: 'K1', read: getAttribute('k1')},
846 - {name: 'k1', read: getAttribute('k1')},
847 - {name: 'k2', read: getAttribute('k2')},
848 - {name: 'k3', read: getAttribute('k3')},
849 - {name: 'k4', read: getAttribute('k4')},
850 - {name: 'kernelMatrix', read: getAttribute('kernelMatrix')},
851 - {name: 'kernelUnitLength', read: getAttribute('kernelUnitLength')},
852 - {name: 'kerning', read: getAttribute('kerning')},
1063 + {
1064 + name: 'k',
1065 + read: getSVGAttribute('k'),
1066 + containerTagName: 'svg',
1067 + tagName: 'hkern',
1068 + },
1069 + {
1070 + name: 'K',
1071 + containerTagName: 'svg',
1072 + tagName: 'hkern',
1073 + read: getSVGAttribute('k'),
1074 + },
1075 + {
1076 + name: 'K1',
1077 + containerTagName: 'svg',
1078 + tagName: 'feComposite',
1079 + read: getSVGAttribute('k1'),
1080 + },
1081 + {
1082 + name: 'k1',
1083 + read: getSVGAttribute('k1'),
1084 + containerTagName: 'svg',
1085 + tagName: 'feComposite',
1086 + },
1087 + {
1088 + name: 'k2',
1089 + read: getSVGAttribute('k2'),
1090 + containerTagName: 'svg',
1091 + tagName: 'feComposite',
1092 + },
1093 + {
1094 + name: 'k3',
1095 + read: getSVGAttribute('k3'),
1096 + containerTagName: 'svg',
1097 + tagName: 'feComposite',
1098 + },
1099 + {
1100 + name: 'k4',
1101 + read: getSVGAttribute('k4'),
1102 + containerTagName: 'svg',
1103 + tagName: 'feComposite',
1104 + },
1105 + {
1106 + name: 'kernelMatrix',
1107 + read: getSVGAttribute('kernelMatrix'),
1108 + containerTagName: 'svg',
1109 + tagName: 'feConvolveMatrix',
1110 + },
1111 + {
1112 + name: 'kernelUnitLength',
1113 + read: getSVGAttribute('kernelUnitLength'),
1114 + containerTagName: 'svg',
1115 + tagName: 'feConvolveMatrix',
1116 + },
1117 + {
1118 + name: 'kerning',
1119 + containerTagName: 'svg',
1120 + tagName: 'text',
1121 + read: getSVGAttribute('kerning'),
1122 + },
1123 {name: 'keyParams', read: getAttribute('keyParams')},
854 - {name: 'keyPoints', read: getAttribute('keyPoints')},
855 - {name: 'keySplines', read: getAttribute('keySplines')},
856 - {name: 'keyTimes', read: getAttribute('keyTimes')},
1124 + {
1125 + name: 'keyPoints',
1126 + read: getSVGAttribute('keyPoints'),
1127 + containerTagName: 'svg',
1128 + tagName: 'animateMotion',
1129 + },
1130 + {
1131 + name: 'keySplines',
1132 + read: getSVGAttribute('keySplines'),
1133 + containerTagName: 'svg',
1134 + tagName: 'animate',
1135 + },
1136 + {
1137 + name: 'keyTimes',
1138 + read: getSVGAttribute('keyTimes'),
1139 + containerTagName: 'svg',
1140 + tagName: 'animate',
1141 + },
1142 {name: 'keyType', read: getAttribute('keyType')},
1143 {name: 'kind', tagName: 'track', overrideStringValue: 'captions'},
1144 {name: 'label', tagName: 'track'},
1145 {name: 'LANG', read: getProperty('lang')},
1146 {name: 'lang'},
1147 {name: 'length', read: getAttribute('length')},
863 - {name: 'lengthAdjust', read: getAttribute('lengthAdjust')},
864 - {name: 'letter-spacing', read: getAttribute('letter-spacing')},
865 - {name: 'letterSpacing', read: getAttribute('letter-spacing')},
866 - {name: 'lighting-color', read: getAttribute('lighting-color')},
867 - {name: 'lightingColor', read: getAttribute('lighting-color')},
868 - {name: 'limitingConeAngle', read: getAttribute('limitingConeAngle')},
1148 + {
1149 + name: 'lengthAdjust',
1150 + read: getSVGAttribute('lengthAdjust'),
1151 + containerTagName: 'svg',
1152 + tagName: 'text',
1153 + },
1154 + {
1155 + name: 'letter-spacing',
1156 + containerTagName: 'svg',
1157 + tagName: 'text',
1158 + read: getSVGAttribute('letter-spacing'),
1159 + },
1160 + {
1161 + name: 'letterSpacing',
1162 + containerTagName: 'svg',
1163 + tagName: 'text',
1164 + read: getSVGAttribute('letter-spacing'),
1165 + },
1166 + {
1167 + name: 'lighting-color',
1168 + containerTagName: 'svg',
1169 + tagName: 'feDiffuseLighting',
1170 + read: getSVGAttribute('lighting-color'),
1171 + },
1172 + {
1173 + name: 'lightingColor',
1174 + containerTagName: 'svg',
1175 + tagName: 'feDiffuseLighting',
1176 + read: getSVGAttribute('lighting-color'),
1177 + },
1178 + {
1179 + name: 'limitingConeAngle',
1180 + read: getSVGAttribute('limitingConeAngle'),
1181 + containerTagName: 'svg',
1182 + tagName: 'feSpotLight',
1183 + },
1184 {name: 'list', read: getAttribute('list')}, // TODO: This should match the ID of a datalist element and then read property.
870 - {name: 'local', read: getAttribute('local')},
1185 + {
1186 + name: 'local',
1187 + read: getSVGAttribute('local'),
1188 + containerTagName: 'svg',
1189 + tagName: 'color-profile',
1190 + },
1191 {name: 'loop', tagName: 'audio'},
1192 {name: 'low', tagName: 'meter'},
1193 {name: 'manifest', read: getAttribute('manifest')},
1194 {name: 'marginHeight', tagName: 'frame'},
1195 {name: 'marginWidth', tagName: 'frame'},
876 - {name: 'marker-end', read: getAttribute('marker-end')},
877 - {name: 'marker-mid', read: getAttribute('marker-mid')},
878 - {name: 'marker-start', read: getAttribute('marker-start')},
879 - {name: 'markerEnd', read: getAttribute('marker-end')},
880 - {name: 'markerHeight', read: getAttribute('markerHeight')},
881 - {name: 'markerMid', read: getAttribute('marker-mid')},
882 - {name: 'markerStart', read: getAttribute('marker-start')},
883 - {name: 'markerUnits', read: getAttribute('markerUnits')},
884 - {name: 'markerWidth', read: getAttribute('markerWidth')},
885 - {name: 'mask', read: getAttribute('mask')},
886 - {name: 'maskContentUnits', read: getAttribute('maskContentUnits')},
887 - {name: 'maskUnits', read: getAttribute('maskUnits')},
888 - {name: 'mathematical', read: getAttribute('mathematical')},
889 - {name: 'max', tagName: 'input'},
890 - {name: 'max', tagName: 'meter'},
891 - {name: 'max', tagName: 'progress'},
892 - {name: 'maxLength', tagName: 'textarea'},
893 - {name: 'media', tagName: 'link'},
1196 + {
1197 + name: 'marker-end',
1198 + containerTagName: 'svg',
1199 + tagName: 'line',
1200 + read: getSVGAttribute('marker-end'),
1201 + },
1202 + {
1203 + name: 'marker-mid',
1204 + containerTagName: 'svg',
1205 + tagName: 'line',
1206 + read: getSVGAttribute('marker-mid'),
1207 + },
1208 + {
1209 + name: 'marker-start',
1210 + containerTagName: 'svg',
1211 + tagName: 'line',
1212 + read: getSVGAttribute('marker-start'),
1213 + },
1214 + {
1215 + name: 'markerEnd',
1216 + containerTagName: 'svg',
1217 + tagName: 'line',
1218 + read: getSVGAttribute('marker-end'),
1219 + },
1220 + {
1221 + name: 'markerHeight',
1222 + read: getSVGAttribute('markerHeight'),
1223 + containerTagName: 'svg',
1224 + tagName: 'marker',
1225 + },
1226 + {
1227 + name: 'markerMid',
1228 + containerTagName: 'svg',
1229 + tagName: 'line',
1230 + read: getSVGAttribute('marker-mid'),
1231 + },
1232 + {
1233 + name: 'markerStart',
1234 + containerTagName: 'svg',
1235 + tagName: 'line',
1236 + read: getSVGAttribute('marker-start'),
1237 + },
1238 + {
1239 + name: 'markerUnits',
1240 + read: getSVGAttribute('markerUnits'),
1241 + containerTagName: 'svg',
1242 + tagName: 'marker',
1243 + },
1244 + {
1245 + name: 'markerWidth',
1246 + read: getSVGAttribute('markerWidth'),
1247 + containerTagName: 'svg',
1248 + tagName: 'marker',
1249 + },
1250 + {
1251 + name: 'mask',
1252 + containerTagName: 'svg',
1253 + tagName: 'path',
1254 + read: getSVGAttribute('mask'),
1255 + },
1256 + {
1257 + name: 'maskContentUnits',
1258 + read: getSVGAttribute('maskContentUnits'),
1259 + containerTagName: 'svg',
1260 + tagName: 'mask',
1261 + },
1262 + {
1263 + name: 'maskUnits',
1264 + read: getSVGAttribute('maskUnits'),
1265 + containerTagName: 'svg',
1266 + tagName: 'mask',
1267 + },
1268 + {
1269 + name: 'mathematical',
1270 + read: getSVGAttribute('mathematical'),
1271 + containerTagName: 'svg',
1272 + tagName: 'font-face',
1273 + },
1274 + {name: 'max', tagName: 'input'},
1275 + {name: 'max', tagName: 'meter'},
1276 + {name: 'max', tagName: 'progress'},
1277 + {
1278 + name: 'max',
1279 + containerTagName: 'svg',
1280 + tagName: 'animate',
1281 + read: getSVGAttribute('max'),
1282 + },
1283 + {name: 'maxLength', tagName: 'textarea'},
1284 + {name: 'media', tagName: 'link'},
1285 + {
1286 + name: 'media',
1287 + containerTagName: 'svg',
1288 + tagName: 'style',
1289 + read: getSVGAttribute('media'),
1290 + },
1291 {name: 'mediaGroup', tagName: 'video', read: getAttribute('mediagroup')}, // TODO: Not yet implemented in Chrome.
1292 {name: 'method', tagName: 'form', overrideStringValue: 'POST'},
1293 + {
1294 + name: 'method',
1295 + containerTagName: 'svg',
1296 + tagName: 'textPath',
1297 + read: getSVGAttribute('method'),
1298 + },
1299 {name: 'min', tagName: 'input'},
1300 {name: 'min', tagName: 'meter'},
1301 + {
1302 + name: 'min',
1303 + containerTagName: 'svg',
1304 + tagName: 'animate',
1305 + read: getSVGAttribute('min'),
1306 + },
1307 {name: 'minLength', tagName: 'input'},
899 - {name: 'mode', read: getAttribute('mode')},
1308 + {
1309 + name: 'mode',
1310 + read: getSVGAttribute('mode'),
1311 + containerTagName: 'svg',
1312 + tagName: 'feBlend',
1313 + },
1314 {name: 'multiple', tagName: 'select'},
1315 {name: 'muted', tagName: 'video'},
1316 {name: 'name', tagName: 'input'},
1317 + {
1318 + name: 'name',
1319 + containerTagName: 'svg',
1320 + tagName: 'color-profile',
1321 + read: getSVGAttribute('color-profile'),
1322 + },
1323 {name: 'nonce', read: getAttribute('nonce')},
1324 {name: 'noValidate', tagName: 'form'},
905 - {name: 'numOctaves', read: getAttribute('numOctaves')},
906 - {name: 'offset', read: getAttribute('offset')},
1325 + {
1326 + name: 'numOctaves',
1327 + read: getSVGAttribute('numOctaves'),
1328 + containerTagName: 'svg',
1329 + tagName: 'feTurbulence',
1330 + },
1331 + {
1332 + name: 'offset',
1333 + read: getSVGAttribute('offset'),
1334 + containerTagName: 'svg',
1335 + tagName: 'stop',
1336 + },
1337 {name: 'on-click'}, // TODO: Check for event subscriptions
1338 {name: 'on-unknownevent'}, // TODO: Check for event subscriptions
1339 {name: 'onclick'}, // TODO: Check for event subscriptions
1340 {name: 'onClick'}, // TODO: Check for event subscriptions
1341 {name: 'onunknownevent'}, // TODO: Check for event subscriptions
1342 {name: 'onUnknownEvent'}, // TODO: Check for event subscriptions
913 - {name: 'opacity', read: getAttribute('opacity')},
1343 + {
1344 + name: 'opacity',
1345 + containerTagName: 'svg',
1346 + tagName: 'path',
1347 + read: getSVGAttribute('opacity'),
1348 + },
1349 {name: 'open', tagName: 'details'},
915 - {name: 'operator', read: getAttribute('operator')},
1350 + {
1351 + name: 'operator',
1352 + read: getSVGAttribute('operator'),
1353 + containerTagName: 'svg',
1354 + tagName: 'feComposite',
1355 + },
1356 {name: 'optimum', tagName: 'meter'},
917 - {name: 'order', read: getAttribute('order')},
918 - {name: 'orient', read: getAttribute('orient')},
919 - {name: 'orientation', read: getAttribute('orientation')},
920 - {name: 'origin', read: getAttribute('origin')},
921 - {name: 'overflow', read: getAttribute('overflow')},
922 - {name: 'overline-position', read: getAttribute('overline-position')},
923 - {name: 'overline-thickness', read: getAttribute('overline-thickness')},
924 - {name: 'overlinePosition', read: getAttribute('overline-position')},
925 - {name: 'overlineThickness', read: getAttribute('overline-thickness')},
926 - {name: 'paint-order', read: getAttribute('paint-order')},
927 - {name: 'paintOrder', read: getAttribute('paint-order')},
928 - {name: 'panose-1', read: getAttribute('panose-1')},
929 - {name: 'panose1', read: getAttribute('panose-1')},
930 - {name: 'pathLength', read: getAttribute('pathLength')},
1357 + {
1358 + name: 'order',
1359 + read: getSVGAttribute('order'),
1360 + containerTagName: 'svg',
1361 + tagName: 'feConvolveMatrix',
1362 + },
1363 + {
1364 + name: 'orient',
1365 + read: getSVGAttribute('orient'),
1366 + containerTagName: 'svg',
1367 + tagName: 'marker',
1368 + },
1369 + {
1370 + name: 'orientation',
1371 + read: getSVGAttribute('orientation'),
1372 + containerTagName: 'svg',
1373 + tagName: 'glyph',
1374 + },
1375 + {
1376 + name: 'origin',
1377 + read: getSVGAttribute('origin'),
1378 + containerTagName: 'svg',
1379 + tagName: 'animateMotion',
1380 + },
1381 + {
1382 + name: 'overflow',
1383 + containerTagName: 'svg',
1384 + tagName: 'path',
1385 + read: getSVGAttribute('overflow'),
1386 + },
1387 + {
1388 + name: 'overline-position',
1389 + read: getSVGAttribute('overline-position'),
1390 + containerTagName: 'svg',
1391 + tagName: 'font-face',
1392 + },
1393 + {
1394 + name: 'overline-thickness',
1395 + read: getSVGAttribute('overline-thickness'),
1396 + containerTagName: 'svg',
1397 + tagName: 'font-face',
1398 + },
1399 + {
1400 + name: 'overlinePosition',
1401 + read: getSVGAttribute('overline-position'),
1402 + containerTagName: 'svg',
1403 + tagName: 'font-face',
1404 + },
1405 + {
1406 + name: 'overlineThickness',
1407 + read: getSVGAttribute('overline-thickness'),
1408 + containerTagName: 'svg',
1409 + tagName: 'font-face',
1410 + },
1411 + {
1412 + name: 'paint-order',
1413 + containerTagName: 'svg',
1414 + tagName: 'path',
1415 + read: getSVGAttribute('paint-order'),
1416 + },
1417 + {
1418 + name: 'paintOrder',
1419 + containerTagName: 'svg',
1420 + tagName: 'path',
1421 + read: getSVGAttribute('paint-order'),
1422 + },
1423 + {
1424 + name: 'panose-1',
1425 + read: getSVGAttribute('panose-1'),
1426 + containerTagName: 'svg',
1427 + tagName: 'font-face',
1428 + },
1429 + {
1430 + name: 'panose1',
1431 + containerTagName: 'svg',
1432 + tagName: 'font-face',
1433 + read: getSVGAttribute('panose-1'),
1434 + },
1435 + {
1436 + name: 'pathLength',
1437 + read: getSVGAttribute('pathLength'),
1438 + containerTagName: 'svg',
1439 + tagName: 'path',
1440 + },
1441 {name: 'pattern', tagName: 'input'},
932 - {name: 'patternContentUnits', read: getAttribute('patternContentUnits')},
933 - {name: 'patternTransform', read: getAttribute('patternTransform')},
934 - {name: 'patternUnits', read: getAttribute('patternUnits')},
1442 + {
1443 + name: 'patternContentUnits',
1444 + read: getSVGAttribute('patternContentUnits'),
1445 + containerTagName: 'svg',
1446 + tagName: 'pattern',
1447 + },
1448 + {
1449 + name: 'patternTransform',
1450 + read: getSVGAttribute('patternTransform'),
1451 + containerTagName: 'svg',
1452 + tagName: 'pattern',
1453 + },
1454 + {
1455 + name: 'patternUnits',
1456 + read: getSVGAttribute('patternUnits'),
1457 + containerTagName: 'svg',
1458 + tagName: 'pattern',
1459 + },
1460 {name: 'placeholder', tagName: 'input'},
1461 {name: 'playsInline', read: getAttribute('playsinline')},
937 - {name: 'pointer-events', read: getAttribute('pointer-events')},
938 - {name: 'pointerEvents', read: getAttribute('pointer-events')},
939 - {name: 'points', read: getAttribute('points')},
940 - {name: 'pointsAtX', read: getAttribute('pointsAtX')},
941 - {name: 'pointsAtY', read: getAttribute('pointsAtY')},
942 - {name: 'pointsAtZ', read: getAttribute('pointsAtZ')},
1462 + {
1463 + name: 'pointer-events',
1464 + containerTagName: 'svg',
1465 + tagName: 'path',
1466 + read: getSVGAttribute('pointer-events'),
1467 + },
1468 + {
1469 + name: 'pointerEvents',
1470 + containerTagName: 'svg',
1471 + tagName: 'path',
1472 + read: getSVGAttribute('pointer-events'),
1473 + },
1474 + {
1475 + name: 'points',
1476 + read: getSVGAttribute('points'),
1477 + containerTagName: 'svg',
1478 + tagName: 'polygon',
1479 + },
1480 + {
1481 + name: 'pointsAtX',
1482 + read: getSVGAttribute('pointsAtX'),
1483 + containerTagName: 'svg',
1484 + tagName: 'feSpotLight',
1485 + },
1486 + {
1487 + name: 'pointsAtY',
1488 + read: getSVGAttribute('pointsAtY'),
1489 + containerTagName: 'svg',
1490 + tagName: 'feSpotLight',
1491 + },
1492 + {
1493 + name: 'pointsAtZ',
1494 + read: getSVGAttribute('pointsAtZ'),
1495 + containerTagName: 'svg',
1496 + tagName: 'feSpotLight',
1497 + },
1498 {
1499 name: 'poster',
1500 tagName: 'video',
@@ -947,71 +1502,190 @@ const attributes = [
1502 },
1503 {name: 'prefix', read: getAttribute('prefix')},
1504 {name: 'preload', tagName: 'video', overrideStringValue: 'none'},
950 - {name: 'preserveAlpha', read: getAttribute('preserveAlpha')},
951 - {name: 'preserveAspectRatio', read: getAttribute('preserveAspectRatio')},
952 - {name: 'primitiveUnits', read: getAttribute('primitiveUnits')},
1505 + {
1506 + name: 'preserveAlpha',
1507 + read: getSVGAttribute('preserveAlpha'),
1508 + containerTagName: 'svg',
1509 + tagName: 'feConvolveMatrix',
1510 + },
1511 + {
1512 + name: 'preserveAspectRatio',
1513 + read: getSVGAttribute('preserveAspectRatio'),
1514 + containerTagName: 'svg',
1515 + tagName: 'feImage',
1516 + },
1517 + {
1518 + name: 'primitiveUnits',
1519 + read: getSVGAttribute('primitiveUnits'),
1520 + containerTagName: 'svg',
1521 + tagName: 'filter',
1522 + },
1523 {name: 'profile', read: getAttribute('profile')},
1524 {name: 'property', read: getAttribute('property')},
1525 {name: 'props', read: getAttribute('props')},
956 - {name: 'r', read: getAttribute('r')},
1526 + {
1527 + name: 'r',
1528 + read: getSVGAttribute('r'),
1529 + containerTagName: 'svg',
1530 + tagName: 'circle',
1531 + },
1532 {name: 'radioGroup', tagName: 'command', read: getAttribute('radiogroup')},
958 - {name: 'radius', read: getAttribute('radius')},
1533 + {
1534 + name: 'radius',
1535 + read: getSVGAttribute('radius'),
1536 + containerTagName: 'svg',
1537 + tagName: 'feMorphology',
1538 + },
1539 {name: 'readOnly', tagName: 'input'},
1540 {name: 'referrerPolicy', tagName: 'iframe'},
961 - {name: 'refX', read: getAttribute('refX')},
962 - {name: 'refY', read: getAttribute('refY')},
1541 + {
1542 + name: 'refX',
1543 + read: getSVGAttribute('refX'),
1544 + containerTagName: 'svg',
1545 + tagName: 'marker',
1546 + },
1547 + {
1548 + name: 'refY',
1549 + read: getSVGAttribute('refY'),
1550 + containerTagName: 'svg',
1551 + tagName: 'marker',
1552 + },
1553 {name: 'rel', tagName: 'a'},
964 - {name: 'rendering-intent', read: getAttribute('rendering-intent')},
965 - {name: 'renderingIntent', read: getAttribute('rendering-intent')},
966 - {name: 'repeatCount', read: getAttribute('repeatcount')},
967 - {name: 'repeatDur', read: getAttribute('repeatdur')},
1554 + {
1555 + name: 'rendering-intent',
1556 + read: getSVGAttribute('rendering-intent'),
1557 + containerTagName: 'svg',
1558 + tagName: 'color-profile',
1559 + },
1560 + {
1561 + name: 'renderingIntent',
1562 + read: getSVGAttribute('rendering-intent'),
1563 + containerTagName: 'svg',
1564 + tagName: 'color-profile',
1565 + },
1566 + {
1567 + name: 'repeatCount',
1568 + read: getSVGAttribute('repeatcount'),
1569 + containerTagName: 'svg',
1570 + tagName: 'animate',
1571 + },
1572 + {
1573 + name: 'repeatDur',
1574 + read: getSVGAttribute('repeatdur'),
1575 + containerTagName: 'svg',
1576 + tagName: 'animate',
1577 + },
1578 {name: 'required', tagName: 'input'},
969 - {name: 'requiredExtensions', read: getAttribute('requiredExtensions')},
970 - {name: 'requiredFeatures', read: getAttribute('requiredFeatures')},
1579 + {
1580 + name: 'requiredExtensions',
1581 + read: getSVGAttribute('requiredExtensions'),
1582 + containerTagName: 'svg',
1583 + tagName: 'a',
1584 + },
1585 + {
1586 + name: 'requiredFeatures',
1587 + read: getSVGAttribute('requiredFeatures'),
1588 + containerTagName: 'svg',
1589 + tagName: 'a',
1590 + },
1591 {name: 'resource', read: getAttribute('resource')},
972 - {name: 'restart', read: getAttribute('resource')},
973 - {name: 'result', read: getAttribute('result')},
1592 + {
1593 + name: 'restart',
1594 + read: getSVGAttribute('resource'),
1595 + containerTagName: 'svg',
1596 + tagName: 'animate',
1597 + },
1598 + {
1599 + name: 'result',
1600 + read: getSVGAttribute('result'),
1601 + containerTagName: 'svg',
1602 + tagName: 'feBlend',
1603 + },
1604 {name: 'results', tagName: 'input', read: getAttribute('results')}, // TODO: Should use property but it's not supported in Chrome.
1605 {name: 'reversed', tagName: 'ol'},
1606 {name: 'role', read: getAttribute('role')},
977 - {name: 'rotate', read: getAttribute('role')},
1607 + {
1608 + name: 'rotate',
1609 + read: getSVGAttribute('role'),
1610 + containerTagName: 'svg',
1611 + tagName: 'altGlyph',
1612 + },
1613 {name: 'rows', tagName: 'textarea'},
1614 {name: 'rowSpan', tagName: 'td'},
980 - {name: 'rx', read: getAttribute('rx')},
981 - {name: 'ry', read: getAttribute('ry')},
1615 + {
1616 + name: 'rx',
1617 + read: getSVGAttribute('rx'),
1618 + containerTagName: 'svg',
1619 + tagName: 'ellipse',
1620 + },
1621 + {
1622 + name: 'ry',
1623 + read: getSVGAttribute('ry'),
1624 + containerTagName: 'svg',
1625 + tagName: 'ellipse',
1626 + },
1627 {
1628 name: 'sandbox',
1629 tagName: 'iframe',
1630 overrideStringValue: 'allow-forms allow-scripts',
986 - read(element) {
987 - return element.sandbox.value;
988 - },
1631 },
990 - {name: 'scale', read: getAttribute('scale')},
1632 + {
1633 + name: 'scale',
1634 + read: getSVGAttribute('scale'),
1635 + containerTagName: 'svg',
1636 + tagName: 'feDisplacementMap',
1637 + },
1638 {name: 'scope', tagName: 'th', overrideStringValue: 'row'},
1639 {name: 'scoped', tagName: 'style', read: getAttribute('scoped')},
1640 {name: 'scrolling', tagName: 'iframe', overrideStringValue: 'no'},
1641 {name: 'seamless', tagName: 'iframe', read: getAttribute('seamless')},
1642 {name: 'security', tagName: 'iframe', read: getAttribute('security')},
996 - {name: 'seed', read: getAttribute('seed')},
1643 + {
1644 + name: 'seed',
1645 + read: getSVGAttribute('seed'),
1646 + containerTagName: 'svg',
1647 + tagName: 'feTurbulence',
1648 + },
1649 {name: 'selected', tagName: 'option', containerTagName: 'select'},
1650 {name: 'selectedIndex', tagName: 'select'},
1651 {name: 'shape', tagName: 'a'},
1000 - {name: 'shape-rendering', read: getAttribute('shape-rendering')},
1001 - {name: 'shapeRendering', read: getAttribute('shape-rendering')},
1652 + {
1653 + name: 'shape-rendering',
1654 + tagName: 'svg',
1655 + read: getSVGAttribute('shape-rendering'),
1656 + },
1657 + {
1658 + name: 'shapeRendering',
1659 + tagName: 'svg',
1660 + read: getSVGAttribute('shape-rendering'),
1661 + },
1662 {name: 'size', tagName: 'input'},
1663 + {name: 'sizes', tagName: 'link'},
1664 {
1004 - name: 'sizes',
1005 - tagName: 'link',
1006 - read(element) {
1007 - return element.sizes.value;
1008 - },
1665 + name: 'slope',
1666 + read: getSVGAttribute('slope'),
1667 + containerTagName: 'svg',
1668 + tagName: 'font-face',
1669 + },
1670 + {
1671 + name: 'spacing',
1672 + read: getSVGAttribute('spacing'),
1673 + containerTagName: 'svg',
1674 + tagName: 'textPath',
1675 },
1010 - {name: 'slope', read: getAttribute('slope')},
1011 - {name: 'spacing', read: getAttribute('spacing')},
1676 {name: 'span', tagName: 'col'},
1013 - {name: 'specularConstant', read: getAttribute('specularConstant')},
1014 - {name: 'specularExponent', read: getAttribute('specularConstant')},
1677 + {
1678 + name: 'specularConstant',
1679 + read: getSVGAttribute('specularConstant'),
1680 + containerTagName: 'svg',
1681 + tagName: 'feSpecularLighting',
1682 + },
1683 + {
1684 + name: 'specularExponent',
1685 + read: getSVGAttribute('specularConstant'),
1686 + containerTagName: 'svg',
1687 + tagName: 'feSpecularLighting',
1688 + },
1689 {name: 'speed', read: getAttribute('speed')},
1690 {
1691 name: 'spellCheck',
@@ -1025,7 +1699,12 @@ const attributes = [
1699 tagName: 'input',
1700 read: getProperty('spellcheck'),
1701 },
1028 - {name: 'spreadMethod', read: getAttribute('spreadMethod')},
1702 + {
1703 + name: 'spreadMethod',
1704 + read: getSVGAttribute('spreadMethod'),
1705 + containerTagName: 'svg',
1706 + tagName: 'linearGradient',
1707 + },
1708 {name: 'src', tagName: 'img', overrideStringValue: 'https://reactjs.com'},
1709 {
1710 name: 'srcDoc',
@@ -1056,112 +1735,412 @@ const attributes = [
1735 {name: 'srcSet', tagName: 'img'},
1736 {name: 'srcset', tagName: 'img'},
1737 {name: 'start', tagName: 'ol'},
1059 - {name: 'startOffset', read: getAttribute('startOffset')},
1060 - {name: 'state', read: getAttribute('state')},
1061 - {name: 'stdDeviation', read: getAttribute('stdDeviation')},
1062 - {name: 'stemh', read: getAttribute('stemh')},
1063 - {name: 'stemv', read: getAttribute('stemv')},
1064 - {name: 'step', read: getAttribute('step')},
1065 - {name: 'stitchTiles', read: getAttribute('stitchTiles')},
1066 - {name: 'stop-color', read: getAttribute('stop-color')},
1067 - {name: 'stop-opacity', read: getAttribute('stop-opacity')},
1068 - {name: 'stopColor', read: getAttribute('stop-color')},
1069 - {name: 'stopOpacity', read: getAttribute('stop-opacity')},
1738 {
1071 - name: 'strikethrough-position',
1072 - read: getAttribute('strikethrough-thickness'),
1073 - },
1739 + name: 'startOffset',
1740 + read: getSVGAttribute('startOffset'),
1741 + containerTagName: 'svg',
1742 + tagName: 'textPath',
1743 + },
1744 + {name: 'state', read: getAttribute('state')},
1745 + {
1746 + name: 'stdDeviation',
1747 + read: getSVGAttribute('stdDeviation'),
1748 + containerTagName: 'svg',
1749 + tagName: 'feGaussianBlur',
1750 + },
1751 + {
1752 + name: 'stemh',
1753 + read: getSVGAttribute('stemh'),
1754 + containerTagName: 'svg',
1755 + tagName: 'font-face',
1756 + },
1757 + {
1758 + name: 'stemv',
1759 + read: getSVGAttribute('stemv'),
1760 + containerTagName: 'svg',
1761 + tagName: 'font-face',
1762 + },
1763 + {name: 'step', read: getAttribute('step')},
1764 + {
1765 + name: 'stitchTiles',
1766 + read: getSVGAttribute('stitchTiles'),
1767 + containerTagName: 'svg',
1768 + tagName: 'feTurbulence',
1769 + },
1770 + {
1771 + name: 'stop-color',
1772 + containerTagName: 'svg',
1773 + tagName: 'stop',
1774 + read: getSVGAttribute('stop-color'),
1775 + },
1776 + {
1777 + name: 'stop-opacity',
1778 + containerTagName: 'svg',
1779 + tagName: 'stop',
1780 + read: getSVGAttribute('stop-opacity'),
1781 + },
1782 + {
1783 + name: 'stopColor',
1784 + containerTagName: 'svg',
1785 + tagName: 'stop',
1786 + read: getSVGAttribute('stop-color'),
1787 + },
1788 + {
1789 + name: 'stopOpacity',
1790 + containerTagName: 'svg',
1791 + tagName: 'stop',
1792 + read: getSVGAttribute('stop-opacity'),
1793 + },
1794 + {
1795 + name: 'strikethrough-position',
1796 + read: getSVGAttribute('strikethrough-position'),
1797 + containerTagName: 'svg',
1798 + tagName: 'font-face',
1799 + },
1800 {
1801 name: 'strikethrough-thickness',
1076 - read: getAttribute('strikethrough-thickness'),
1802 + read: getSVGAttribute('strikethrough-thickness'),
1803 + containerTagName: 'svg',
1804 + tagName: 'font-face',
1805 + },
1806 + {
1807 + name: 'strikethroughPosition',
1808 + read: getSVGAttribute('strikethrough-position'),
1809 + containerTagName: 'svg',
1810 + tagName: 'font-face',
1811 },
1078 - {name: 'strikethroughPosition', read: getAttribute('strikethrough-position')},
1812 {
1813 name: 'strikethroughThickness',
1081 - read: getAttribute('strikethrough-thickness'),
1082 - },
1083 - {name: 'string', read: getAttribute('string')},
1084 - {name: 'stroke', read: getAttribute('stroke')},
1085 - {name: 'stroke-dasharray', read: getAttribute('stroke-dasharray')},
1086 - {name: 'stroke-Dasharray', read: getAttribute('stroke-dasharray')},
1087 - {name: 'stroke-dashoffset', read: getAttribute('stroke-dashoffset')},
1088 - {name: 'stroke-linecap', read: getAttribute('stroke-linecap')},
1089 - {name: 'stroke-linejoin', read: getAttribute('stroke-linejoin')},
1090 - {name: 'stroke-miterlimit', read: getAttribute('stroke-miterlimit')},
1091 - {name: 'stroke-opacity', read: getAttribute('stroke-opacity')},
1092 - {name: 'stroke-width', read: getAttribute('stroke-width')},
1093 - {name: 'strokeDasharray', read: getAttribute('stroke-dasharray')},
1094 - {name: 'strokeDashoffset', read: getAttribute('stroke-dashoffset')},
1095 - {name: 'strokeLinecap', read: getAttribute('stroke-linecap')},
1096 - {name: 'strokeLinejoin', read: getAttribute('stroke-linejoin')},
1097 - {name: 'strokeMiterlimit', read: getAttribute('stroke-miterlimit')},
1098 - {name: 'strokeOpacity', read: getAttribute('stroke-opacity')},
1099 - {name: 'strokeWidth', read: getAttribute('stroke-width')},
1814 + read: getSVGAttribute('strikethrough-thickness'),
1815 + containerTagName: 'svg',
1816 + tagName: 'font-face',
1817 + },
1818 + {
1819 + name: 'string',
1820 + read: getSVGAttribute('string'),
1821 + containerTagName: 'svg',
1822 + tagName: 'font-face-format',
1823 + },
1824 + {
1825 + name: 'stroke',
1826 + containerTagName: 'svg',
1827 + tagName: 'path',
1828 + read: getSVGAttribute('stroke'),
1829 + },
1830 + {
1831 + name: 'stroke-dasharray',
1832 + containerTagName: 'svg',
1833 + tagName: 'path',
1834 + read: getSVGAttribute('stroke-dasharray'),
1835 + },
1836 + {
1837 + name: 'stroke-Dasharray',
1838 + containerTagName: 'svg',
1839 + tagName: 'path',
1840 + read: getSVGAttribute('stroke-dasharray'),
1841 + },
1842 + {
1843 + name: 'stroke-dashoffset',
1844 + containerTagName: 'svg',
1845 + tagName: 'path',
1846 + read: getSVGAttribute('stroke-dashoffset'),
1847 + },
1848 + {
1849 + name: 'stroke-linecap',
1850 + containerTagName: 'svg',
1851 + tagName: 'path',
1852 + read: getSVGAttribute('stroke-linecap'),
1853 + },
1854 + {
1855 + name: 'stroke-linejoin',
1856 + containerTagName: 'svg',
1857 + tagName: 'path',
1858 + read: getSVGAttribute('stroke-linejoin'),
1859 + },
1860 + {
1861 + name: 'stroke-miterlimit',
1862 + containerTagName: 'svg',
1863 + tagName: 'path',
1864 + read: getSVGAttribute('stroke-miterlimit'),
1865 + },
1866 + {
1867 + name: 'stroke-opacity',
1868 + containerTagName: 'svg',
1869 + tagName: 'path',
1870 + read: getSVGAttribute('stroke-opacity'),
1871 + },
1872 + {
1873 + name: 'stroke-width',
1874 + containerTagName: 'svg',
1875 + tagName: 'path',
1876 + read: getSVGAttribute('stroke-width'),
1877 + },
1878 + {
1879 + name: 'strokeDasharray',
1880 + containerTagName: 'svg',
1881 + tagName: 'path',
1882 + read: getSVGAttribute('stroke-dasharray'),
1883 + },
1884 + {
1885 + name: 'strokeDashoffset',
1886 + containerTagName: 'svg',
1887 + tagName: 'path',
1888 + read: getSVGAttribute('stroke-dashoffset'),
1889 + },
1890 + {
1891 + name: 'strokeLinecap',
1892 + containerTagName: 'svg',
1893 + tagName: 'path',
1894 + read: getSVGAttribute('stroke-linecap'),
1895 + },
1896 + {
1897 + name: 'strokeLinejoin',
1898 + containerTagName: 'svg',
1899 + tagName: 'path',
1900 + read: getSVGAttribute('stroke-linejoin'),
1901 + },
1902 + {
1903 + name: 'strokeMiterlimit',
1904 + containerTagName: 'svg',
1905 + tagName: 'path',
1906 + read: getSVGAttribute('stroke-miterlimit'),
1907 + },
1908 + {
1909 + name: 'strokeOpacity',
1910 + containerTagName: 'svg',
1911 + tagName: 'path',
1912 + read: getSVGAttribute('stroke-opacity'),
1913 + },
1914 + {
1915 + name: 'strokeWidth',
1916 + containerTagName: 'svg',
1917 + tagName: 'path',
1918 + read: getSVGAttribute('stroke-width'),
1919 + },
1920 {name: 'style'},
1921 {name: 'summary', tagName: 'table'},
1922 {
1923 name: 'suppressContentEditableWarning',
1924 read: getAttribute('suppresscontenteditablewarning'),
1925 },
1106 - {name: 'surfaceScale', read: getAttribute('surfaceScale')},
1926 + {
1927 + name: 'surfaceScale',
1928 + read: getSVGAttribute('surfaceScale'),
1929 + containerTagName: 'svg',
1930 + tagName: 'feDiffuseLighting',
1931 + },
1932 {
1933 name: 'systemLanguage',
1934 overrideStringValue: 'en',
1110 - read: getAttribute('systemLanguage'),
1111 - }, // obsolete as of IE9
1935 + read: getSVGAttribute('systemLanguage'),
1936 + containerTagName: 'svg',
1937 + tagName: 'a',
1938 + },
1939 {name: 'tabIndex'},
1113 - {name: 'tableValues', read: getAttribute('tableValues')},
1114 - {name: 'target', read: getAttribute('target')},
1115 - {name: 'targetX', read: getAttribute('targetX')},
1116 - {name: 'targetY', read: getAttribute('targetY')},
1117 - {name: 'text-anchor', read: getAttribute('text-anchor')},
1118 - {name: 'text-decoration', read: getAttribute('text-decoration')},
1119 - {name: 'text-rendering', read: getAttribute('text-rendering')},
1120 - {name: 'textAnchor', read: getAttribute('text-anchor')},
1121 - {name: 'textDecoration', read: getAttribute('text-decoration')},
1122 - {name: 'textLength', read: getAttribute('textLength')},
1123 - {name: 'textRendering', read: getAttribute('text-rendering')},
1940 + {
1941 + name: 'tableValues',
1942 + read: getSVGAttribute('tableValues'),
1943 + containerTagName: 'svg',
1944 + tagName: 'feFuncA',
1945 + },
1946 + {
1947 + name: 'target',
1948 + read: getSVGAttribute('target'),
1949 + containerTagName: 'svg',
1950 + tagName: 'a',
1951 + },
1952 + {
1953 + name: 'targetX',
1954 + read: getSVGAttribute('targetX'),
1955 + containerTagName: 'svg',
1956 + tagName: 'feConvolveMatrix',
1957 + },
1958 + {
1959 + name: 'targetY',
1960 + read: getSVGAttribute('targetY'),
1961 + containerTagName: 'svg',
1962 + tagName: 'feConvolveMatrix',
1963 + },
1964 + {
1965 + name: 'text-anchor',
1966 + containerTagName: 'svg',
1967 + tagName: 'text',
1968 + read: getSVGAttribute('text-anchor'),
1969 + },
1970 + {
1971 + name: 'text-decoration',
1972 + containerTagName: 'svg',
1973 + tagName: 'text',
1974 + read: getSVGAttribute('text-decoration'),
1975 + },
1976 + {
1977 + name: 'text-rendering',
1978 + tagName: 'svg',
1979 + read: getSVGAttribute('text-rendering'),
1980 + },
1981 + {
1982 + name: 'textAnchor',
1983 + containerTagName: 'svg',
1984 + tagName: 'text',
1985 + read: getSVGAttribute('text-anchor'),
1986 + },
1987 + {
1988 + name: 'textDecoration',
1989 + containerTagName: 'svg',
1990 + tagName: 'text',
1991 + read: getSVGAttribute('text-decoration'),
1992 + },
1993 + {
1994 + name: 'textLength',
1995 + read: getSVGAttribute('textLength'),
1996 + containerTagName: 'svg',
1997 + tagName: 'text',
1998 + },
1999 + {
2000 + name: 'textRendering',
2001 + tagName: 'svg',
2002 + read: getSVGAttribute('text-rendering'),
2003 + },
2004 {name: 'title'},
1125 - {name: 'to', read: getAttribute('to')},
1126 - {name: 'transform', read: getAttribute('transform')},
2005 + {
2006 + name: 'to',
2007 + read: getSVGAttribute('to'),
2008 + containerTagName: 'svg',
2009 + tagName: 'set',
2010 + },
2011 + {
2012 + name: 'transform',
2013 + read: getSVGAttribute('transform'),
2014 + containerTagName: 'svg',
2015 + tagName: 'a',
2016 + },
2017 {name: 'type', tagName: 'button', overrideStringValue: 'reset'},
2018 + {
2019 + name: 'type',
2020 + containerTagName: 'svg',
2021 + tagName: 'feFuncA',
2022 + read: getSVGAttribute('type'),
2023 + },
2024 {name: 'typeof', read: getAttribute('typeof')},
1129 - {name: 'u1', read: getAttribute('u1')},
1130 - {name: 'u2', read: getAttribute('u2')},
1131 - {name: 'underline-position', read: getAttribute('underline-position')},
1132 - {name: 'underline-thickness', read: getAttribute('underline-thickness')},
1133 - {name: 'underlinePosition', read: getAttribute('underline-position')},
1134 - {name: 'underlineThickness', read: getAttribute('underline-thickness')},
1135 - {name: 'unicode', read: getAttribute('unicode')},
1136 - {name: 'unicode-bidi', read: getAttribute('unicode-bidi')},
1137 - {name: 'unicode-range', read: getAttribute('unicode-range')},
1138 - {name: 'unicodeBidi', read: getAttribute('unicode-bidi')},
1139 - {name: 'unicodeRange', read: getAttribute('unicode-range')},
1140 - {name: 'units-per-em', read: getAttribute('units-per-em')},
1141 - {name: 'unitsPerEm', read: getAttribute('unites-per-em')},
2025 + {
2026 + name: 'u1',
2027 + read: getSVGAttribute('u1'),
2028 + containerTagName: 'svg',
2029 + tagName: 'hkern',
2030 + },
2031 + {
2032 + name: 'u2',
2033 + read: getSVGAttribute('u2'),
2034 + containerTagName: 'svg',
2035 + tagName: 'hkern',
2036 + },
2037 + {
2038 + name: 'underline-position',
2039 + read: getSVGAttribute('underline-position'),
2040 + containerTagName: 'svg',
2041 + tagName: 'font-face',
2042 + },
2043 + {
2044 + name: 'underline-thickness',
2045 + read: getSVGAttribute('underline-thickness'),
2046 + containerTagName: 'svg',
2047 + tagName: 'font-face',
2048 + },
2049 + {
2050 + name: 'underlinePosition',
2051 + read: getSVGAttribute('underline-position'),
2052 + containerTagName: 'svg',
2053 + tagName: 'font-face',
2054 + },
2055 + {
2056 + name: 'underlineThickness',
2057 + read: getSVGAttribute('underline-thickness'),
2058 + containerTagName: 'svg',
2059 + tagName: 'font-face',
2060 + },
2061 + {
2062 + name: 'unicode',
2063 + read: getSVGAttribute('unicode'),
2064 + containerTagName: 'svg',
2065 + tagName: 'glyph',
2066 + },
2067 + {
2068 + name: 'unicode-bidi',
2069 + containerTagName: 'svg',
2070 + tagName: 'text',
2071 + read: getSVGAttribute('unicode-bidi'),
2072 + },
2073 + {
2074 + name: 'unicode-range',
2075 + read: getSVGAttribute('unicode-range'),
2076 + containerTagName: 'svg',
2077 + tagName: 'font-face',
2078 + },
2079 + {
2080 + name: 'unicodeBidi',
2081 + containerTagName: 'svg',
2082 + tagName: 'text',
2083 + read: getSVGAttribute('unicode-bidi'),
2084 + },
2085 + {
2086 + name: 'unicodeRange',
2087 + read: getSVGAttribute('unicode-range'),
2088 + containerTagName: 'svg',
2089 + tagName: 'font-face',
2090 + },
2091 + {
2092 + name: 'units-per-em',
2093 + read: getSVGAttribute('units-per-em'),
2094 + containerTagName: 'svg',
2095 + tagName: 'font-face',
2096 + },
2097 + {
2098 + name: 'unitsPerEm',
2099 + read: getSVGAttribute('unites-per-em'),
2100 + containerTagName: 'svg',
2101 + tagName: 'font-face',
2102 + },
2103 {name: 'unknown', read: getAttribute('unknown')},
2104 {
2105 name: 'unselectable',
2106 read: getAttribute('unselectable'),
2107 tagName: 'span',
2108 overrideStringValue: 'on',
1148 - }, // seems to be IE only
2109 + },
2110 {name: 'useMap', tagName: 'img'},
1150 - {name: 'v-alphabetic', read: getAttribute('v-alphabetic')},
1151 - {name: 'v-hanging', read: getAttribute('v-hanging')},
1152 - {name: 'v-ideographic', read: getAttribute('v-ideographic')},
1153 - {name: 'v-mathematical', read: getAttribute('v-mathematical')},
1154 - {name: 'vAlphabetic', read: getAttribute('v-alphabetic')},
1155 - {name: 'value', tagName: 'input'},
1156 - {name: 'value', tagName: 'input', type: 'email'},
2111 {
1158 - name: 'value',
1159 - tagName: 'input',
1160 - type: 'number',
1161 - read(element) {
1162 - return element.valueAsNumber;
1163 - },
2112 + name: 'v-alphabetic',
2113 + read: getSVGAttribute('v-alphabetic'),
2114 + containerTagName: 'svg',
2115 + tagName: 'font-face',
2116 + },
2117 + {
2118 + name: 'v-hanging',
2119 + read: getSVGAttribute('v-hanging'),
2120 + containerTagName: 'svg',
2121 + tagName: 'font-face',
2122 + },
2123 + {
2124 + name: 'v-ideographic',
2125 + read: getSVGAttribute('v-ideographic'),
2126 + containerTagName: 'svg',
2127 + tagName: 'font-face',
2128 },
2129 + {
2130 + name: 'v-mathematical',
2131 + read: getSVGAttribute('v-mathematical'),
2132 + containerTagName: 'svg',
2133 + tagName: 'font-face',
2134 + },
2135 + {
2136 + name: 'vAlphabetic',
2137 + read: getSVGAttribute('v-alphabetic'),
2138 + containerTagName: 'svg',
2139 + tagName: 'font-face',
2140 + },
2141 + {name: 'value', tagName: 'input'},
2142 + {name: 'value', tagName: 'input', type: 'email'},
2143 + {name: 'value', tagName: 'input', type: 'number'},
2144 {name: 'value', tagName: 'textarea'},
2145 {name: 'value', containerTagName: 'select', tagName: 'option'},
2146 {
@@ -1170,37 +2149,175 @@ const attributes = [
2149 tagName: 'option',
2150 read: getProperty('value'),
2151 },
1173 - {name: 'values', read: getAttribute('values')},
1174 - {name: 'vector-effect', read: getAttribute('vector-effect')},
1175 - {name: 'vectorEffect', read: getAttribute('vector-effect')},
2152 + {
2153 + name: 'values',
2154 + read: getSVGAttribute('values'),
2155 + containerTagName: 'svg',
2156 + tagName: 'feColorMatrix',
2157 + },
2158 + {
2159 + name: 'vector-effect',
2160 + containerTagName: 'svg',
2161 + tagName: 'line',
2162 + read: getSVGAttribute('vector-effect'),
2163 + },
2164 + {
2165 + name: 'vectorEffect',
2166 + containerTagName: 'svg',
2167 + tagName: 'line',
2168 + read: getSVGAttribute('vector-effect'),
2169 + },
2170 {name: 'version', tagName: 'html'},
1177 - {name: 'vert-adv-y', read: getAttribute('vert-origin-y')},
1178 - {name: 'vert-origin-x', read: getAttribute('vert-origin-y')},
1179 - {name: 'vert-origin-y', read: getAttribute('vert-origin-y')},
1180 - {name: 'vertAdvY', read: getAttribute('vert-adv-y')},
1181 - {name: 'vertOriginX', read: getAttribute('vert-origin-x')},
1182 - {name: 'vertOriginY', read: getAttribute('vert-origin-y')},
1183 - {name: 'vHanging', read: getAttribute('v-hanging')},
1184 - {name: 'vIdeographic', read: getAttribute('v-ideographic')},
1185 - {name: 'viewBox', read: getAttribute('viewBox')},
1186 - {name: 'viewTarget', read: getAttribute('viewTarget')},
2171 + {name: 'version', tagName: 'svg', read: getSVGAttribute('version')},
2172 + {
2173 + name: 'vert-adv-y',
2174 + read: getSVGAttribute('vert-origin-y'),
2175 + containerTagName: 'svg',
2176 + tagName: 'font',
2177 + },
2178 + {
2179 + name: 'vert-origin-x',
2180 + read: getSVGAttribute('vert-origin-y'),
2181 + containerTagName: 'svg',
2182 + tagName: 'font',
2183 + },
2184 + {
2185 + name: 'vert-origin-y',
2186 + read: getSVGAttribute('vert-origin-y'),
2187 + containerTagName: 'svg',
2188 + tagName: 'font',
2189 + },
2190 + {
2191 + name: 'vertAdvY',
2192 + read: getSVGAttribute('vert-adv-y'),
2193 + containerTagName: 'svg',
2194 + tagName: 'font',
2195 + },
2196 + {
2197 + name: 'vertOriginX',
2198 + read: getSVGAttribute('vert-origin-x'),
2199 + containerTagName: 'svg',
2200 + tagName: 'font',
2201 + },
2202 + {
2203 + name: 'vertOriginY',
2204 + read: getSVGAttribute('vert-origin-y'),
2205 + containerTagName: 'svg',
2206 + tagName: 'font',
2207 + },
2208 + {
2209 + name: 'vHanging',
2210 + read: getSVGAttribute('v-hanging'),
2211 + containerTagName: 'svg',
2212 + tagName: 'font-face',
2213 + },
2214 + {
2215 + name: 'vIdeographic',
2216 + read: getSVGAttribute('v-ideographic'),
2217 + containerTagName: 'svg',
2218 + tagName: 'font-face',
2219 + },
2220 + {
2221 + name: 'viewBox',
2222 + read: getSVGAttribute('viewBox'),
2223 + containerTagName: 'svg',
2224 + tagName: 'marker',
2225 + },
2226 + {
2227 + name: 'viewTarget',
2228 + read: getSVGAttribute('viewTarget'),
2229 + containerTagName: 'svg',
2230 + tagName: 'view',
2231 + },
2232 {name: 'visibility', read: getAttribute('visibility')},
1188 - {name: 'vMathematical', read: getAttribute('v-mathematical')},
2233 + {
2234 + name: 'visibility',
2235 + containerTagName: 'svg',
2236 + tagName: 'path',
2237 + read: getSVGAttribute('visibility'),
2238 + },
2239 + {
2240 + name: 'vMathematical',
2241 + read: getSVGAttribute('v-mathematical'),
2242 + containerTagName: 'svg',
2243 + tagName: 'font-face',
2244 + },
2245 {name: 'vocab', read: getAttribute('vocab')},
2246 {name: 'width', tagName: 'img'},
1191 - {name: 'widths', read: getAttribute('widths')},
2247 + {
2248 + name: 'width',
2249 + containerTagName: 'svg',
2250 + tagName: 'rect',
2251 + read: getSVGAttribute('width'),
2252 + },
2253 + {
2254 + name: 'widths',
2255 + read: getSVGAttribute('widths'),
2256 + containerTagName: 'svg',
2257 + tagName: 'font-face',
2258 + },
2259 {name: 'wmode', read: getAttribute('wmode'), tagName: 'embed'},
1193 - {name: 'word-spacing', read: getAttribute('word-spacing')},
1194 - {name: 'wordSpacing', read: getAttribute('word-spacing')},
2260 + {
2261 + name: 'word-spacing',
2262 + containerTagName: 'svg',
2263 + tagName: 'text',
2264 + read: getSVGAttribute('word-spacing'),
2265 + },
2266 + {
2267 + name: 'wordSpacing',
2268 + containerTagName: 'svg',
2269 + tagName: 'text',
2270 + read: getSVGAttribute('word-spacing'),
2271 + },
2272 {name: 'wrap', tagName: 'textarea'},
1196 - {name: 'writing-mode', read: getAttribute('writing-mode')},
1197 - {name: 'writingMode', read: getAttribute('writing-mode')},
1198 - {name: 'x', read: getAttribute('x')},
1199 - {name: 'x-height', read: getAttribute('x-height')},
1200 - {name: 'x1', read: getAttribute('x1')},
1201 - {name: 'x2', read: getAttribute('x2')},
1202 - {name: 'xChannelSelector', read: getAttribute('xChannelSelector')},
1203 - {name: 'xHeight', read: getAttribute('x-height')},
2273 + {
2274 + name: 'writing-mode',
2275 + containerTagName: 'svg',
2276 + tagName: 'text',
2277 + read: getSVGAttribute('writing-mode'),
2278 + },
2279 + {
2280 + name: 'writingMode',
2281 + containerTagName: 'svg',
2282 + tagName: 'text',
2283 + read: getSVGAttribute('writing-mode'),
2284 + },
2285 + {
2286 + name: 'x',
2287 + read: getSVGAttribute('x'),
2288 + containerTagName: 'svg',
2289 + tagName: 'altGlyph',
2290 + },
2291 + {
2292 + name: 'x-height',
2293 + read: getSVGAttribute('x-height'),
2294 + containerTagName: 'svg',
2295 + tagName: 'font-face',
2296 + },
2297 + {
2298 + name: 'x1',
2299 + read: getSVGAttribute('x1'),
2300 + containerTagName: 'svg',
2301 + tagName: 'line',
2302 + },
2303 + {
2304 + name: 'x2',
2305 + read: getSVGAttribute('x2'),
2306 + containerTagName: 'svg',
2307 + tagName: 'line',
2308 + },
2309 + {
2310 + name: 'xChannelSelector',
2311 + read: getSVGAttribute('xChannelSelector'),
2312 + containerTagName: 'svg',
2313 + tagName: 'feDisplacementMap',
2314 + },
2315 + {
2316 + name: 'xHeight',
2317 + read: getSVGAttribute('x-height'),
2318 + containerTagName: 'svg',
2319 + tagName: 'font-face',
2320 + },
2321 {name: 'XLink:Actuate', read: getAttribute('XLink:Actuate')},
2322 {name: 'xlink:actuate', read: getAttribute('xlink:actuate')},
2323 {name: 'xlink:arcrole', read: getAttribute('xlink:arcrole')},
@@ -1222,20 +2339,41 @@ const attributes = [
2339 {name: 'xml:space', read: getAttribute('xml:space')},
2340 {name: 'xmlBase', read: getAttribute('xml:base')},
2341 {name: 'xmlLang', read: getAttribute('xml:lang')},
1225 - {
1226 - name: 'xmlns',
1227 - read: getProperty('namespaceURI'),
1228 - tagName: 'svg',
1229 - },
2342 + {name: 'xmlns', read: getProperty('namespaceURI'), tagName: 'svg'},
2343 {name: 'xmlns:xlink', read: getAttribute('xmlns:xlink')},
2344 {name: 'xmlnsXlink', read: getAttribute('xmlns:xlink')},
2345 {name: 'xmlSpace', read: getAttribute('xml:space')},
1233 - {name: 'y', read: getAttribute('y')},
1234 - {name: 'y1', read: getAttribute('y1')},
1235 - {name: 'y2', read: getAttribute('y2')},
1236 - {name: 'yChannelSelector', read: getAttribute('yChannelSelector')},
1237 - {name: 'z', read: getAttribute('z')},
1238 - {name: 'zoomAndPan', read: getAttribute('zoomAndPan')},
2346 + {
2347 + name: 'y',
2348 + read: getSVGAttribute('y'),
2349 + containerTagName: 'svg',
2350 + tagName: 'altGlyph',
2351 + },
2352 + {
2353 + name: 'y1',
2354 + read: getSVGAttribute('y1'),
2355 + containerTagName: 'svg',
2356 + tagName: 'line',
2357 + },
2358 + {
2359 + name: 'y2',
2360 + read: getSVGAttribute('y2'),
2361 + containerTagName: 'svg',
2362 + tagName: 'line',
2363 + },
2364 + {
2365 + name: 'yChannelSelector',
2366 + read: getSVGAttribute('yChannelSelector'),
2367 + containerTagName: 'svg',
2368 + tagName: 'feDisplacementMap',
2369 + },
2370 + {
2371 + name: 'z',
2372 + read: getSVGAttribute('z'),
2373 + containerTagName: 'svg',
2374 + tagName: 'fePointLight',
2375 + },
2376 + {name: 'zoomAndPan', read: getSVGAttribute('zoomAndPan'), tagName: 'svg'},
2377 ];
2378
2379 let _didWarn = false;