<!DOCTYPE html>
<html>
<head>
<style>
div.resetTest {
  background-color: #eef;
  border: solid;
  margin: 4px;
  padding: 16px;
  color: #fee;
  font-family: Serif;
  font-size: 24px;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 200%;
  text-align: start;
  text-indent: 50px;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 30px;
}
</style>
<script>
function assertTrue(id, actual) {
    if (!actual)
        throw "failure:" + id + ": assertTrue failed";
}

function assertFalse(id, actual) {
    if (actual)
        throw "failure:" + id +  ": assertFalse failed";
}

function shouldBe(a, b)
{
    if (a != b)
        throw "failure:" + a + ": should be " + b;
}

function shouldNotBe(a, b)
{
    if (a == b)
        throw "failure:" + a + ": should not be " + b;
}
</script>
<script src="resources/polyfill.js"></script>
</head>
<body>
<div id="reset-style-inheritance"></div>
<div id="no-reset-style-inheritance"></div>
<div id="reset-style-inheritance-true-to-false"></div>
<div id="reset-style-inheritance-false-to-true"></div>
<div id="reset-style-inheritance-for-content"></div>
<div id="no-reset-style-inheritance-for-content"></div>

<script>
function renderWithNoResetStyleInheritance() {
    var div = document.createElement('div');
    div.className = 'resetTest';

    var shadowRoot = div.webkitCreateShadowRoot();
    assertFalse('default resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    shadowRoot.innerHTML = '<div>text</div>';
    
    document.getElementById('no-reset-style-inheritance').appendChild(div);
}

function renderWithResetStyleInheritance() {
    var div = document.createElement('div');
    div.className = 'resetTest';

    var shadowRoot = div.webkitCreateShadowRoot();
    assertFalse('default resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    shadowRoot.resetStyleInheritance = true;
    shadowRoot.innerHTML = '<div>text</div>';
    assertTrue('resetStyleInheritance should be true as explicitly set', shadowRoot.resetStyleInheritance);
    
    document.getElementById('reset-style-inheritance').appendChild(div);
}

function renderWithChangingResetStyleInheritanceFromTrueToFalse() {
    var div = document.createElement('div');
    div.className = 'resetTest';

    var shadowRoot = div.webkitCreateShadowRoot();
    assertFalse('default resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    shadowRoot.resetStyleInheritance = true;
    shadowRoot.innerHTML = '<div id="test1">text</div>';
    assertTrue('resetStyleInheritance should be true', shadowRoot.resetStyleInheritance);
    
    document.getElementById('reset-style-inheritance-true-to-false').appendChild(div);
    div.offsetLeft;
    var target = shadowRoot.getElementById('test1');
    shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-family'), 'serif');
    shouldNotBe(window.getComputedStyle(target).getPropertyValue('line-height'), '48px');

    shadowRoot.resetStyleInheritance = false;
    assertFalse('resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    div.offsetLeft;
    shouldBe(window.getComputedStyle(target).getPropertyValue('font-family'), 'serif');
    shouldBe(window.getComputedStyle(target).getPropertyValue('line-height'), '48px');
}

function renderWithChangingResetStyleInheritanceFromFalseToTrue() {
    var div = document.createElement('div');
    div.className = 'resetTest';

    var shadowRoot = div.webkitCreateShadowRoot();
    assertFalse('default resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    shadowRoot.resetStyleInheritance = false;
    shadowRoot.innerHTML = '<div id="test2">text</div>';
    assertFalse('default resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    
    document.getElementById('reset-style-inheritance-false-to-true').appendChild(div);
    div.offsetLeft;
    var target = shadowRoot.getElementById('test2');
    shouldBe(window.getComputedStyle(target).getPropertyValue('font-family'), 'serif');
    shouldBe(window.getComputedStyle(target).getPropertyValue('line-height'), '48px');

    shadowRoot.resetStyleInheritance = true;
    assertTrue('resetStyleInheritance should be true', shadowRoot.resetStyleInheritance);
    div.offsetLeft;
    shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-family'), 'serif');
    shouldNotBe(window.getComputedStyle(target).getPropertyValue('line-height'), '48px');
}

function createDivWithText(text) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(text));
    return div;
}

function renderResetStyleInheritanceForContent() {
    var div = document.createElement('div');
    div.className = 'resetTest';
    div.appendChild(createDivWithText('text'));

    var shadowRoot = div.webkitCreateShadowRoot();
    shadowRoot.innerHTML = '<content select="div"></content>';
    shadowRoot.resetStyleInheritance = true;
    assertTrue('resetStyleInheritance should be true', shadowRoot.resetStyleInheritance);
    document.getElementById('reset-style-inheritance-for-content').appendChild(div);
    div.offsetLeft;
}

function renderNoResetStyleInheritanceForContent() {
    var div = document.createElement('div');
    div.className = 'resetTest';
    div.appendChild(createDivWithText('text'));

    var shadowRoot = div.webkitCreateShadowRoot();
    shadowRoot.innerHTML = '<content select="div"></content>';
    shadowRoot.resetStyleInheritance = false;
    assertFalse('resetStyleInheritance should be false', shadowRoot.resetStyleInheritance);
    document.getElementById('no-reset-style-inheritance-for-content').appendChild(div);
    div.offsetLeft;
}

renderWithNoResetStyleInheritance();
renderWithResetStyleInheritance();
renderWithChangingResetStyleInheritanceFromTrueToFalse();
renderWithChangingResetStyleInheritanceFromFalseToTrue();
renderResetStyleInheritanceForContent();
renderNoResetStyleInheritanceForContent();
</script>
</body>
</html>