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
|
<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
<style>
#base {
transform: rotate(60deg);
transform-origin:20% 40%;
transform-style: preserve-3d;
}
#inherit {
transform: inherit;
transform-origin: inherit;
transform-style: inherit;
}
#initial {
transform: initial;
transform-origin: initial;
transform-style: initial;
}
</style>
</head>
<body>
<div style="width:500px;height:500px" id="base">
<div id="inherit"></div>
<div id="initial"></div>
</div>
<script>
description("Test that inherit and initial works on unprefixed transforms.")
var testContainer = document.createElement("div");
document.body.appendChild(testContainer);
e = document.getElementById('inherit');
computedStyle = window.getComputedStyle(e, null);
debug("Testing inherit.");
shouldBe("computedStyle.transform", "'matrix(0.5, 0.866025, -0.866025, 0.5, 0, 0)'");
shouldBe("computedStyle.webkitTransform", "'matrix(0.5, 0.866025, -0.866025, 0.5, 0, 0)'");
shouldBe("computedStyle.transformOrigin", "'100px 0px'");
shouldBe("computedStyle.webkitTransformOrigin", "'100px 0px'");
shouldBe("computedStyle.transformStyle", "'preserve-3d'");
shouldBe("computedStyle.webkitTransformStyle", "'preserve-3d'");
e = document.getElementById('initial');
computedStyle = window.getComputedStyle(e, null);
debug("Testing initial.");
shouldBe("computedStyle.transform", "'none'");
shouldBe("computedStyle.webkitTransform", "'none'");
shouldBe("computedStyle.transformOrigin", "'250px 0px'");
shouldBe("computedStyle.webkitTransformOrigin", "'250px 0px'");
shouldBe("computedStyle.transformStyle", "'flat'");
shouldBe("computedStyle.webkitTransformStyle", "'flat'");
document.body.removeChild(testContainer);
</script>
</body>
</html>
|
