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