1 files changed, 74 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/support/test-ua-stylesheet.js b/testing/web-platform/tests/html/rendering/support/test-ua-stylesheet.js
new file mode 100644
index 0000000000..e23c9a6720
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/support/test-ua-stylesheet.js
@@ -0,0 +1,74 @@
+function runUAStyleTests(props) {
+  const refs = document.getElementById('refs');
+  for (const el of document.querySelectorAll('#tests > *')) {
+   const clone = fakeClone(el);
+   refs.append(clone);
+  }
+  const testsContainer = document.getElementById('tests');
+  const testEls = document.querySelectorAll('#tests *');
+  const refEls = document.querySelectorAll('#refs *');
+  for (let i = 0; i < testEls.length; ++i) {
+   const testEl = testEls[i];
+   if (testEl.hasAttribute('data-skip')) {
+     continue;
+   }
+   const refEl = refEls[i];
+   const testStyle = getComputedStyle(testEl);
+   const refStyle = getComputedStyle(refEl);
+   for (const prop of props) {
+     // Don't test display for some elements.
+     // TODO(zcorpan): https://github.com/whatwg/html/issues/4093
+     // TODO(zcorpan): https://github.com/whatwg/html/issues/5063
+     if (prop === 'display' &&
+         (testEl.localName === 'optgroup' ||
+          testEl.localName === 'option' ||
+          testEl.localName === 'marquee')
+      ) {
+      continue;
+     }
+     if (prop === 'overflow' && testEl.localName === 'select') {
+      // TODO: https://github.com/whatwg/html/issues/10031
+      continue;
+     }
+     test(() => {
+       assert_equals(testStyle.getPropertyValue(prop), refStyle.getPropertyValue(prop));
+     }, `${testNameContext(testEl)} - ${prop}`);
+   }
+  }
+
+  function fakeClone(el) {
+   const clone = document.createElementNS('urn:not-html', el.localName);
+   for (const att of el.attributes) {
+     clone.setAttributeNS(att.namespaceURI, att.name, att.value);
+   }
+   // deep clone
+   for (const child of el.children) {
+     clone.append(fakeClone(child));
+   }
+   return clone;
+  }
+
+  function testNameContext(el) {
+   const outerHTML = el.outerHTML;
+   const startTags = outerHTML.substring(0, outerHTML.indexOf('</')) || outerHTML;
+
+   let ancestors = [];
+   let current = el.parentNode;
+   while (current != testsContainer) {
+     ancestors.unshift(`<${current.localName}${contextAttrs(current.attributes)}>`);
+     current = current.parentNode;
+   }
+   return startTags + (ancestors.length ? ` (in ${ancestors.join('')})` : '');
+  }
+
+  function contextAttrs(attributes) {
+    let rv = "";
+    for (let i = 0; i < attributes.length; ++i) {
+      if (attributes[i].name === 'data-skip') {
+        continue;
+      }
+      rv += ` ${attributes[i].name}="${attributes[i].value}"`;
+    }
+    return rv;
+  }
+}