Upstream version 7.36.149.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / LayoutTests / fast / backgrounds / background-repeat-computed-style.html
index 0e22475..f2cf7bc 100644 (file)
@@ -1,28 +1,73 @@
-<html>\r
-<head>\r
-    <title>Syntax for backgroundRepeat</title>\r
-    <style type="text/css">\r
-        #testDiv\r
-        {\r
-            background-image: url(resources/map.jpg);\r
-            width:500px;\r
-            height:500px;\r
-            border: 10px solid black;\r
-        }\r
-    </style>\r
-    <script>\r
-        if (window.testRunner)\r
-            window.testRunner.dumpAsText();\r
-    </script>\r
-</head>\r
-<body>\r
-    <div id="testDiv" style="background-repeat:repeat-x">This div should have a horizontal repeating background</div>\r
-    <div id="testresult">Fail</div>\r
-    <script type="text/javascript">\r
-        if(window.getComputedStyle(testDiv, "").getPropertyValue("background-repeat") == "repeat-x")\r
-        {\r
-            document.getElementById("testresult").innerHTML = "Pass";\r
-        }\r
-    </script>\r
-</body>\r
-</html>\r
+<!DOCTYPE html>
+<style>
+    .testDiv
+    {
+        background-image: url(resources/map.jpg);
+        width:500px;
+        height:500px;
+        border: 10px solid black;
+    }
+    
+    .testDivNoRepeat
+    {
+        background-image: url(resources/map.jpg);
+        background-repeat: no-repeat;
+        width:500px;
+        height:500px;
+        border: 10px solid black;
+    }
+</style>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText();
+</script>
+<div id="case1" class="testDiv" style="background-repeat:repeat-x">This div should have a horizontal repeating background (background-repeat:repeat-x)</div>
+<div id="case2" class="testDiv" style="background-repeat:repeat-y">This div should have a vertical repeating background (background-repeat:repeat-y)</div>
+<div id="case3" class="testDiv" style="background-repeat-y:no-repeat">This div should have a horizontal repeating background (background-repeat-y:no-repeat)</div>
+<div id="case4" class="testDiv" style="background-repeat-x:no-repeat">This div should have a vertical repeating background (background-repeat-x:no-repeat)</div>
+<div id="case5" class="testDiv" style="background-repeat-x:repeat; background-repeat-y:repeat">This div should have vertical and horizontal repeating background ()</div>
+<div id="case6" class="testDiv">This div should have vertical and horizontal repeating background (background-repeat-x:repeat; background-repeat-y:repeat)</div>
+<div id="case7" class="testDivNoRepeat" style="background-repeat-x:repeat">This div should have a horizontal repeating background (background-repeat: no-repeat; background-repeat-x:repeat)</div>
+<div id="case8" class="testDivNoRepeat" style="background-repeat-y:repeat">This div should have a vertical repeating background (background-repeat: no-repeat; background-repeat-y:repeat)</div>
+<div id="case9" class="testDivNoRepeat" style="background-repeat:repeat">This div should have a vertical and horizontal repeating background (background-repeat: repeat;)</div>
+<div id="case10" class="testDivNoRepeat" style="background-repeat-x:repeat; background-repeat-y:repeat">This div should have vertical and horizontal repeating background (background-repeat-x:repeat; background-repeat-y:repeat)</div>
+<div id="case11" class="testDivNoRepeat" style="">This div should have no repeating background ()</div>
+<div id="case12" class="testDivNoRepeat" style="background-repeat-x:no-repeat; background-repeat-y:no-repeat">This div should have no repeating background (background-repeat-x:no-repeat; background-repeat-y:no-repeat)</div>
+<div id="case13" class="testDivNoRepeat" style="background-repeat-x:repeat-y; background-repeat-y:repeat-x">This div should have no repeating background: invalid css (background-repeat-x:repeat-y; background-repeat-y:repeat-x)</div>
+<div id="case14" class="testDivNoRepeat" style="background-repeat-x:repeat-x; background-repeat-y:repeat-y">This div should have no repeating background: invalid css (background-repeat-x:repeat-x; background-repeat-y:repeat-y)</div>
+<div id="case15" class="testDivNoRepeat" style="background-repeat-x:10px;">This div should have no repeating background: invalid css (background-repeat-x:10px;)</div>
+<div id="case16" class="testDivNoRepeat" style="background-repeat:black;">This div should have no repeating background: invalid css (background-repeat:black;)</div>
+<div id="testresult" style="white-space: pre">Fail</div>
+<script>
+    var expectations = {
+        "case1": "repeat-x",
+        "case2": "repeat-y",
+        "case3": "repeat-x",
+        "case4": "repeat-y",
+        "case5": "repeat",
+        "case6": "repeat",
+        "case7": "repeat-x",
+        "case8": "repeat-y",
+        "case9": "repeat",
+        "case10": "repeat",
+        "case11": "no-repeat",
+        "case12": "no-repeat",
+    };
+
+    var failed = false;
+    var log = "";
+
+    // Check element's style
+    for (var caseId in expectations) {
+        var testCase = document.getElementById(caseId);
+        var style = window.getComputedStyle(testCase);
+        var testData = expectations[caseId];
+        var value = style.getPropertyValue("background-repeat");
+        if (value !== testData) {
+            log += "Expected [" +testData+ "] as background-repeat on [" + caseId + "] but got [" + value + "]\r\n";
+        } 
+    }
+
+    document.getElementById("testresult").innerHTML = log ? log : "Passed";
+</script>
+