cssom/get-bounding-client-rect/dynamic-1.html

<!DOCTYPE HTML>
<title>appendChild and getBoundingClientRect</title>

<body>

<p id=result class=FAIL>FAIL (noscript)</p>

<script>
document.getElementById ('result').firstChild.data = 'FAIL (script)';

var el = document.createElement ('div');
el.style.position = 'absolute';
el.style.width = '120px';
el.style.height = '140px';

document.body.appendChild (el);

var bb = el.getBoundingClientRect (el);

if (bb && bb.right - bb.left == 120 && bb.bottom - bb.top == 140) {
  document.getElementById ('result').firstChild.data = 'PASS';
  document.getElementById ('result').firstChild.className = 'PASS'; 
} else if (bb) {
  document.getElementById ('result').firstChild.data = 'FAIL (width = ' + (bb.right - bb.left) + ', height = ' + (bb.bottom - bb.top) + ')';
} else {
  document.getElementById ('result').firstChild.data = 'FAIL (return = ' + bb + ')';
}

</script>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<title>appendChild and getBoundingClientRect</title>
3
4			<body>
5
6			<p id=result class=FAIL>FAIL (noscript)</p>
7
8			<script>
9			document.getElementById ('result').firstChild.data = 'FAIL (script)';
10
11			var el = document.createElement ('div');
12			el.style.position = 'absolute';
13			el.style.width = '120px';
14			el.style.height = '140px';
15
16			document.body.appendChild (el);
17
18			var bb = el.getBoundingClientRect (el);
19
20			if (bb && bb.right - bb.left == 120 && bb.bottom - bb.top == 140) {
21			document.getElementById ('result').firstChild.data = 'PASS';
22			document.getElementById ('result').firstChild.className = 'PASS';
23			} else if (bb) {
24			document.getElementById ('result').firstChild.data = 'FAIL (width = ' + (bb.right - bb.left) + ', height = ' + (bb.bottom - bb.top) + ')';
25			} else {
26			document.getElementById ('result').firstChild.data = 'FAIL (return = ' + bb + ')';
27			}
28
29			</script>