OLD | NEW |
1 <html xmlns="http://www.w3.org/1999/xhtml"> | 1 <html xmlns="http://www.w3.org/1999/xhtml"> |
2 <body> | 2 <body> |
3 <p>Test for bug <a href="">79068</a> - SVG should support transform-origin and
relative values | 3 <p>Test for bug <a href="">79068</a> - SVG should support transform-origin and
relative values |
4 Verify that CSS transform translate values can be specified with percentages. | 4 Verify that CSS transform translate values can be specified with percentages. |
5 </p> | 5 </p> |
6 You should see a series of "PASS" messages and one 80x60 green rectangle. Th
e green rectangle obscures two | 6 You should see a series of "PASS" messages and one 80x60 green rectangle. Th
e green rectangle obscures two |
7 red rectangles of the same size which have been translated to the same locatio
n. | 7 red rectangles of the same size which have been translated to the same locatio
n. |
8 <p> | 8 <p> |
9 </p> | 9 </p> |
| 10 <style>rect { transform-box: fill-box }</style> |
10 <svg style="position:absolute; left:0px; top:0px;" xmlns="http://www.w3.org/20
00/svg"> | 11 <svg style="position:absolute; left:0px; top:0px;" xmlns="http://www.w3.org/20
00/svg"> |
11 <rect id="r1" x="10" y="200" width="80" height="60" fill="red" style="transf
orm: translate(50%)"/> | 12 <rect id="r1" x="10" y="200" width="80" height="60" fill="red" style="transf
orm: translate(50%)"/> |
12 <rect id="r2" x="90" y="260" width="80" height="60" fill="red" style="transf
orm: translate(-50%, -100%)"/> | 13 <rect id="r2" x="90" y="260" width="80" height="60" fill="red" style="transf
orm: translate(-50%, -100%)"/> |
13 <rect id="r3" x="10" y="200" width="80" height="60" fill="green" style="tran
sform: translate(50%, 0%)"/> | 14 <rect id="r3" x="10" y="200" width="80" height="60" fill="green" style="tran
sform: translate(50%, 0%)"/> |
14 </svg> | 15 </svg> |
15 <pre id="log"></pre> | 16 <pre id="log"></pre> |
16 </body> | 17 </body> |
17 <script><![CDATA[ | 18 <script><![CDATA[ |
18 | 19 |
19 var resultString = ""; | 20 var resultString = ""; |
20 | 21 |
21 function checkClientRect(rectID) { | 22 function checkClientRect(rectID) { |
22 var cr = document.getElementById(rectID).getBoundingClientRect(); | 23 var cr = document.getElementById(rectID).getBoundingClientRect(); |
23 var crString = "[" + cr.left + "," + cr.top + " " + cr.width + "x" + cr.
height + "]"; | 24 var crString = "[" + cr.left + "," + cr.top + " " + cr.width + "x" + cr.
height + "]"; |
24 var expected = "[50,200 80x60]"; | 25 var expected = "[50,200 80x60]"; |
25 resultString += ((crString == expected) ? "PASS " : "FAIL ") + " rect \"
" + rectID + "\" " + crString + " expected " + expected + "\n"; | 26 resultString += ((crString == expected) ? "PASS " : "FAIL ") + " rect \"
" + rectID + "\" " + crString + " expected " + expected + "\n"; |
26 } | 27 } |
27 | 28 |
28 ["r1", "r2", "r3"].map(checkClientRect); | 29 ["r1", "r2", "r3"].map(checkClientRect); |
29 document.getElementById("log").innerHTML = resultString; | 30 document.getElementById("log").innerHTML = resultString; |
30 | 31 |
31 if (window.testRunner) | 32 if (window.testRunner) |
32 testRunner.dumpAsText(); | 33 testRunner.dumpAsText(); |
33 | 34 |
34 ]]></script> | 35 ]]></script> |
35 </html> | 36 </html> |
OLD | NEW |