[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / LayoutTests / css3 / calc / margin.html
1 <!DOCTYPE HTML>
2 <script src="../../resources/js-test-pre.js"></script>
3 <style>
4     div { display: inline-block; }
5     p { width: 200px; height: 120px; margin: 0px; }
6     #simple-all { margin: calc(13px + 12px); }
7     #simple-left { margin-left: calc(13px + 12px); }
8     #simple-right { margin-right: calc(13px + 12px); }
9     #simple-top { margin-top: calc(13px + 12px); }
10     #simple-bottom { margin-bottom: calc(13px + 12px); }
11     #percent-all { margin: calc(10% - 5px); }
12     #percent-left { margin-left: calc(10% - 5px); }
13     #percent-right { margin-right: calc(10% - 5px); }
14     #percent-top { margin-top: calc(10% - 5px); }
15     #percent-bottom { margin-bottom: calc(10% - 5px); }
16 </style>
17
18 <div id="test-container">
19     <p id="simple-all">This element should have an overall margin of 25 pixels.</p><br/>
20     <p id="simple-left">This element should have a left margin of 25 pixels.</p><br/>
21     <p id="simple-right">This element should have a right margin of 25 pixels.</p><br/>
22     <p id="simple-top">This element should have a top margin of 25 pixels.</p><br/>
23     <p id="simple-bottom">This element should have a bottom margin of 25 pixels.</p><br/>
24     <div id="wrapper" style="width: 300px; background-color: cornsilk; display: block;">
25         <p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
26         <p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
27         <p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
28         <p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
29         <p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
30     </div>
31 </div>
32 <script>
33
34     function computedMarginLeft(id)
35     {
36         return getComputedStyle(document.getElementById(id), null).marginLeft;
37     }
38     function computedMarginRight(id)
39     {
40         return getComputedStyle(document.getElementById(id), null).marginRight;
41     }
42     function computedMarginTop(id)
43     {
44         return getComputedStyle(document.getElementById(id), null).marginTop;
45     }
46     function computedMarginBottom(id)
47     {
48         return getComputedStyle(document.getElementById(id), null).marginBottom;
49     }
50
51     var innerWidth = 200;
52     var innerHeight = 120;
53     var margin = "25px";
54     var noMargin = "0px";
55
56     var tests = document.getElementsByTagName("p");
57     for (var i = 0; i < tests.length; ++i) {
58         var innerElement = tests[i]
59         var expectedLeft = noMargin;
60         var expectedTop = noMargin;
61         var expectedRight = noMargin;
62         var expectedBottom = noMargin;
63         switch (innerElement.id.split("-")[1]) {
64         case "all":
65             expectedLeft = margin;
66             expectedTop = margin;
67             expectedRight = margin;
68             expectedBottom = margin;
69             break;
70         case "top":
71             expectedTop = margin;
72             break;
73         case "bottom":
74             expectedBottom = margin;
75             break;
76         case "left":
77             expectedLeft = margin;
78             break;
79         case "right":
80             expectedRight = margin;
81             break;
82         }
83
84         shouldBeEqualToString('computedMarginLeft("' + innerElement.id + '")', expectedLeft);
85         shouldBeEqualToString('computedMarginTop("' + innerElement.id + '")', expectedTop);
86         shouldBeEqualToString('computedMarginRight("' + innerElement.id + '")', expectedRight);
87         shouldBeEqualToString('computedMarginBottom("' + innerElement.id + '")', expectedBottom);
88     }
89     
90     if (window.testRunner) {
91         var testContainer = document.getElementById("test-container");
92         if (testContainer)
93             document.body.removeChild(testContainer);   
94     }    
95 </script>
96 <script src="../../resources/js-test-post.js"></script>