| <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> |
