Create tests for the style element

Signed-off-by: xiaojunwu <xiaojunx.a.wu@intel.com>
web-platform-tests · Feb 11, 2014 · 4de0f0a · 4de0f0a
1 parent b42368e
commit 4de0f0a
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 0 deletions.
diff --git a/html/semantics/document-metadata/styling/LinkStyle.html b/html/semantics/document-metadata/styling/LinkStyle.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>HTML Test: Styling</title>
+    <link rel="author" title="Intel" href="http://www.intel.com/">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#styling">
+    <link id="style1" rel="text" title="Intel" href="./support/unmatch.css">
+    <link id="style2" rel="alternate stylesheet" type="text/css" title="" href="./support/emptytitle.css">
+    <link id="style3" rel="alternate stylesheet" type="text/css" href="./support/notitle.css">
+    <link id="style5" rel="stylesheet" type="text/css" href="./support/normal.css">
+    <link id="style6" rel="alternate stylesheet" type="text/css" href="./support/normal.css" title="./support/alternate.css">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style id="style4" type="text/html">
+      #test {
+        height: 100px;
+        width: 100px;
+      }
+    </style>
+    <style id="style7" type="text/css" media="all" title="./support/alternate.css">
+      #test {
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test" style="display:none">STYLING TEST</div>
+
+    <script>
+      test(function() {
+        var style = null,
+            i;
+        for (i = 1; i < 5; i++) {
+          style = document.getElementById("style" + i);
+          assert_equals(style.sheet, null, "The sheet attribute of style" + i + " should be null.");
+          assert_false(style.disabled, "The disabled attribute of style" + i + " should be false.");
+        }
+      }, "The LinkStyle interface's sheet attribute must return null; the disabled attribute must be false");
+
+      test(function() {
+        var style = document.createElement("style"),
+            link = document.createElement("link");
+        assert_equals(style.sheet, null, "The sheet attribute of the style element not in a document should be null.");
+        assert_equals(link.sheet, null, "The sheet attribute of the link element not in a document should be null.");
+      }, "The LinkStyle interface's sheet attribute must return null if the corresponding element is not in a Document");
+
+      test(function() {
+        var style = null,
+            i;
+        for (i = 5; i < 8; i++) {
+          style = document.getElementById("style" + i);
+          assert_true(style.sheet instanceof StyleSheet, "The sheet attribute of style" + i + " should be a StyleSheet object.");
+          assert_equals(style.disabled, style.sheet.disabled, "The disabled attribute of style" + i + " should equal to the same attribute of StyleSheet.");
+        }
+      }, "The LinkStyle interface's sheet attribute must return StyleSheet object; the disabled attribute must be same as the StyleSheet's disabled attribute");
+
+      test(function() {
+        assert_equals(document.getElementById("style2").title, "", "The title attribute of style2 is incorrect.");
+        assert_equals(document.getElementById("style5").title, "", "The title attribute of style5 is incorrect.");
+        assert_equals(document.getElementById("style6").title, "./support/alternate.css", "The title attribute of style6 is incorrect.");
+        assert_equals(document.getElementById("style7").title, "./support/alternate.css", "The title attribute of style7 is incorrect.");
+      }, "The title must be the same as the value of the element's title content attribute");
+
+      test(function() {
+        assert_equals(document.getElementById("style5").media, "", "The media attribute of style5 is incorrect.");
+        assert_equals(document.getElementById("style7").media, "all", "The media attribute of style7 is incorrect.");
+      }, "The media must be the same as the value of the element's media content attribute, or the empty string if it is omitted");
+    </script>
+  </body>
+</html>
diff --git a/html/semantics/document-metadata/styling/support/alternate.css b/html/semantics/document-metadata/styling/support/alternate.css
@@ -0,0 +1,7 @@
+#test {
+  color: yellow;
+  background-color: blue;
+  width: 100px;
+  height: 50px;
+  font-size: .5em;
+}
diff --git a/html/semantics/document-metadata/styling/support/emptytitle.css b/html/semantics/document-metadata/styling/support/emptytitle.css
@@ -0,0 +1,4 @@
+#test {
+  width: 100px;
+  height: 100px;
+}
diff --git a/html/semantics/document-metadata/styling/support/normal.css b/html/semantics/document-metadata/styling/support/normal.css
@@ -0,0 +1,5 @@
+#test {
+  width: 100px;
+  height: 50px;
+  font-size: 10px;
+}
diff --git a/html/semantics/document-metadata/styling/support/notitle.css b/html/semantics/document-metadata/styling/support/notitle.css
@@ -0,0 +1,4 @@
+#test {
+  width: 100px;
+  height: 100px;
+}
diff --git a/html/semantics/document-metadata/styling/support/unmatch.css b/html/semantics/document-metadata/styling/support/unmatch.css
@@ -0,0 +1,4 @@
+#test {
+  width: 100px;
+  height: 100px;
+}
diff --git a/html/semantics/document-metadata/the-style-element/style_disabled.html b/html/semantics/document-metadata/the-style-element/style_disabled.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>HTML Test: The style should not be applied if it is disabled</title>
+    <link rel="author" title="Intel" href="http://www.intel.com/">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#the-style-element">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      #test {
+        width: 100px;
+      }
+    </style>
+    <style id="style">
+      #test {
+        width: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test"></div>
+    <script>
+      test(function() {
+        var testElement = document.getElementById("test");
+        var style = document.getElementById("style");
+        var width1, width2;
+
+        width1 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width1, "50px", "The style should be applied.");
+
+        style.disabled = true;
+        width2 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width2, "100px", "The style should not be applied.");
+      }, "The style is not applied when it is disabled");
+    </script>
+  </body>
+</html>
diff --git a/html/semantics/document-metadata/the-style-element/style_events.html b/html/semantics/document-metadata/the-style-element/style_events.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>HTML Test: The style events</title>
+    <link rel="author" title="Intel" href="http://www.intel.com/">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#the-style-element">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script>
+      var tLoad = async_test("If the style is loaded successfully, the 'load' event must be fired");
+      var tError = async_test("If the style is loaded unsuccessfully, the 'error' event must be fired");
+
+      function onstyleload(e) {
+        tLoad.done();
+      }
+
+      function onstyleerror(e) {
+        tError.done();
+      }
+    </script>
+    <style onload="onstyleload()">
+      #test {
+        height: 100px;
+        width: 100px;
+      }
+    </style>
+    <style onerror="onstyleerror()">
+      @import url(nonexistent.css);
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test"></div>
+  </body>
+</html>
diff --git a/html/semantics/document-metadata/the-style-element/style_media.html b/html/semantics/document-metadata/the-style-element/style_media.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>HTML Test: The style information must be applied to the environment specified by the media attribute</title>
+    <link rel="author" title="Intel" href="http://www.intel.com/">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#attr-style-media">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#the-style-element">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      #test {
+        width: 100px;
+      }
+    </style>
+    <style id="style">
+      #test {
+        width: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test"></div>
+    <script>
+      test(function() {
+        var testElement = document.getElementById("test");
+        var style = document.getElementById("style");
+        var width1, width2;
+
+        width1 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width1, "50px", "The style should be applied.");
+
+        style.media = "print";
+        width2 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width2, "100px", "The style should not be applied.");
+      }, "The style information must be applied to the environment specified by the media attribute");
+    </script>
+  </body>
+</html>
diff --git a/html/semantics/document-metadata/the-style-element/style_scoped.html b/html/semantics/document-metadata/the-style-element/style_scoped.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>HTML Test: The scoped attribute must apply the style information only to its parent element</title>
+    <link rel="author" title="Intel" href="http://www.intel.com/">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#attr-style-scoped">
+    <link rel="help" href="http://www.w3.org/html/wg/drafts/html/CR/document-metadata.html#the-style-element">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      #test {
+        width: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test"></div>
+    <div>
+      <style id="style">
+        #test {
+          width: 100px;
+        }
+      </style>
+    <div>
+    <script>
+      test(function() {
+        var testElement = document.getElementById("test");
+        var style = document.getElementById("style");
+        var width1, width2;
+
+        width1 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width1, "100px", "The style 'width' should be applied.");
+
+        style.scoped = true;
+        width2 = window.getComputedStyle(testElement, false)["width"];
+        assert_equals(width2, "50px", "The width should not be applied.");
+      }, "The scoped attribute is present, the style information must be applied only to its parent element");
+    </script>
+  </body>
+</html>