Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html |
index aaeea2ac0fab7170ccca0a055b5cb983b74d4e98..14aadaa5743a211cb4df5ba7b876cd9c412052fc 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html |
@@ -1,7 +1,9 @@ |
<!DOCTYPE html> |
<html> |
<head> |
+<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/check-layout.js"></script> |
<style> |
body { |
@@ -11,7 +13,6 @@ body { |
.grid { |
grid-template-columns: 100px 100px; |
grid-template-rows: 200px 200px; |
- width: -webkit-fit-content; |
margin-bottom: 20px; |
} |
@@ -25,11 +26,6 @@ body { |
.autoMarginBottom { margin-bottom: auto; } |
.autoMarginLeft { margin-left: auto; } |
.autoMargin { margin: auto; } |
- |
-.itemsCenter { |
- align-items: center; |
- justify-items: center; |
-} |
</style> |
</head> |
<body onload="checkLayout('.grid')"> |
@@ -38,7 +34,7 @@ body { |
<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR itemsCenter"> |
+ <div class="grid fit-content verticalLR itemsCenter"> |
<div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> |
@@ -48,7 +44,7 @@ body { |
<p>Direction: LTR | Self Alignment: stretch | fixed size items | 4 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR"> |
+ <div class="grid fit-content verticalLR"> |
<div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> |
@@ -58,7 +54,7 @@ body { |
<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR itemsCenter"> |
+ <div class="grid fit-content verticalLR itemsCenter"> |
<div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
@@ -68,7 +64,7 @@ body { |
<p>Direction: LTR | Self Alignment: stretch | auto size items | 4 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR"> |
+ <div class="grid fit-content verticalLR"> |
<div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
@@ -79,7 +75,7 @@ body { |
<!-- direction RTL --> |
<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR itemsCenter directionRTL"> |
+ <div class="grid fit-content verticalLR itemsCenter directionRTL"> |
<div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> |
@@ -90,7 +86,7 @@ body { |
<p>Direction: RTL | Self Alignment: stretch | fixed size items | 4 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR directionRTL"> |
+ <div class="grid fit-content verticalLR directionRTL"> |
<div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> |
<div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> |
@@ -100,7 +96,7 @@ body { |
<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR itemsCenter directionRTL"> |
+ <div class="grid fit-content verticalLR itemsCenter directionRTL"> |
<div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
@@ -111,7 +107,7 @@ body { |
<p>Direction: RTL | Self Alignment: stretch | auto size items | 4 auto-margin</p> |
<div style="position: relative"> |
- <div class="grid verticalLR directionRTL"> |
+ <div class="grid fit-content verticalLR directionRTL"> |
<div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |
<div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> |