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

   1 <!DOCTYPE HTML>
   2 <style>
   3 p {
   4     width:200px; height:120px;
   5 }
   6 .simple-all {
   7     border: calc(13px + 12px) solid;
   8 }
   9
  10 .simple-left {
  11     border-left: calc(13px + 12px) solid;
  12 }
  13 .simple-right {
  14     border-right: calc(13px + 12px) solid;
  15 }
  16 .simple-top {
  17     border-top: calc(13px + 12px) solid;
  18 }
  19 .simple-bottom {
  20     border-bottom: calc(13px + 12px) solid;
  21 }
  22 </style>
  23
  24 <p class="simple-all">This element should have an overall border of 25 pixels.</p>
  25 <p class="simple-left">This element should have a left border of 25 pixels.</p>
  26 <p class="simple-right">This element should have a right border of 25 pixels.</p>
  27 <p class="simple-top">This element should have a top border of 25 pixels.</p>
  28 <p class="simple-bottom">This element should have a bottom border of 25 pixels.</p>
  29
  30 <script>
  31 if (window.testRunner)
  32     testRunner.dumpAsText();
  33
  34 var innerWidth = 200;
  35 var innerHeight = 120;
  36 var border = 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 * border;
  50         expectedHeight += 2 * border;
  51         break;
  52     case "top":
  53     case "bottom":
  54         expectedHeight += border;
  55         break;
  56     case "left":
  57     case "right":
  58         expectedWidth += border;
  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>