67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>getClientRects on monolithic elements and their container</title>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getclientrects">
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol/">
|
|
<style>
|
|
body {
|
|
margin: 8px;
|
|
}
|
|
</style>
|
|
<div style="columns:3; column-fill:auto; gap:10px; width:320px; height:100px; background:yellow;">
|
|
<div id="container" style="background:gray;">
|
|
<div id="monolith1" style="contain:size; width:50%; height:250px; background:cyan;"></div>
|
|
<div id="monolith2" style="contain:size; width:50%; height:50px; background:black;"></div>
|
|
<div id="monolith3" style="contain:size; width:50%; height:250px; background:hotpink;"></div>
|
|
</div>
|
|
</div>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
test(()=> {
|
|
let rects = monolith1.getClientRects();
|
|
assert_equals(rects.length, 1);
|
|
assert_equals(rects[0].left, 8);
|
|
assert_equals(rects[0].top, 8);
|
|
assert_equals(rects[0].width, 50);
|
|
assert_equals(rects[0].height, 250);
|
|
}, "#monolith1");
|
|
|
|
test(()=> {
|
|
let rects = monolith2.getClientRects();
|
|
assert_equals(rects.length, 1);
|
|
assert_equals(rects[0].left, 118);
|
|
assert_equals(rects[0].top, 8);
|
|
assert_equals(rects[0].width, 50);
|
|
assert_equals(rects[0].height, 50);
|
|
}, "#monolith2");
|
|
|
|
test(()=> {
|
|
let rects = monolith3.getClientRects();
|
|
assert_equals(rects.length, 1);
|
|
assert_equals(rects[0].left, 228);
|
|
assert_equals(rects[0].top, 8);
|
|
assert_equals(rects[0].width, 50);
|
|
assert_equals(rects[0].height, 250);
|
|
}, "#monolith3");
|
|
|
|
test(()=> {
|
|
let rects = container.getClientRects();
|
|
assert_equals(rects.length, 3);
|
|
|
|
assert_equals(rects[0].left, 8);
|
|
assert_equals(rects[0].top, 8);
|
|
assert_equals(rects[0].width, 100);
|
|
assert_equals(rects[0].height, 250);
|
|
|
|
assert_equals(rects[1].left, 118);
|
|
assert_equals(rects[1].top, 8);
|
|
assert_equals(rects[1].width, 100);
|
|
assert_equals(rects[1].height, 100);
|
|
|
|
assert_equals(rects[2].left, 228);
|
|
assert_equals(rects[2].top, 8);
|
|
assert_equals(rects[2].width, 100);
|
|
assert_equals(rects[2].height, 250);
|
|
}, "#container");
|
|
</script>
|