Support transform-box to switch sizing box in SVG
[WebKit-https.git] / LayoutTests / fast / css / transform-box-parsing.html
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script src="../../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7     <svg id="svgRoot" xmlns="http://www.w3.org/2000/svg">
8         <foreignObject id="foreignObject">
9             <html>
10                 <div id="inside-foreign-object"></div>
11             </html>
12         </foreignObject>
13         <foreignObject>
14             <svg id="nested-svg" xmlns="http://www.w3.org/2000/svg" />
15         </foreignObject>
16     </svg>
17     <script>
18         description("This tests checks parsing of the 'transform-box' property");
19
20         function testPropertyValue(declaration, property)
21         {
22             var div = document.createElement("div");
23             div.setAttribute("style", declaration);
24             document.body.appendChild(div);
25
26             var result = div.style.getPropertyValue(property);
27             document.body.removeChild(div);
28             return result;
29         }
30
31         function testComputedStyle(declaration, property)
32         {
33             var div = document.createElement("div");
34             div.setAttribute("style", declaration);
35             document.body.appendChild(div);
36
37             var result = window.getComputedStyle(div).getPropertyValue(property);
38             document.body.removeChild(div);
39             return result;
40         }
41
42         const svgNS = "http://www.w3.org/2000/svg";
43
44         function testSVGComputedStyle(declaration, property)
45         {
46             var svgRoot = document.getElementById('svgRoot');
47
48             var rect = document.createElementNS(svgNS, "rect");
49             rect.setAttribute("style", declaration);
50             svgRoot.appendChild(rect);
51
52             var result = window.getComputedStyle(rect).getPropertyValue(property);
53             svgRoot.removeChild(rect);
54             return result;
55         }
56         
57         function testComputedStyleOnElementWithId(elementId)
58         {
59             return window.getComputedStyle(document.getElementById(elementId)).getPropertyValue("transform-box");
60         }
61
62         shouldBeEqualToString('testPropertyValue("transform-box: border-box", "transform-box")', 'border-box');
63         shouldBeEqualToString('testPropertyValue("transform-box: fill-box", "transform-box")', 'fill-box');
64         shouldBeEqualToString('testPropertyValue("transform-box: view-box", "transform-box")', 'view-box');
65
66         debug('');
67         shouldBeEqualToString('testComputedStyle("", "transform-box")', 'border-box');
68         shouldBeEqualToString('testComputedStyle("transform-box: fill-box", "transform-box")', 'fill-box');
69         shouldBeEqualToString('testComputedStyle("transform-box: view-box", "transform-box")', 'view-box');
70
71         debug('');
72         shouldBeEqualToString('testSVGComputedStyle("", "transform-box")', 'view-box');
73         shouldBeEqualToString('testSVGComputedStyle("transform-box: fill-box", "transform-box")', 'fill-box');
74         shouldBeEqualToString('testSVGComputedStyle("transform-box: border-box", "transform-box")', 'border-box');
75
76         debug('');
77         shouldBeEqualToString('testComputedStyleOnElementWithId("foreignObject")', 'view-box');
78
79         debug('');
80         debug('Test default value on elements with CSS layout boxes');
81         shouldBeEqualToString('testComputedStyleOnElementWithId("svgRoot")', 'border-box');
82         shouldBeEqualToString('testComputedStyleOnElementWithId("nested-svg")', 'border-box');
83         shouldBeEqualToString('testComputedStyleOnElementWithId("inside-foreign-object")', 'border-box');
84
85         debug('');
86     </script>
87
88 <script src="../../resources/js-test-post.js"></script>
89 </body>
90 </html>