@samitouri / QOS-React / commits / 575cfadf3e

Read SVG properties instead of attributes where applicable (#10549)

Also canonicalize object results (since these SVG properties are objects). The canonicalized format is what we compare against. (This will cause unknown objects to show up as unchanged.)

Sebastian Markbåge committed Aug 28, 2017 at 14:11 UTC 575cfadf3e44c0eaec1a90d193d049951971b41c
1 file changed +243 -134
fixtures/attribute-behavior/src/App.js
+243 -134
@@ -130,6 +130,10 @@ function getAttribute(attributeName) {
130 };
131 }
132
133 +function getSVGProperty(propertyName) {
134 + return el => el[propertyName];
135 +}
136 +
137 function getSVGAttribute(attributeName) {
138 return el => {
139 if (el.namespaceURI !== 'http://www.w3.org/2000/svg') {
@@ -224,7 +228,7 @@ const attributes = [
228 name: 'amplitude',
229 containerTagName: 'svg',
230 tagName: 'feFuncA',
227 - read: getSVGAttribute('amplitude'),
231 + read: getSVGProperty('amplitude'),
232 },
233 {
234 name: 'arabic-form',
@@ -291,7 +295,7 @@ const attributes = [
295 name: 'azimuth',
296 containerTagName: 'svg',
297 tagName: 'feDistantLight',
294 - read: getSVGAttribute('azimuth'),
298 + read: getSVGProperty('azimuth'),
299 },
300 {
301 name: 'baseFrequency',
@@ -328,7 +332,7 @@ const attributes = [
332 name: 'bias',
333 containerTagName: 'svg',
334 tagName: 'feConvolveMatrix',
331 - read: getSVGAttribute('bias'),
335 + read: getSVGProperty('bias'),
336 },
337 {
338 name: 'by',
@@ -398,7 +402,8 @@ const attributes = [
402 name: 'clipPathUnits',
403 containerTagName: 'svg',
404 tagName: 'clipPath',
401 - read: getSVGAttribute('clipPathUnits'),
405 + overrideStringValue: 'objectBoundingBox',
406 + read: getSVGProperty('clipPathUnits'),
407 },
408 {
409 name: 'clip-rule',
@@ -497,13 +502,15 @@ const attributes = [
502 name: 'cx',
503 containerTagName: 'svg',
504 tagName: 'circle',
500 - read: getSVGAttribute('cx'),
505 + overrideStringValue: '10px',
506 + read: getSVGProperty('cx'),
507 },
508 {
509 name: 'cy',
510 containerTagName: 'svg',
511 tagName: 'circle',
506 - read: getSVGAttribute('cy'),
512 + overrideStringValue: '10%',
513 + read: getSVGProperty('cy'),
514 },
515 {
516 name: 'd',
@@ -555,7 +562,7 @@ const attributes = [
562 name: 'diffuseConstant',
563 containerTagName: 'svg',
564 tagName: 'feDiffuseLighting',
558 - read: getSVGAttribute('diffuseConstant'),
565 + read: getSVGProperty('diffuseConstant'),
566 },
567 {name: 'dir', overrideStringValue: 'rtl'},
568 {
@@ -576,7 +583,7 @@ const attributes = [
583 name: 'divisor',
584 containerTagName: 'svg',
585 tagName: 'feConvolveMatrix',
579 - read: getSVGAttribute('divisor'),
586 + read: getSVGProperty('divisor'),
587 },
588 {
589 name: 'dominant-baseline',
@@ -603,38 +610,42 @@ const attributes = [
610 name: 'dx',
611 containerTagName: 'svg',
612 tagName: 'text',
606 - read: getSVGAttribute('dx'),
613 + overrideStringValue: '1pt 2px 3em',
614 + read: getSVGProperty('dx'),
615 },
616 {
617 name: 'dX',
618 containerTagName: 'svg',
619 tagName: 'text',
612 - read: getSVGAttribute('dX'),
620 + overrideStringValue: '1pt 2px 3em',
621 + read: getSVGProperty('dx'),
622 },
623 {
624 name: 'dy',
625 containerTagName: 'svg',
626 tagName: 'text',
618 - read: getSVGAttribute('dy'),
627 + overrideStringValue: '1 2 3',
628 + read: getSVGProperty('dy'),
629 },
630 {
631 name: 'dY',
632 containerTagName: 'svg',
633 tagName: 'text',
624 - read: getSVGAttribute('dY'),
634 + overrideStringValue: '1 2 3',
635 + read: getSVGProperty('dy'),
636 },
637 {
638 name: 'edgeMode',
639 containerTagName: 'svg',
640 tagName: 'feConvolveMatrix',
641 overrideStringValue: 'wrap',
631 - read: getSVGAttribute('edgeMode'),
642 + read: getSVGProperty('edgeMode'),
643 },
644 {
645 name: 'elevation',
646 containerTagName: 'svg',
647 tagName: 'feDistantLight',
637 - read: getSVGAttribute('elevation'),
648 + read: getSVGProperty('elevation'),
649 },
650 {
651 name: 'enable-background',
@@ -662,7 +673,7 @@ const attributes = [
673 },
674 {
675 name: 'exponent',
665 - read: getSVGAttribute('exponent'),
676 + read: getSVGProperty('exponent'),
677 containerTagName: 'svg',
678 tagName: 'feFuncA',
679 },
@@ -719,7 +730,7 @@ const attributes = [
730 containerTagName: 'svg',
731 tagName: 'filter',
732 overrideStringValue: 'userSpaceOnUse',
722 - read: getSVGAttribute('filterUnits'),
733 + read: getSVGProperty('filterUnits'),
734 },
735 {
736 name: 'flood-color',
@@ -861,26 +872,30 @@ const attributes = [
872 },
873 {
874 name: 'fx',
864 - read: getSVGAttribute('fx'),
875 + read: getSVGProperty('fx'),
876 containerTagName: 'svg',
877 + overrideStringValue: '10px',
878 tagName: 'radialGradient',
879 },
880 {
881 name: 'fX',
882 containerTagName: 'svg',
883 tagName: 'radialGradient',
872 - read: getSVGAttribute('fx'),
884 + overrideStringValue: '10px',
885 + read: getSVGProperty('fx'),
886 },
887 {
888 name: 'fY',
889 containerTagName: 'svg',
890 tagName: 'radialGradient',
878 - read: getSVGAttribute('fy'),
891 + overrideStringValue: '20em',
892 + read: getSVGProperty('fy'),
893 },
894 {
895 name: 'fy',
882 - read: getSVGAttribute('fy'),
896 + read: getSVGProperty('fy'),
897 containerTagName: 'svg',
898 + overrideStringValue: '20em',
899 tagName: 'radialGradient',
900 },
901 {
@@ -951,14 +966,16 @@ const attributes = [
966 },
967 {
968 name: 'gradientTransform',
954 - read: getSVGAttribute('gradientTransform'),
969 + read: getSVGProperty('gradientTransform'),
970 containerTagName: 'svg',
971 + overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
972 tagName: 'linearGradient',
973 },
974 {
975 name: 'gradientUnits',
960 - read: getSVGAttribute('gradientUnits'),
976 + read: getSVGProperty('gradientUnits'),
977 containerTagName: 'svg',
978 + overrideStringValue: 'userSpaceOnUse',
979 tagName: 'linearGradient',
980 },
981 {
@@ -974,7 +991,8 @@ const attributes = [
991 name: 'height',
992 containerTagName: 'svg',
993 tagName: 'rect',
977 - read: getSVGAttribute('height'),
994 + read: getSVGProperty('height'),
995 + overrideStringValue: '100%',
996 },
997 {name: 'hidden'},
998 {name: 'high', tagName: 'meter'},
@@ -1034,7 +1052,7 @@ const attributes = [
1052 },
1053 {
1054 name: 'in2',
1037 - read: getSVGAttribute('in2'),
1055 + read: getSVGProperty('in2'),
1056 containerTagName: 'svg',
1057 tagName: 'feBlend',
1058 },
@@ -1045,7 +1063,7 @@ const attributes = [
1063 {name: 'integrity', tagName: 'script'},
1064 {
1065 name: 'intercept',
1048 - read: getSVGAttribute('intercept'),
1066 + read: getSVGProperty('intercept'),
1067 containerTagName: 'svg',
1068 tagName: 'feFuncA',
1069 },
@@ -1076,37 +1094,38 @@ const attributes = [
1094 name: 'K1',
1095 containerTagName: 'svg',
1096 tagName: 'feComposite',
1079 - read: getSVGAttribute('k1'),
1097 + read: getSVGProperty('k1'),
1098 },
1099 {
1100 name: 'k1',
1083 - read: getSVGAttribute('k1'),
1101 + read: getSVGProperty('k1'),
1102 containerTagName: 'svg',
1103 tagName: 'feComposite',
1104 },
1105 {
1106 name: 'k2',
1089 - read: getSVGAttribute('k2'),
1107 + read: getSVGProperty('k2'),
1108 containerTagName: 'svg',
1109 tagName: 'feComposite',
1110 },
1111 {
1112 name: 'k3',
1095 - read: getSVGAttribute('k3'),
1113 + read: getSVGProperty('k3'),
1114 containerTagName: 'svg',
1115 tagName: 'feComposite',
1116 },
1117 {
1118 name: 'k4',
1101 - read: getSVGAttribute('k4'),
1119 + read: getSVGProperty('k4'),
1120 containerTagName: 'svg',
1121 tagName: 'feComposite',
1122 },
1123 {
1124 name: 'kernelMatrix',
1107 - read: getSVGAttribute('kernelMatrix'),
1125 + read: getSVGProperty('kernelMatrix'),
1126 containerTagName: 'svg',
1127 tagName: 'feConvolveMatrix',
1128 + overrideStringValue: '1 2 3,4',
1129 },
1130 {
1131 name: 'kernelUnitLength',
@@ -1147,9 +1166,10 @@ const attributes = [
1166 {name: 'length', read: getAttribute('length')},
1167 {
1168 name: 'lengthAdjust',
1150 - read: getSVGAttribute('lengthAdjust'),
1169 + read: getSVGProperty('lengthAdjust'),
1170 containerTagName: 'svg',
1171 tagName: 'text',
1172 + overrideStringValue: 'spacingAndGlyphs',
1173 },
1174 {
1175 name: 'letter-spacing',
@@ -1177,7 +1197,7 @@ const attributes = [
1197 },
1198 {
1199 name: 'limitingConeAngle',
1180 - read: getSVGAttribute('limitingConeAngle'),
1200 + read: getSVGProperty('limitingConeAngle'),
1201 containerTagName: 'svg',
1202 tagName: 'feSpotLight',
1203 },
@@ -1219,7 +1239,7 @@ const attributes = [
1239 },
1240 {
1241 name: 'markerHeight',
1222 - read: getSVGAttribute('markerHeight'),
1242 + read: getSVGProperty('markerHeight'),
1243 containerTagName: 'svg',
1244 tagName: 'marker',
1245 },
@@ -1237,13 +1257,13 @@ const attributes = [
1257 },
1258 {
1259 name: 'markerUnits',
1240 - read: getSVGAttribute('markerUnits'),
1260 + read: getSVGProperty('markerUnits'),
1261 containerTagName: 'svg',
1262 tagName: 'marker',
1263 },
1264 {
1265 name: 'markerWidth',
1246 - read: getSVGAttribute('markerWidth'),
1266 + read: getSVGProperty('markerWidth'),
1267 containerTagName: 'svg',
1268 tagName: 'marker',
1269 },
@@ -1255,15 +1275,17 @@ const attributes = [
1275 },
1276 {
1277 name: 'maskContentUnits',
1258 - read: getSVGAttribute('maskContentUnits'),
1278 + read: getSVGProperty('maskContentUnits'),
1279 containerTagName: 'svg',
1280 tagName: 'mask',
1281 + overrideStringValue: 'objectBoundingBox',
1282 },
1283 {
1284 name: 'maskUnits',
1264 - read: getSVGAttribute('maskUnits'),
1285 + read: getSVGProperty('maskUnits'),
1286 containerTagName: 'svg',
1287 tagName: 'mask',
1288 + overrideStringValue: 'userSpaceOnUse',
1289 },
1290 {
1291 name: 'mathematical',
@@ -1286,7 +1308,7 @@ const attributes = [
1308 name: 'media',
1309 containerTagName: 'svg',
1310 tagName: 'style',
1289 - read: getSVGAttribute('media'),
1311 + read: getSVGProperty('media'),
1312 },
1313 {name: 'mediaGroup', tagName: 'video', read: getAttribute('mediagroup')}, // TODO: Not yet implemented in Chrome.
1314 {name: 'method', tagName: 'form', overrideStringValue: 'POST'},
@@ -1294,7 +1316,8 @@ const attributes = [
1316 name: 'method',
1317 containerTagName: 'svg',
1318 tagName: 'textPath',
1297 - read: getSVGAttribute('method'),
1319 + read: getSVGProperty('method'),
1320 + overrideStringValue: 'stretch',
1321 },
1322 {name: 'min', tagName: 'input'},
1323 {name: 'min', tagName: 'meter'},
@@ -1307,9 +1330,10 @@ const attributes = [
1330 {name: 'minLength', tagName: 'input'},
1331 {
1332 name: 'mode',
1310 - read: getSVGAttribute('mode'),
1333 + read: getSVGProperty('mode'),
1334 containerTagName: 'svg',
1335 tagName: 'feBlend',
1336 + overrideStringValue: 'multiply',
1337 },
1338 {name: 'multiple', tagName: 'select'},
1339 {name: 'muted', tagName: 'video'},
@@ -1324,13 +1348,13 @@ const attributes = [
1348 {name: 'noValidate', tagName: 'form'},
1349 {
1350 name: 'numOctaves',
1327 - read: getSVGAttribute('numOctaves'),
1351 + read: getSVGProperty('numOctaves'),
1352 containerTagName: 'svg',
1353 tagName: 'feTurbulence',
1354 },
1355 {
1356 name: 'offset',
1333 - read: getSVGAttribute('offset'),
1357 + read: getSVGProperty('offset'),
1358 containerTagName: 'svg',
1359 tagName: 'stop',
1360 },
@@ -1349,9 +1373,10 @@ const attributes = [
1373 {name: 'open', tagName: 'details'},
1374 {
1375 name: 'operator',
1352 - read: getSVGAttribute('operator'),
1376 + read: getSVGProperty('operator'),
1377 containerTagName: 'svg',
1378 tagName: 'feComposite',
1379 + overrideStringValue: 'xor',
1380 },
1381 {name: 'optimum', tagName: 'meter'},
1382 {
@@ -1434,28 +1459,31 @@ const attributes = [
1459 },
1460 {
1461 name: 'pathLength',
1437 - read: getSVGAttribute('pathLength'),
1462 + read: getSVGProperty('pathLength'),
1463 containerTagName: 'svg',
1464 tagName: 'path',
1465 },
1466 {name: 'pattern', tagName: 'input'},
1467 {
1468 name: 'patternContentUnits',
1444 - read: getSVGAttribute('patternContentUnits'),
1469 + read: getSVGProperty('patternContentUnits'),
1470 containerTagName: 'svg',
1471 tagName: 'pattern',
1472 + overrideStringValue: 'objectBoundingBox',
1473 },
1474 {
1475 name: 'patternTransform',
1450 - read: getSVGAttribute('patternTransform'),
1476 + read: getSVGProperty('patternTransform'),
1477 containerTagName: 'svg',
1478 tagName: 'pattern',
1479 + overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
1480 },
1481 {
1482 name: 'patternUnits',
1456 - read: getSVGAttribute('patternUnits'),
1483 + read: getSVGProperty('patternUnits'),
1484 containerTagName: 'svg',
1485 tagName: 'pattern',
1486 + overrideStringValue: 'userSpaceOnUse',
1487 },
1488 {name: 'placeholder', tagName: 'input'},
1489 {name: 'playsInline', read: getAttribute('playsinline')},
@@ -1473,25 +1501,26 @@ const attributes = [
1501 },
1502 {
1503 name: 'points',
1476 - read: getSVGAttribute('points'),
1504 + read: getSVGProperty('points'),
1505 containerTagName: 'svg',
1506 tagName: 'polygon',
1507 + overrideStringValue: '350,75 379,161 469,161',
1508 },
1509 {
1510 name: 'pointsAtX',
1482 - read: getSVGAttribute('pointsAtX'),
1511 + read: getSVGProperty('pointsAtX'),
1512 containerTagName: 'svg',
1513 tagName: 'feSpotLight',
1514 },
1515 {
1516 name: 'pointsAtY',
1488 - read: getSVGAttribute('pointsAtY'),
1517 + read: getSVGProperty('pointsAtY'),
1518 containerTagName: 'svg',
1519 tagName: 'feSpotLight',
1520 },
1521 {
1522 name: 'pointsAtZ',
1494 - read: getSVGAttribute('pointsAtZ'),
1523 + read: getSVGProperty('pointsAtZ'),
1524 containerTagName: 'svg',
1525 tagName: 'feSpotLight',
1526 },
@@ -1504,30 +1533,33 @@ const attributes = [
1533 {name: 'preload', tagName: 'video', overrideStringValue: 'none'},
1534 {
1535 name: 'preserveAlpha',
1507 - read: getSVGAttribute('preserveAlpha'),
1536 + read: getSVGProperty('preserveAlpha'),
1537 containerTagName: 'svg',
1538 tagName: 'feConvolveMatrix',
1539 },
1540 {
1541 name: 'preserveAspectRatio',
1513 - read: getSVGAttribute('preserveAspectRatio'),
1542 + read: getSVGProperty('preserveAspectRatio'),
1543 containerTagName: 'svg',
1544 tagName: 'feImage',
1545 + overrideStringValue: 'xMinYMin slice',
1546 },
1547 {
1548 name: 'primitiveUnits',
1519 - read: getSVGAttribute('primitiveUnits'),
1549 + read: getSVGProperty('primitiveUnits'),
1550 containerTagName: 'svg',
1551 tagName: 'filter',
1552 + overrideStringValue: 'objectBoundingBox',
1553 },
1554 {name: 'profile', read: getAttribute('profile')},
1555 {name: 'property', read: getAttribute('property')},
1556 {name: 'props', read: getAttribute('props')},
1557 {
1558 name: 'r',
1528 - read: getSVGAttribute('r'),
1559 + read: getSVGProperty('r'),
1560 containerTagName: 'svg',
1561 tagName: 'circle',
1562 + overrideStringValue: '10pt',
1563 },
1564 {name: 'radioGroup', tagName: 'command', read: getAttribute('radiogroup')},
1565 {
@@ -1540,15 +1572,17 @@ const attributes = [
1572 {name: 'referrerPolicy', tagName: 'iframe'},
1573 {
1574 name: 'refX',
1543 - read: getSVGAttribute('refX'),
1575 + read: getSVGProperty('refX'),
1576 containerTagName: 'svg',
1577 tagName: 'marker',
1578 + overrideStringValue: '5em',
1579 },
1580 {
1581 name: 'refY',
1549 - read: getSVGAttribute('refY'),
1582 + read: getSVGProperty('refY'),
1583 containerTagName: 'svg',
1584 tagName: 'marker',
1585 + overrideStringValue: '6em',
1586 },
1587 {name: 'rel', tagName: 'a'},
1588 {
@@ -1578,7 +1612,7 @@ const attributes = [
1612 {name: 'required', tagName: 'input'},
1613 {
1614 name: 'requiredExtensions',
1581 - read: getSVGAttribute('requiredExtensions'),
1615 + read: getSVGProperty('requiredExtensions'),
1616 containerTagName: 'svg',
1617 tagName: 'a',
1618 },
@@ -1597,7 +1631,7 @@ const attributes = [
1631 },
1632 {
1633 name: 'result',
1600 - read: getSVGAttribute('result'),
1634 + read: getSVGProperty('result'),
1635 containerTagName: 'svg',
1636 tagName: 'feBlend',
1637 },
@@ -1614,15 +1648,17 @@ const attributes = [
1648 {name: 'rowSpan', tagName: 'td'},
1649 {
1650 name: 'rx',
1617 - read: getSVGAttribute('rx'),
1651 + read: getSVGProperty('rx'),
1652 containerTagName: 'svg',
1653 tagName: 'ellipse',
1654 + overrideStringValue: '1px',
1655 },
1656 {
1657 name: 'ry',
1623 - read: getSVGAttribute('ry'),
1658 + read: getSVGProperty('ry'),
1659 containerTagName: 'svg',
1660 tagName: 'ellipse',
1661 + overrideStringValue: '2px',
1662 },
1663 {
1664 name: 'sandbox',
@@ -1631,7 +1667,7 @@ const attributes = [
1667 },
1668 {
1669 name: 'scale',
1634 - read: getSVGAttribute('scale'),
1670 + read: getSVGProperty('scale'),
1671 containerTagName: 'svg',
1672 tagName: 'feDisplacementMap',
1673 },
@@ -1642,7 +1678,7 @@ const attributes = [
1678 {name: 'security', tagName: 'iframe', read: getAttribute('security')},
1679 {
1680 name: 'seed',
1645 - read: getSVGAttribute('seed'),
1681 + read: getSVGProperty('seed'),
1682 containerTagName: 'svg',
1683 tagName: 'feTurbulence',
1684 },
@@ -1669,20 +1705,21 @@ const attributes = [
1705 },
1706 {
1707 name: 'spacing',
1672 - read: getSVGAttribute('spacing'),
1708 + read: getSVGProperty('spacing'),
1709 containerTagName: 'svg',
1710 tagName: 'textPath',
1711 + overrideStringValue: 'auto',
1712 },
1713 {name: 'span', tagName: 'col'},
1714 {
1715 name: 'specularConstant',
1679 - read: getSVGAttribute('specularConstant'),
1716 + read: getSVGProperty('specularConstant'),
1717 containerTagName: 'svg',
1718 tagName: 'feSpecularLighting',
1719 },
1720 {
1721 name: 'specularExponent',
1685 - read: getSVGAttribute('specularConstant'),
1722 + read: getSVGProperty('specularConstant'),
1723 containerTagName: 'svg',
1724 tagName: 'feSpecularLighting',
1725 },
@@ -1701,9 +1738,10 @@ const attributes = [
1738 },
1739 {
1740 name: 'spreadMethod',
1704 - read: getSVGAttribute('spreadMethod'),
1741 + read: getSVGProperty('spreadMethod'),
1742 containerTagName: 'svg',
1743 tagName: 'linearGradient',
1744 + overrideStringValue: 'reflect',
1745 },
1746 {name: 'src', tagName: 'img', overrideStringValue: 'https://reactjs.com'},
1747 {
@@ -1737,7 +1775,7 @@ const attributes = [
1775 {name: 'start', tagName: 'ol'},
1776 {
1777 name: 'startOffset',
1740 - read: getSVGAttribute('startOffset'),
1778 + read: getSVGProperty('startOffset'),
1779 containerTagName: 'svg',
1780 tagName: 'textPath',
1781 },
@@ -1763,9 +1801,10 @@ const attributes = [
1801 {name: 'step', read: getAttribute('step')},
1802 {
1803 name: 'stitchTiles',
1766 - read: getSVGAttribute('stitchTiles'),
1804 + read: getSVGProperty('stitchTiles'),
1805 containerTagName: 'svg',
1806 tagName: 'feTurbulence',
1807 + overrideStringValue: 'stitch',
1808 },
1809 {
1810 name: 'stop-color',
@@ -1925,39 +1964,40 @@ const attributes = [
1964 },
1965 {
1966 name: 'surfaceScale',
1928 - read: getSVGAttribute('surfaceScale'),
1967 + read: getSVGProperty('surfaceScale'),
1968 containerTagName: 'svg',
1969 tagName: 'feDiffuseLighting',
1970 },
1971 {
1972 name: 'systemLanguage',
1973 overrideStringValue: 'en',
1935 - read: getSVGAttribute('systemLanguage'),
1974 + read: getSVGProperty('systemLanguage'),
1975 containerTagName: 'svg',
1976 tagName: 'a',
1977 },
1978 {name: 'tabIndex'},
1979 {
1980 name: 'tableValues',
1942 - read: getSVGAttribute('tableValues'),
1981 + read: getSVGProperty('tableValues'),
1982 containerTagName: 'svg',
1983 tagName: 'feFuncA',
1984 + overrideStringValue: '0 1 2 3',
1985 },
1986 {
1987 name: 'target',
1948 - read: getSVGAttribute('target'),
1988 + read: getSVGProperty('target'),
1989 containerTagName: 'svg',
1990 tagName: 'a',
1991 },
1992 {
1993 name: 'targetX',
1954 - read: getSVGAttribute('targetX'),
1994 + read: getSVGProperty('targetX'),
1995 containerTagName: 'svg',
1996 tagName: 'feConvolveMatrix',
1997 },
1998 {
1999 name: 'targetY',
1960 - read: getSVGAttribute('targetY'),
2000 + read: getSVGProperty('targetY'),
2001 containerTagName: 'svg',
2002 tagName: 'feConvolveMatrix',
2003 },
@@ -1992,7 +2032,7 @@ const attributes = [
2032 },
2033 {
2034 name: 'textLength',
1995 - read: getSVGAttribute('textLength'),
2035 + read: getSVGProperty('textLength'),
2036 containerTagName: 'svg',
2037 tagName: 'text',
2038 },
@@ -2010,16 +2050,18 @@ const attributes = [
2050 },
2051 {
2052 name: 'transform',
2013 - read: getSVGAttribute('transform'),
2053 + read: getSVGProperty('transform'),
2054 containerTagName: 'svg',
2055 tagName: 'a',
2056 + overrideStringValue: 'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
2057 },
2058 {name: 'type', tagName: 'button', overrideStringValue: 'reset'},
2059 {
2060 name: 'type',
2061 containerTagName: 'svg',
2062 tagName: 'feFuncA',
2022 - read: getSVGAttribute('type'),
2063 + read: getSVGProperty('type'),
2064 + overrideStringValue: 'discrete',
2065 },
2066 {name: 'typeof', read: getAttribute('typeof')},
2067 {
@@ -2151,9 +2193,10 @@ const attributes = [
2193 },
2194 {
2195 name: 'values',
2154 - read: getSVGAttribute('values'),
2196 + read: getSVGProperty('values'),
2197 containerTagName: 'svg',
2198 tagName: 'feColorMatrix',
2199 + overrideStringValue: '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0',
2200 },
2201 {
2202 name: 'vector-effect',
@@ -2219,9 +2262,10 @@ const attributes = [
2262 },
2263 {
2264 name: 'viewBox',
2222 - read: getSVGAttribute('viewBox'),
2265 + read: getSVGProperty('viewBox'),
2266 containerTagName: 'svg',
2267 tagName: 'marker',
2268 + overrideStringValue: '0 0 1500 1000',
2269 },
2270 {
2271 name: 'viewTarget',
@@ -2248,7 +2292,7 @@ const attributes = [
2292 name: 'width',
2293 containerTagName: 'svg',
2294 tagName: 'rect',
2251 - read: getSVGAttribute('width'),
2295 + read: getSVGProperty('width'),
2296 },
2297 {
2298 name: 'widths',
@@ -2296,21 +2340,22 @@ const attributes = [
2340 },
2341 {
2342 name: 'x1',
2299 - read: getSVGAttribute('x1'),
2343 + read: getSVGProperty('x1'),
2344 containerTagName: 'svg',
2345 tagName: 'line',
2346 },
2347 {
2348 name: 'x2',
2305 - read: getSVGAttribute('x2'),
2349 + read: getSVGProperty('x2'),
2350 containerTagName: 'svg',
2351 tagName: 'line',
2352 },
2353 {
2354 name: 'xChannelSelector',
2311 - read: getSVGAttribute('xChannelSelector'),
2355 + read: getSVGProperty('xChannelSelector'),
2356 containerTagName: 'svg',
2357 tagName: 'feDisplacementMap',
2358 + overrideStringValue: 'R',
2359 },
2360 {
2361 name: 'xHeight',
@@ -2351,29 +2396,30 @@ const attributes = [
2396 },
2397 {
2398 name: 'y1',
2354 - read: getSVGAttribute('y1'),
2399 + read: getSVGProperty('y1'),
2400 containerTagName: 'svg',
2401 tagName: 'line',
2402 },
2403 {
2404 name: 'y2',
2360 - read: getSVGAttribute('y2'),
2405 + read: getSVGProperty('y2'),
2406 containerTagName: 'svg',
2407 tagName: 'line',
2408 },
2409 {
2410 name: 'yChannelSelector',
2366 - read: getSVGAttribute('yChannelSelector'),
2411 + read: getSVGProperty('yChannelSelector'),
2412 containerTagName: 'svg',
2413 tagName: 'feDisplacementMap',
2414 + overrideStringValue: 'B',
2415 },
2416 {
2417 name: 'z',
2372 - read: getSVGAttribute('z'),
2418 + read: getSVGProperty('z'),
2419 containerTagName: 'svg',
2420 tagName: 'fePointLight',
2421 },
2376 - {name: 'zoomAndPan', read: getSVGAttribute('zoomAndPan'), tagName: 'svg'},
2422 + {name: 'zoomAndPan', read: getSVGProperty('zoomAndPan'), tagName: 'svg'},
2423 ];
2424
2425 const ALPHABETICAL = 'alphabetical';
@@ -2389,6 +2435,94 @@ const attributesSorted = {
2435 .sort((attr1, attr2) => (attr1.name < attr2.name ? 1 : -1)),
2436 };
2437
2438 +function getCanonicalizedValue(value) {
2439 + switch (typeof value) {
2440 + case 'undefined':
2441 + return '<undefined>';
2442 + break;
2443 + case 'object':
2444 + if (value === null) {
2445 + return '<null>';
2446 + }
2447 + if ('baseVal' in value) {
2448 + return getCanonicalizedValue(value.baseVal);
2449 + }
2450 + if (value instanceof SVGLength) {
2451 + return '<SVGLength: ' + value.valueAsString + '>';
2452 + }
2453 + if (value instanceof SVGRect) {
2454 + return (
2455 + '<SVGRect: ' +
2456 + [value.x, value.y, value.width, value.height].join(',') +
2457 + '>'
2458 + );
2459 + }
2460 + if (value instanceof SVGPreserveAspectRatio) {
2461 + return (
2462 + '<SVGPreserveAspectRatio: ' +
2463 + value.align +
2464 + '/' +
2465 + value.meetOrSlice +
2466 + '>'
2467 + );
2468 + }
2469 + if (value instanceof SVGNumber) {
2470 + return value.value;
2471 + }
2472 + if (value instanceof SVGMatrix) {
2473 + return (
2474 + '<SVGMatrix ' +
2475 + value.a +
2476 + ' ' +
2477 + value.b +
2478 + ' ' +
2479 + value.c +
2480 + ' ' +
2481 + value.d +
2482 + ' ' +
2483 + value.e +
2484 + ' ' +
2485 + value.f +
2486 + '>'
2487 + );
2488 + }
2489 + if (value instanceof SVGTransform) {
2490 + return (
2491 + getCanonicalizedValue(value.matrix) +
2492 + '/' +
2493 + value.type +
2494 + '/' +
2495 + value.angle
2496 + );
2497 + }
2498 + if (typeof value.length === 'number') {
2499 + return (
2500 + '[' +
2501 + Array.from(value).map(v => getCanonicalizedValue(v)).join(', ') +
2502 + ']'
2503 + );
2504 + }
2505 + let name = (value.constructor && value.constructor.name) || 'object';
2506 + return '<' + name + '>';
2507 + case 'function':
2508 + return '<function>';
2509 + case 'symbol':
2510 + return '<symbol>';
2511 + case 'number':
2512 + return `<number: ${value}>`;
2513 + case 'string':
2514 + if (value === '') {
2515 + return '<empty string>';
2516 + }
2517 + return '"' + value + '"';
2518 + case 'boolean':
2519 + return `<boolean: ${value}>`;
2520 + default:
2521 + throw new Error('Switch statement should be exhaustive.');
2522 + }
2523 + return value;
2524 +}
2525 +
2526 let _didWarn = false;
2527 function warn(str) {
2528 _didWarn = true;
@@ -2411,6 +2545,7 @@ function getRenderedAttributeValue(renderer, attribute, type) {
2545
2546 let testValue;
2547 let defaultValue;
2548 + let canonicalDefaultValue;
2549 try {
2550 const read = attribute.read || getProperty(attribute.name);
2551
@@ -2434,6 +2569,7 @@ function getRenderedAttributeValue(renderer, attribute, type) {
2569 }
2570 renderer.render(React.createElement(tagName, baseProps), container);
2571 defaultValue = read(container.firstChild);
2572 + canonicalDefaultValue = getCanonicalizedValue(defaultValue);
2573
2574 const props = {
2575 ...baseProps,
@@ -2447,6 +2583,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {
2583 testValue,
2584 defaultValue,
2585 result,
2586 + canonicalResult: getCanonicalizedValue(result),
2587 + canonicalDefaultValue,
2588 didWarn: _didWarn,
2589 didError: false,
2590 };
@@ -2455,6 +2593,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {
2593 testValue,
2594 defaultValue,
2595 result: null,
2596 + canonicalResult: getCanonicalizedValue(null),
2597 + canonicalDefaultValue,
2598 didWarn: _didWarn,
2599 didError: true,
2600 };
@@ -2473,7 +2613,7 @@ function getRenderedAttributeValues(attribute, type) {
2613 } else if (!react15Value.didError && !react16Value.didError) {
2614 hasSameBehavior =
2615 react15Value.didWarn === react16Value.didWarn &&
2476 - Object.is(react15Value.result, react16Value.result);
2616 + react15Value.canonicalResult === react16Value.canonicalResult;
2617 } else {
2618 hasSameBehavior = false;
2619 }
@@ -2497,8 +2637,7 @@ for (let attribute of attributes) {
2637 const result = getRenderedAttributeValues(attribute, type);
2638 row.set(type.name, result);
2639 rowHash +=
2500 - getResultDisplayString(result.react15.result) +
2501 - getResultDisplayString(result.react16.result);
2640 + result.react15.canonicalResult + '||' + result.react16.canonicalResult;
2641 }
2642 table.set(attribute, row);
2643 if (!groupByRowPattern.get(rowHash)) {
@@ -2521,55 +2660,25 @@ attributesSorted[GROUPED_BY_ROW_PATTERN] = attributesSortedByRowPattern;
2660 // Renable error overlay
2661 injectErrorOverlay();
2662
2524 -function getResultDisplayString(result) {
2525 - let displayResult;
2526 - switch (typeof result) {
2527 - case 'undefined':
2528 - displayResult = '<undefined>';
2529 - break;
2530 - case 'object':
2531 - if (result === null) {
2532 - displayResult = '<null>';
2533 - break;
2534 - }
2535 - displayResult = '<object>';
2536 - break;
2537 - case 'function':
2538 - displayResult = '<function>';
2539 - break;
2540 - case 'symbol':
2541 - displayResult = '<symbol>';
2542 - break;
2543 - case 'number':
2544 - displayResult = `<number: ${result}>`;
2545 - break;
2546 - case 'string':
2547 - if (result === '') {
2548 - displayResult = '<empty string>';
2549 - break;
2550 - }
2551 - displayResult = '"' + result + '"';
2552 - break;
2553 - case 'boolean':
2554 - displayResult = `<boolean: ${result}>`;
2555 - break;
2556 - default:
2557 - throw new Error('Switch statement should be exhaustive.');
2558 - }
2559 - return displayResult;
2560 -}
2561 -
2663 const successColor = 'white';
2664 const warnColor = 'yellow';
2665 const errorColor = 'red';
2666
2566 -function RendererResult({version, result, defaultValue, didWarn, didError}) {
2667 +function RendererResult({
2668 + version,
2669 + result,
2670 + canonicalResult,
2671 + defaultValue,
2672 + canonicalDefaultValue,
2673 + didWarn,
2674 + didError,
2675 +}) {
2676 let backgroundColor;
2677 if (didError) {
2678 backgroundColor = errorColor;
2679 } else if (didWarn) {
2680 backgroundColor = warnColor;
2572 - } else if (result !== defaultValue) {
2681 + } else if (canonicalResult !== canonicalDefaultValue) {
2682 backgroundColor = 'cyan';
2683 } else {
2684 backgroundColor = successColor;
@@ -2584,7 +2693,7 @@ function RendererResult({version, result, defaultValue, didWarn, didError}) {
2693 backgroundColor,
2694 };
2695
2587 - return <div css={style}>{getResultDisplayString(result)}</div>;
2696 + return <div css={style}>{canonicalResult}</div>;
2697 }
2698
2699 function ResultPopover(props) {