Chromium Code Reviews Chromium Code Reviews
Issue 2832783003:
[css-grid] Clearing the override height before layout (Closed)
| Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..ea6becb899732a2ec7755d5832cb2fc475ff3875 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html |
| @@ -0,0 +1,37 @@ |
| +<!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> |
|
Manuel Rego
2017/04/21 10:45:46
Could you make this test under LayoutTests/externa
jfernandez
2017/04/21 11:15:33
Yes, I'll do it.
|
| +<div class="grid fit-content"> |
| + <div id="item">XXXXX</div> |
| +</div> |
| +<script> |
| +var child = document.getElementById("item"); |
| +values = ['self-start', 'self-end', 'start', 'end', 'center', 'right', 'left', 'baseline']; |
|
Manuel Rego
2017/04/21 10:45:46
Nit: Use "var" or even "const" to define "values".
jfernandez
2017/04/21 11:15:33
Acknowledged.
|
| +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."); |
|
Manuel Rego
2017/04/21 10:45:46
I'll change the string to something like:
"Check i
jfernandez
2017/04/21 11:15:33
This assert message is only shown when it fails. T
|
| + assert_equals(child.offsetHeight, 200, "The height is not what it should. " + value); |
|
Manuel Rego
2017/04/21 10:45:46
Ditto.
Also remove the "+ value" at the end.
jfernandez
2017/04/21 11:15:33
This is a mistake, thanks for finding it.
|
| + }, "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."); |
|
Manuel Rego
2017/04/21 10:45:46
And here something like:
"Check item's width after
jfernandez
2017/04/21 11:15:33
Already commented about it above.
|
| + assert_equals(child.offsetHeight, 10, "The height is not what it should. " + value); |
|
Manuel Rego
2017/04/21 10:45:46
Ditto.
jfernandez
2017/04/21 11:15:33
Already commented about it above.
|
| + }, "Checking size after changing to " + value); |
| +}); |
| +</script> |
