containing-block.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div id="container" style="transform: rotate(360deg)"></div>

<script>
function generatesContainingBlock(property, value) {
    var outer = document.createElement('div');
    outer.style[property] = value;
    container.appendChild(outer);

    var inner = document.createElement('div');
    outer.appendChild(inner);
    return inner.offsetParent == outer;
}

test(function() {
    assert_true(generatesContainingBlock('transform', 'translate(1px) scale(2) rotate(3deg)'));
}, "transform establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'transform'));
}, "will-change: transform establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('perspective', '4px'));
}, "perspective establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'perspective'));
}, "will-change: perspective establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('translate', '1px'));
}, "translate establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'translate'));
}, "will-change: translate establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('scale', '2'));
}, "scale establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'scale'));
}, "will-change: scale establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('rotate', '3deg'));
}, "rotate establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'rotate'));
}, "will-change: rotate establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('offset-position', '50% 50%'));
}, "offset-position establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'offset-position'));
}, "will-change: offset-position establishes containing block");

test(function() {
    assert_true(generatesContainingBlock('offset-path', 'path("m 100 0")'));
}, "offset-path establishes containing block");
test(function() {
    assert_true(generatesContainingBlock('will-change', 'offset-path'));
}, "will-change: offset-path establishes containing block");
</script>
chromium/third_party/blink/web_tests/transforms/containing-block.html
