| OLD | NEW | 
|    1 <!doctype html> |    1 <!doctype html> | 
|    2 <html> |    2 <html> | 
|    3 <head> |    3 <head> | 
|    4 <script src="resources/shadow-dom.js"></script> |    4 <script src="resources/shadow-dom.js"></script> | 
|    5 <script src="../../../resources/js-test.js"></script> |    5 <script src="../../../resources/js-test.js"></script> | 
|    6 </head> |    6 </head> | 
|    7 <body class="bodyClass"> |    7 <body class="bodyClass"> | 
|    8   <div id="sandbox"></div> |    8   <div id="sandbox"></div> | 
|    9   <pre id="console"></pre> |    9   <pre id="console"></pre> | 
|   10 </body> |   10 </body> | 
|   11 <script> |   11 <script> | 
|   12 description("Test for ::content with /shadow-deep/ and :host."); |   12 description("Test for ::content with /deep/ and :host."); | 
|   13  |   13  | 
|   14 var sandbox = document.getElementById('sandbox'); |   14 var sandbox = document.getElementById('sandbox'); | 
|   15  |   15  | 
|   16 function cleanUp() |   16 function cleanUp() | 
|   17 { |   17 { | 
|   18     sandbox.innerHTML = ''; |   18     sandbox.innerHTML = ''; | 
|   19 } |   19 } | 
|   20  |   20  | 
|   21 sandbox.appendChild( |   21 sandbox.appendChild( | 
|   22     createDOM('div', {'id': 'host1'}, |   22     createDOM('div', {'id': 'host1'}, | 
|   23         createShadowRoot( |   23         createShadowRoot( | 
|   24             createDOM('style', {}, |   24             createDOM('style', {}, | 
|   25                 document.createTextNode( |   25                 document.createTextNode( | 
|   26                     ':host(#host1) /shadow-deep/ #content1::content > .content {
      color: green; }')), |   26                     ':host(#host1) /deep/ #content1::content > .content { color:
      green; }')), | 
|   27             createDOM('div', {}, |   27             createDOM('div', {}, | 
|   28                 createDOM('div', {'id': 'host2'}, |   28                 createDOM('div', {'id': 'host2'}, | 
|   29                     createShadowRoot( |   29                     createShadowRoot( | 
|   30                         createDOM('content', {'id': 'content2'})), |   30                         createDOM('content', {'id': 'content2'})), | 
|   31                     createDOM('div', {'id': 'parentOfContent1'}, |   31                     createDOM('div', {'id': 'parentOfContent1'}, | 
|   32                         createDOM('content', {'id': 'content1'}))))), |   32                         createDOM('content', {'id': 'content1'}))))), | 
|   33         createDOM('div', {'class': 'content'}, |   33         createDOM('div', {'class': 'content'}, | 
|   34             document.createTextNode('content')))); |   34             document.createTextNode('content')))); | 
|   35  |   35  | 
|   36 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); |   36 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); | 
|   37  |   37  | 
|   38 cleanUp(); |   38 cleanUp(); | 
|   39  |   39  | 
|   40 sandbox.appendChild( |   40 sandbox.appendChild( | 
|   41     createDOM('div', {'id': 'host1'}, |   41     createDOM('div', {'id': 'host1'}, | 
|   42         createShadowRoot( |   42         createShadowRoot( | 
|   43             createDOM('style', {}, |   43             createDOM('style', {}, | 
|   44                 document.createTextNode( |   44                 document.createTextNode( | 
|   45                     '#host2 /shadow-deep/ #content2::content > #parentOfContent1
      > #content1::content > .content { color: green; }')), |   45                     '#host2 /deep/ #content2::content > #parentOfContent1 > #con
     tent1::content > .content { color: green; }')), | 
|   46             createDOM('div', {}, |   46             createDOM('div', {}, | 
|   47                 createDOM('div', {'id': 'host2'}, |   47                 createDOM('div', {'id': 'host2'}, | 
|   48                     createShadowRoot( |   48                     createShadowRoot( | 
|   49                         createDOM('content', {'id': 'content2'})), |   49                         createDOM('content', {'id': 'content2'})), | 
|   50                     createDOM('div', {'id': 'parentOfContent1'}, |   50                     createDOM('div', {'id': 'parentOfContent1'}, | 
|   51                         createDOM('content', {'id': 'content1'}))))), |   51                         createDOM('content', {'id': 'content1'}))))), | 
|   52         createDOM('div', {'class': 'content'}, |   52         createDOM('div', {'class': 'content'}, | 
|   53             document.createTextNode('content')))); |   53             document.createTextNode('content')))); | 
|   54  |   54  | 
|   55 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); |   55 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); | 
|   56  |   56  | 
|   57 cleanUp(); |   57 cleanUp(); | 
|   58  |   58  | 
|   59 sandbox.appendChild( |   59 sandbox.appendChild( | 
|   60     createDOM('div', {'id': 'host1'}, |   60     createDOM('div', {'id': 'host1'}, | 
|   61         createShadowRoot( |   61         createShadowRoot( | 
|   62             createDOM('style', {}, |   62             createDOM('style', {}, | 
|   63                 document.createTextNode( |   63                 document.createTextNode( | 
|   64                     ':host /shadow-deep/ #content2::content > #parentOfShadow1 >
      #shadow1::content > .content { color: green; }' + |   64                     ':host /deep/ #content2::content > #parentOfShadow1 > #shado
     w1::content > .content { color: green; }' + | 
|   65                     ':host /shadow-deep/ #content2::content > #shadow1::content 
     > #content1::content > .content { color: red; }')), |   65                     ':host /deep/ #content2::content > #shadow1::content > #cont
     ent1::content > .content { color: red; }')), | 
|   66             createDOM('content', {'id': 'content1'})), |   66             createDOM('content', {'id': 'content1'})), | 
|   67         createShadowRoot( |   67         createShadowRoot( | 
|   68             createDOM('div', {}, |   68             createDOM('div', {}, | 
|   69                 createDOM('div', {'id': 'host2'}, |   69                 createDOM('div', {'id': 'host2'}, | 
|   70                     createShadowRoot( |   70                     createShadowRoot( | 
|   71                         createDOM('content', {'id': 'content2'})), |   71                         createDOM('content', {'id': 'content2'})), | 
|   72                     createDOM('div', {'id': 'parentOfShadow1'}, |   72                     createDOM('div', {'id': 'parentOfShadow1'}, | 
|   73                         createDOM('shadow', {'id': 'shadow1'}, |   73                         createDOM('shadow', {'id': 'shadow1'}, | 
|   74                                   createDOM('content', {})))))), |   74                                   createDOM('content', {})))))), | 
|   75         createDOM('div', {'class': 'content'}, |   75         createDOM('div', {'class': 'content'}, | 
|   76             document.createTextNode('content')))); |   76             document.createTextNode('content')))); | 
|   77  |   77  | 
|   78 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); |   78 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); | 
|   79  |   79  | 
|   80 cleanUp(); |   80 cleanUp(); | 
|   81  |   81  | 
|   82 sandbox.appendChild( |   82 sandbox.appendChild( | 
|   83     createDOM('div', {'id': 'host1'}, |   83     createDOM('div', {'id': 'host1'}, | 
|   84         createShadowRoot( |   84         createShadowRoot( | 
|   85             createDOM('style', {}, |   85             createDOM('style', {}, | 
|   86                 document.createTextNode( |   86                 document.createTextNode( | 
|   87                     ':host /shadow-deep/ :host > #content2::content > #shadow1::
     content > #content1::content > .content { color: red; }')), |   87                     ':host /deep/ :host > #content2::content > #shadow1::content
      > #content1::content > .content { color: red; }')), | 
|   88             createDOM('content', {'id': 'content1'})), |   88             createDOM('content', {'id': 'content1'})), | 
|   89         createShadowRoot( |   89         createShadowRoot( | 
|   90             createDOM('div', {}, |   90             createDOM('div', {}, | 
|   91                 createDOM('div', {'id': 'host2'}, |   91                 createDOM('div', {'id': 'host2'}, | 
|   92                     createShadowRoot( |   92                     createShadowRoot( | 
|   93                         createDOM('content', {'id': 'content2'})), |   93                         createDOM('content', {'id': 'content2'})), | 
|   94                     createDOM('div', {'id': 'parentOfShadow1'}, |   94                     createDOM('div', {'id': 'parentOfShadow1'}, | 
|   95                         createDOM('shadow', {'id': 'shadow1'}, |   95                         createDOM('shadow', {'id': 'shadow1'}, | 
|   96                                   createDOM('content', {})))))), |   96                                   createDOM('content', {})))))), | 
|   97         createDOM('div', {'class': 'content'}, |   97         createDOM('div', {'class': 'content'}, | 
|   98             document.createTextNode('content')))); |   98             document.createTextNode('content')))); | 
|   99  |   99  | 
|  100 shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")
     ).color', '"rgb(255, 0, 0)"'); |  100 shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")
     ).color', '"rgb(255, 0, 0)"'); | 
|  101  |  101  | 
|  102 cleanUp(); |  102 cleanUp(); | 
|  103  |  103  | 
|  104 sandbox.appendChild( |  104 sandbox.appendChild( | 
|  105     createDOM('div', {'id': 'host1'}, |  105     createDOM('div', {'id': 'host1'}, | 
|  106         createShadowRoot( |  106         createShadowRoot( | 
|  107             createDOM('style', {}, |  107             createDOM('style', {}, | 
|  108                 document.createTextNode( |  108                 document.createTextNode( | 
|  109                     ':host /shadow-deep/ #content2::content > #parentOfContent1 
     > #content1::content > .content { color: green; }')), |  109                     ':host /deep/ #content2::content > #parentOfContent1 > #cont
     ent1::content > .content { color: green; }')), | 
|  110             createDOM('div', {}, |  110             createDOM('div', {}, | 
|  111                 createDOM('div', {'id': 'host2'}, |  111                 createDOM('div', {'id': 'host2'}, | 
|  112                     createShadowRoot( |  112                     createShadowRoot( | 
|  113                         createDOM('content', {'id': 'content2'})), |  113                         createDOM('content', {'id': 'content2'})), | 
|  114                     createDOM('div', {'id': 'parentOfContent1'}, |  114                     createDOM('div', {'id': 'parentOfContent1'}, | 
|  115                         createDOM('content', {'id': 'content1'}))))), |  115                         createDOM('content', {'id': 'content1'}))))), | 
|  116         createDOM('div', {'class': 'content'}, |  116         createDOM('div', {'class': 'content'}, | 
|  117             document.createTextNode('content')))); |  117             document.createTextNode('content')))); | 
|  118  |  118  | 
|  119 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); |  119 shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).c
     olor', '"rgb(0, 128, 0)"'); | 
|  120  |  120  | 
|  121 cleanUp(); |  121 cleanUp(); | 
|  122  |  122  | 
|  123 </script> |  123 </script> | 
|  124 </html> |  124 </html> | 
| OLD | NEW |