| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p>This tests the border width property with percent values for HTML elements.</p> |
| <div id="console"></div> |
| <script> |
| function elementBorderWidth(element, borderValue, style) |
| { |
| var element = document.createElement(element); |
| if (borderValue !== undefined) |
| element.setAttribute("border", borderValue); |
| element.setAttribute("style", style); |
| element.setAttribute("width", "0"); |
| document.body.appendChild(element); |
| var borderBoxWidth = element.offsetWidth; |
| document.body.removeChild(element); |
| return borderBoxWidth / 2; |
| } |
| |
| function inputElementBorderWidth(elementType, borderValue, style) |
| { |
| var inputElement = document.createElement("input"); |
| inputElement.setAttribute("type", elementType); |
| if (borderValue != undefined) |
| inputElement.setAttribute("border", borderValue); |
| inputElement.setAttribute("style", style); |
| inputElement.setAttribute("width", "0"); |
| document.body.appendChild(inputElement); |
| var borderBoxWidth = inputElement.offsetWidth; |
| document.body.removeChild(inputElement); |
| return borderBoxWidth / 2; |
| } |
| |
| shouldBe("elementBorderWidth('img', '10%')", "10"); |
| shouldBe("elementBorderWidth('img', '-10%')", "0"); |
| shouldBe("elementBorderWidth('img', ' +10%')", "10"); |
| |
| shouldBe("elementBorderWidth('img', 0, 'border-width: 10%')", "0"); |
| shouldBe("elementBorderWidth('img', 0, 'border-width: -10%')", "0"); |
| |
| shouldBe("elementBorderWidth('object', '10%')", "10"); |
| shouldBe("elementBorderWidth('object', '-10%')", "0"); |
| shouldBe("elementBorderWidth('object', ' +10%')", "10"); |
| |
| shouldBe("elementBorderWidth('object', 0, 'border-width: 10%')", "0"); |
| shouldBe("elementBorderWidth('object', 0, 'border-width: -10%')", "0"); |
| |
| shouldBe("inputElementBorderWidth('image', '10%')", "10"); |
| shouldBe("inputElementBorderWidth('image', '-10%')", "0"); |
| shouldBe("inputElementBorderWidth('image', ' +10%')", "10"); |
| |
| shouldBe("inputElementBorderWidth('image', 0, 'border-width: 10%')", "0"); |
| shouldBe("inputElementBorderWidth('image', 0, 'border-width: -10%')", "0"); |
| </script> |
| </body> |
| </html> |
