| OLD | NEW | 
| (Empty) |  | 
 |    1 <!DOCTYPE html> | 
 |    2 <!--  | 
 |    3 Distributed under both the W3C Test Suite License [1] and the W3C | 
 |    4 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | 
 |    5 policies and contribution forms [3]. | 
 |    6  | 
 |    7 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | 
 |    8 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | 
 |    9 [3] http://www.w3.org/2004/10/27-testcases | 
 |   10  --> | 
 |   11 <html> | 
 |   12 <head> | 
 |   13 <title>Shadow DOM Test: A_04_09_01</title> | 
 |   14 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> | 
 |   15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#multipl
     e-shadow-subtrees"> | 
 |   16 <meta name="assert" content="Rendering Shadow DOM Subtrees:rendering algorithm"> | 
 |   17 <script src="../../../../../resources/testharness.js"></script> | 
 |   18 <script src="../../../../../resources/testharnessreport.js"></script> | 
 |   19 <script src="../../testcommon.js"></script> | 
 |   20 <link rel="stylesheet" href="../../../../../resources/testharness.css"> | 
 |   21 </head> | 
 |   22 <body> | 
 |   23 <div id="log"></div> | 
 |   24 <script> | 
 |   25 test(unit(function (ctx) { | 
 |   26  | 
 |   27     var d = newRenderedHTMLDocument(ctx); | 
 |   28     var div = d.createElement('div'); | 
 |   29     div.innerHTML = '' + | 
 |   30         '<ul id="host">' + | 
 |   31                 '<li id="li1" class="shadow">' + | 
 |   32                         '<a id="a11" class="cl1" href="#">Link11 Shadow</a>' + | 
 |   33                         '<a id="a12" class="cl2" href="#">Link12 Shadow</a>' + | 
 |   34                         '<a id="a13" class="cl1" href="#">Link13 Shadow</a>' + | 
 |   35                         '<a id="a14" class="cl3" href="#">Link14 Shadow</a>' + | 
 |   36                 '</li>' + | 
 |   37                 '<li id="li2">' + | 
 |   38                         '<a id="a21" href="#">Link21</a><a id="a22" href="#">Lin
     k22</a>' + | 
 |   39                 '</li>' + | 
 |   40                 '<li id="li3" class="shadow">' + | 
 |   41                         '<a id="a31" href="#">Link31 Shadow</a><a id="a32" href=
     "#">Link32 Shadow</a>' + | 
 |   42                 '</li>' + | 
 |   43                 '<li id="li4" class="shadow2">' + | 
 |   44                         '<a id="a41" href="#">Link41 Shadow 2</a><a id="a42" hre
     f="#">Link22 Shadow 2</a>' + | 
 |   45                 '</li>' + | 
 |   46                 '<li id="li5" class="shadow2">' + | 
 |   47                         '<a id="a51" href="#">Link51 Shadow</a><a id="a52" href=
     "#">Link52 Shadow 2</a>' + | 
 |   48                 '</li>' + | 
 |   49         '</ul>'; | 
 |   50  | 
 |   51     d.body.appendChild(div); | 
 |   52  | 
 |   53     //make nested shadow tree to check the reprojection | 
 |   54     var li1 = d.querySelector('#li1'); | 
 |   55     var s = li1.createShadowRoot(); | 
 |   56     var shadowLI1 = document.createElement('li'); | 
 |   57     shadowLI1.innerHTML = '<content select=".cl1"></content>'; | 
 |   58     s.appendChild(shadowLI1); | 
 |   59  | 
 |   60         //check the tree. a11 and a13 should be visible | 
 |   61         assert_true(d.querySelector('#a11').offsetTop > 0, | 
 |   62             'Point 1: Node that matches insertion point criteria should be rende
     red'); | 
 |   63         assert_true(d.querySelector('#a13').offsetTop > 0, | 
 |   64                 'Point 2: Node that matches insertion point criteria should be r
     endered'); | 
 |   65         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |   66                 'Point 3: Node that doesn\'t match insertion point criteria shou
     ldn\'t be rendered'); | 
 |   67         assert_equals(d.querySelector('#a14').offsetTop, 0, | 
 |   68                 'Point 4: Node that doesn\'t match insertion point criteria shou
     ldn\'t be rendered'); | 
 |   69  | 
 |   70  | 
 |   71     var shadowLI2 = document.createElement('li'); | 
 |   72     shadowLI2.innerHTML = '<content select=".cl3"></content>'; | 
 |   73     s.appendChild(shadowLI2); | 
 |   74  | 
 |   75         //At this point a11, a13 and a14 should be visible | 
 |   76         assert_true(d.querySelector('#a11').offsetTop > 0, | 
 |   77             'Point 11: Node that matches insertion point criteria should be rend
     ered'); | 
 |   78         assert_true(d.querySelector('#a13').offsetTop > 0, | 
 |   79                 'Point 12: Node that matches insertion point criteria should be 
     rendered'); | 
 |   80         assert_true(d.querySelector('#a14').offsetTop > d.querySelector('#a13').
     offsetTop, | 
 |   81                 'Point 13: Node that matches insertion point criteria should be 
     rendered'); | 
 |   82         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |   83                 'Point 14: Node that doesn\'t match insertion point criteria sho
     uldn\'t be rendered'); | 
 |   84  | 
 |   85  | 
 |   86     //Shadow root to play with | 
 |   87     var ul = d.querySelector('#host'); | 
 |   88  | 
 |   89     //make an old shadow tree | 
 |   90     var s2 = ul.createShadowRoot(); | 
 |   91     var div2 = d.createElement('div'); | 
 |   92     div2.innerHTML = '<ul><content select=".shadow"></content></ul>'; | 
 |   93     s2.appendChild(div2); | 
 |   94  | 
 |   95     // At this point visible: li1 and li3 | 
 |   96     assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 21: Node that matc
     h insertion ' + | 
 |   97                 'point criteria should be rendered'); | 
 |   98         assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 22: Node that 
     match insertion ' + | 
 |   99                 'point criteria should be rendered'); | 
 |  100         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 23: Node that
      doen\'t match ' + | 
 |  101                 'insertion point criteria shouldn\'t be rendered'); | 
 |  102         assert_equals(d.querySelector('#li4').offsetTop, 0, 'Point 24: Node that
      doen\'t match ' + | 
 |  103                 'insertion point criteria shouldn\'t be rendered'); | 
 |  104         assert_equals(d.querySelector('#li5').offsetTop, 0, 'Point 25: Node that
      doen\'t match ' + | 
 |  105                 'insertion point criteria shouldn\'t be rendered'); | 
 |  106  | 
 |  107         //check the reprojected nodes | 
 |  108         assert_true(d.querySelector('#a11').offsetTop > 0, | 
 |  109             'Point 26: Node that matches insertion point criteria should be rend
     ered'); | 
 |  110         assert_true(d.querySelector('#a13').offsetTop > 0, | 
 |  111                 'Point 27: Node that matches insertion point criteria should be 
     rendered'); | 
 |  112         assert_true(d.querySelector('#a14').offsetTop > d.querySelector('#a13').
     offsetTop, | 
 |  113                 'Point 28: Node that matches insertion point criteria should be 
     rendered'); | 
 |  114         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |  115                 'Point 29: Node that doesn\'t match insertion point criteria sho
     uldn\'t be rendered'); | 
 |  116  | 
 |  117  | 
 |  118  | 
 |  119     //make a young shadow tree | 
 |  120     var s3 = ul.createShadowRoot(); | 
 |  121     var div3 = d.createElement('div'); | 
 |  122     div3.innerHTML = '<ul><content select=".shadow2"></content></ul>'; | 
 |  123     s3.appendChild(div3); | 
 |  124  | 
 |  125     //At this point: li4 and li5 visible, others not | 
 |  126     assert_true(d.querySelector('#li4').offsetTop > 0, 'Point 31: Node that matc
     h insertion ' + | 
 |  127                 'point criteria should be rendered'); | 
 |  128         assert_true(d.querySelector('#li5').offsetTop > 0, 'Point 32: Node that 
     match insertion ' + | 
 |  129                 'point criteria should be rendered'); | 
 |  130         assert_equals(d.querySelector('#li1').offsetTop, 0, 'Point 33: Node that
      doen\'t match ' + | 
 |  131                 'insertion point criteria shouldn\'t be rendered'); | 
 |  132         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 34: Node that
      doen\'t match ' + | 
 |  133                 'insertion point criteria shouldn\'t be rendered'); | 
 |  134         assert_equals(d.querySelector('#li3').offsetTop, 0, 'Point 35: Node that
      doen\'t match ' + | 
 |  135                 'insertion point criteria shouldn\'t be rendered'); | 
 |  136  | 
 |  137         //check the reprojected nodes (all invisible) | 
 |  138         assert_equals(d.querySelector('#a11').offsetTop, 0, | 
 |  139             'Point 36: Aleady distributed nodes should behave like a shadow host
      child nodes'); | 
 |  140         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |  141                 'Point 37: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  142         assert_equals(d.querySelector('#a13').offsetTop, 0, | 
 |  143                 'Point 38: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  144         assert_equals(d.querySelector('#a14').offsetTop, 0, | 
 |  145                 'Point 39: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  146  | 
 |  147         var shadow = d.createElement('shadow'); | 
 |  148         s3.appendChild(shadow); | 
 |  149  | 
 |  150     //At this point: li1, li3, li4 and li5 visible li2 not | 
 |  151     assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 41: Node that matc
     h insertion ' + | 
 |  152                 'point criteria should be rendered'); | 
 |  153         assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 42: Node that 
     match insertion ' + | 
 |  154                 'point criteria should be rendered'); | 
 |  155         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 43: Node that
      doen\'t match ' + | 
 |  156                 'insertion point criteria shouldn\'t be rendered'); | 
 |  157         assert_true(d.querySelector('#li4').offsetTop > 0, 'Point 44: Node that 
     doen\'t match ' + | 
 |  158                 'insertion point criteria shouldn\'t be rendered'); | 
 |  159         assert_true(d.querySelector('#li5').offsetTop > 0, 'Point 45: Node that 
     doen\'t match ' + | 
 |  160                 'insertion point criteria shouldn\'t be rendered'); | 
 |  161  | 
 |  162         //check the reprojected nodes (a11, a13, a14 visible, a12 not) | 
 |  163         assert_true(d.querySelector('#a11').offsetTop > 0, | 
 |  164             'Point 46: Aleady distributed nodes should behave like a shadow host
      child nodes'); | 
 |  165         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |  166                 'Point 47: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  167         assert_true(d.querySelector('#a13').offsetTop > 0, | 
 |  168                 'Point 48: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  169         assert_true(d.querySelector('#a14').offsetTop > 0, | 
 |  170                 'Point 49: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  171  | 
 |  172         var shadow2 = d.createElement('shadow'); | 
 |  173         s3.appendChild(shadow2); | 
 |  174  | 
 |  175         // Nothing should be changed | 
 |  176     //At this point: li1, li3, li4 and li5 visible li2 not | 
 |  177     assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 51: Node that matc
     h insertion ' + | 
 |  178                 'point criteria should be rendered'); | 
 |  179         assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 52: Node that 
     match insertion ' + | 
 |  180                 'point criteria should be rendered'); | 
 |  181         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 53: Node that
      doen\'t match ' + | 
 |  182                 'insertion point criteria shouldn\'t be rendered'); | 
 |  183         assert_true(d.querySelector('#li4').offsetTop > 0, 'Point 54: Node that 
     doen\'t match ' + | 
 |  184                 'insertion point criteria shouldn\'t be rendered'); | 
 |  185         assert_true(d.querySelector('#li5').offsetTop > 0, 'Point 55: Node that 
     doen\'t match ' + | 
 |  186                 'insertion point criteria shouldn\'t be rendered'); | 
 |  187  | 
 |  188         //check the reprojected nodes (a11 and a13 visible, a12 not) | 
 |  189         assert_true(d.querySelector('#a11').offsetTop > 0, | 
 |  190             'Point 56: Aleady distributed nodes should behave like a shadow host
      child nodes'); | 
 |  191         assert_equals(d.querySelector('#a12').offsetTop, 0, | 
 |  192                 'Point 57: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  193         assert_true(d.querySelector('#a13').offsetTop > 0, | 
 |  194                 'Point 58: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  195         assert_true(d.querySelector('#a14').offsetTop > 0, | 
 |  196                 'Point 59: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  197  | 
 |  198         //replace the nested tree by younger one | 
 |  199     var s4 = li1.createShadowRoot(); | 
 |  200     var shadowLI4 = document.createElement('li'); | 
 |  201     shadowLI4.innerHTML = '<content select=".cl2"></content>'; | 
 |  202     s4.appendChild(shadowLI4); | 
 |  203  | 
 |  204     //At this point: li1, li3, li4 and li5 visible li2 not | 
 |  205     assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 61: Node that matc
     h insertion ' + | 
 |  206                 'point criteria should be rendered'); | 
 |  207         assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 62: Node that 
     match insertion ' + | 
 |  208                 'point criteria should be rendered'); | 
 |  209         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 63: Node that
      doen\'t match ' + | 
 |  210                 'insertion point criteria shouldn\'t be rendered'); | 
 |  211         assert_true(d.querySelector('#li4').offsetTop > 0, 'Point 64: Node that 
     doen\'t match ' + | 
 |  212                 'insertion point criteria shouldn\'t be rendered'); | 
 |  213         assert_true(d.querySelector('#li5').offsetTop > 0, 'Point 65: Node that 
     doen\'t match ' + | 
 |  214                 'insertion point criteria shouldn\'t be rendered'); | 
 |  215  | 
 |  216         //check the reprojected nodes (a12 visible, others not) | 
 |  217         assert_equals(d.querySelector('#a11').offsetTop, 0, | 
 |  218             'Point 66: Aleady distributed nodes should behave like a shadow host
      child nodes'); | 
 |  219         assert_true(d.querySelector('#a12').offsetTop > 0, | 
 |  220                 'Point 67: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  221         assert_equals(d.querySelector('#a13').offsetTop, 0, | 
 |  222                 'Point 68: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  223         assert_equals(d.querySelector('#a14').offsetTop, 0, | 
 |  224                 'Point 69: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  225  | 
 |  226  | 
 |  227         //Let's check that if we add a shadow insertion point to the tree nothin
     g is | 
 |  228         //changed in the nested three (old tree is still invisible) | 
 |  229         var shadow3 = d.createElement('shadow'); | 
 |  230         s3.appendChild(shadow3); | 
 |  231  | 
 |  232     //At this point: li1, li3, li4 and li5 visible li2 not | 
 |  233     assert_true(d.querySelector('#li1').offsetTop > 0, 'Point 61: Node that matc
     h insertion ' + | 
 |  234                 'point criteria should be rendered'); | 
 |  235         assert_true(d.querySelector('#li3').offsetTop > 0, 'Point 62: Node that 
     match insertion ' + | 
 |  236                 'point criteria should be rendered'); | 
 |  237         assert_equals(d.querySelector('#li2').offsetTop, 0, 'Point 63: Node that
      doen\'t match ' + | 
 |  238                 'insertion point criteria shouldn\'t be rendered'); | 
 |  239         assert_true(d.querySelector('#li4').offsetTop > 0, 'Point 64: Node that 
     doen\'t match ' + | 
 |  240                 'insertion point criteria shouldn\'t be rendered'); | 
 |  241         assert_true(d.querySelector('#li5').offsetTop > 0, 'Point 65: Node that 
     doen\'t match ' + | 
 |  242                 'insertion point criteria shouldn\'t be rendered'); | 
 |  243  | 
 |  244         //check the reprojected nodes (a12 visible, others not) | 
 |  245         assert_equals(d.querySelector('#a11').offsetTop, 0, | 
 |  246             'Point 66: Aleady distributed nodes should behave like a shadow host
      child nodes'); | 
 |  247         assert_true(d.querySelector('#a12').offsetTop > 0, | 
 |  248                 'Point 67: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  249         assert_equals(d.querySelector('#a13').offsetTop, 0, | 
 |  250                 'Point 68: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  251         assert_equals(d.querySelector('#a14').offsetTop, 0, | 
 |  252                 'Point 69: Aleady distributed nodes should behave like a shadow 
     host child nodes'); | 
 |  253 }), 'A_04_09_01_T01'); | 
 |  254 </script> | 
 |  255 </body> | 
 |  256 </html> | 
| OLD | NEW |