| OLD | NEW | 
 | (Empty) | 
|   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.le
    ngth) { |  | 
|  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, "") != actu
    alRegionStyleRulesText[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> |  | 
| OLD | NEW |