Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9ead765bfa8aea47c7a17c8492686b9ff56e8bf6 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html |
@@ -0,0 +1,77 @@ |
+<!DOCTYPE html> |
+ |
+<link href="resources/grid.css" rel="stylesheet"> |
+ |
+<style> |
+.container { |
+ width: 100px; |
+ height: 100px; |
+} |
+ |
+.grid { |
+ grid-template-columns: 1fr; |
+ grid-template-rows: 1fr; |
+} |
+ |
+div { font: 10px/1 Ahem; } |
+ |
+.minContent { |
+ width: -webkit-min-content; |
+ height: -webkit-min-content; |
+} |
+ |
+.maxContent { |
+ width: -webkit-max-content; |
+ height: -webkit-max-content; |
+} |
+ |
+.fitContent { |
+ width: -webkit-fit-content; |
+ height: -webkit-fit-content; |
+} |
+ |
+.fillAvailable { |
+ width: -webkit-fill-available; |
+ height: -webkit-fill-available; |
+} |
+ |
+</style> |
+ |
+<script src="../../resources/check-layout.js"></script> |
+ |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that fr tracks are properly sized whenever grid have intrinsic sizes.</p> |
+ |
+<div class="container"> |
+ <div class="grid" data-expected-width="100" data-expected-height="10"> |
+ <div>XXX XXX</div> |
+ </div> |
+</div> |
+ |
+<!-- This fails due to https://code.google.com/p/chromium/issues/detail?id=547762 --> |
+<div class="container"> |
+ <div class="grid minContent" data-expected-width="30" data-expected-height="10"> |
+ <div>XXX XXX</div> |
+ </div> |
+</div> |
+ |
+<div class="container"> |
+ <div class="grid maxContent" data-expected-width="70" data-expected-height="10"> |
+ <div>XXX XXX</div> |
+ </div> |
+</div> |
+ |
+<div class="container"> |
+ <div class="grid fitContent" data-expected-width="70" data-expected-height="10"> |
+ <div>XXX XXX</div> |
+ </div> |
+</div> |
+ |
+<div class="container"> |
+ <div class="grid fillAvailable" data-expected-width="100" data-expected-height="100"> |
+ <div>XXX XXX</div> |
+ </div> |
+</div> |
+ |
+</body> |