| 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_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/#shadow-
     element"> | 
 |   16 <meta name="assert" content="The shadow HTML element: no reset-style-inheritance
      attribute"> | 
 |   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 no reset-style-inheritance | 
 |   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></shadow>'; | 
 |   94         s2.appendChild(div2); | 
 |   95  | 
 |   96         //styles should be reset | 
 |   97         assert_equals(d.querySelector('#li1').offsetHeight, height1, 'Point 31: 
     Inherited ' + | 
 |   98                         'element style should not be reset'); | 
 |   99         assert_equals(d.querySelector('#li3').offsetHeight, height3, 'Point 32: 
     Inherited ' + | 
 |  100                         'element style should not be reset'); | 
 |  101         assert_equals(d.querySelector('#li5').offsetHeight, height5, 'Point 33: 
     Inherited ' + | 
 |  102                         'element style should not be reset'); | 
 |  103  | 
 |  104 }), 'A_10_05_04_T01'); | 
 |  105 </script> | 
 |  106 </body> | 
 |  107 </html> | 
| OLD | NEW |