src/third_party/WebKit/LayoutTests/fast/regions/region-styling/parsing-region-style-rule.html

   1 <!doctype html>
   2 <html>
   3     <!--
   4     Tests parsing of region styling @-webkit-region rule.
   5     On success, you should see a PASS message.
   6     -->
   7     <head>
   8         <style>
   9             #article { -webkit-flow: "main-thread"; }
  10             .region { content: -webkit-from-flow("main-thread"); }
  11
  12             /* Style the content flowing into the first region */
  13             @-webkit-region #region1 { div { margin-top: 10px; } }
  14
  15             /* Style the content flowing into the second region */
  16             @-webkit-region #region2 { div { margin-left: 5px; } }
  17
  18             /* Mix region styling rules declarations with other rules */
  19             #region1 { width: 200px; height: 50px; }
  20             #region2 { width: 200px; height: 50px; }
  21
  22             /* Again style the content flowing into the first region */
  23             @-webkit-region #region1 { p { color: red; } }
  24
  25             /* Incorrect region styling rule should be ignored as long as
  26             braces are paired properly*/
  27             @-webkit-region #region1 { color: red; }
  28
  29             /* Style both regions at the same time */
  30             @-webkit-region #region1, #region2 { p > p { color: green; } }
  31         </style>
  32    </head>
  33     <body>
  34         <div id="console"></div>
  35         <script>
  36         if (window.testRunner)
  37             testRunner.dumpAsText();
  38
  39         function logConsole(msg)
  40         {
  41             var textNode = document.createTextNode(msg);
  42             document.getElementById("console").appendChild(textNode);
  43         }
  44
  45         var expectedRegionStyleRulesText =
  46             [
  47                 "@-webkit-region #region1 { div { margin-top: 10px; } }",
  48                 "@-webkit-region #region2 { div { margin-left: 5px; } }",
  49                 "@-webkit-region #region1 { p { color: red; } }",
  50                 "@-webkit-region #region1, #region2 { p > p { color: green; } }"
  51             ];
  52
  53         var actualRegionStyleRulesText = new Array();
  54         var cssRules = document.styleSheets[0].cssRules;
  55         for (var idx = 0; idx < cssRules.length; idx++) {
  56             var cssRule = cssRules.item(idx);
  57             if (cssRule.type == CSSRule.WEBKIT_REGION_RULE)
  58                 actualRegionStyleRulesText.push(cssRule.cssText);
  59         }
  60
  61         var pass = true;
  62         if (expectedRegionStyleRulesText.length != actualRegionStyleRulesText.length) {
  63             logConsole("FAIL: expected " + expectedRegionStyleRulesText.length + " region style rules, actual: " + actualRegionStyleRulesText.length);
  64             pass = false;
  65         }
  66         else {
  67             for (var idx = 0; idx < actualRegionStyleRulesText.length; idx++) {
  68                 if (expectedRegionStyleRulesText[idx].replace(/\s/g, "") != actualRegionStyleRulesText[idx].replace(/\s/g, "")) {
  69                     logConsole("FAIL: expected " + expectedRegionStyleRulesText[idx] + "found " + actualRegionStyleRulesText[idx]);
  70                     pass = false;
  71                 }
  72             }
  73         }
  74
  75         if (pass)
  76             logConsole("PASS");
  77         </script>
  78     </body>
  79 </html>