WebPlatformTest/shadow-dom/shadow-trees/rendering-shadow-trees/test-001_t01.dart

/*
 * Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/*
 * Portions of this test are derived from code under the following license:
 *
 * Web-platform-tests are covered by the dual-licensing approach described in:
 * http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright.html
 */
/**
 * @assertion Rendering Shadow DOM Subtrees: rendering algorithm
 */

import 'dart:html';
import "../../../../Utils/expect.dart";
import '../../testcommon.dart';

main() {
  equals(actual,expected,reason) => Expect.equals(expected,actual,reason);

  var d = document;
  var div = d.createElement('div');
  div.setInnerHtml('' +
      '<ul id="host">' +
              '<li id="li1" class="shadow">' +
                      '<a id="a11" class="cl1" href="#">Link11 Shadow</a>' +
                      '<a id="a12" class="cl2" href="#">Link12 Shadow</a>' +
                      '<a id="a13" class="cl1" href="#">Link13 Shadow</a>' +
                      '<a id="a14" class="cl3" href="#">Link14 Shadow</a>' +
              '</li>' +
              '<li id="li2">' +
                      '<a id="a21" href="#">Link21</a><a id="a22" href="#">Link22</a>' +
              '</li>' +
              '<li id="li3" class="shadow">' +
                      '<a id="a31" href="#">Link31 Shadow</a><a id="a32" href="#">Link32 Shadow</a>' +
              '</li>' +
              '<li id="li4" class="shadow2">' +
                      '<a id="a41" href="#">Link41 Shadow 2</a><a id="a42" href="#">Link22 Shadow 2</a>' +
              '</li>' +
              '<li id="li5" class="shadow2">' +
                      '<a id="a51" href="#">Link51 Shadow</a><a id="a52" href="#">Link52 Shadow 2</a>' +
              '</li>' +
      '</ul>',
      treeSanitizer: new NullTreeSanitizer());

  d.body.append(div);

  //make nested shadow tree to check the reprojection
  var li1 = d.querySelector('#li1');
  var s = createSR(li1);
  var shadowLI1 = document.createElement('li');
  shadowLI1.setInnerHtml('<content select=".cl1"></content>',
      treeSanitizer: new NullTreeSanitizer());
  s.append(shadowLI1);

  //check the tree. a11 and a13 should be visible
  Expect.isTrue(d.querySelector('#a11').offsetTop > 0,
      'Point 1: Node that matches insertion point criteria should be rendered');
  Expect.isTrue(d.querySelector('#a13').offsetTop > 0,
      'Point 2: Node that matches insertion point criteria should be rendered');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 3: Node that doesn\'t match insertion point criteria shouldn\'t be rendered');
  equals(d.querySelector('#a14').offsetTop, 0,
      'Point 4: Node that doesn\'t match insertion point criteria shouldn\'t be rendered');


  var shadowLI2 = document.createElement('li');
  shadowLI2.setInnerHtml('<content select=".cl3"></content>',
      treeSanitizer: new NullTreeSanitizer());
  s.append(shadowLI2);

  //At this point a11, a13 and a14 should be visible
  Expect.isTrue(d.querySelector('#a11').offsetTop > 0,
      'Point 11: Node that matches insertion point criteria should be rendered');
  Expect.isTrue(d.querySelector('#a13').offsetTop > 0,
      'Point 12: Node that matches insertion point criteria should be rendered');
  Expect.isTrue(d.querySelector('#a14').offsetTop > d.querySelector('#a13').offsetTop,
      'Point 13: Node that matches insertion point criteria should be rendered');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 14: Node that doesn\'t match insertion point criteria shouldn\'t be rendered');


  //Shadow root to play with
  var ul = d.querySelector('#host');

  //make an old shadow tree
  var s2 = createSR(ul);
  var div2 = d.createElement('div');
  div2.setInnerHtml('<ul><content select=".shadow"></content></ul>',
      treeSanitizer: new NullTreeSanitizer());
  s2.append(div2);

  // At this point visible: li1 and li3
  Expect.isTrue(d.querySelector('#li1').offsetTop > 0, 'Point 21: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li3').offsetTop > 0, 'Point 22: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 23: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  equals(d.querySelector('#li4').offsetTop, 0, 'Point 24: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  equals(d.querySelector('#li5').offsetTop, 0, 'Point 25: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes
  Expect.isTrue(d.querySelector('#a11').offsetTop > 0,
      'Point 26: Node that matches insertion point criteria should be rendered');
  Expect.isTrue(d.querySelector('#a13').offsetTop > 0,
      'Point 27: Node that matches insertion point criteria should be rendered');
  Expect.isTrue(d.querySelector('#a14').offsetTop > d.querySelector('#a13').offsetTop,
      'Point 28: Node that matches insertion point criteria should be rendered');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 29: Node that doesn\'t match insertion point criteria shouldn\'t be rendered');



  //make a young shadow tree
  var s3 = createSR(ul);
  var div3 = d.createElement('div');
  div3.setInnerHtml('<ul><content select=".shadow2"></content></ul>',
      treeSanitizer: new NullTreeSanitizer());
  s3.append(div3);

  //At this point: li4 and li5 visible, others not
  Expect.isTrue(d.querySelector('#li4').offsetTop > 0, 'Point 31: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li5').offsetTop > 0, 'Point 32: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li1').offsetTop, 0, 'Point 33: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 34: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  equals(d.querySelector('#li3').offsetTop, 0, 'Point 35: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes (all invisible)
  equals(d.querySelector('#a11').offsetTop, 0,
      'Point 36: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 37: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a13').offsetTop, 0,
      'Point 38: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a14').offsetTop, 0,
      'Point 39: Aleady distributed nodes should behave like a shadow host child nodes');

  var shadow = d.createElement('shadow');
  s3.append(shadow);

  //At this point: li1, li3, li4 and li5 visible li2 not
  Expect.isTrue(d.querySelector('#li1').offsetTop > 0, 'Point 41: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li3').offsetTop > 0, 'Point 42: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 43: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li4').offsetTop > 0, 'Point 44: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li5').offsetTop > 0, 'Point 45: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes (a11, a13, a14 visible, a12 not)
  Expect.isTrue(d.querySelector('#a11').offsetTop > 0,
      'Point 46: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 47: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a13').offsetTop > 0,
      'Point 48: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a14').offsetTop > 0,
      'Point 49: Aleady distributed nodes should behave like a shadow host child nodes');

  var shadow2 = d.createElement('shadow');
  s3.append(shadow2);

  // Nothing should be changed
  //At this point: li1, li3, li4 and li5 visible li2 not
  Expect.isTrue(d.querySelector('#li1').offsetTop > 0, 'Point 51: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li3').offsetTop > 0, 'Point 52: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 53: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li4').offsetTop > 0, 'Point 54: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li5').offsetTop > 0, 'Point 55: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes (a11 and a13 visible, a12 not)
  Expect.isTrue(d.querySelector('#a11').offsetTop > 0,
      'Point 56: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a12').offsetTop, 0,
      'Point 57: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a13').offsetTop > 0,
      'Point 58: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a14').offsetTop > 0,
      'Point 59: Aleady distributed nodes should behave like a shadow host child nodes');

  //replace the nested tree by younger one
  var s4 = createSR(li1);
  var shadowLI4 = document.createElement('li');
  shadowLI4.setInnerHtml('<content select=".cl2"></content>',
      treeSanitizer: new NullTreeSanitizer());
  s4.append(shadowLI4);

  //At this point: li1, li3, li4 and li5 visible li2 not
  Expect.isTrue(d.querySelector('#li1').offsetTop > 0, 'Point 61: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li3').offsetTop > 0, 'Point 62: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 63: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li4').offsetTop > 0, 'Point 64: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li5').offsetTop > 0, 'Point 65: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes (a12 visible, others not)
  equals(d.querySelector('#a11').offsetTop, 0,
      'Point 66: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a12').offsetTop > 0,
      'Point 67: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a13').offsetTop, 0,
      'Point 68: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a14').offsetTop, 0,
      'Point 69: Aleady distributed nodes should behave like a shadow host child nodes');


  //Let's check that if we add a shadow insertion point to the tree nothing is
  //changed in the nested three (old tree is still invisible)
  var shadow3 = d.createElement('shadow');
  s3.append(shadow3);

  //At this point: li1, li3, li4 and li5 visible li2 not
  Expect.isTrue(d.querySelector('#li1').offsetTop > 0, 'Point 61: Node that match insertion ' +
      'point criteria should be rendered');
  Expect.isTrue(d.querySelector('#li3').offsetTop > 0, 'Point 62: Node that match insertion ' +
      'point criteria should be rendered');
  equals(d.querySelector('#li2').offsetTop, 0, 'Point 63: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li4').offsetTop > 0, 'Point 64: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');
  Expect.isTrue(d.querySelector('#li5').offsetTop > 0, 'Point 65: Node that doen\'t match ' +
      'insertion point criteria shouldn\'t be rendered');

  //check the reprojected nodes (a12 visible, others not)
  equals(d.querySelector('#a11').offsetTop, 0,
      'Point 66: Aleady distributed nodes should behave like a shadow host child nodes');
  Expect.isTrue(d.querySelector('#a12').offsetTop > 0,
      'Point 67: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a13').offsetTop, 0,
      'Point 68: Aleady distributed nodes should behave like a shadow host child nodes');
  equals(d.querySelector('#a14').offsetTop, 0,
      'Point 69: Aleady distributed nodes should behave like a shadow host child nodes');
}