| 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_10_05_03</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/#shadow-
     element"> | 
 |   16 <meta name="assert" content="The shadow HTML element: reset-style-inheritance at
     tribute"> | 
 |   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 reset-style-inheritance=true | 
 |   26 test(unit(function (ctx) { | 
 |   27  | 
 |   28         var d = newRenderedHTMLDocument(ctx); | 
 |   29  | 
 |   30     d.body.innerHTML = | 
 |   31         '<ul id="shHost">' + | 
 |   32                 '<li id="li1" class="shadow">1</li>' + | 
 |   33                 '<li id="li2" class="shadow2">2</li>' + | 
 |   34                 '<li id="li3" class="shadow">3</li>' + | 
 |   35                 '<li id="li4">4</li>' + | 
 |   36                 '<li id="li5" class="shadow">5</li>' + | 
 |   37                 '<li id="li6" class="shadow2">6</li>' + | 
 |   38         '</ul>'; | 
 |   39  | 
 |   40  | 
 |   41         var defHeight1 = d.querySelector('#li1').offsetHeight; | 
 |   42         var defHeight2 = d.querySelector('#li2').offsetHeight; | 
 |   43         var defHeight3 = d.querySelector('#li3').offsetHeight; | 
 |   44         var defHeight4 = d.querySelector('#li4').offsetHeight; | 
 |   45         var defHeight5 = d.querySelector('#li5').offsetHeight; | 
 |   46         var defHeight6 = d.querySelector('#li6').offsetHeight; | 
 |   47  | 
 |   48         assert_true(defHeight1 > 0, 'Point 1: Element height should be greater t
     han zero'); | 
 |   49         assert_true(defHeight2 > 0, 'Point 2: Element height should be greater t
     han zero'); | 
 |   50         assert_true(defHeight3 > 0, 'Point 3: Element height should be greater t
     han zero'); | 
 |   51         assert_true(defHeight4 > 0, 'Point 4: Element height should be greater t
     han zero'); | 
 |   52         assert_true(defHeight5 > 0, 'Point 5: Element height should be greater t
     han zero'); | 
 |   53         assert_true(defHeight6 > 0, 'Point 6: Element height should be greater t
     han zero'); | 
 |   54  | 
 |   55     var host = d.querySelector('#shHost'); | 
 |   56  | 
 |   57     d.body.setAttribute('style', 'font-size: 30px'); | 
 |   58  | 
 |   59         var height1 = d.querySelector('#li1').offsetHeight; | 
 |   60         var height2 = d.querySelector('#li2').offsetHeight; | 
 |   61         var height3 = d.querySelector('#li3').offsetHeight; | 
 |   62         var height4 = d.querySelector('#li4').offsetHeight; | 
 |   63         var height5 = d.querySelector('#li5').offsetHeight; | 
 |   64         var height6 = d.querySelector('#li6').offsetHeight; | 
 |   65  | 
 |   66  | 
 |   67         assert_true(height1 > defHeight1, 'Point 11: Element height should be ch
     anged'); | 
 |   68         assert_true(height2 > defHeight2, 'Point 12: Element height should be ch
     anged'); | 
 |   69         assert_true(height3 > defHeight3, 'Point 13: Element height should be ch
     anged'); | 
 |   70         assert_true(height4 > defHeight4, 'Point 14: Element height should be ch
     anged'); | 
 |   71         assert_true(height5 > defHeight5, 'Point 15: Element height should be ch
     anged'); | 
 |   72         assert_true(height6 > defHeight6, 'Point 16: Element height should be ch
     anged'); | 
 |   73  | 
 |   74         //Shadow root to play with | 
 |   75     var s = host.createShadowRoot(); | 
 |   76  | 
 |   77         var div = d.createElement('div'); | 
 |   78         div.innerHTML ='<ul><content select=".shadow"></content></ul>'; | 
 |   79         s.appendChild(div); | 
 |   80  | 
 |   81         assert_equals(d.querySelector('#li1').offsetHeight, height1, 'Point 21: 
     Element height should not be changed'); | 
 |   82         assert_equals(d.querySelector('#li3').offsetHeight, height3, 'Point 22: 
     Element height should not be changed'); | 
 |   83         assert_equals(d.querySelector('#li5').offsetHeight, height5, 'Point 23: 
     Element height should not be changed'); | 
 |   84  | 
 |   85         assert_equals(d.querySelector('#li2').offsetHeight, 0, 'Point 24: Elemen
     t shouldn\'t be rendered'); | 
 |   86         assert_equals(d.querySelector('#li4').offsetHeight, 0, 'Point 25: Elemen
     t shouldn\'t be rendered'); | 
 |   87         assert_equals(d.querySelector('#li6').offsetHeight, 0, 'Point 26: Elemen
     t shouldn\'t be rendered'); | 
 |   88  | 
 |   89         //Young tree | 
 |   90         var s2 = host.createShadowRoot(); | 
 |   91  | 
 |   92         var div2 = d.createElement('div'); | 
 |   93         div2.innerHTML = '<shadow reset-style-inheritance=true></shadow>'; | 
 |   94         s2.appendChild(div2); | 
 |   95  | 
 |   96         //styles should be reset | 
 |   97         assert_equals(d.querySelector('#li1').offsetHeight, defHeight1, 'Point 3
     1: Inherited ' + | 
 |   98                         'element style should be reset'); | 
 |   99         assert_equals(d.querySelector('#li3').offsetHeight, defHeight3, 'Point 3
     2: Inherited ' + | 
 |  100                         'element style should be reset'); | 
 |  101         assert_equals(d.querySelector('#li5').offsetHeight, defHeight5, 'Point 3
     3: Inherited ' + | 
 |  102                         'element style should be reset'); | 
 |  103  | 
 |  104 }), 'A_10_05_03_T01'); | 
 |  105  | 
 |  106  | 
 |  107 //test reset-style-inheritance | 
 |  108 test(unit(function (ctx) { | 
 |  109  | 
 |  110         var d = newRenderedHTMLDocument(ctx); | 
 |  111  | 
 |  112     d.body.innerHTML = | 
 |  113         '<ul id="shHost">' + | 
 |  114                 '<li id="li1" class="shadow">1</li>' + | 
 |  115                 '<li id="li2" class="shadow2">2</li>' + | 
 |  116                 '<li id="li3" class="shadow">3</li>' + | 
 |  117                 '<li id="li4">4</li>' + | 
 |  118                 '<li id="li5" class="shadow">5</li>' + | 
 |  119                 '<li id="li6" class="shadow2">6</li>' + | 
 |  120         '</ul>'; | 
 |  121  | 
 |  122  | 
 |  123         var defHeight1 = d.querySelector('#li1').offsetHeight; | 
 |  124         var defHeight2 = d.querySelector('#li2').offsetHeight; | 
 |  125         var defHeight3 = d.querySelector('#li3').offsetHeight; | 
 |  126         var defHeight4 = d.querySelector('#li4').offsetHeight; | 
 |  127         var defHeight5 = d.querySelector('#li5').offsetHeight; | 
 |  128         var defHeight6 = d.querySelector('#li6').offsetHeight; | 
 |  129  | 
 |  130         assert_true(defHeight1 > 0, 'Point 1: Element height should be greater t
     han zero'); | 
 |  131         assert_true(defHeight2 > 0, 'Point 2: Element height should be greater t
     han zero'); | 
 |  132         assert_true(defHeight3 > 0, 'Point 3: Element height should be greater t
     han zero'); | 
 |  133         assert_true(defHeight4 > 0, 'Point 4: Element height should be greater t
     han zero'); | 
 |  134         assert_true(defHeight5 > 0, 'Point 5: Element height should be greater t
     han zero'); | 
 |  135         assert_true(defHeight6 > 0, 'Point 6: Element height should be greater t
     han zero'); | 
 |  136  | 
 |  137     var host = d.querySelector('#shHost'); | 
 |  138  | 
 |  139     d.body.setAttribute('style', 'font-size: 30px'); | 
 |  140  | 
 |  141         var height1 = d.querySelector('#li1').offsetHeight; | 
 |  142         var height2 = d.querySelector('#li2').offsetHeight; | 
 |  143         var height3 = d.querySelector('#li3').offsetHeight; | 
 |  144         var height4 = d.querySelector('#li4').offsetHeight; | 
 |  145         var height5 = d.querySelector('#li5').offsetHeight; | 
 |  146         var height6 = d.querySelector('#li6').offsetHeight; | 
 |  147  | 
 |  148  | 
 |  149         assert_true(height1 > defHeight1, 'Point 11: Element height should be ch
     anged'); | 
 |  150         assert_true(height2 > defHeight2, 'Point 12: Element height should be ch
     anged'); | 
 |  151         assert_true(height3 > defHeight3, 'Point 13: Element height should be ch
     anged'); | 
 |  152         assert_true(height4 > defHeight4, 'Point 14: Element height should be ch
     anged'); | 
 |  153         assert_true(height5 > defHeight5, 'Point 15: Element height should be ch
     anged'); | 
 |  154         assert_true(height6 > defHeight6, 'Point 16: Element height should be ch
     anged'); | 
 |  155  | 
 |  156         //Shadow root to play with | 
 |  157     var s = host.createShadowRoot(); | 
 |  158  | 
 |  159         var div = d.createElement('div'); | 
 |  160         div.innerHTML ='<ul><content select=".shadow"></content></ul>'; | 
 |  161         s.appendChild(div); | 
 |  162  | 
 |  163         assert_equals(d.querySelector('#li1').offsetHeight, height1, 'Point 21: 
     Element height should not be changed'); | 
 |  164         assert_equals(d.querySelector('#li3').offsetHeight, height3, 'Point 22: 
     Element height should not be changed'); | 
 |  165         assert_equals(d.querySelector('#li5').offsetHeight, height5, 'Point 23: 
     Element height should not be changed'); | 
 |  166  | 
 |  167         assert_equals(d.querySelector('#li2').offsetHeight, 0, 'Point 24: Elemen
     t shouldn\'t be rendered'); | 
 |  168         assert_equals(d.querySelector('#li4').offsetHeight, 0, 'Point 25: Elemen
     t shouldn\'t be rendered'); | 
 |  169         assert_equals(d.querySelector('#li6').offsetHeight, 0, 'Point 26: Elemen
     t shouldn\'t be rendered'); | 
 |  170  | 
 |  171         //Young tree | 
 |  172         var s2 = host.createShadowRoot(); | 
 |  173  | 
 |  174         var div2 = d.createElement('div'); | 
 |  175         div2.innerHTML = '<shadow reset-style-inheritance></shadow>'; | 
 |  176         s2.appendChild(div2); | 
 |  177  | 
 |  178         //styles should be reset | 
 |  179         assert_equals(d.querySelector('#li1').offsetHeight, defHeight1, 'Point 3
     1: Inherited ' + | 
 |  180                         'element style should be reset'); | 
 |  181         assert_equals(d.querySelector('#li3').offsetHeight, defHeight3, 'Point 3
     2: Inherited ' + | 
 |  182                         'element style should be reset'); | 
 |  183         assert_equals(d.querySelector('#li5').offsetHeight, defHeight5, 'Point 3
     3: Inherited ' + | 
 |  184                         'element style should be reset'); | 
 |  185  | 
 |  186 }), 'A_10_05_03_T02'); | 
 |  187 </script> | 
 |  188 </body> | 
 |  189 </html> | 
| OLD | NEW |