annotated-regions.html | Explore in Territory

<html>
<head>
<style>
    .drag {
        -webkit-app-region: drag;
    }

    .nodrag {
        -webkit-app-region: no-drag;
    }

    .transform {
        transform: scale(0.5, 0.5);
    }

    #draggable {
        position: absolute;
        top: 10px;
        left: 20px;
        width: 100px;
        height: 60px;
        background-color: green;
    }

    #nondraggable {
        left: 0px;
        top: 0px;
        width: 60px;
        height: 20px;
        background-color: blue;
    }
</style>
</head>

<script src="../../resources/js-test.js"></script>
<script>
description("This tests that transformed annotated regions have the correct bounds.");
function getBoundsFromClientRectList(rects) {
    if (rects && rects.length == 1)
        return rects[0].left + "," + rects[0].top + "+" + rects[0].width + "x" + rects[0].height;
    return '';
}

function draggableRegions() {
    return getBoundsFromClientRectList(internals.draggableRegions(document));
}

function nonDraggableRegions() {
    return getBoundsFromClientRectList(internals.nonDraggableRegions(document));
}

function startTest() {
    // Verify that app regions are correctly collected when the frame supports
    // app regions.
    internals.SetSupportsDraggableRegions(true);

    shouldBe("draggableRegions()", "''");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.add("drag");
    shouldBe("draggableRegions()", "'20,10+100x60'");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.add('transform');
    shouldBe("draggableRegions()", "'45,25+50x30'");
    shouldBe("nonDraggableRegions()", "''");

    nondraggable.classList.add('nodrag');
    shouldBe("draggableRegions()", "'45,25+50x30'");
    shouldBe("nonDraggableRegions()", "'45,25+30x10'");

    draggable.classList.remove('transform');
    shouldBe("draggableRegions()", "'20,10+100x60'");
    shouldBe("nonDraggableRegions()", "'20,10+60x20'");

    // Verify that app regions are reset when the frame does not support
    // app regions.
    internals.SetSupportsDraggableRegions(false);
    shouldBe("draggableRegions()", "''");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.remove('drag');
    draggable.classList.remove('nodrag');

    // App regions should continue to be empty when new app regions are added
    // or resized.
    draggable.classList.add("drag");
    nondraggable.classList.add('nodrag');
    shouldBe("draggableRegions()", "''");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.add('transform');
    shouldBe("draggableRegions()", "''");
    shouldBe("nonDraggableRegions()", "''");

    finishJSTest();
}

window.jsTestIsAsync = true;
window.onload = startTest;
</script>

<body>
<div id="draggable">
    <div id="nondraggable"></div>
</div>
<p id="description"></p>
<div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/annotated-regions.html
