<!DOCTYPE html>
<style>

.wrapper {
    width: 400px;
    height: 400px;
    position: relative;
}

.grid {
    display: grid;
    grid: 200px / 200px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.gridItem {
    width: 50%;
    height: 50%;
    background-color: green;
}

</style>

<p>This test checks that percentage on the grid item are resolved against the grid area, despite the grid container being positioned with definite width and height.</p>
<p>Test passes if you see a 100x100 green box.</p>

<div class="wrapper">
    <div class="grid">
        <div class="gridItem"></div>
    </div>
</div>