third_party/WebKit/LayoutTests/fast/dom/Window/getMatchedCSSRules-parent-stylesheets.html

   1 <!DOCTYPE html>
   2 <link media="all and (min-device-width: 20px)" rel="stylesheet" href="resources/matched-rules-import-stylesheet.css"/>
   3 <link media="all and (min-device-width: 120px)" rel="stylesheet" href="resources/matched-rules-import-stylesheet.css"/>
   4 <link media="all and (min-device-width: 220px)" rel="stylesheet" href="resources/matched-rules-import-stylesheet.css"/>
   5 <style>
   6     .test-element {
   7         color: red;
   8     }
   9 </style>
  10 <script src="../../../resources/js-test.js"></script>
  11 <p>Test getMatchedCSSRules to correctly setup CSSStyleRule parent stylesheet.</p>
  12 <span class="test-element">This span should have border and be written in red.</span>
  13 <script>
  14 description("getMatchedCSSRules returns CSSStyleRules with correct parent stylesheet.");
  15
  16 var cssStyleRules = getMatchedCSSRules(document.querySelector(".test-element"));
  17 var styleSheetsMedias = [];
  18 for (var i = 0; i < cssStyleRules.length; ++i) {
  19     styleSheetsMedias.push("parentStyleSheet media: '" + cssStyleRules[i].parentStyleSheet.media.mediaText + "'");
  20 }
  21
  22 styleSheetsMedias.sort();
  23
  24 for (var i = 0; i < styleSheetsMedias.length; ++i)
  25     debug(styleSheetsMedias[i]);
  26
  27 successfullyParsed = true;
  28 </script>
  29