border-image-repeat_repeatnegx_none_50px.html (3433B)
1 <html> 2 <head> 3 <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> 4 <link rel="author" title="Intel" href="http://www.intel.com" /> 5 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" /> 6 <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" /> 7 <script type="text/javascript" src="/resources/testharness.js"></script> 8 <script type="text/javascript" src="/resources/testharnessreport.js"></script> 9 <style> 10 #test{ 11 height: 30px; 12 width: 80px; 13 padding: 5px; 14 border: 5px solid black; 15 margin: 5px; 16 background: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="log"></div> 22 <div id="test"></div> 23 <script type="text/javascript"> 24 var div = document.querySelector("#test"); 25 var t = async_test(); 26 t.step(function () { 27 div.style[headProp("border-image-repeat")] = "repeat-x"; 28 div.style[headProp("height")] = "200px"; 29 div.style[headProp("width")] = "200px"; 30 div.style[headProp("border-image-source")] = "none"; 31 div.style[headProp("border-image-width")] = "50px"; 32 var propvalue = GetCurrentStyle("border-image-repeat"); 33 var prop = propvalue.indexOf("repeat-x")!=-1; 34 assert_false(prop, "The element border-image-repeat can be repeat-x") 35 var height = GetCurrentStyle("height"); 36 prop = height.indexOf("200px")!=-1; 37 assert_true(prop, "The element height should be 200px"); 38 var width = GetCurrentStyle("width"); 39 prop = width.indexOf("200px")!=-1; 40 assert_true(prop, "The element width should be 200px"); 41 var borderImageSource = GetCurrentStyle("border-image-source"); 42 prop = borderImageSource.indexOf("none")!=-1; 43 assert_true(prop, "The element border-image-source should be none"); 44 var borderImageWidth = GetCurrentStyle("border-image-width"); 45 prop = borderImageWidth.indexOf("50px")!=-1; 46 assert_true(prop, "The element border-image-width should be 50px"); 47 }); 48 t.done(); 49 50 function GetCurrentStyle(prop) { 51 try 52 { 53 var div = document.querySelector("#test"); //object 54 prop = prop.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-","") }); 55 var headprop = headProp(prop); 56 var fixprop = getComputedStyle(div)[headprop]; 57 if (!fixprop) 58 {return "";} 59 return fixprop; 60 } 61 catch(e) 62 { 63 return ""; 64 } 65 } 66 67 // 68 function headProp(s) { 69 var div = document.querySelector("#test"); 70 if (s in div.style) { 71 return s; 72 } 73 s = s.replace(/([-][a-z])/g, function ($1) { return $1.toUpperCase().replace("-", "") }); 74 if (s in div.style) { 75 return s; 76 } 77 s = s[0].toUpperCase() + s.slice(1); 78 var prefixes = ["ms", "Moz", "moz", "webkit", "O"]; 79 for (var i = 0; i < prefixes.length; i++) { 80 if ((prefixes[i] + s) in div.style) { 81 return prefixes[i] + s; 82 } 83 } 84 return s; 85 } 86 87 </script> 88 </body>