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..f936208bc792d02a9196046768e055f48088366e |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html |
@@ -0,0 +1,38 @@ |
+<!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> |
+<div class="grid fit-content"> |
+ <div id="item">XXXXX</div> |
+</div> |
+<script> |
+"use strict"; |
+var child = document.getElementById("item"); |
+const values = ['self-start', 'self-end', 'start', 'end', 'center', 'right', 'left', 'baseline']; |
+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:"); |
+ assert_equals(child.offsetHeight, 200, "The height is not what it should:"); |
+ }, "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:"); |
+ assert_equals(child.offsetHeight, 10, "The height is not what it should:"); |
+ }, "Checking size after changing to " + value + "."); |
+}); |
+</script> |