blob: 09caa788538667ac55ca171d6dcd646490eed131 [file] [log] [blame]
<!DOCTYPE html>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.grid {
position: relative;
grid-template-columns: 100px;
grid-template-rows: 200px;
font: 10px/1 Ahem;
}
</style>
<p>Test to verify that grid item's stretched size is reset when changing to a different alignment value.</p>
<div class="grid fit-content">
<div id="item">XXXXX</div>
</div>
<script>
"use strict";
var child = document.getElementById("item");
const values = ['self-start', 'self-end', 'start', 'end', 'center', 'baseline'];
values.forEach(function(value) {
child.style.alignSelf = 'stretch';
child.style.justifySelf = 'stretch';
test(function() {
assert_equals(child.offsetWidth, 100, "The width is not what it should:");
assert_equals(child.offsetHeight, 200, "The height is not what it should:");
}, "Checking stretched size before changing to " + value + ".");
child.style.alignSelf = value;
child.style.justifySelf = value;
test(function() {
assert_equals(child.offsetWidth, 50, "The width is not what it should:");
assert_equals(child.offsetHeight, 10, "The height is not what it should:");
}, "Checking size after changing to " + value + ".");
});
</script>