computed-style-origin.html 2.81 KB
Newer Older
1
2
3
4
5
6
7
8
9
<html>
<head>
<style type="text/css" media="screen">
    #test1 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        -webkit-transform: translate(0);
10
        // default transform and perspective origin
11
12
13
14
15
16
17
18
    }
    #test2 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        -webkit-transform: translate(0);
        -webkit-transform-origin: 50% 50%;
19
        -webkit-perspective-origin: 50% 50%;
20
21
22
23
24
25
26
27
    }
    #test3 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        -webkit-transform: translate(0);
        -webkit-transform-origin: 0% 100%;
28
        -webkit-perspective-origin: 0% 100%;
29
30
31
32
33
34
35
36
    }
    #test4 {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: relative;
        -webkit-transform: translate(0);
        -webkit-transform-origin: 5px 7px;
37
        -webkit-perspective-origin: 5px 7px;
38
    }
39
40
41
42
43
44
45
46
47
48
    #test5 {
        width: 10px;
        height: 10px;
        padding: 5px;
        margin: 5px;
        border: 5px solid green;
        background-color: blue;
        position: relative;
        -webkit-transform: translate(0);
        -webkit-transform-origin: 50% 50%;
49
        -webkit-perspective-origin: 50% 50%;
50
51
    }

52
</style>
53
<script src="../../fast/js/resources/js-test-pre.js"></script>
54
55
56
57
58
59
</head>
<body>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<p id="test4"></p>
60
<p id="test5"></p>
61
62
63
64
<p id="description"></p>
<div id="console"></div>
<script>

65
description("This tests computed style values for transform-origin and perspective-origin.");
66
67
68
69
70

var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
var test4 = document.getElementById("test4");
71
var test5 = document.getElementById("test5");
72
73
74
75
76

var test1Style = window.getComputedStyle(test1);
var test2Style = window.getComputedStyle(test2);
var test3Style = window.getComputedStyle(test3);
var test4Style = window.getComputedStyle(test4);
77
var test5Style = window.getComputedStyle(test5);
78
79
80
81
82

shouldBe("test1Style.webkitTransformOrigin", "'10px 10px'");
shouldBe("test2Style.webkitTransformOrigin", "'10px 10px'");
shouldBe("test3Style.webkitTransformOrigin", "'0px 20px'");
shouldBe("test4Style.webkitTransformOrigin", "'5px 7px'");
83
shouldBe("test5Style.webkitTransformOrigin", "'15px 15px'");
84

85
86
87
88
89
90
shouldBe("test1Style.webkitPerspectiveOrigin", "'10px 10px'");
shouldBe("test2Style.webkitPerspectiveOrigin", "'10px 10px'");
shouldBe("test3Style.webkitPerspectiveOrigin", "'0px 20px'");
shouldBe("test4Style.webkitPerspectiveOrigin", "'5px 7px'");
shouldBe("test5Style.webkitPerspectiveOrigin", "'15px 15px'");

91
92
93
debug("");

</script>
94
<script src="../../fast/js/resources/js-test-post.js"></script>
95
96
</body>
</html>