Google Git
Sign in
chromium / chromium / src / 5126cd0d65c7c4c06f72469289a89141c72c10e5 / . / third_party / blink / web_tests / fast / css-grid-layout / grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html
blob: 7df568b1f392d8d89fc3576f1a35b4406411f010 [file] [log] [blame]
<!DOCTYPE HTML>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<style>
.grid {
position: relative;
}
.content {
width: 200px;
height: 200px;
}
#fromFixedWidth { width: 150px; }
#fromFixedHeight { height: 100px; }
#fromMarginAuto { margin: auto; }
</style>
<p>The grids below had initially 'stretched' items, but we have changed 'height', 'width' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height and width accordingly.</p>
<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
<div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
<div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
<div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
<div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
<div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
<div style="width: 150px; height: 100px"></div>
</div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
<div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200">
<div style="width: 150px; height: 100px"></div>
</div>
</div>
<div class="grid fit-content">
<div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
<div class="grid fit-content">
<div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</div>
<div class="grid fit-content">
<div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
<div style="width: 150px; height: 100px"></div>
</div>
<div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
<div id="contentSized-fromMarginAuto" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200">
<div style="width: 150px; height: 100px"></div>
</div>
</div>
<script>
document.body.offsetLeft;
document.getElementById("fromFixedHeight").style.height = "auto";
document.getElementById("toFixedHeight").style.height = "100px";
document.getElementById("fromFixedWidth").style.width = "auto";
document.getElementById("toFixedWidth").style.width = "150px";
document.getElementById("fromMarginAuto").style.margin = "0";
document.getElementById("toMarginAuto").style.margin = "auto";
document.getElementById("contentSized-fromFixedHeight").style.height = "auto";
document.getElementById("contentSized-toFixedHeight").style.height = "100px";
document.getElementById("contentSized-fromFixedWidth").style.width = "auto";
document.getElementById("contentSized-toFixedWidth").style.width = "150px";
document.getElementById("contentSized-fromMarginAuto").style.margin = "0";
document.getElementById("contentSized-toMarginAuto").style.margin = "auto";
checkLayout(".grid");
</script>