2013-04-04 07:00:07 -07:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<meta charset=utf-8>
|
|
|
|
|
<title>Bug 520992</title>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#borderBox {
|
|
|
|
|
background:gold;
|
|
|
|
|
height:100px;
|
2014-02-06 11:32:05 -08:00
|
|
|
box-sizing:border-box;
|
2013-04-04 07:00:07 -07:00
|
|
|
border: 20px solid gold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#paddingBox {
|
|
|
|
|
background:gold;
|
|
|
|
|
height:100px;
|
2014-02-06 11:32:05 -08:00
|
|
|
box-sizing:padding-box;
|
2013-04-04 07:00:07 -07:00
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div id="borderBox"></div>
|
|
|
|
|
<p id="heightWidth1"></p>
|
|
|
|
|
|
|
|
|
|
<div id="paddingBox"></div>
|
|
|
|
|
<p id="heightWidth2"></p>
|
|
|
|
|
<script>
|
|
|
|
|
var divs = document.getElementsByTagName("div");
|
|
|
|
|
var textEle1 = document.getElementById("heightWidth1");
|
|
|
|
|
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
|
|
|
|
|
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
|
|
|
|
|
|
|
|
|
|
var textEle2 = document.getElementById("heightWidth2");
|
|
|
|
|
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
|
|
|
|
|
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
|
|
|
|
|
</script>
|
