webcomponentsjs/tests/ShadowDOM/js/rerender.js

/**
 * @license
 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

suite('Shadow DOM rerender', function() {

  var unsafeUnwrap = ShadowDOMPolyfill.unsafeUnwrap;
  var unwrap = ShadowDOMPolyfill.unwrap;

  function getVisualInnerHtml(el) {
    el.offsetWidth;
    return unwrap(el).innerHTML;
  }

  test('No <content> nor <shadow>', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var shadowRoot = host.createShadowRoot();
    shadowRoot.textContent = 'text';
    var textNode = shadowRoot.firstChild;

    function testRender() {

      assert.strictEqual(getVisualInnerHtml(host), 'text');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(shadowRoot, {
        firstChild: textNode,
        lastChild: textNode
      });

      expectStructure(textNode, {
        parentNode: shadowRoot
      });
    }

    testRender();
    testRender();
  });

  test('<content>', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var shadowRoot = host.createShadowRoot();
    shadowRoot.innerHTML = '<content></content>';
    var content = shadowRoot.firstChild;

    function testRender() {
      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(shadowRoot, {
        firstChild: content,
        lastChild: content
      });

      expectStructure(content, {
        parentNode: shadowRoot
      });
    }

    testRender();
    testRender();
  });

  test('<content> with fallback', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var shadowRoot = host.createShadowRoot();
    shadowRoot.innerHTML = '<content select="b">fallback</content>';
    var content = shadowRoot.firstChild;
    var fallback = content.firstChild;

    function testRender() {
      assert.strictEqual(getVisualInnerHtml(host), 'fallback');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(shadowRoot, {
        firstChild: content,
        lastChild: content
      });

      expectStructure(content, {
        parentNode: shadowRoot,
        firstChild: fallback,
        lastChild: fallback
      });

      expectStructure(fallback, {
        parentNode: content
      });
    }

    testRender();
    testRender();
  });

  test('<shadow>', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var shadowRoot = host.createShadowRoot();
    shadowRoot.innerHTML = '<shadow></shadow>';
    var shadow = shadowRoot.firstChild;

    function testRender() {
      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(shadowRoot, {
        firstChild: shadow,
        lastChild: shadow
      });

      expectStructure(shadow, {
        parentNode: shadowRoot
      });
    }

    testRender();
    testRender();
  });

  test('<shadow> fallback support has been removed', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var shadowRoot = host.createShadowRoot();
    shadowRoot.innerHTML = '<shadow>fallback</shadow>';
    var shadow = shadowRoot.firstChild;
    var fallback = shadow.firstChild;

    function testRender() {
      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(shadowRoot, {
        firstChild: shadow,
        lastChild: shadow
      });

      expectStructure(shadow, {
        parentNode: shadowRoot,
        firstChild: fallback,
        lastChild: fallback
      });

      expectStructure(fallback, {
        parentNode: shadow
      });
    }

    testRender();
    testRender();
  });

  test('<shadow> with nested shadow roots', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var oldestShadowRoot = host.createShadowRoot();
    oldestShadowRoot.textContent = 'text';
    var textNode = oldestShadowRoot.firstChild;

    var youngestShadowRoot = host.createShadowRoot();
    youngestShadowRoot.innerHTML = '<shadow></shadow>';
    var shadow = youngestShadowRoot.firstChild;

    function testRender() {
      assert.strictEqual(getVisualInnerHtml(host), 'text');

      expectStructure(host, {
        firstChild: a,
        lastChild: a
      });

      expectStructure(a, {
        parentNode: host
      });

      expectStructure(oldestShadowRoot, {
        firstChild: textNode,
        lastChild: textNode
      });

      expectStructure(textNode, {
        parentNode: oldestShadowRoot
      });

      expectStructure(youngestShadowRoot, {
        firstChild: shadow,
        lastChild: shadow
      });

      expectStructure(shadow, {
        parentNode: youngestShadowRoot
      });
    }

    testRender();
    testRender();
  });

  suite('Mutate logical DOM', function() {
    test('removeAllChildNodes - mutate host', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content>fallback</content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      host.firstChild.textContent = '';

      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      host.textContent = '';
      assert.strictEqual(getVisualInnerHtml(host), 'fallback');
    });

    test('removeAllChildNodes - mutate shadow', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content><b>after</b>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>after</b>');

      shadowRoot.lastChild.textContent = '';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');

      shadowRoot.textContent = '';
      assert.strictEqual(getVisualInnerHtml(host), '');
    });

    test('removeAllChildNodes - mutate shadow fallback', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content select="xxx"><b>fallback</b></content>';

      assert.strictEqual(getVisualInnerHtml(host), '<b>fallback</b>');

      shadowRoot.firstChild.firstChild.textContent = '';

      assert.strictEqual(getVisualInnerHtml(host), '<b></b>');

      shadowRoot.firstChild.textContent = '';

      assert.strictEqual(getVisualInnerHtml(host), '');

      shadowRoot.textContent = '';
      assert.strictEqual(getVisualInnerHtml(host), '');
    });

    test('removeChild - mutate host', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content>fallback</content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      host.firstChild.removeChild(host.firstChild.firstChild);

      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      host.removeChild(host.firstChild);
      assert.strictEqual(getVisualInnerHtml(host), 'fallback');
    });

    test('removeChild - mutate host 2', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a></a><b></b>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content>fallback</content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a></a><b></b>');

      host.removeChild(host.lastChild);

      assert.strictEqual(getVisualInnerHtml(host), '<a></a>');

      host.removeChild(host.firstChild);
      assert.strictEqual(getVisualInnerHtml(host), 'fallback');
    });

    test('removeChild - mutate shadow', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content><b>after</b>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>after</b>');


      shadowRoot.lastChild.removeChild(
          shadowRoot.lastChild.firstChild);

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');

      shadowRoot.removeChild(shadowRoot.lastChild);
      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      shadowRoot.removeChild(shadowRoot.firstChild);
      assert.strictEqual(getVisualInnerHtml(host), '');
    });

    test('setAttribute select', function() {
      // TODO(arv): DOM bindings for select.
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a><b>World</b>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content select="b">fallback b</content>' +
                             '<content select="a">fallback a</content>';

      assert.strictEqual(getVisualInnerHtml(host), '<b>World</b><a>Hello</a>');

      shadowRoot.firstChild.setAttribute('select', 'xxx');

      assert.strictEqual(getVisualInnerHtml(host), 'fallback b<a>Hello</a>');

      shadowRoot.firstChild.setAttribute('select', '');

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>World</b>fallback a');
    });

    test('appendChild - mutate host', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      host.appendChild(b);

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');
    });

    test('appendChild - mutate shadow', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      shadowRoot.appendChild(b);

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');
    });

    test('insertBefore - mutate host', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';
      var a = host.firstChild;

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      host.insertBefore(b, a);

      assert.strictEqual(getVisualInnerHtml(host), '<b></b><a>Hello</a>');
    });

    test('insertBefore - mutate shadow', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';
      var content = shadowRoot.firstChild;

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      shadowRoot.insertBefore(b, content);

      assert.strictEqual(getVisualInnerHtml(host), '<b></b><a>Hello</a>');
    });

    test('replaceChild - mutate host', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';
      var a = host.firstChild;

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      host.replaceChild(b, a);

      assert.strictEqual(getVisualInnerHtml(host), '<b></b>');
    });

    test('replaceChild - mutate shadow', function() {
      var host = document.createElement('div');
      host.innerHTML = '<a>Hello</a>';

      var shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = '<content></content>';
      var content = shadowRoot.firstChild;

      assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');

      var b = document.createElement('b');

      shadowRoot.replaceChild(b, content);

      assert.strictEqual(getVisualInnerHtml(host), '<b></b>');
    });

  });

  test('Invalidation', function() {
    var host = document.createElement('div');
    host.innerHTML = '<a></a>';
    var a = host.firstChild;

    var sr = host.createShadowRoot();
    sr.innerHTML = '<b></b><content></content><c></c>';
    var b = sr.firstChild;
    var content = b.nextSibling;
    var c = sr.lastChild;

    assert.equal(getVisualInnerHtml(host), '<b></b><a></a><c></c>');

    a.textContent = 'x';

    // Don't use getVisualInnerHtml but it does invalidation.
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a><c></c>');

    host.appendChild(document.createTextNode('y'));
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a><c></c>y');  //dirty
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>');

    sr.appendChild(document.createTextNode('z'));
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>');  //dirty
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>z');

    sr.insertBefore(document.createTextNode('w'), content);
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>z');  // dirty
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>y<c></c>z');

    // This case does not need invalidation.
    // We could make the check a bit more specific (check for nextSibling being
    // null or a content/shadow).
    sr.insertBefore(document.createTextNode('v'), c);
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z');
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z');

    content.select = '*';
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z');  // dirty
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>v<c></c>z');

    content.setAttribute('SelecT', 'no-match');
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>v<c></c>z');  // dirty
    host.offsetWidth;
    assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>wv<c></c>z');
  });

  test('minimal dom changes', function() {
    var div = document.createElement('div');

    // TODO(jmesserly): ideally we would intercept all of the visual DOM
    // operations, but that isn't possible because they are captured in the code
    // as originalInsertBefore/originalRemoveChild, so we only see the calls
    // inside ShadowRenderer.

    var originalInsertBefore = ShadowDOMPolyfill.originalInsertBefore;
    var originalRemoveChild = ShadowDOMPolyfill.originalRemoveChild;

    var insertBeforeCount = 0;
    var removeChildCount = 0;

    ShadowDOMPolyfill.originalInsertBefore = function(newChild, refChild) {
      insertBeforeCount++;
      return originalInsertBefore.call(this, newChild, refChild);
    };

    ShadowDOMPolyfill.originalRemoveChild = function(child) {
      removeChildCount++;
      return originalRemoveChild.call(this, child);
    };

    function reset() {
      insertBeforeCount = 0;
      removeChildCount = 0;
    }

    try {

      var div = document.createElement('div');
      var a = div.appendChild(document.createElement('a'));

      var sr = div.createShadowRoot();
      var content = sr.appendChild(document.createElement('content'));
      var b = sr.appendChild(document.createElement('b'));

      assert.equal(getVisualInnerHtml(div), '<a></a><b></b>');

      assert.equal(insertBeforeCount, 1);
      assert.equal(removeChildCount, 1);

      reset();

      // Invalidates but does not change the rendered tree.
      content.select = '*';

      assert.equal(getVisualInnerHtml(div), '<a></a><b></b>');
      assert.equal(insertBeforeCount, 0);
      assert.equal(removeChildCount, 0);

      // Does not use our overridden appendChild
      var c = div.appendChild(document.createElement('c'));
      assert.equal(insertBeforeCount, 0);
      assert.equal(removeChildCount, 0);

      assert.equal(getVisualInnerHtml(div), '<a></a><c></c><b></b>');
      assert.equal(insertBeforeCount, 1);
      assert.equal(removeChildCount, 1);

      content.select = 'c';
      reset();
      assert.equal(getVisualInnerHtml(div), '<c></c><b></b>');
      assert.equal(insertBeforeCount, 0);
      assert.equal(removeChildCount, 1);

      content.select = '*';
      reset();
      assert.equal(getVisualInnerHtml(div), '<a></a><c></c><b></b>');
      assert.equal(insertBeforeCount, 1);
      assert.equal(removeChildCount, 0);

      content.select = 'x';
      reset();
      assert.equal(getVisualInnerHtml(div), '<b></b>');
      assert.equal(insertBeforeCount, 0);
      assert.equal(removeChildCount, 2);

      content.appendChild(document.createTextNode('fallback'));
      reset();
      assert.equal(getVisualInnerHtml(div), 'fallback<b></b>');
      assert.equal(insertBeforeCount, 1);
      assert.equal(removeChildCount, 1);  // moved from content

      content.insertBefore(document.createTextNode('more '),
                           content.firstChild);
      reset();
      assert.equal(getVisualInnerHtml(div), 'more fallback<b></b>');
      assert.equal(insertBeforeCount, 0);  // already inserted before "fallback"
      assert.equal(removeChildCount, 0);

      content.select = '*';
      reset();
      assert.equal(getVisualInnerHtml(div), '<a></a><c></c><b></b>');
      assert.equal(insertBeforeCount, 2);
      assert.equal(removeChildCount, 2);


    } finally {
      ShadowDOMPolyfill.originalInsertBefore =  originalInsertBefore;
      ShadowDOMPolyfill.originalRemoveChild = originalRemoveChild;
    }
  });
});