forked from danbeam/outer-dimensions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
outer-dimensions_test.html
82 lines (65 loc) · 1.79 KB
/
outer-dimensions_test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html>
<head>
<style>
div {
margin: 0;
padding: 0;
position: fixed;
}
.height {
height: 100px;
}
.width {
width: 100px;
}
.margin {
margin: 1px;
}
.padding {
padding: 3px;
}
.border {
border: 7px solid red;
}
.border-box {
box-sizing: border-box;
}
</style>
<head>
<body>
<div class="height" data-height="100"></div>
<div class="height border" data-height="100+7+7"></div>
<div class="height margin" data-height="100+1+1"></div>
<div class="height padding" data-height="100+3+3"></div>
<div class="height border margin padding" data-height="100+7+7+1+1+3+3"></div>
<div class="height border-box" data-height="100"></div>
<div class="width" data-width="100"></div>
<div class="width border" data-width="100+7+7"></div>
<div class="width margin" data-width="100+1+1"></div>
<div class="width padding" data-width="100+3+3"></div>
<div class="width border margin padding" data-width="100+7+7+1+1+3+3"></div>
<div class="width border-box" data-width="100"></div>
<!-- Border and padding should not affect outer{Height,Width} in box-sizing: border-box;. -->
<div class="height border-box border margin padding" data-height="100+1+1"></div>
<div class="width border-box border margin padding" data-width="100+1+1"></div>
<script src="outer-dimensions.js"></script>
<script>
function assertEquals(expected, actual) {
if (expected != actual)
throw 'oh noes! ' + expected + ' != ' + actual;
console.log('pass');
}
var tests = document.querySelectorAll('div[class]');
for (var i = 0; i < tests.length; ++i) {
var test = tests[i];
test.textContent = test.className;
console.log('test', test);
if (test.dataset.height)
assertEquals(eval(test.dataset.height), test.outerHeight);
else
assertEquals(eval(test.dataset.width), test.outerWidth);
}
</script>
</body>
</html>