html-element-defaults.html

<!DOCTYPE html>
<!--
https://www.reddit.com/user/jcunews1
https://pastebin.com/u/jcunews
https://greasyfork.org/en/users/85671-jcunews
-->
<html>
<head>
  <meta charset="utf-8">
  <title>HTML Element Defaults</title>
  <style>
#progress { margin-left: 1em; font: 12pt/normal sans-serif }
#res { font-family: sans-serif }
#res > li { margin-block: .5em }
#res > li > div { display: inline-block; vertical-align: top }
  </style>
</head>
<body>
  <h2>HTML Element Defaults <span id="progress"></span></h2>
  <div id="tester"></div>
  <ol id="res"></ol>
  <span id="eref"></span>
  <script>
onload = (ref, tags, d) => {
  ref = getComputedStyle(eref);
  //HTML 5.2 elements
  tags = "A ABBR ADDRESS AREA ARTICLE ASIDE AUDIO B BASE BDI BDO BLOCKQUOTE BODY BR BUTTON CANVAS CAPTION CITE CODE COL COLGROUP DATA DATALIST DD DEL DETAILS DFN DIALOG DIV DL DT EM EMBED FIELDSET FIGCAPTION FIGURE FOOTER FORM H1 H2 H3 H4 H5 H6 HEAD HEADER HR HTML I IFRAME IMG INPUT INS KBD LABEL LEGEND LI LINK MAIN MAP MARK META METER NAV NOSCRIPT OBJECT OL OPTGROUP OPTION OUTPUT P PARAM PICTURE PRE PROGRESS Q RB RP RT RTC RUBY S SAMP SCRIPT SECTION SELECT SMALL SOURCE SPAN STRONG STYLE SUB SUMMARY SUP TABLE TBODY TD TEMPLATE TEXTAREA TFOOT TH THEAD TIME TITLE TR TRACK U UL VAR VIDEO WBR".split(" ");
  d = 0;
  tags.forEach((tag, i, e, s, r, z) => {
    tester.innerHTML = `<${tag}></${tag}>`;
    try {
      s = getComputedStyle(tester.firstChild);
      r = ""
      Array.prototype.forEach.call(s, k => {
        if (s[k] !== ref[k]) r += `<div>${k}: ${s[k]}</div>`
      });
      if (r) {
        d++;
        res.insertAdjacentHTML("beforeend", `<li>${tag}: <div>${r}</div></li>`)
      }
    } catch(z) {}
    progress.textContent = d + " elements (" + (i + 1) + "/" + tags.length + ")";
  })
}
  </script>
</body>
</html>