third_party/WebKit/LayoutTests/svg/transforms/percent-transform-values.xhtml - Issue 2786643003: Implement support for the 'transform-box' property

Side by Side Diff: third_party/WebKit/LayoutTests/svg/transforms/percent-transform-values.xhtml

Issue 2786643003: Implement support for the 'transform-box' property (Closed)

Patch Set: Rebase; fix property spec; update histogram.xml Created 3 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/svg/transforms/change-transform-origin-presentation-attribute.xhtml ('k') | third_party/WebKit/LayoutTests/svg/transforms/transform-box-border-box.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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