third_party/WebKit/LayoutTests/css3/supports-cssom.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <meta charset=utf8>
   5 <script src="../resources/js-test.js"></script>
   6 <style>
   7     @supports (width: 0) {
   8         s { width: 0; }
   9         @supports (width: 1) {
  10             s { color: #000; }
  11             @import url("../fast/cssom/resources/import.css");
  12             @charset "UTF-8";
  13             @namespace "";
  14         }
  15     }
  16
  17     @supports  ((  (     padding: 0)    and (display: none)) or (display: rainbow))  {
  18         dfn { width:0; }
  19
  20         @supports (width: 0) {
  21             br { height:0; }
  22         }
  23
  24         /* Rules with syntax errors should be ignored. */
  25         @supports (display: none);
  26         @supports (display: none)) ;
  27         @supports;
  28         @supports ;
  29         @supports (display: none)) {}
  30         @supports (display: )) {}
  31         @supports ((display: none) and {}
  32         @supports (display: none) {}
  33         );
  34         @supports ((display: none) and ;
  35         @supports (display: none) {}
  36         );
  37
  38         ol { display:none; }
  39     }
  40
  41     @media all {
  42         @supports  ( padding: 0) {
  43             @page :left { top: 0 }
  44         }
  45     }
  46
  47     @supports (border: black) and (padding: 0) and (width: 0) {
  48         dfn { width:0; }
  49     }
  50 </style>
  51 </head>
  52 <body>
  53 <script>
  54     description("Test CSSSupportRule.");
  55
  56
  57     shouldBeDefined("CSSRule.SUPPORTS_RULE");
  58
  59     evalAndLog("rules = document.styleSheets[1].cssRules");
  60     shouldEvaluateTo("rules.length", 4);
  61     shouldBeType("rules[0]", "CSSSupportsRule");
  62     shouldBe("rules[0].type", "CSSRule.SUPPORTS_RULE");
  63     shouldEvaluateTo("rules[0].cssRules.length", 2);
  64     shouldBe("rules[0].cssRules[0].type", "CSSRule.STYLE_RULE");
  65     shouldBeType("rules[0].cssRules[1]", "CSSSupportsRule");
  66     shouldBe("rules[0].cssRules[1].type", "CSSRule.SUPPORTS_RULE");
  67     shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1);
  68     shouldBe("rules[0].cssRules[1].cssRules[0].type", "CSSRule.STYLE_RULE");
  69     shouldBeEqualToString("rules[0].conditionText", "(width: 0)");
  70     shouldBeEqualToString("rules[0].cssText",
  71                           "@supports (width: 0) {\n" +
  72                           "  s { width: 0px; }\n" +
  73                           "  @supports (width: 1) {\n" +
  74                           "  s { color: rgb(0, 0, 0); }\n" +
  75                           "}\n" +
  76                           "}");
  77
  78     debug("\nMissing argument exceptions.");
  79     shouldThrow("rules[0].insertRule()");
  80     shouldThrow("rules[0].insertRule('@media all {}')");
  81     shouldThrow("rules[0].deleteRule()");
  82
  83     debug("\nInserting and deleting rules.");
  84     evalAndLog("rules[0].insertRule('@media all { #s { width: 0px; } }', 2)");
  85     shouldEvaluateTo("rules[0].cssRules.length", 3);
  86     shouldBe("rules[0].cssRules[2].type", "CSSRule.MEDIA_RULE");
  87     evalAndLog("rules[0].deleteRule(2)");
  88     shouldEvaluateTo("rules[0].cssRules.length", 2);
  89
  90     evalAndLog("rules[0].cssRules[1].insertRule('@supports (display: rainbow) {}', 1)");
  91     shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 2);
  92     shouldBeType("rules[0].cssRules[1].cssRules[1]", "CSSSupportsRule");
  93     shouldBe("rules[0].cssRules[1].cssRules[1].type", "CSSRule.SUPPORTS_RULE");
  94     evalAndLog("rules[0].cssRules[1].deleteRule(1)");
  95     shouldEvaluateTo("rules[0].cssRules.length", 2);
  96
  97     debug("\n@charset, @namespace, @import rules are not allowed inside @supports.")
  98     shouldThrow("rules[0].insertRule('@charset \"UTF-8\"', 2)", '"SyntaxError: Failed to execute \'insertRule\' on \'CSSSupportsRule\': the rule \'@charset \\"UTF-8\\"\' is invalid and cannot be parsed."');
  99     shouldThrow("rules[0].insertRule('@namespace \"\"', 2)", '"HierarchyRequestError: Failed to execute \'insertRule\' on \'CSSSupportsRule\': \'@namespace\' rules cannot be inserted inside a group rule."');
 100     shouldThrow("rules[0].insertRule('@import url(\"../fast/cssom/resources/import.css\")', 2)", '"HierarchyRequestError: Failed to execute \'insertRule\' on \'CSSSupportsRule\': \'@import\' rules cannot be inserted inside a group rule."');
 101
 102
 103     debug("\nWhitespace and formatting should be preserved within the condition, whitespace outside the condition should be trimmed.");
 104     shouldBeEqualToString("rules[1].conditionText", "(( ( padding: 0) and (display: none)) or (display: rainbow))");
 105
 106
 107     debug("\n@supports rule nested inside a media rule.");
 108     shouldBe("rules[2].type", "CSSRule.MEDIA_RULE");
 109     shouldEvaluateTo("rules[2].cssRules.length", 1);
 110     shouldBeType("rules[2].cssRules[0]", "CSSSupportsRule");
 111     shouldBe("rules[2].cssRules[0].type", "CSSRule.SUPPORTS_RULE");
 112     shouldBeEqualToString("rules[2].cssRules[0].conditionText", "( padding: 0)");
 113     shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1);
 114     shouldBe("rules[2].cssRules[0].cssRules[0].type", "CSSRule.PAGE_RULE");
 115     shouldBeEqualToString("rules[2].cssText",
 116                           "@media all { \n" +
 117                           "  @supports ( padding: 0) {\n" +
 118                           "  @page :left { top: 0px; }\n" +
 119                           "}\n" +
 120                           "}");
 121
 122
 123     debug("\nNo extra parens should be added to the conditionText.");
 124     shouldBeEqualToString("rules[3].conditionText", "(border: black) and (padding: 0) and (width: 0)");
 125
 126
 127     debug("\nDeleting a top-level rule should work correctly.");
 128     evalAndLog("document.styleSheets[1].deleteRule(3)");
 129     shouldEvaluateTo("rules.length", 3);
 130     shouldBe("rules[0].type", "CSSRule.SUPPORTS_RULE");
 131     shouldEvaluateTo("rules[0].cssRules.length", 2);
 132     shouldBe("rules[0].cssRules[0].type", "CSSRule.STYLE_RULE");
 133     shouldBe("rules[0].cssRules[1].type", "CSSRule.SUPPORTS_RULE");
 134     shouldEvaluateTo("rules[0].cssRules[1].cssRules.length", 1);
 135     shouldBe("rules[0].cssRules[1].cssRules[0].type", "CSSRule.STYLE_RULE");
 136
 137 </script>
 138 </body>
 139 </html>
 140