Importing w3c resources

.gitignore

@@ -14,4 +14,5 @@ dist
 es
 umd
 /compute.js
-/index.js
+/index.js
+/types.js

tests/web-platform/.prettierignore

@@ -0,0 +1 @@
+resources

tests/web-platform/README.md

@@ -0,0 +1,20 @@
+# Run tests
+
+You'll need two terminal sessions for this.
+1. Install deps `yarn`
+2. Start the server: `yarn start`
+3. In the other session: `yarn test`
+
+You can also open http://localhost:3000 in the browser to run the tests.
+
+# Why are tests setup like this?
+
+Two reasons.
+1. It helps with staying in sync with the same tests that browsers run when checking if they are implementing the spec correctly.
+2. Easier to run tests in different browsers, compared to if a more conventional cypress or jest setup were used.
+
+## How tests are kept in sync with w3c
+
+The `resources` and `css` folders are rougly equivalent with their counterparts on here: https://github.com/w3c/web-platform-tests
+
+Except that anything that isn't needed to run the tests related to `scrollIntoView` is stripped out.

tests/web-platform/package.json

@@ -1,8 +1,5 @@
 {
   "private": true,
-  "name": "scroll-into-view-if-needed-web-platform-tests",
-  "version": "0.0.0-dev",
-  "main": "index.js",
   "scripts": {
     "start": "micro",
     "test": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=junit/test-results.xml'"

tests/web-platform/resources/testharness.css

@@ -0,0 +1,102 @@
+html {
+  font-family:DejaVu Sans, Bitstream Vera Sans, Arial, Sans;
+}
+
+#log .warning,
+#log .warning a {
+color: black;
+background: yellow;
+}
+
+#log .error,
+#log .error a {
+color: white;
+background: red;
+}
+
+section#summary {
+  margin-bottom:1em;
+}
+
+table#results {
+  border-collapse:collapse;
+  table-layout:fixed;
+  width:100%;
+}
+
+table#results th:first-child,
+table#results td:first-child {
+  width:4em;
+}
+
+table#results th:last-child,
+table#results td:last-child {
+  width:50%;
+}
+
+table#results.assertions th:last-child,
+table#results.assertions td:last-child {
+  width:35%;
+}
+
+table#results th {
+  padding:0;
+  padding-bottom:0.5em;
+  border-bottom:medium solid black;
+}
+
+table#results td {
+  padding:1em;
+  padding-bottom:0.5em;
+  border-bottom:thin solid black;
+}
+
+tr.pass > td:first-child {
+  color:green;
+}
+
+tr.fail > td:first-child {
+  color:red;
+}
+
+tr.timeout > td:first-child {
+  color:red;
+}
+
+tr.notrun > td:first-child {
+  color:blue;
+}
+
+.pass > td:first-child, .fail > td:first-child, .timeout > td:first-child, .notrun > td:first-child {
+  font-variant:small-caps;
+}
+
+table#results span {
+  display:block;
+}
+
+table#results span.expected {
+  font-family:DejaVu Sans Mono, Bitstream Vera Sans Mono, Monospace;
+  white-space:pre;
+}
+
+table#results span.actual {
+  font-family:DejaVu Sans Mono, Bitstream Vera Sans Mono, Monospace;
+  white-space:pre;
+}
+
+span.ok {
+  color:green;
+}
+
+tr.error {
+  color:red;
+}
+
+span.timeout {
+  color:red;
+}
+
+span.ok, span.timeout, span.error {
+  font-variant:small-caps;
+}