1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<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>
|
