Chromium Code Reviews 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| Index: LayoutTests/fast/css-grid-layout/grid-element-shink-to-fit.html |
| diff --git a/LayoutTests/fast/css-grid-layout/grid-element-shink-to-fit.html b/LayoutTests/fast/css-grid-layout/grid-element-shink-to-fit.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..de9be6d2917531812a52ed0874a0d54eca420b1e |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-grid-layout/grid-element-shink-to-fit.html |
| @@ -0,0 +1,86 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<script> |
| +if (window.testRunner) |
| + testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
|
Julien - ping for review
2014/03/04 18:33:27
This is unneeded!
jfernandez
2014/03/05 12:39:50
Done.
|
| +</script> |
| +<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>The following grid should be 400px * 400px.</p> |
|
Julien - ping for review
2014/03/04 18:33:27
The following grid*S* no?
Please let's have a des
jfernandez
2014/03/05 12:39:50
Done.
|
| + |
| +<div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="769"> |
| + <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="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> |
