Chromium Code Reviews| 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 |