/
position-absolute-dynamic-containing-block.html
140 lines (136 loc) · 4.38 KB
/
position-absolute-dynamic-containing-block.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<title>CSS Position: position:absolute dynamic containing block</title>
<link rel="author" title="mailto:atotic@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-position-3/#def-cb">
<meta name="assert" content="Tests changes in containing block for out-of-flow positioned descendants.">
<style>
#outer {
width: 400px;
height: 300px;
outline: black solid 1px;
}
#intermediate {
width: 300px;
height: 200px;
outline: gray solid 1px;
}
#target {
background: green;
}
.abs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.abs-container {
position: relative;
}
.fixed-container {
will-change: transform;
}
div {
padding: 5px;
}
</style>
<!-- This tests potential caching of out-of-flow positioned descendants. -->
<div id="outer">
<div>
<div id="intermediate">
<div>
<div id="target">TTT</div>
<div id="noLayout1"></div>
</div>
<div id="noLayout2"></div>
</div>
</div>
</div>
<script>
let outer = document.querySelector("#outer");
let intermediate = document.querySelector("#intermediate");
let target = document.querySelector("#target");
let padding = 5;
function cleanup() {
outer.className = "";
intermediate.className = "";
target.className = "";
document.body.offsetTop;
}
test( t => {
t.add_cleanup(cleanup);
outer.classList.add("abs-container");
target.classList.add("abs");
assert_equals(target.offsetHeight, outer.offsetHeight);
intermediate.classList.add("abs-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
}, "abs containing block moves from outer to intermediate" );
test( t => {
t.add_cleanup(cleanup);
target.classList.add("abs");
intermediate.classList.add("abs-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
outer.classList.add("abs-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
intermediate.classList.remove("abs-container");
assert_equals(target.offsetHeight, outer.offsetHeight);
}, "abs containing block moves from intermediate to outer" );
test( t => {
t.add_cleanup(cleanup);
target.classList.add("abs");
outer.classList.add("abs-container");
assert_equals(target.offsetHeight, outer.offsetHeight);
target.classList.remove("abs");
assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
}, "target is no longer absolute");
test( t => {
t.add_cleanup(cleanup);
outer.classList.add("abs-container");
assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
target.classList.add("abs");
assert_equals(target.offsetHeight, outer.offsetHeight);
}, "target becomes absolute");
// Repeat same tests with fixed
test( t => {
t.add_cleanup(cleanup);
outer.classList.add("fixed-container");
target.classList.add("fixed");
assert_equals(target.offsetHeight, outer.offsetHeight);
intermediate.classList.add("fixed-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
}, "fixed containing block moves from outer to intermediate" );
test( t => {
t.add_cleanup(cleanup);
target.classList.add("fixed");
intermediate.classList.add("fixed-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
outer.classList.add("fixed-container");
assert_equals(target.offsetHeight, intermediate.offsetHeight);
intermediate.classList.remove("fixed-container");
assert_equals(target.offsetHeight, outer.offsetHeight);
}, "fixed containing block moves from intermediate to outer" );
test( t => {
t.add_cleanup(cleanup);
target.classList.add("fixed");
outer.classList.add("fixed-container");
assert_equals(target.offsetHeight, outer.offsetHeight);
target.classList.remove("fixed");
assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
}, "target is no longer fixed");
test( t => {
t.add_cleanup(cleanup);
outer.classList.add("fixed-container");
assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
target.classList.add("fixed");
assert_equals(target.offsetHeight, outer.offsetHeight);
}, "target becomes fixed");
</script>