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

   1 <!DOCTYPE HTML>
   2 <style>
   3     p { width:200px; height:120px; }
   4     .simple-all     { padding: calc(13px + 12px); }
   5     .simple-left    { padding-left: calc(13px + 12px); }
   6     .simple-right   { padding-right: calc(13px + 12px); }
   7     .simple-top     { padding-top: calc(13px + 12px); }
   8     .simple-bottom  { padding-bottom: calc(13px + 12px); }
   9     .percent-all    { padding: calc(10% - 5px); }
  10     .percent-left   { padding-left: calc(10% - 5px); }
  11     .percent-right  { padding-right: calc(10% - 5px); }
  12     .percent-top    { padding-top: calc(10% - 5px); }
  13     .percent-bottom { padding-bottom: calc(10% - 5px); }
  14 </style>
  15
  16 <p class="simple-all">This element should have an overall padding of 25 pixels.</p>
  17 <p class="simple-left">This element should have a left padding of 25 pixels.</p>
  18 <p class="simple-right">This element should have a right padding of 25 pixels.</p>
  19 <p class="simple-top">This element should have a top padding of 25 pixels.</p>
  20 <p class="simple-bottom">This element should have a bottom padding of 25 pixels.</p>
  21
  22 <div style="width: 300px; background-color: cornsilk;">
  23     <p class="percent-all">This element should have an overall padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
  24     <p class="percent-left">This element should have a left padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
  25     <p class="percent-right">This element should have a right padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
  26     <p class="percent-top">This element should have a top padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
  27     <p class="percent-bottom">This element should have a bottom padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
  28 </div>
  29
  30 <script>
  31     if (window.testRunner)
  32         testRunner.dumpAsText();
  33
  34     var innerWidth = 200;
  35     var innerHeight = 120;
  36     var padding = 25;
  37
  38     var tests = document.getElementsByTagName("p");
  39     for (var i = 0; i < tests.length; ++i) {
  40         var element = tests[i];
  41         var width = element.offsetWidth;
  42         var height = element.offsetHeight;
  43
  44         var expectedWidth = innerWidth;
  45         var expectedHeight = innerHeight;
  46
  47         switch (element.className.split("-")[1]) {
  48         case "all":
  49             expectedWidth += 2 * padding;
  50             expectedHeight += 2 * padding;
  51             break;
  52         case "top":
  53         case "bottom":
  54             expectedHeight += padding;
  55             break;
  56         case "left":
  57         case "right":
  58             expectedWidth += padding;
  59             break;
  60         }
  61
  62         var error = [];
  63         if (width != expectedWidth)
  64             error.push("wrong width");
  65         if (height != expectedHeight)
  66             error.push("wrong height");
  67
  68         results = document.getElementById("results");
  69         if (error == "") {
  70             element.style.backgroundColor = "green";
  71             element.innerHTML += " => PASS";
  72         } else {
  73             element.style.backgroundColor = "red";
  74             element.innerHTML += " => FAIL: " + error.join(", ");
  75         }
  76     }
  77 </script>