integrate compat table to browser runner of compat data tests

Author: zloirock

CONTRIBUTING.md

@@ -19,7 +19,7 @@ Contributions are always welcome. If you don't know how you can help, you can ch
 
 For updating `core-js-compat` data:
 
-- If you want to add new data for a browser, run in this browser [`tests/compat/index.html`](https://raw.githack.com/zloirock/core-js/master/tests/compat/index.html) and you will see what `core-js` modules are required for this browser.
+- If you want to add new data for a browser, run in this browser [`tests/compat/index.html`](http://es6.zloirock.ru/compat/) and you will see what `core-js` modules are required for this browser.
 - If you want to add new data for NodeJS, run `npm run compat-node` with the installed required NodeJS version and you will see the results in the console. Use `npm run compat-node-json` if you want to get the result as JSON.
 - If you want to add new data for Deno, run `npm run compat-deno` with the installed required Deno version and you will see the results in the console. Use `npm run compat-deno-json` if you want to get the result as JSON.
 - If you want to add new data for Rhino, set the required Rhino version in `compat-rhino-prepare` NPM script in [`package.json`](./package.json), run `npm run compat-rhino` and you will see the results in the console.

tests/compat/browsers-runner.js

@@ -1,25 +1,65 @@
 var table = document.getElementById('table');
+var tests = window.tests;
+var data = window.data;
+var i;
 
-for (var key in window.tests) {
-  var test = window.tests[key];
+var engines = [
+  'android',
+  'chrome',
+  'deno',
+  'edge',
+  'electron',
+  'firefox',
+  'ie',
+  'ios',
+  'node',
+  'opera',
+  'opera_mobile',
+  'phantom',
+  'rhino',
+  'safari',
+  'samsung'
+];
+
+var trh = document.createElement('tr');
+trh.appendChild(document.createElement('th'));
+trh.appendChild(document.createElement('th'));
+for (i = 0; i < engines.length; i++) {
+  var th = document.createElement('th');
+  th.innerHTML = engines[i];
+  trh.appendChild(th);
+}
+table.appendChild(trh);
+
+for (var key in tests) {
+  var test = tests[key];
   var result = true;
   try {
     if (typeof test == 'function') {
       result = !!test();
     } else {
-      for (var i = 0; i < test.length; i++) result = result && !!test[i].call(undefined);
+      for (i = 0; i < test.length; i++) result = result && !!test[i].call(undefined);
     }
   } catch (error) {
     result = false;
   }
 
   var tr = document.createElement('tr');
-  tr.className = result;
   var td1 = document.createElement('td');
   td1.innerHTML = key;
+  td1.className = result;
   tr.appendChild(td1);
   var td2 = document.createElement('td');
-  td2.innerHTML = result ? 'not required' : 'required';
+  td2.innerHTML = result ? 'not&nbsp;required' : 'required';
+  td2.className = result;
   tr.appendChild(td2);
+  for (i = 0; i < engines.length; i++) {
+    var td = document.createElement('td');
+    var dataExists = !!data[key];
+    var mod = dataExists && data[key][engines[i]];
+    td.innerHTML = dataExists ? mod || 'no' : 'no data';
+    td.className = (dataExists ? !!mod : 'nodata') + ' data';
+    tr.appendChild(td);
+  }
   table.appendChild(tr);
 }

tests/compat/index.html

@@ -2,10 +2,36 @@
 <meta charset='UTF-8'>
 <title>core-js-compat</title>
 <style>
-td { color: white; }
-.true { background-color: green; }
-.false { background-color: red; }
+th,td {
+  padding: 0.25em 0.5em;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+}
+th {
+  background-color: white;
+  color: black;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+td {
+  color: white;
+}
+.true {
+  background-color: #00882c;
+}
+.false {
+  background-color: #e11;
+}
+.nodata {
+  background-color: grey;
+}
+.data {
+  text-align: center;
+}
 </style>
 <table id='table'></table>
+<script src='./compat-data.js'></script>
 <script src='./tests.js'></script>
 <script src='./browsers-runner.js'></script>