⎇ 368b7da13d700e20ed1ef0fa2399fade0ca5ea3f
test_fixtures/block/block_absolute_resolved_insets.html
Ñawpa willay
ch'uya
Absolute Insets should be resolved against the container size minus border (#666)
1<!doctype html>
2<html lang="en">
3 <head>
4 <script src="../../scripts/gentest/test_helper.js"></script>
5 <link
6 rel="stylesheet"
7 type="text/css"
8 href="../../scripts/gentest/test_base_style.css"
9 />
10 <title>Test description</title>
11 </head>
12 <body>
13 <div id="test-root">
14 <div
15 style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; position: relative;"
16 >
17 <div style="position: absolute; top: auto; left: auto;"></div>
18 <div style="position: absolute; top: 0; left: 0;"></div>
19 <div style="position: absolute; top: 100%; left: 100%;"></div>
20 <div
21 style="position: absolute; bottom: 100%; right: 100%;"
22 ></div>
23 <div style="position: absolute; top: 30px; left: 30px;"></div>
24 <div
25 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
26 ></div>
27 </div>
28
29 <div
30 style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; overflow: scroll; position: relative;"
31 >
32 <div style="position: absolute; top: auto; left: auto;"></div>
33 <div style="position: absolute; top: 0; left: 0;"></div>
34 <div style="position: absolute; top: 100%; left: 100%;"></div>
35 <div
36 style="position: absolute; bottom: 100%; right: 100%;"
37 ></div>
38 <div style="position: absolute; top: 30px; left: 30px;"></div>
39 <div
40 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
41 ></div>
42 </div>
43 <!-- Checks if "top: auto" resolves to the static y position -->
44 <div
45 style="display: block; width: 200px; height: 200px; border: 20px solid; padding: 15px; position: relative;"
46 >
47 <div style="display: block; height: 10px; width: 50px;"></div>
48 <div style="position: absolute; top: auto; left: auto;"></div>
49 </div>
50 </div>
51 </body>
52</html>