OLD | NEW |
---|---|
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Syntax for backgroundRepeat</title> | 3 <title>Syntax for backgroundRepeat</title> |
ojan
2014/04/14 17:17:59
Typically we only include the html, head, title an
Dmitry Zvorygin
2014/04/15 11:30:41
Done.
| |
4 <style type="text/css"> | 4 <style type="text/css"> |
ojan
2014/04/14 17:17:59
No need to include the type attribute.
Dmitry Zvorygin
2014/04/15 11:30:41
Done.
| |
5 #testDiv | 5 .testDiv |
6 { | 6 { |
7 background-image: url(resources/map.jpg); | 7 background-image: url(resources/map.jpg); |
8 width:500px; | 8 width:500px; |
9 height:500px; | 9 height:500px; |
10 border: 10px solid black; | 10 border: 10px solid black; |
11 } | 11 } |
12 | |
13 .testDivNoRepeat | |
14 { | |
15 background-image: url(resources/map.jpg); | |
16 background-repeat: no-repeat; | |
17 width:500px; | |
18 height:500px; | |
19 border: 10px solid black; | |
20 } | |
12 </style> | 21 </style> |
13 <script> | 22 <script> |
14 if (window.testRunner) | 23 if (window.testRunner) |
15 window.testRunner.dumpAsText(); | 24 window.testRunner.dumpAsText(); |
16 </script> | 25 </script> |
17 </head> | 26 </head> |
18 <body> | 27 <body> |
19 <div id="testDiv" style="background-repeat:repeat-x">This div should have a horizontal repeating background</div> | 28 <div id="case1" class="testDiv" style="background-repeat:repeat-x">This div should have a horizontal repeating background (background-repeat:repeat-x)</div> |
20 <div id="testresult">Fail</div> | 29 <div id="case2" class="testDiv" style="background-repeat:repeat-y">This div should have a vertical repeating background (background-repeat:repeat-y)</div> |
30 <div id="case3" class="testDiv" style="background-repeat-y:no-repeat">This d iv should have a horizontal repeating background (background-repeat-y:no-repeat) </div> | |
31 <div id="case4" class="testDiv" style="background-repeat-x:no-repeat">This d iv should have a vertical repeating background (background-repeat-x:no-repeat)</ div> | |
32 <div id="case5" class="testDiv" style="background-repeat-x:repeat; backgroun d-repeat-y:repeat">This div should have vertical and horizontal repeating backgr ound ()</div> | |
33 <div id="case6" class="testDiv">This div should have vertical and horizontal repeating background (background-repeat-x:repeat; background-repeat-y:repeat)</ div> | |
34 <div id="case7" class="testDivNoRepeat" style="background-repeat-x:repeat">T his div should have a horizontal repeating background (background-repeat: no-rep eat; background-repeat-x:repeat)</div> | |
35 <div id="case8" class="testDivNoRepeat" style="background-repeat-y:repeat">T his div should have a vertical repeating background (background-repeat: no-repea t; background-repeat-y:repeat)</div> | |
36 <div id="case9" class="testDivNoRepeat" style="background-repeat:repeat">Thi s div should have a vertical and horizontal repeating background (background-rep eat: repeat;)</div> | |
37 <div id="case10" class="testDivNoRepeat" style="background-repeat-x:repeat; background-repeat-y:repeat">This div should have vertical and horizontal repeati ng background (background-repeat-x:repeat; background-repeat-y:repeat)</div> | |
38 <div id="case11" class="testDivNoRepeat" style="">This div should have no re peating background ()</div> | |
39 <div id="case12" class="testDiv" style="background-repeat-x:no-repeat; backg round-repeat-y:no-repeat">This div should have no repeating background (backgrou nd-repeat-x:no-repeat; background-repeat-y:no-repeat)</div> | |
ojan
2014/04/14 17:17:59
Can you also add a test-case for the values of bac
Dmitry Zvorygin
2014/04/15 11:30:41
Done.
| |
40 <div id="testresult" style="white-space: pre">Fail</div> | |
21 <script type="text/javascript"> | 41 <script type="text/javascript"> |
ojan
2014/04/14 17:17:59
ditto.
Dmitry Zvorygin
2014/04/15 11:30:41
Done.
| |
22 if(window.getComputedStyle(testDiv, "").getPropertyValue("background-rep eat") == "repeat-x") | 42 var expectations = { |
23 { | 43 "case1": "repeat-x", |
24 document.getElementById("testresult").innerHTML = "Pass"; | 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); | |
ojan
2014/04/14 17:17:59
Indentation is off (should be 4 spaces)
Dmitry Zvorygin
2014/04/15 11:30:41
Done.
| |
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 [" + caseI d + "] but got [" + value + "]\r\n"; | |
68 } | |
25 } | 69 } |
70 | |
71 document.getElementById("testresult").innerHTML = log ? log : "Passed"; | |
26 </script> | 72 </script> |
27 </body> | 73 </body> |
28 </html> | 74 </html> |
OLD | NEW |