1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8">
7 <title>Transform Origin
</title>
8 <style type=
"text/css" media=
"screen">
13 outline:
1px solid black;
20 border:
5px solid gray;
21 background-color: green;
22 -webkit-transform-origin:
20%
50%;
28 <script type=
"text/javascript" charset=
"utf-8">
29 if (window.testRunner) {
30 testRunner.dumpAsText();
31 testRunner.waitUntilDone();
35 { 'transform' : 'translate(
80px,
90px)', 'result' : 'matrix(
1,
0,
0,
1,
80,
90)' },
36 { 'transform' : 'translate(
10px,
50%)', 'result' : 'matrix(
1,
0,
0,
1,
10,
60)' },
37 { 'transform' : 'scale(
1.2,
0.8)', 'result' : 'matrix(
1.2,
0,
0,
0.8,
0,
0)' },
38 { 'transform' : 'skew(-
0.7rad,
20deg)', 'result' : 'matrix(
1,
0.36397, -
0.842288,
1,
0,
0)' },
39 { 'transform' : 'rotate(
45deg)', 'result' : 'matrix(
0.707107,
0.707107, -
0.707107,
0.707107,
0,
0)' },
42 function compareTransform(expected, computed)
44 var re = /^matrix\(([^,]+), ([^,]+), ([^,]+), ([^,]+), ([^,]+?)(?:px)?, ([^,]+?)(?:px)?\)$/;
45 var parsedExpected = re.exec(expected);
46 var parsedComputed = re.exec(computed);
47 for(var i =
1; i <
7; i++) {
48 // use +/-
0.05 to avoid problems with rounding
49 if (!(Math.abs(parsedComputed[i] - parsedExpected[i]) <
0.05))
57 var testBox = document.getElementById('test-box');
58 var testSpan = document.getElementById('test-span');
59 var resultsBox = document.getElementById('results');
61 gTests.forEach(function(curTest) {
62 // set one of our test transforms
63 testBox.style.webkitTransform = curTest.transform;
64 testSpan.style.webkitTransform = curTest.transform;
65 // read back computed style
66 var computedTransform = window.getComputedStyle(testBox).webkitTransform;
67 var computedSpanTransform = window.getComputedStyle(testSpan).webkitTransform;
68 // compare expected result to computed transformation matrix
69 var success = compareTransform(curTest.result, computedTransform);
72 result = curTest.transform + ' expected
<code>' + curTest.result + '
</code> : PASS';
74 result = curTest.transform + ' expected
<code>' + curTest.result + '
</code>, got
<code>' + computedTransform + '
</code> : FAIL';
75 resultsBox.innerHTML += result + '
<br>';
79 if (window.testRunner)
80 testRunner.notifyDone();
84 <body onload=
"runTests()">
86 <div class=
"container">
87 <div id=
"test-box" class=
"box"></div>
90 <span id=
"test-span" class=
"box"></span>