<!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>