third_party/WebKit/LayoutTests/fast/borders/border-width-percent.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p>This tests the border width property with percent values for HTML elements.</p>
   8 <div id="console"></div>
   9 <script>
  10 function elementBorderWidth(element, borderValue, style)
  11 {
  12     var element = document.createElement(element);
  13     if (borderValue !== undefined)
  14         element.setAttribute("border", borderValue);
  15     element.setAttribute("style", style);
  16     element.setAttribute("width", "0");
  17     document.body.appendChild(element);
  18     var borderBoxWidth = element.offsetWidth;
  19     document.body.removeChild(element);
  20     return borderBoxWidth / 2;
  21 }
  22
  23 function inputElementBorderWidth(elementType, borderValue, style)
  24 {
  25     var inputElement = document.createElement("input");
  26     inputElement.setAttribute("type", elementType);
  27     if (borderValue != undefined)
  28         inputElement.setAttribute("border", borderValue);
  29     inputElement.setAttribute("style", style);
  30     inputElement.setAttribute("width", "0");
  31     document.body.appendChild(inputElement);
  32     var borderBoxWidth = inputElement.offsetWidth;
  33     document.body.removeChild(inputElement);
  34     return borderBoxWidth / 2;
  35 }
  36
  37 shouldBe("elementBorderWidth('img', '10%')", "10");
  38 shouldBe("elementBorderWidth('img', '-10%')", "0");
  39 shouldBe("elementBorderWidth('img', ' +10%')", "10");
  40
  41 shouldBe("elementBorderWidth('img', 0, 'border-width: 10%')", "0");
  42 shouldBe("elementBorderWidth('img', 0, 'border-width: -10%')", "0");
  43
  44 shouldBe("elementBorderWidth('object', '10%')", "10");
  45 shouldBe("elementBorderWidth('object', '-10%')", "0");
  46 shouldBe("elementBorderWidth('object', ' +10%')", "10");
  47
  48 shouldBe("elementBorderWidth('object', 0, 'border-width: 10%')", "0");
  49 shouldBe("elementBorderWidth('object', 0, 'border-width: -10%')", "0");
  50
  51 shouldBe("inputElementBorderWidth('image', '10%')", "10");
  52 shouldBe("inputElementBorderWidth('image', '-10%')", "0");
  53 shouldBe("inputElementBorderWidth('image', ' +10%')", "10");
  54
  55 shouldBe("inputElementBorderWidth('image', 0, 'border-width: 10%')", "0");
  56 shouldBe("inputElementBorderWidth('image', 0, 'border-width: -10%')", "0");
  57 </script>
  58 </body>
  59 </html>