third_party/WebKit/LayoutTests/css3/calc/margin.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/js-test.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>