third_party/WebKit/LayoutTests/css3/device-adapt/viewport-cssom-01.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>@viewport CSSOM - set descriptor values</title>
   5     <script src="../../resources/testharness.js"></script>
   6     <script src="../../resources/testharnessreport.js"></script>
   7     <script>
   8         if (window.testRunner) {
   9             internals.settings.setViewportEnabled(true);
  10         }
  11     </script>
  12     <style>
  13         @viewport {
  14             width: 200px;
  15         }
  16     </style>
  17 </head>
  18 <body>
  19     <div id="log"></div>
  20     <script>
  21         test(function(){
  22             assert_equals(document.styleSheets[0].cssRules.length, 1, "Rule is found");
  23             assert_equals(document.styleSheets[0].cssRules[0].type, CSSRule.VIEWPORT_RULE, "Rule is of type @viewport");
  24         }, "@viewport rule exists");
  25
  26         var rule = document.styleSheets[0].cssRules[0];
  27
  28         test(function(){
  29             rule.style.width = "400px";
  30             assert_equals(rule.style.minWidth, "400px", "min-width is now 400px");
  31         }, "Setting width shorthand sets min-width");
  32
  33         test(function(){
  34             rule.style.height = "900px";
  35             assert_equals(rule.style.maxHeight, "900px", "max-height is now 900px");
  36         }, "Setting height shorthand sets max-height");
  37
  38         test(function(){
  39             rule.style.cssText = "width: 300px; height: 700px";
  40             assert_equals(rule.style.minWidth, "300px", "min-width is now 300px");
  41             assert_equals(rule.style.maxHeight, "700px", "max-height is now 700px");
  42         }, "Setting cssText of ViewportRule.style parses width/height as shorthands");
  43
  44         test(function(){
  45             document.styleSheets[0].insertRule("@viewport { width: 600px; height: 200px }", 0);
  46             rule = document.styleSheets[0].cssRules[0];
  47             assert_equals(rule.style.minWidth, "600px", "min-width is now 600px");
  48             assert_equals(rule.style.maxHeight, "200px", "max-height is now 200px");
  49         }, "Inserting @viewport rule parses width/height as shorthands");
  50     </script>
  51 </body>
  52 </html>