Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/cssom/getComputedStyle-insets-grid.html

Repository navigation

<!doctype html>

<title>Position absolute getComputedStyle insets (for display: grid)</title>

<style>

.grid {

position: absolute;

display: grid;

grid-template-columns: 100px 100px;

grid-template-rows: 100px 100px;

}

.grid > .item {

position: absolute;

grid-column: 2;

grid-row: 2;

width: 60px;

height: 30px;

}

</style>

var loaded = new Promise(resolve => addEventListener('load', resolve));

function checkInsets(id, expected) {

promise_test(() => loaded.then(() => {

var style = getComputedStyle(document.querySelector('#' + id + ' > .item'));

for (var side in expected)

assert_equals(style[side], expected[side], id + ' ' + side);

}), 'Position absolute getComputedStyle insets for display: grid (' + id + ')');

}

// The containing block of an out-of-flow grid item is its grid area, so auto insets resolve against the grid area edges.

checkInsets('ltr', { left: '0px', right: '40px', top: '0px', bottom: '70px' });

// direction: rtl reverses the inline (column) axis, so column 2 is at x:[0,100].

checkInsets('rtl', { left: '40px', right: '0px', top: '0px', bottom: '70px' });

// writing-mode: vertical-lr keeps the block (row) axis left-to-right, so row 2 is at x:[100,200].

checkInsets('vlr', { left: '0px', right: '40px', top: '0px', bottom: '70px' });

// writing-mode: vertical-rl reverses the block (row) axis, so row 2 is at x:[0,100].

checkInsets('vrl', { left: '40px', right: '0px', top: '0px', bottom: '70px' });

// writing-mode: sideways-lr reverses the inline (column) axis, so column 2 is at y:[0,100].

checkInsets('slr', { left: '0px', right: '40px', top: '70px', bottom: '0px' });

</script>