| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>@viewport CSSOM - set descriptor values</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| if (window.testRunner) { |
| internals.settings.setViewportEnabled(true); |
| } |
| </script> |
| <style> |
| @viewport { |
| width: 200px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| test(function(){ |
| assert_equals(document.styleSheets[0].cssRules.length, 1, "Rule is found"); |
| assert_equals(document.styleSheets[0].cssRules[0].type, CSSRule.VIEWPORT_RULE, "Rule is of type @viewport"); |
| }, "@viewport rule exists"); |
| |
| var rule = document.styleSheets[0].cssRules[0]; |
| |
| test(function(){ |
| rule.style.width = "400px"; |
| assert_equals(rule.style.minWidth, "400px", "min-width is now 400px"); |
| }, "Setting width shorthand sets min-width"); |
| |
| test(function(){ |
| rule.style.height = "900px"; |
| assert_equals(rule.style.maxHeight, "900px", "max-height is now 900px"); |
| }, "Setting height shorthand sets max-height"); |
| |
| test(function(){ |
| rule.style.cssText = "width: 300px; height: 700px"; |
| assert_equals(rule.style.minWidth, "300px", "min-width is now 300px"); |
| assert_equals(rule.style.maxHeight, "700px", "max-height is now 700px"); |
| }, "Setting cssText of ViewportRule.style parses width/height as shorthands"); |
| |
| test(function(){ |
| document.styleSheets[0].insertRule("@viewport { width: 600px; height: 200px }", 0); |
| rule = document.styleSheets[0].cssRules[0]; |
| assert_equals(rule.style.minWidth, "600px", "min-width is now 600px"); |
| assert_equals(rule.style.maxHeight, "200px", "max-height is now 200px"); |
| }, "Inserting @viewport rule parses width/height as shorthands"); |
| </script> |
| </body> |
| </html> |
