third_party/WebKit/LayoutTests/fast/backgrounds/background-repeat-computed-style.html

   1 <!DOCTYPE html>
   2 <style>
   3     .testDiv
   4     {
   5         background-image: url(resources/map.jpg);
   6         width:500px;
   7         height:500px;
   8         border: 10px solid black;
   9     }
  10
  11     .testDivNoRepeat
  12     {
  13         background-image: url(resources/map.jpg);
  14         background-repeat: no-repeat;
  15         width:500px;
  16         height:500px;
  17         border: 10px solid black;
  18     }
  19 </style>
  20 <script>
  21     if (window.testRunner)
  22         window.testRunner.dumpAsText();
  23 </script>
  24 <div id="case1" class="testDiv" style="background-repeat:repeat-x">This div should have a horizontal repeating background (background-repeat:repeat-x)</div>
  25 <div id="case2" class="testDiv" style="background-repeat:repeat-y">This div should have a vertical repeating background (background-repeat:repeat-y)</div>
  26 <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>
  27 <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>
  28 <div id="case5" class="testDiv" style="background-repeat-x:repeat; background-repeat-y:repeat">This div should have vertical and horizontal repeating background ()</div>
  29 <div id="case6" class="testDiv">This div should have vertical and horizontal repeating background (background-repeat-x:repeat; background-repeat-y:repeat)</div>
  30 <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>
  31 <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>
  32 <div id="case9" class="testDivNoRepeat" style="background-repeat:repeat">This div should have a vertical and horizontal repeating background (background-repeat: repeat;)</div>
  33 <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>
  34 <div id="case11" class="testDivNoRepeat" style="">This div should have no repeating background ()</div>
  35 <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>
  36 <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>
  37 <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>
  38 <div id="case15" class="testDivNoRepeat" style="background-repeat-x:10px;">This div should have no repeating background: invalid css (background-repeat-x:10px;)</div>
  39 <div id="case16" class="testDivNoRepeat" style="background-repeat:black;">This div should have no repeating background: invalid css (background-repeat:black;)</div>
  40 <div id="testresult" style="white-space: pre">Fail</div>
  41 <script>
  42     var expectations = {
  43         "case1": "repeat-x",
  44         "case2": "repeat-y",
  45         "case3": "repeat-x",
  46         "case4": "repeat-y",
  47         "case5": "repeat",
  48         "case6": "repeat",
  49         "case7": "repeat-x",
  50         "case8": "repeat-y",
  51         "case9": "repeat",
  52         "case10": "repeat",
  53         "case11": "no-repeat",
  54         "case12": "no-repeat",
  55     };
  56
  57     var failed = false;
  58     var log = "";
  59
  60     // Check element's style
  61     for (var caseId in expectations) {
  62         var testCase = document.getElementById(caseId);
  63         var style = window.getComputedStyle(testCase);
  64         var testData = expectations[caseId];
  65         var value = style.getPropertyValue("background-repeat");
  66         if (value !== testData) {
  67             log += "Expected [" +testData+ "] as background-repeat on [" + caseId + "] but got [" + value + "]\r\n";
  68         }
  69     }
  70
  71     document.getElementById("testresult").innerHTML = log ? log : "Passed";
  72 </script>
  73