<!doctype html>
<title>default style resets</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */
#tests, #refs {
  letter-spacing: 5px;
  word-spacing: 5px;
  line-height: 5px;
  text-transform: uppercase;
  text-indent: 5px;
  text-shadow: 0 0 5px transparent;
  text-align: right;
}
</style>
<style>
/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
@namespace url(urn:not-html);

input, select, button, textarea {
  letter-spacing: initial;
  word-spacing: initial;
  line-height: initial;
  text-transform: initial;
  text-indent: initial;
  text-shadow: initial;
}
input, select, textarea {
  text-align: initial;
}
input[type=reset i], input[type=button i], input[type=submit i], button {
  text-align: center;
}
marquee {
  text-align: initial;
}
table {
  text-indent: initial;
}
</style>

<div id="tests">
 <input type="hidden">
 <input type="text">
 <input type="search">
 <input type="tel">
 <input type="url">
 <input type="email">
 <input type="password">
 <input type="date">
 <input type="month">
 <input type="week">
 <input type="time">
 <input type="datetime-local">
 <input type="number">
 <input type="range">
 <input type="color">
 <input type="checkbox">
 <input type="radio">
 <input type="file">
 <input type="submit">
 <input type="image">
 <input type="reset">
 <input type="button">
 <select><optgroup><option></select>
 <select multiple></select>
 <optgroup></optgroup>
 <option></option>
 <button></button>
 <textarea></textarea>
 <table><tbody><tr><td></table>
 <marquee></marquee>
</div>

<div id="refs"></div>

<script>
 const props = ['letter-spacing',
                'word-spacing',
                'line-height',
                'text-transform',
                'text-indent',
                'text-shadow',
                'text-align'];
 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];
   const refEl = refEls[i];
   const testStyle = getComputedStyle(testEl);
   const refStyle = getComputedStyle(refEl);
   for (const prop of props) {
     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);
     current = current.parentNode;
   }
   return startTags + (ancestors.length ? ` (in ${ancestors.join(' > ')})` : '');
 }
</script>