src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/shadow-dom/styles/at-host-at-rule/matching-specificity-of-css-rules-001.html

   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: The matching specificity of CSS rules for @host @-rule</title>
  14 <link rel="author" title="Moto Ishizawa" href="mailto:summerwind.jp@gmail.com">
  15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#host-at-rule">
  16 <meta name="assert" content="@host @-rule: Test the matching specificity of CSS rules for @host">
  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 <style>
  22     #test-id    { display: block; }
  23     .test-class { display: block; }
  24     li          { display: block; }
  25 </style>
  26 </head>
  27 <body>
  28 <div id="log"></div>
  29 <script>
  30 test(unit(function (ctx) {
  31     var d = newRenderedHTMLDocument(ctx);
  32
  33     d.body.innerHTML =
  34         '<ul id="host">' +
  35            '<li>1</li>' +
  36             '<li id="test-id">2</li>' +
  37             '<li class="test-class">3</li>' +
  38             '<li id="test-id" class="test-class">4</li>' +
  39             '<li style="display: block;">5</li>' +
  40         '</ul>';
  41
  42     var host = d.querySelector('#host');
  43     var s = createSR(host);
  44
  45     var div = d.createElement('div');
  46     div.innerHTML = '<div id="shDiv"><span>Div in the Shadow tree</span></div>'
  47                   + '<ul><content></content></ul>';
  48     s.appendChild(div);
  49
  50     var style = d.createElement('style');
  51     style.textContent = '@host {'
  52                       + 'li { display: none; }'
  53                       + '}';
  54     s.appendChild(style);
  55
  56     var li_list = d.querySelectorAll('#host li');
  57     assert_equals(li_list[0].offsetHeight, 0, 'Point 1: @host rules applies');
  58     assert_equals(li_list[1].offsetHeight, 0, 'Point 2: @host rules applies');
  59     assert_equals(li_list[2].offsetHeight, 0, 'Point 3: @host rules applies');
  60     assert_equals(li_list[3].offsetHeight, 0, 'Point 4: @host rules applies');
  61     assert_not_equals(li_list[4].offsetHeight, 0, 'Point 5: style attribute value applies');
  62 }), 'Only the last "li" element of shadow trees is displayed');
  63 </script>
  64 </body>