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

Side by Side Diff: third_party/WebKit/LayoutTests/svg/transforms/transform-origin-css-property.xhtml

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

Patch Set: Update existing tests to be compatible 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/transform-box-view-box-expected.html ('k') | third_party/WebKit/LayoutTests/virtual/stable/svg/transforms/stable/README.txt » ('j') | third_party/WebKit/Source/core/css/CSSProperties.json5 » ('J')
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 <style>	2 <style>

3 #svgRoot {	3 #svgRoot {

4 position: absolute;	4 position: absolute;

5 top: 0;	5 top: 0;

6 left: 0;	6 left: 0;

7 width: 100%;	7 width: 100%;

8 height: 100%;	8 height: 100%;

9 }	9 }

10	10

11 #transformOriginRect {	11 #transformOriginRect {

12 fill: green;	12 fill: green;

13 transform: rotate(90deg);	13 transform: rotate(90deg);

14 }	14 }

	15 .relative {

	16 transform-box: fill-box;

	17 }

	18 .absolute {

	19 transform-box: view-box;

	20 }

15 </style>	21 </style>

16	22

17 <!--	23 <!--

18 Test for bug 79068 - SVG should support transform-origin and relative values.	24 Test for bug 79068 - SVG should support transform-origin and relative values.

19	25

20 You should see 9 green 20x20 rectangles. Each green rectangle is actually one of a set of about 6, each one	26 You should see 9 green 20x20 rectangles. Each green rectangle is actually one of a set of about 6, each one

21 with a different but equivalent value for the CSS transform-origin property.	27 with a different but equivalent value for the CSS transform-origin property.

22 -->	28 -->

23	29

24 <body>	30 <body>

25 <svg id="svgRoot" xmlns="http://www.w3.org/2000/svg"></svg>	31 <svg id="svgRoot" xmlns="http://www.w3.org/2000/svg"></svg>

26	32

27 <script><![CDATA[	33 <script><![CDATA[

28 var svgNS = "http://www.w3.org/2000/svg";	34 var svgNS = "http://www.w3.org/2000/svg";

29	35

30 function addTransformOriginRect(x, y, s)	36 function addTransformOriginRect(x, y, s)

31 {	37 {

32 var rect = document.createElementNS(svgNS, "rect");	38 var rect = document.createElementNS(svgNS, "rect");

33 var transformOrigin = (typeof(s) == "string") ? s : (x + s[0]) + " " + ( y + s[1]);	39 var transformOrigin = (typeof(s) == "string") ? s : (x + s[0] + "px") + " " + (y + s[1] + "px");

	40 rect.setAttribute("class", typeof(s) == "string" ? "relative" : "absolute ");

34 rect.setAttribute("id", "transformOriginRect");	41 rect.setAttribute("id", "transformOriginRect");

35 rect.setAttribute("x", x);	42 rect.setAttribute("x", x);

36 rect.setAttribute("y", y);	43 rect.setAttribute("y", y);

37 rect.setAttribute("width", 30);	44 rect.setAttribute("width", 30);

38 rect.setAttribute("height", 30);	45 rect.setAttribute("height", 30);

39 rect.setAttribute("style", "-webkit-transform-origin: " + transformOrigin + ";");	46 rect.setAttribute("style", "-webkit-transform-origin: " + transformOrigin + ";");

40 document.getElementById("svgRoot").appendChild(rect);	47 document.getElementById("svgRoot").appendChild(rect);

41 }	48 }

42	49

43 var equivalentTransformOrigins = [	50 var equivalentTransformOrigins = [

(...skipping 10 matching lines...) Expand all Loading...
54	61

55 for (var i = 0; i < equivalentTransformOrigins.length; i++) {	62 for (var i = 0; i < equivalentTransformOrigins.length; i++) {

56 var x = 60 + (i % 4) * 60;	63 var x = 60 + (i % 4) * 60;

57 var y = 60 + Math.floor(i / 4) * 60;	64 var y = 60 + Math.floor(i / 4) * 60;

58 equivalentTransformOrigins[i].map( function(s) { addTransformOriginRect (x, y, s); } );	65 equivalentTransformOrigins[i].map( function(s) { addTransformOriginRect (x, y, s); } );

59 }	66 }

60	67

61 ]]></script>	68 ]]></script>

62 </body>	69 </body>

63 </html>	70 </html>

OLD	NEW