offset-parent-contain.html | Explore in Territory

<!DOCTYPE html>
<!-- contain:paint establishes a containing block for out-of-flow positioned descendants. -->
<div id="containPaint" style="contain:paint;">
    <div id="test1"></div>
</div>
<!-- contain:layout establishes a containing block for out-of-flow positioned descendants. -->
<div id="containLayout" style="contain:layout;">
    <div id="test2"></div>
</div>
<!-- contain:style does NOT establish a containing block for out-of-flow positioned descendants. -->
<div id="containStyle" style="contain:style;">
    <div id="test3"></div>
</div>
<!-- contain:size does NOT establish a containing block for out-of-flow positioned descendants. -->
<div id="containStyle" style="contain:size;">
    <div id="test4"></div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
    test(function() {
       assert_equals(document.getElementById("test1").offsetParent, document.getElementById("containPaint"));
    }, "inside contain:paint");
    test(function() {
       assert_equals(document.getElementById("test2").offsetParent, document.getElementById("containLayout"));
    }, "inside contain:layout");
    test(function() {
       assert_equals(document.getElementById("test3").offsetParent, document.body);
    }, "inside contain:style");
    test(function() {
       assert_equals(document.getElementById("test4").offsetParent, document.body);
    }, "inside contain:size");
</script>
chromium/third_party/blink/web_tests/fast/dom/Element/offset-parent-contain.html
