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

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5   @-webkit-region #region1 {
   6       #p1 { background-color: green; }
   7       #p2 { background-color: lime; }
   8   }
   9   @-webkit-region #region2 {
  10      p { background-color: blue; }
  11   }
  12 </style>
  13 <script src="../../../resources/js-test.js"></script>
  14 </head>
  15 <body>
  16 <script>
  17
  18 description("This tests the WebKitCSSRegionRule interface.");
  19
  20 if (window.WebKitCSSRegionRule)
  21     testPassed("WebKitCSSRegionRule exists on Window object");
  22 else
  23     testFailed("WebKitCSSRegionRule does not exist on Window object");
  24
  25 if (window.CSSRule.WEBKIT_REGION_RULE)
  26     testPassed("WEBKIT_REGION_RULE exists on Window.CSSRule object");
  27 else
  28     testFailed("WEBKIT_REGION_RULE does not exist on Window.CSSRule object");
  29 shouldBe("window.CSSRule.WEBKIT_REGION_RULE", "16");
  30
  31 var regionRule1 = document.styleSheets.item(0).cssRules.item(0);
  32 shouldBe("regionRule1.type", "window.CSSRule.WEBKIT_REGION_RULE");
  33 var regionRule1CSSRules = regionRule1.cssRules;
  34 shouldBe("regionRule1CSSRules.length", "2");
  35 shouldBe("regionRule1CSSRules.item(0).type", "window.CSSRule.STYLE_RULE");
  36 shouldBe("regionRule1CSSRules.item(0).cssText", "'#p1 { background-color: green; }'");
  37 shouldBe("regionRule1CSSRules.item(1).cssText", "'#p2 { background-color: lime; }'");
  38
  39 var regionRule2 = document.styleSheets.item(0).cssRules.item(1);
  40 shouldBe("regionRule2.type", "window.CSSRule.WEBKIT_REGION_RULE");
  41 var regionRule2CSSRules = regionRule2.cssRules;
  42 shouldBe("regionRule2CSSRules.length", "1");
  43 shouldBe("regionRule2CSSRules.item(0).type", "window.CSSRule.STYLE_RULE");
  44 shouldBe("regionRule2CSSRules.item(0).cssText", "'p { background-color: blue; }'");
  45
  46 </script>
  47 </body>
  48 </html>