| Index: LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html
|
| diff --git a/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html b/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..de8096fd0be84ae80c0167421b40516a6c6040d5
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html
|
| @@ -0,0 +1,83 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<style>
|
| +.grid {
|
| + display: grid;
|
| + grid-template-columns: 200px 200px;
|
| + grid-template-rows: 200px 200px;
|
| +}
|
| +
|
| +#absolutePos {
|
| + position: absolute;
|
| +}
|
| +
|
| +#fixedPos {
|
| + position: fixed;
|
| +}
|
| +
|
| +#floatPos {
|
| + float: left;
|
| +}
|
| +
|
| +#one {
|
| + color: blue;
|
| + background: red;
|
| + grid-column: 1;
|
| + grid-row: 1;
|
| +}
|
| +
|
| +#two {
|
| + color: yellow;
|
| + background: green;
|
| + grid-column: 2;
|
| + grid-row: 1;
|
| +}
|
| +#three {
|
| + color: gray;
|
| + background: pink;
|
| + grid-column: 1;
|
| + grid-row: 2;
|
| +}
|
| +#four {
|
| + color: orange;
|
| + background: brown;
|
| + grid-column: 2;
|
| + grid-row: 2;
|
| +}
|
| +</style>
|
| +<script src="../../resources/check-layout.js"></script>
|
| +<body onload="checkLayout('.grid')">
|
| +
|
| +<p>This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned elements.</p>
|
| +<p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p>
|
| +
|
| +<div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="769">
|
| + <div id="one"></div>
|
| + <div id="two"></div>
|
| + <div id="three"></div>
|
| + <div id="four"></div>
|
| +</div>
|
| +
|
| +<div class="grid" id="absolutePos" data-expected-height="400" data-expected-width="400">
|
| + <div class="gg" id="one"></div>
|
| + <div class="gg" id="two"></div>
|
| + <div class="gg" id="three"></div>
|
| + <div class="gg" id="four"></div>
|
| +</div>
|
| +
|
| +<div class="grid" id="fixedPos" data-expected-height="400" data-expected-width="400">
|
| + <div class="gg" id="one"></div>
|
| + <div class="gg" id="two"></div>
|
| + <div class="gg" id="three"></div>
|
| + <div class="gg" id="four"></div>
|
| +</div>
|
| +
|
| +<div class="grid" id="floatPos" data-expected-height="400" data-expected-width="400">
|
| + <div class="gg" id="one"></div>
|
| + <div class="gg" id="two"></div>
|
| + <div class="gg" id="three"></div>
|
| + <div class="gg" id="four"></div>
|
| +</div>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 181333003:
[CSS Grid Layout] Use Render methods, rather than style, to determine shrink-to-fit behavior (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master