39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
<!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>
|