Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html |
index fd6aa85b9ba77331401ccb87ad7c9e68e04cdfc7..a4f21733780b0e283746e1605933203fbbcb1538 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/justify-self-cell.html |
@@ -1,65 +1,18 @@ |
<!DOCTYPE html> |
<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"> |
<style> |
.grid { |
grid-template-columns: 100px 100px; |
grid-template-rows: 200px 200px; |
- width: -webkit-fit-content; |
} |
.cell { |
width: 10px; |
height: 20px; |
} |
- |
-.justifySelfAuto { |
- justify-self: auto; |
-} |
- |
-.justifySelfStretch { |
- justify-self: stretch; |
-} |
- |
-.justifySelfStart { |
- justify-self: start; |
-} |
- |
-.justifySelfEnd { |
- justify-self: end; |
-} |
- |
-.justifySelfCenter { |
- justify-self: center; |
-} |
- |
-.justifySelfRight { |
- justify-self: right; |
-} |
- |
-.justifySelfLeft { |
- justify-self: left; |
-} |
- |
-.justifySelfFlexStart { |
- justify-self: flex-start; |
-} |
- |
-.justifySelfFlexEnd { |
- justify-self: flex-end; |
-} |
- |
-.justifySelfSelfStart { |
- justify-self: self-start; |
-} |
- |
-.justifySelfSelfEnd { |
- justify-self: self-end; |
-} |
- |
-.justifyItemsCenter { |
- justify-items: center; |
-} |
</style> |
<script src="../../resources/check-layout.js"></script> |
<body onload="checkLayout('.grid')"> |
@@ -67,7 +20,7 @@ |
<p>This test checks that the justify-self property is applied correctly.</p> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content" data-expected-width="200" data-expected-height="400"> |
<div class="justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
<div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
@@ -77,7 +30,7 @@ |
</div> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content" data-expected-width="200" data-expected-height="400"> |
<div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
@@ -87,7 +40,7 @@ |
<!-- Default justification and initial values. --> |
<div style="position: relative"> |
- <div class="grid justifyItemsCenter" data-expected-width="200" data-expected-height="400"> |
+ <div class="grid fit-content justifyItemsCenter" data-expected-width="200" data-expected-height="400"> |
<div class="cell justifySelfAuto firstRowFirstColumn" data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell firstRowSecondColumn" data-offset-x="145" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
@@ -96,7 +49,7 @@ |
</div> |
<div style="position: relative"> |
- <div class="grid" data-expected-width="200" data-expected-height="400"> |
+ <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> |
<div class="justifySelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
<div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
@@ -106,7 +59,7 @@ |
<!-- Vertical writing mode. --> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid verticalRL" data-expected-width="400" data-expected-height="200"> |
+<div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> |
<div class="justifySelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
<div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="390" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="390" data-offset-y="180" data-expected-width="10" data-expected-height="20"></div> |
@@ -116,7 +69,7 @@ |
</div> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid verticalLR" data-expected-width="400" data-expected-height="200"> |
+<div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> |
<div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
@@ -126,7 +79,7 @@ |
<!-- RTL direction. --> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid directionRTL" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> |
<div class="justifySelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
<div class="cell justifySelfStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfEnd firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
@@ -136,7 +89,7 @@ |
</div> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid directionRTL" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> |
<div class="cell justifySelfFlexEnd firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfFlexStart firstRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfSelfStart secondRowFirstColumn" data-offset-x="190" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |
@@ -146,7 +99,7 @@ |
<!-- RTL direction with opposite directions grid container vs grid item. --> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content" data-expected-width="200" data-expected-height="400"> |
<div class="justifySelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
<div class="cell justifySelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfEnd firstRowSecondColumn directionRTL" data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
@@ -156,7 +109,7 @@ |
</div> |
<div style="position: relative" class="constrainedContainer"> |
-<div class="grid" data-expected-width="200" data-expected-height="400"> |
+<div class="grid fit-content" data-expected-width="200" data-expected-height="400"> |
<div class="cell justifySelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="20"></div> |
<div class="cell justifySelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="90" data-offset-y="200" data-expected-width="10" data-expected-height="20"></div> |