background-repeat-computed-style.html

<!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)
        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">This div should have vertical and horizontal repeating background (background-repeat-x:repeat; background-repeat-y:repeat)</div>
<div id="case4" class="testDivNoRepeat" style="background-repeat:repeat">This div should have a vertical and horizontal repeating background (background-repeat: repeat;)</div>
<div id="case5" class="testDivNoRepeat" style="">This div should have no repeating background ()</div>
<div id="case6" 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",
        "case4": "repeat",
        "case5": "no-repeat",
        "case6": "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>
chromium/third_party/blink/web_tests/fast/backgrounds/background-repeat-computed-style.html
