src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/shadow-dom/shadow-trees/custom-pseudo-elements/not_apply_css_style_to_child_selector.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: Custom Pseudo Element must not apply child selector.</title>
  14     <link rel="author" title="shingo.miyazawa" href="mailto:kumatronik@gmail.com">
  15     <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#custom-pseudo-elements">
  16     <meta name="assert" content="Custom Pseudo-Elements: child selector after pseudo style is not apply to element. (i.e. div::x-thumb > span  style does not apply <div><span></span></div>. above then the specified x-thumb pseudo in the tag.)">
  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
  26       function getFontSize(element) {
  27         return window.getComputedStyle(element, null).getPropertyValue("font-size");
  28       }
  29
  30       test(unit(function (ctx) {
  31
  32         var d = newRenderedHTMLDocument(ctx);
  33
  34         var widget = d.createElement('div');
  35         d.body.appendChild(widget);
  36
  37         var s = createSR(widget);
  38
  39         var sdiv = d.createElement('div');
  40         sdiv.pseudo = 'x-test';
  41         s.appendChild(sdiv);
  42
  43         var schild = d.createElement('span');
  44         schild.innerHTML = 'This is child of a pseudo-element';
  45         sdiv.appendChild(schild);
  46
  47         var sstyle = d.createElement('style');
  48         sstyle.innerHTML = 'div::x-test { font-size: 20px; }';
  49         sstyle.innerHTML += 'div::x-test > span { font-size: 30px; }';
  50         d.body.appendChild(sstyle);
  51
  52         assert_equals(getFontSize(sdiv), '20px', 'Pseudo-element style should be applied');
  53         assert_equals(getFontSize(schild), '20px', 'Pseudo-element child selector style should not be applied');
  54
  55       }), 'Pseudo-element child selector style should not be applied.');
  56
  57     </script>
  58   </body>
  59 </html>