1 <!DOCTYPE html>
2 <html><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 href="http://www.intel.com" rel="author" title="Intel">
5 <link href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
6 <meta content="Check if 'border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px' work on div" name="assert">
7 <script src="/resources/testharness.js" type="text/javascript"></script>
8 <script src="/resources/testharnessreport.js" type="text/javascript"></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(document.title, { timeout: 500 });
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
89 </body></html>