wpt / css / css-backgrounds / border-image-repeat_repeatnegx_none_50px.html

Status: PASS | Duration: 57ms | Subtests: 1/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-backgrounds/border-image-repeat_repeatnegx_none_50px.html

<html>
<head>
    <title> CSS Background Border Test: "border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px" on test div</title>
    <link rel="author" title="Intel" href="http://www.intel.com" />
    <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" />
    <meta name="assert" content="Check if 'border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px' work on div" />
    <script type="text/javascript" src="/resources/testharness.js"></script>
    <script type="text/javascript" src="/resources/testharnessreport.js"></script>
    <style>
        #test{
            height: 30px;
            width: 80px;
            padding: 5px;
            border: 5px solid black;
            margin: 5px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="log"></div>
    <div id="test"></div>
    <script type="text/javascript">
        var div = document.querySelector("#test");
        var t = async_test();
        t.step(function () {
            div.style[headProp("border-image-repeat")] = "repeat-x";
            div.style[headProp("height")] = "200px";
            div.style[headProp("width")] = "200px";
            div.style[headProp("border-image-source")] = "none";
            div.style[headProp("border-image-width")] = "50px";
            var propvalue = GetCurrentStyle("border-image-repeat");
            var prop = propvalue.indexOf("repeat-x")!=-1;
            assert_false(prop, "The element border-image-repeat can be repeat-x")
            var height = GetCurrentStyle("height");
            prop = height.indexOf("200px")!=-1;
            assert_true(prop, "The element height should be 200px");
            var width = GetCurrentStyle("width");
            prop = width.indexOf("200px")!=-1;
            assert_true(prop, "The element width should be 200px");
            var borderImageSource = GetCurrentStyle("border-image-source");
            prop = borderImageSource.indexOf("none")!=-1;
            assert_true(prop, "The element border-image-source should be none");
            var borderImageWidth = GetCurrentStyle("border-image-width");
            prop = borderImageWidth.indexOf("50px")!=-1;
            assert_true(prop, "The element border-image-width should be 50px");
        });
        t.done();

		function GetCurrentStyle(prop) {
        try
        {
            var div = document.querySelector("#test");   //object
            prop = prop.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-","") });
            var headprop = headProp(prop);
            var fixprop = getComputedStyle(div)[headprop];
            if (!fixprop)
            {return "";}
            return fixprop;
        }
        catch(e)
        {
                return "";
        }
}

//
function headProp(s) {
    var div = document.querySelector("#test");
    if (s in div.style) {
        return s;
    }
    s = s.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-", "") });
    if (s in div.style) {
        return s;
    }
    s = s[0].toUpperCase() + s.slice(1);
    var prefixes = ["ms", "Moz", "moz", "webkit", "O"];
    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + s) in div.style) {
            return prefixes[i] + s;
        }
    }
    return s;
}

    </script>
</body>