[CSS Grid Layout Refactoring some layout tests
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 19 Feb 2016 13:25:49 +0000 (13:25 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 19 Feb 2016 13:25:49 +0000 (13:25 +0000)
https://bugs.webkit.org/show_bug.cgi?id=154291

Refactored several tests so they use the shared sizing keywords
instead of specific CSS rules.

Reviewed by Sergio Villar Senin.

* fast/css-grid-layout/calc-resolution-grid-item.html:
* fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt:
* fast/css-grid-layout/flex-and-intrinsic-sizes.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html:
* fast/css-grid-layout/grid-align-justify-margin-border-padding.html:
* fast/css-grid-layout/grid-align-justify-overflow.html:
* fast/css-grid-layout/grid-align-justify-stretch.html:
* fast/css-grid-layout/grid-align.html:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
* fast/css-grid-layout/grid-columns-rows-get-set.html:
* fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html:
* fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
* fast/css-grid-layout/grid-content-alignment-overflow.html:
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html:
* fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html:
* fast/css-grid-layout/grid-content-alignment-with-span.html:
* fast/css-grid-layout/grid-element-change-columns-repaint.html:
* fast/css-grid-layout/grid-element-change-rows-repaint.html:
* fast/css-grid-layout/grid-element-repeat-get-set.html:
* fast/css-grid-layout/grid-gutters-and-alignment.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
* fast/css-grid-layout/grid-item-auto-margins-alignment.html:
* fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
* fast/css-grid-layout/grid-item-change-column-repaint.html:
* fast/css-grid-layout/grid-item-order-paint-order.html:
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html: Added.
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html: Added.
* fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html:
* fast/css-grid-layout/grid-item-z-index-stacking-context.html:
* fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html:
* fast/css-grid-layout/grid-justify-content-distribution.html:
* fast/css-grid-layout/grid-justify-content-vertical-lr.html:
* fast/css-grid-layout/grid-justify-content-vertical-rl.html:
* fast/css-grid-layout/justify-self-cell.html:
* fast/css-grid-layout/min-width-height-auto-and-margins.html:
* fast/css-grid-layout/minmax-fixed-logical-height-only.html:
* fast/css-grid-layout/minmax-fixed-logical-width-only.html:
* fast/css-grid-layout/minmax-max-content-resolution-columns.html:
* fast/css-grid-layout/minmax-max-content-resolution-rows.html:
* fast/css-grid-layout/named-grid-line-get-set.html:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
* fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
* fast/css-grid-layout/percent-of-indefinite-track-size.html:
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
* fast/css-grid-layout/place-cell-by-index.html:
* fast/css-grid-layout/resources/grid-alignment.css:
(.alignSelfCenterSafe):
(.alignSelfCenterUnsafe):
(.alignSelfEndSafe):
(.alignSelfEndUnsafe):
(.alignItemsAuto):
(.alignItemsStretch):
(.alignItemsStart):
(.alignItemsEnd):
(.alignItemsCenterSafe):
(.alignItemsCenterUnsafe):
(.alignItemsEndSafe):
(.alignItemsEndUnsafe):
(.justifySelfAuto):
(.justifySelfStretch):
(.justifySelfStart):
(.justifySelfCenter):
(.justifySelfEnd):
(.justifySelfRight):
(.justifySelfLeft):
(.justifySelfFlexStart):
(.justifySelfFlexEnd):
(.justifySelfSelfStart):
(.justifySelfSelfEnd):
(.justifySelfCenterSafe):
(.justifySelfCenterUnsafe):
(.justifyItemsAuto):
(.justifyItemsStretch):
(.justifyItemsStart):
(.justifyItemsCenter):
(.justifyItemsEnd):
(.justifyItemsCenterSafe):
(.justifyItemsCenterUnsafe):
(.justifyItemsEndSafe):
(.justifyItemsEndUnsafe):
(.selfStretch):
(.contentStart):
(.contentCenter):
(.contentEnd):
(.contentCenterSafe):
(.contentCenterUnsafe):
(.contentEndSafe):
(.contentEndUnsafe):
(.contentSpaceBetween):
(.contentSpaceAround):
(.contentSpaceEvenly):
(.contentStretch):
* fast/css-grid-layout/resources/grid.css:
(.verticalRL):
(.verticalLR):
(.horizontalTB):
(.horizontalBT):
(.inline-grid): Deleted.
(.firstRowFirstColumn): Deleted.
(.directionRTL): Deleted.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196819 268f45cc-cd09-0410-ab3c-d52691b4dbfc

56 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html
LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt
LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html
LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html
LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html
LayoutTests/fast/css-grid-layout/grid-align.html
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html
LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html
LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html
LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html
LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html
LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html
LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html
LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html
LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html
LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html
LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html
LayoutTests/fast/css-grid-layout/justify-self-cell.html
LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html
LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html
LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html
LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html
LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html
LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html
LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html
LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html
LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
LayoutTests/fast/css-grid-layout/place-cell-by-index.html
LayoutTests/fast/css-grid-layout/resources/grid-alignment.css
LayoutTests/fast/css-grid-layout/resources/grid.css

index 80eae74..14b7dd0 100644 (file)
@@ -1,3 +1,122 @@
+2016-02-19  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout Refactoring some layout tests
+        https://bugs.webkit.org/show_bug.cgi?id=154291
+
+        Refactored several tests so they use the shared sizing keywords
+        instead of specific CSS rules.
+
+        Reviewed by Sergio Villar Senin.
+
+        * fast/css-grid-layout/calc-resolution-grid-item.html:
+        * fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt:
+        * fast/css-grid-layout/flex-and-intrinsic-sizes.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html:
+        * fast/css-grid-layout/grid-align-justify-margin-border-padding.html:
+        * fast/css-grid-layout/grid-align-justify-overflow.html:
+        * fast/css-grid-layout/grid-align-justify-stretch.html:
+        * fast/css-grid-layout/grid-align.html:
+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+        * fast/css-grid-layout/grid-columns-rows-get-set.html:
+        * fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html:
+        * fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
+        * fast/css-grid-layout/grid-content-alignment-overflow.html:
+        * fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html:
+        * fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html:
+        * fast/css-grid-layout/grid-content-alignment-with-span.html:
+        * fast/css-grid-layout/grid-element-change-columns-repaint.html:
+        * fast/css-grid-layout/grid-element-change-rows-repaint.html:
+        * fast/css-grid-layout/grid-element-repeat-get-set.html:
+        * fast/css-grid-layout/grid-gutters-and-alignment.html:
+        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
+        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
+        * fast/css-grid-layout/grid-item-auto-margins-alignment.html:
+        * fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
+        * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
+        * fast/css-grid-layout/grid-item-change-column-repaint.html:
+        * fast/css-grid-layout/grid-item-order-paint-order.html:
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html: Added.
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html: Added.
+        * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html: Added.
+        * fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html:
+        * fast/css-grid-layout/grid-item-z-index-stacking-context.html:
+        * fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html:
+        * fast/css-grid-layout/grid-justify-content-distribution.html:
+        * fast/css-grid-layout/grid-justify-content-vertical-lr.html:
+        * fast/css-grid-layout/grid-justify-content-vertical-rl.html:
+        * fast/css-grid-layout/justify-self-cell.html:
+        * fast/css-grid-layout/min-width-height-auto-and-margins.html:
+        * fast/css-grid-layout/minmax-fixed-logical-height-only.html:
+        * fast/css-grid-layout/minmax-fixed-logical-width-only.html:
+        * fast/css-grid-layout/minmax-max-content-resolution-columns.html:
+        * fast/css-grid-layout/minmax-max-content-resolution-rows.html:
+        * fast/css-grid-layout/named-grid-line-get-set.html:
+        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
+        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
+        * fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
+        * fast/css-grid-layout/percent-of-indefinite-track-size.html:
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
+        * fast/css-grid-layout/place-cell-by-index.html:
+        * fast/css-grid-layout/resources/grid-alignment.css:
+        (.alignSelfCenterSafe):
+        (.alignSelfCenterUnsafe):
+        (.alignSelfEndSafe):
+        (.alignSelfEndUnsafe):
+        (.alignItemsAuto):
+        (.alignItemsStretch):
+        (.alignItemsStart):
+        (.alignItemsEnd):
+        (.alignItemsCenterSafe):
+        (.alignItemsCenterUnsafe):
+        (.alignItemsEndSafe):
+        (.alignItemsEndUnsafe):
+        (.justifySelfAuto):
+        (.justifySelfStretch):
+        (.justifySelfStart):
+        (.justifySelfCenter):
+        (.justifySelfEnd):
+        (.justifySelfRight):
+        (.justifySelfLeft):
+        (.justifySelfFlexStart):
+        (.justifySelfFlexEnd):
+        (.justifySelfSelfStart):
+        (.justifySelfSelfEnd):
+        (.justifySelfCenterSafe):
+        (.justifySelfCenterUnsafe):
+        (.justifyItemsAuto):
+        (.justifyItemsStretch):
+        (.justifyItemsStart):
+        (.justifyItemsCenter):
+        (.justifyItemsEnd):
+        (.justifyItemsCenterSafe):
+        (.justifyItemsCenterUnsafe):
+        (.justifyItemsEndSafe):
+        (.justifyItemsEndUnsafe):
+        (.selfStretch):
+        (.contentStart):
+        (.contentCenter):
+        (.contentEnd):
+        (.contentCenterSafe):
+        (.contentCenterUnsafe):
+        (.contentEndSafe):
+        (.contentEndUnsafe):
+        (.contentSpaceBetween):
+        (.contentSpaceAround):
+        (.contentSpaceEvenly):
+        (.contentStretch):
+        * fast/css-grid-layout/resources/grid.css:
+        (.verticalRL):
+        (.verticalLR):
+        (.horizontalTB):
+        (.horizontalBT):
+        (.inline-grid): Deleted.
+        (.firstRowFirstColumn): Deleted.
+        (.directionRTL): Deleted.
+
 2016-02-18  Andy Estes  <aestes@apple.com>
 
         Revert to dispatching the popstate event synchronously
index 9cbf884..e6bf3f1 100644 (file)
 
 .calcWidth {
     width: -webkit-calc(80% + 20%);
+    width: calc(80% + 20%);
     height: 15px;
 }
 
 .calcHeight {
     width: 15px;
     height: -webkit-calc(80% + 20px);
+    height: calc(80% + 20px);
 }
 
 .calcHeightAndWidth {
     width: -webkit-calc(80% + 20px);
+    width: calc(80% + 20px);
     height: -webkit-calc(70% + 30%);
+    height: calc(70% + 30%);
 }
 </style>
 <script src="../../resources/check-layout.js"></script>
index 1e044d2..f637704 100644 (file)
@@ -7,7 +7,7 @@ FAIL:
 Expected 30 for width, but got 70. 
 
 <div class="container">
-  <div class="grid minContent" data-expected-width="30" data-expected-height="10">
+  <div class="grid min-content" data-expected-width="30" data-expected-height="10">
     <div>XXX XXX</div>
   </div>
 </div>
index 776b5d9..18ee9a0 100644 (file)
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 
 <style>
 
 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>
@@ -51,25 +33,25 @@ div { font: 10px/1 Ahem; }
 
 <!-- This fails due to https://bugs.webkit.org/show_bug.cgi?id=150674 -->
 <div class="container">
-  <div class="grid minContent" data-expected-width="30" data-expected-height="10">
+  <div class="grid min-content" 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 class="grid max-content" 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 class="grid fit-content" 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 class="grid fill-available" data-expected-width="100" data-expected-height="100">
     <div>XXX XXX</div>
   </div>
 </div>
index 043e29c..a4639e0 100644 (file)
@@ -1,6 +1,7 @@
 <!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>
@@ -16,7 +17,6 @@ body {
     border-width: 5px 10px 15px 20px;
     border-style: dotted;
     border-color: blue;
-    width: -webkit-fit-content;
     position: relative;
 }
 
@@ -25,12 +25,6 @@ body {
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
-
-.stretch {
-    align-self: stretch;
-    justify-self: stretch;
-}
-
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -40,7 +34,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid verticalLR" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
@@ -51,10 +45,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
         <div class="firstRowFirstColumn cell"     data-offset-x="124"  data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"   data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"   data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="324"  data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -62,10 +56,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -73,10 +67,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -84,10 +78,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid verticalLR itemsRight" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR itemsRight" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -95,10 +89,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -106,10 +100,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -117,10 +111,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -128,10 +122,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -140,7 +134,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
@@ -151,10 +145,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="124" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="324" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -162,10 +156,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid verticalLR directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -173,10 +167,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid verticalLR directionRTL itemsLeft"      data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsLeft"      data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -184,10 +178,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid verticalLR directionRTL itemsRight"     data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsRight"     data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -195,10 +189,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -206,10 +200,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -217,10 +211,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -228,10 +222,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
index 9d91a0b..c10b442 100644 (file)
@@ -1,6 +1,7 @@
 <!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>
@@ -16,7 +17,6 @@ body {
     border-width: 5px 10px 15px 20px;
     border-style: dotted;
     border-color: blue;
-    width: -webkit-fit-content;
     position: relative;
 }
 
@@ -25,12 +25,6 @@ body {
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
-
-.stretch {
-    align-self: stretch;
-    justify-self: stretch;
-}
-
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -40,7 +34,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid verticalRL" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
@@ -51,10 +45,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
         <div class="firstRowFirstColumn cell"     data-offset-x="324" data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -62,10 +56,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -73,10 +67,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -84,10 +78,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL itemsRight" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -95,10 +89,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -106,10 +100,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -117,10 +111,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -128,10 +122,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -141,7 +135,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
@@ -152,10 +146,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="324" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -163,10 +157,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid verticalRL directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -174,10 +168,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid verticalRL directionRTL itemsLeft"      data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsLeft"      data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -185,10 +179,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid verticalRL directionRTL itemsRight"     data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsRight"     data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -196,10 +190,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -207,10 +201,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -218,10 +212,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -229,10 +223,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+    <div class="grid fit-content verticalRL directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
index 200ee00..7d3d4c5 100644 (file)
@@ -1,6 +1,7 @@
 <!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>
@@ -16,7 +17,6 @@ body {
     border-width: 5px 10px 15px 20px;
     border-style: dotted;
     border-color: blue;
-    width: -webkit-fit-content;
     position: relative;
 }
 
@@ -25,13 +25,6 @@ body {
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
-
-
-.stretch {
-    align-self: stretch;
-    justify-self: stretch;
-}
-
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -41,7 +34,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
@@ -52,10 +45,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
         <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -63,10 +56,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -74,10 +67,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsLeft" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -85,10 +78,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsRight" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -96,10 +89,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -107,10 +100,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -118,10 +111,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -129,10 +122,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -141,7 +134,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid directionRTL" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
@@ -152,10 +145,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -163,10 +156,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -174,10 +167,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -185,10 +178,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -196,10 +189,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -207,10 +200,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -218,10 +211,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -229,10 +222,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
index 3c15584..99693ac 100644 (file)
@@ -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 {
@@ -10,7 +12,6 @@ body {
 .grid {
     -webkit-grid-template-columns: 150px 150px;
     -webkit-grid-template-rows: 120px 120px 120px;
-    width: -webkit-fit-content;
     margin-bottom: 20px;
 }
 .cellOverflowWidth {
@@ -25,28 +26,6 @@ body {
     width: 50px;
     height: 40px;
 }
-.alignItemsCenter { align-items: center; }
-.alignItemsCenterSafe { align-items: center safe; }
-.alignItemsCenterUnsafe { align-items: center unsafe; }
-.alignItemsEnd { align-items: end; }
-.alignItemsEndSafe { align-items: end safe; }
-.alignItemsEndUnsafe { align-items: end unsafe; }
-.alignSelfCenter { align-self: center; }
-.alignSelfCenterSafe { align-self: center safe; }
-.alignSelfCenterUnsafe { align-self: center unsafe; }
-.alignSelfEnd { align-self: end; }
-.alignSelfEndSafe { align-self: end safe; }
-.alignSelfEndUnsafe { align-self: end unsafe; }
-.justifyItemsCenter { justify-items: center; }
-.justifyItemsCenterSafe { justify-items: center safe; }
-.justifyItemsCenterUnsafe { justify-items: center unsafe; }
-.justifyItemsEnd { justify-items: end; }
-.justifyItemsEndSafe { justify-items: end safe; }
-.justifyItemsEndUnsafe { justify-items: end unsafe; }
-.justifySelfCenter { justify-self: center; }
-.justifySelfCenterSafe { justify-self: center safe; }
-.justifySelfCenterUnsafe { justify-self: center unsafe; }
-.justifySelfEnd { justify-self: end; }
 .thirdRowFirstColumn {
     background-color: green;
     -webkit-grid-column: 1;
@@ -59,7 +38,7 @@ body {
 <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
 
 <div style="position: relative">
-    <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
@@ -70,7 +49,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
@@ -81,7 +60,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
@@ -92,7 +71,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
@@ -103,7 +82,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
@@ -114,7 +93,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
@@ -125,7 +104,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterUnsafe" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
@@ -136,7 +115,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
+    <div class="grid fit-content alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
index 2aa2c47..6401321 100644 (file)
@@ -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 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-grid-template-rows: 200px 200px;
-    width: -webkit-fit-content;
     margin-bottom: 20px;
 }
 
@@ -19,78 +20,12 @@ body {
     width: 20px;
     height: 40px;
 }
-
-.onlyWidthSet {
-    width: 20px;
-}
-
-.onlyHeightSet {
-    height: 40px;
-}
-
-.maxHeight {
-    max-height: 160px;
-}
-
-.maxWidth {
-    max-width: 90px;
-}
-
-.minWidth {
-    min-width: 120px;
-}
-
-.minHeight {
-    min-height: 220px;
-}
-
-.alignItemsAuto {
-    align-items: auto;
-}
-
-.alignItemsStretch {
-    align-items: stretch;
-}
-
-.alignItemsStart {
-    align-items: start;
-}
-
-.alignSelfAuto {
-    align-self: auto;
-}
-
-.alignSelfStretch {
-    align-self: stretch;
-}
-
-.alignSelfStart {
-    align-self: start;
-}
-
-.justifyItemsAuto {
-    justify-items: auto;
-}
-
-.justifyItemsStretch {
-    justify-items: stretch;
-}
-
-.justifyItemsStart {
-    justify-items: start;
-}
-
-.justifySelfAuto {
-    justify-self: auto;
-}
-
-.justifySelfStretch {
-    justify-self: stretch;
-}
-
-.justifySelfStart {
-    justify-self: start;
-}
+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -98,7 +33,7 @@ body {
 <p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
 
 <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="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
         <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -107,7 +42,7 @@ body {
 </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="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
         <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
@@ -116,7 +51,7 @@ body {
 </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="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="160"></div>
         <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="120" data-expected-height="40"></div>
         <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="220"></div>
@@ -125,7 +60,7 @@ body {
 </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="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -134,7 +69,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -143,7 +78,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
@@ -152,7 +87,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -161,7 +96,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -170,7 +105,7 @@ body {
 </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="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -179,7 +114,7 @@ body {
 </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="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
@@ -189,7 +124,7 @@ body {
 
 <!-- RTL direction (it should not affect the block-flow direction). -->
 <div style="position: relative">
-    <div class="grid directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -199,7 +134,7 @@ body {
 
 <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
 <div style="position: relative">
-    <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
         <div class="firstRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="widthAndHeightSet firstRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
@@ -209,7 +144,7 @@ body {
 
 <!-- Vertical RL writing mode. -->
 <div style="position: relative">
-    <div class="grid verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
@@ -218,7 +153,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
@@ -228,7 +163,7 @@ body {
 
 <!-- Vertical LR writing mode. -->
 <div style="position: relative">
-    <div class="grid verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
@@ -237,7 +172,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
index 1f48dc4..7455136 100644 (file)
@@ -1,6 +1,7 @@
 <!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>
@@ -12,7 +13,6 @@ body {
 .grid {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-grid-template-rows: 200px 200px;
-    width: -webkit-fit-content;
     margin-bottom: 20px;
 }
 
@@ -34,7 +34,7 @@ body {
 <p>This test checks that the align-self property is applied correctly.</p>
 
 <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="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -45,7 +45,7 @@ body {
 </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="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
@@ -55,7 +55,7 @@ body {
 
 <!-- Default alignment and initial values. -->
 <div style="position: relative">
-    <div class="grid alignItemsCenter" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400">
         <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
@@ -64,7 +64,7 @@ body {
 </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="alignSelfAuto 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="20" data-expected-height="40"></div>
         <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
@@ -74,7 +74,7 @@ body {
 
 <!-- RTL direction (it should not affect the block-flow direction). -->
 <div style="position: relative">
-     <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="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
          <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -85,7 +85,7 @@ body {
 </div>
 
 <div style="position: relative">
-     <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 alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
@@ -95,7 +95,7 @@ body {
 
 <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
 <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="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
          <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -106,7 +106,7 @@ body {
 </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="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
@@ -116,7 +116,7 @@ body {
 
 <!-- Vertical RL writing mode. -->
 <div style="position: relative">
-    <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="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
@@ -127,7 +127,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
@@ -137,7 +137,7 @@ body {
 
 <!-- Vertical LR writing mode. -->
 <div style="position: relative">
-    <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="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
@@ -148,7 +148,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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 alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
@@ -158,7 +158,7 @@ body {
 
 <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
 <div style="position: relative">
-    <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="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
         </div>
         <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
@@ -180,7 +180,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
             <div class="item"></div>
         </div>
@@ -198,7 +198,7 @@ body {
 
 <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
 <div style="position: relative">
-    <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="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
         </div>
         <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
@@ -220,7 +220,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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 alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
             <div class="item"></div>
         </div>
index c8a58f1..065bcd2 100644 (file)
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-.grid {
+.definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
     width: 800px;
     height: 600px;
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
     <div class="gridItem"></div>
 </div>
-<div class="grid gridWithAuto" id="gridWithAutoElement">
+<div class="grid definite gridWithAuto" id="gridWithAutoElement">
   <div class="gridItem2"></div>
 </div>
-<div class="grid gridWithEM" id="gridWithEMElement"></div>
-<div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
-<div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
-<div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
-<div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
-<div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
-<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
-<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
+<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
+<div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div>
+<div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
+<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
   <div class="gridItem"></div>
   <div class="gridItem2"></div>
 </div>
-<div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
-<div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
-<div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div>
-<div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
-<div class="grid gridWithCalcCalc" id="gridWithCalcCalc"></div>
-<div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
-<div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
-<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
-<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
+<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
+<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
+<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
+<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
+<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
+<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
 <script src="../../resources/js-test-post.js"></script>
index e53b3d4..679c47c 100644 (file)
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-.grid {
+.definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
     width: 800px;
     height: 600px;
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div class="grid gridWithNone" id="gridWithNoneElement"></div>
-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
+<div class="grid definite gridWithNone" id="gridWithNoneElement"></div>
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
     <div class="gridItem"></div>
 </div>
-<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
+<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
+<div class="grid definite gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
   <div class="gridItem"></div>
 </div>
-<div class="grid gridWithEM" id="gridWithEMElement"></div>
-<div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
-<div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
-<div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
-<div class="grid gridWithMinMax" id="gridWithMinMaxElement"></div>
-<div class="grid gridWithMinContent" id="gridWithMinContentElement"></div>
-<div class="grid gridWithMinContent" id="gridWithMinContentWithChildrenElement">
+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
+<div class="grid definite gridWithFitContent" id="gridWithFitContentElement"></div>
+<div class="grid definite gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
+<div class="grid definite gridWithMinMax" id="gridWithMinMaxElement"></div>
+<div class="grid definite gridWithMinContent" id="gridWithMinContentElement"></div>
+<div class="grid definite gridWithMinContent" id="gridWithMinContentWithChildrenElement">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid gridWithMaxContent" id="gridWithMaxContentElement"></div>
-<div class="grid gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
+<div class="grid definite gridWithMaxContent" id="gridWithMaxContentElement"></div>
+<div class="grid definite gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid gridWithFraction" id="gridWithFractionElement"></div>
-<div class="grid gridWithCalc" id="gridWithCalcElement"></div>
-<div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
-<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
-<div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
-<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
+<div class="grid definite gridWithFraction" id="gridWithFractionElement"></div>
+<div class="grid definite gridWithCalc" id="gridWithCalcElement"></div>
+<div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
+<div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
+<div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
     <div class="gridItem"></div>
 </div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
index f5b8bfe..421a474 100644 (file)
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-.grid {
-    width: -webkit-min-content;
-    height: -webkit-min-content;
-}
-
 .margin {
     margin: 10px;
 }
 <body onload="checkLayout('.grid');">
     <p>This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected.</p>
 
-    <div class="grid" data-expected-width="100" data-expected-height="100">
+    <div class="grid min-content" data-expected-width="100" data-expected-height="100">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin" data-expected-width="100" data-expected-height="100">
+    <div class="grid min-content margin" data-expected-width="100" data-expected-height="100">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid border" data-expected-width="110" data-expected-height="110">
+    <div class="grid min-content border" data-expected-width="110" data-expected-height="110">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid padding" data-expected-width="140" data-expected-height="140">
+    <div class="grid min-content padding" data-expected-width="140" data-expected-height="140">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid scroll" data-expected-width="115" data-expected-height="115">
+    <div class="grid min-content scroll" data-expected-width="115" data-expected-height="115">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin border" data-expected-width="110" data-expected-height="110">
+    <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin padding" data-expected-width="140" data-expected-height="140">
+    <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin scroll" data-expected-width="115" data-expected-height="115">
+    <div class="grid min-content margin scroll" data-expected-width="115" data-expected-height="115">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid border padding" data-expected-width="150" data-expected-height="150">
+    <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid border scroll" data-expected-width="125" data-expected-height="125">
+    <div class="grid min-content border scroll" data-expected-width="125" data-expected-height="125">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid padding scroll" data-expected-width="155" data-expected-height="155">
+    <div class="grid min-content padding scroll" data-expected-width="155" data-expected-height="155">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin border padding" data-expected-width="150" data-expected-height="150">
+    <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin border scroll" data-expected-width="125" data-expected-height="125">
+    <div class="grid min-content margin border scroll" data-expected-width="125" data-expected-height="125">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin padding scroll" data-expected-width="155" data-expected-height="155">
+    <div class="grid min-content margin padding scroll" data-expected-width="155" data-expected-height="155">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid border padding scroll" data-expected-width="165" data-expected-height="165">
+    <div class="grid min-content border padding scroll" data-expected-width="165" data-expected-height="165">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
-    <div class="grid margin border padding scroll" data-expected-width="165" data-expected-height="165">
+    <div class="grid min-content margin border padding scroll" data-expected-width="165" data-expected-height="165">
         <div class="item" data-expected-width="100" data-expected-height="100"></div>
     </div>
 
index 6217403..8329837 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -38,42 +39,11 @@ body {
     -webkit-grid-auto-rows: minmax(40px, auto);
 }
 
-.spaceBetween {
-    justify-content: space-between;
-    align-content: space-between;
-}
-
-.spaceAround {
-    justify-content: space-around;
-    align-content: space-around;
-}
-
-.spaceEvenly {
-    justify-content: space-evenly;
-    align-content: space-evenly;
-}
-
-.stretch {
-    justify-content: stretch;
-    align-content: stretch;
-}
 
 .cell {
     width: 20px;
     height: 40px;
 }
-.justifyCenter {
-    justify-self: center;
-}
-.alignCenter {
-    align-self: center;
-}
-.justifyEnd {
-    justify-self: end;
-}
-.alignEnd {
-    align-self: end;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -82,9 +52,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
-    <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -92,9 +62,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
-    <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -102,9 +72,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
-    <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -112,9 +82,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
-    <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -122,9 +92,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
-    <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -132,9 +102,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
-    <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -142,9 +112,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
-    <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter alignCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell justifyCenter alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
     </div>
@@ -152,9 +122,9 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
-    <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd alignEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell justifyEnd alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
     </div>
@@ -163,9 +133,9 @@ body {
 <!-- RTL direction. -->
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
-    <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -173,9 +143,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
-    <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -183,9 +153,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
-    <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -193,9 +163,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
-    <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -203,9 +173,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
-    <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -213,9 +183,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
-    <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell alignEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
         <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     </div>
@@ -223,9 +193,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
-    <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyCenter alignCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell justifyCenter alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
     </div>
@@ -233,9 +203,9 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
-    <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
-        <div class="a cell justifyEnd alignEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
-        <div class="b cell justifyEnd alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+        <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
         <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
     </div>
index f9a8f21..1064f60 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -22,37 +23,6 @@ body {
     width: 200px;
     height: 150px;
 }
-
-.center {
-    align-content: center;
-    justify-content: center;
-}
-
-.centerSafe {
-    align-content: center safe;
-    justify-content: center safe;
-}
-
-.centerUnsafe {
-    align-content: center unsafe;
-    justify-content: center unsafe;
-}
-
-.end {
-    align-content: end;
-    justify-content: end;
-}
-
-.endSafe {
-    align-content: end safe;
-    justify-content: end safe;
-}
-
-.endUnsafe {
-    align-content: end unsafe;
-    justify-content: end unsafe;
-}
-
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -60,7 +30,7 @@ body {
 <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
 
 <div style="position: relative">
-    <div class="grid overflowWidth center" data-expected-width="60" data-expected-height="300">
+    <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
@@ -69,7 +39,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowHeight centerUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
@@ -78,7 +48,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowWidth centerSafe" data-expected-width="60" data-expected-height="300">
+    <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
@@ -87,7 +57,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowHeight centerSafe" data-expected-width="200" data-expected-height="150">
+    <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
@@ -96,7 +66,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowWidth end" data-expected-width="60" data-expected-height="300">
+    <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
@@ -105,7 +75,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowHeight endUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
@@ -114,7 +84,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowWidth endSafe" data-expected-width="60" data-expected-height="300">
+    <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
@@ -123,7 +93,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid overflowHeight endSafe" data-expected-width="200" data-expected-height="150">
+    <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
index c538852..e03333e 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -37,22 +38,6 @@ body {
     -webkit-grid-auto-columns: auto;
     -webkit-grid-auto-rows: auto;
 }
-.spaceBetween {
-    justify-content: space-between;
-    align-content: space-between;
-}
-.spaceAround {
-    justify-content: space-around;
-    align-content: space-around;
-}
-.spaceEvenly {
-    justify-content: space-evenly;
-    align-content: space-evenly;
-}
-.stretch {
-    justify-content: stretch;
-    align-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -61,7 +46,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-between'</p>
-    <div class="grid spaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
         <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
         <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
@@ -71,7 +56,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-around'</p>
-    <div class="grid spaceAround verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
         <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
         <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
@@ -81,7 +66,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-evenly'</p>
-    <div class="grid spaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
         <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
         <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
@@ -91,7 +76,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
         <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
@@ -102,7 +87,7 @@ body {
 <!-- RTL direction. -->
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-between'</p>
-    <div class="grid spaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
         <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
@@ -112,7 +97,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-around'</p>
-    <div class="grid spaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
         <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
         <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
@@ -122,7 +107,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-evenly'</p>
-    <div class="grid spaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
         <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
         <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
@@ -132,7 +117,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
index db85799..14b4ebb 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -37,22 +38,6 @@ body {
     -webkit-grid-auto-columns: auto;
     -webkit-grid-auto-rows: auto;
 }
-.spaceBetween {
-    justify-content: space-between;
-    align-content: space-between;
-}
-.spaceAround {
-    justify-content: space-around;
-    align-content: space-around;
-}
-.spaceEvenly {
-    justify-content: space-evenly;
-    align-content: space-evenly;
-}
-.stretch {
-    justify-content: stretch;
-    align-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -61,7 +46,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-between'</p>
-    <div class="grid spaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
         <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
         <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
@@ -71,7 +56,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-around'</p>
-    <div class="grid spaceAround verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
         <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
         <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
@@ -81,7 +66,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-evenly'</p>
-    <div class="grid spaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
         <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
         <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
@@ -91,7 +76,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
         <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
@@ -102,7 +87,7 @@ body {
 <!-- RTL direction. -->
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-between'</p>
-    <div class="grid spaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
         <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
@@ -112,7 +97,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-around'</p>
-    <div class="grid spaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
         <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
         <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
@@ -122,7 +107,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-evenly'</p>
-    <div class="grid spaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
         <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
         <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
@@ -132,7 +117,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
         <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
index c927005..c559c69 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -37,22 +38,6 @@ body {
     -webkit-grid-auto-columns: auto;
     -webkit-grid-auto-rows: auto;
 }
-.spaceBetween {
-    justify-content: space-between;
-    align-content: space-between;
-}
-.spaceAround {
-    justify-content: space-around;
-    align-content: space-around;
-}
-.spaceEvenly {
-    justify-content: space-evenly;
-    align-content: space-evenly;
-}
-.stretch {
-    justify-content: stretch;
-    align-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
@@ -61,7 +46,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-between'</p>
-    <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
         <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
         <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -71,7 +56,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-around'</p>
-    <div class="grid spaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
         <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
         <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
@@ -81,7 +66,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'space-evenly'</p>
-    <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
         <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
         <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
@@ -91,7 +76,7 @@ body {
 
 <div style="position: relative">
     <p>direction: LTR | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200">
+    <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
@@ -102,7 +87,7 @@ body {
 <!-- RTL direction. -->
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-between'</p>
-    <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
         <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -112,7 +97,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-around'</p>
-    <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
         <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
         <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
@@ -122,7 +107,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'space-evenly''</p>
-    <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
         <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
         <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
@@ -132,7 +117,7 @@ body {
 
 <div style="position: relative">
     <p>direction: RTL | distribution: 'stretch'</p>
-    <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
         <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
         <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
index 81253e7..a8c799c 100644 (file)
@@ -9,6 +9,7 @@ function repaintTest()
 }
 window.addEventListener("load", runRepaintTest, false);
 </script>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 body {
@@ -16,7 +17,6 @@ body {
 }
 
 .grid {
-    width: -webkit-min-content;
     -webkit-grid-template-rows: 50px;
     -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
 }
@@ -27,7 +27,7 @@ body {
 <body>
 <div> This test checks that changing the grid-template-columns lead to a repaint. The final grid element should be 250px * 50px, the grid item should be 50px * 50px. No trace of the elements before the grid-template-columns change should be seen.</div>
 <div class="constrainedContainer">
-    <div class="grid">
+    <div class="grid min-content">
         <div class="sizedToGridArea"></div>
     </div>
 </div>
index c020048..495829f 100644 (file)
@@ -9,6 +9,7 @@ function repaintTest()
 }
 window.addEventListener("load", runRepaintTest, false);
 </script>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 body {
@@ -16,7 +17,6 @@ body {
 }
 
 .grid {
-    width: -webkit-fit-content;
     -webkit-grid-template-rows: 50px 100px;
     -webkit-grid-template-columns: 100px;
 }
@@ -27,7 +27,7 @@ body {
 <body>
 <div>This test checks that changing the grid-template-rows lead to a repaint. The final grid element should be 100px * 150px, the grid item should be 100px * 100px. No trace of the elements before the grid-template-rows change should be seen.</div>
 <div class="constrainedContainer">
-    <div class="grid">
+    <div class="grid fit-content">
         <div class="sizedToGridArea"></div>
     </div>
 </div>
index b2ec3fb..72df2a0 100644 (file)
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-.grid {
+.definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
     width: 800px;
     height: 600px;
 }
-
 .gridItem {
     -webkit-grid-column: 1;
     -webkit-grid-row: 1;
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
-<div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
-<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
-<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
+<div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
+<div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
+<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
+<div class="grid definite twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
+<div class="grid definite twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
+<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
     <div class="gridItem"></div>
     <div class="gridItem2"></div>
 </div>
-<div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
-<div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
-<div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
-<div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
+<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
+<div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
+<div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
+<div class="grid definite mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
     <div class="gridItem"></div>
 </div>
-<div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
+<div class="grid definite mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
 
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
index 208eab7..5e4aeb2 100644 (file)
@@ -1,7 +1,7 @@
 <!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">
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
 <script src="../../resources/check-layout.js"></script>
 <script src="../../resources/js-test.js"></script>
 <style>
@@ -10,7 +10,6 @@ body { margin: 0px; }
 .grid100And200 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-grid-template-rows: 200px 200px;
-    width: -webkit-fit-content;
     position: relative; /* For the <p> comments */
 }
 
@@ -36,7 +35,6 @@ body { margin: 0px; }
     border-width: 5px 10px 15px 20px;
     border-style: dotted;
     border-color: blue;
-    width: -webkit-fit-content;
     position: relative; /* For the <p> comments */
 }
 
@@ -56,11 +54,6 @@ body { margin: 0px; }
     position: relative;
 }
 
-.stretch {
-    align-self: stretch;
-    justify-self: stretch;
-}
-
 .stretchedGrid { -webkit-grid-auto-columns: auto; }
 
 .gridRowColumnGaps {
@@ -95,7 +88,7 @@ div.gridWithPaddingBorder > div.cell {
 
 <!-- Check that gutters do not interfere with self alignment computation. -->
 <div class="container">
-    <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
+    <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
         <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
@@ -104,7 +97,7 @@ div.gridWithPaddingBorder > div.cell {
 </div>
 
 <div class="container">
-    <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-width="417" data-expected-height="221">
+    <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" data-expected-width="417" data-expected-height="221">
         <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
         </div>
         <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40">
@@ -126,7 +119,7 @@ div.gridWithPaddingBorder > div.cell {
 </div>
 
 <div class="container">
-     <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
+     <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
          <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
          <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
          <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
@@ -274,10 +267,10 @@ div.gridWithPaddingBorder > div.cell {
 <div class="container">
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid gridWithPaddingBorder directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="167" data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -285,10 +278,10 @@ div.gridWithPaddingBorder > div.cell {
 <div class="container">
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid gridWithPaddingBorder directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="151" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="167" data-offset-y="375" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -296,10 +289,10 @@ div.gridWithPaddingBorder > div.cell {
 <div class="container">
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid gridWithPaddingBorder directionRTL itemsRight gridRowColumnGaps"     data-expected-width="396" data-expected-height="467">
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight gridRowColumnGaps"     data-expected-width="396" data-expected-height="467">
         <div class="cell firstRowFirstColumn"     data-offset-x="323" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
@@ -307,10 +300,10 @@ div.gridWithPaddingBorder > div.cell {
 <div class="container">
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid gridWithPaddingBorder directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="323" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="231" data-expected-width="20"  data-expected-height="40"></div>
     </div>
 </div>
index b089fbb..1b89ad0 100644 (file)
@@ -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 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-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 Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+    <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 Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+    <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>
index 315ac6d..4a35f26 100644 (file)
@@ -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 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-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 Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
@@ -48,7 +44,7 @@ body {
 
 <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL">
         <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
@@ -58,7 +54,7 @@ body {
 
 <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" 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 Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL">
         <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" 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 Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
@@ -90,7 +86,7 @@ body {
 
 <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL directionRTL">
         <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
@@ -100,7 +96,7 @@ body {
 
 <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
index 6898510..051eb02 100644 (file)
@@ -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 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-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 Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
@@ -48,7 +44,7 @@ body {
 
 <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content">
         <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
@@ -58,7 +54,7 @@ body {
 
 <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content itemsCenter">
         <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
@@ -68,7 +64,7 @@ body {
 
 <p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content">
         <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
@@ -79,7 +75,7 @@ body {
 <!-- direction RTL -->
 <p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content itemsCenter directionRTL">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" 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="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
@@ -89,7 +85,7 @@ body {
 
 <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content directionRTL">
         <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
@@ -99,7 +95,7 @@ body {
 
 <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
-    <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content itemsCenter directionRTL">
         <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" 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="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
@@ -109,7 +105,7 @@ body {
 
 <p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
-    <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+    <div class="grid fit-content directionRTL">
         <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
         <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
index a5a3bbe..9e02650 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
@@ -11,7 +12,6 @@ body {
 .grid {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-grid-template-rows: 200px 200px;
-    width: -webkit-fit-content;
     margin-bottom: 20px;
     font: 15px/1 Ahem;
 }
@@ -47,7 +47,7 @@ body {
 <p>This test checks that the 'stretch' value is only applied if neither of its margins (in the appropriate axis) are 'auto'.</p>
 
 <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="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
@@ -64,7 +64,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
@@ -81,7 +81,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <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="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
@@ -99,7 +99,7 @@ body {
 
 <!-- RTL direction -->
 <div style="position: relative">
-    <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="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
@@ -116,7 +116,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
@@ -133,7 +133,7 @@ body {
 </div>
 
 <div style="position: relative">
-    <div class="grid  directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
+    <div class="grid fit-content directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
index ab48dd4..0a2d4a6 100644 (file)
@@ -1,4 +1,5 @@
 <!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/check-layout.js"></script>
@@ -14,7 +15,6 @@ body {
     border-width: 5px 10px 15px 20px;
     border-style: dotted;
     border-color: blue;
-    width: -webkit-fit-content;
     position: relative;
 }
 
@@ -34,7 +34,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid itemsStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsStart" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
@@ -45,10 +45,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
         <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -56,10 +56,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -67,10 +67,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsLeft" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -78,10 +78,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content itemsRight" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -89,10 +89,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -100,10 +100,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -111,10 +111,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -122,10 +122,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -134,7 +134,7 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
-    <div class="grid directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
         <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
         <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
@@ -145,10 +145,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'center' | justify-items: 'center'</p>
-    <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -156,10 +156,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'end' | justify-items: 'end'</p>
-    <div class="grid directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -167,10 +167,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'left' | justify-items: 'left'</p>
-    <div class="grid directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -178,10 +178,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL | align-items: 'right' | justify-items: 'right'</p>
-    <div class="grid directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -189,10 +189,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -200,10 +200,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -211,10 +211,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
-    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
@@ -222,10 +222,10 @@ body {
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
-    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
         <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
-        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
-        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
         <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
     </div>
 </div>
index 0bffd86..6568ab8 100644 (file)
@@ -9,6 +9,7 @@ function repaintTest()
 }
 window.addEventListener("load", runRepaintTest, false);
 </script>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 body {
@@ -16,7 +17,6 @@ body {
 }
 
 .grid {
-    width: -webkit-min-content;
     -webkit-grid-template-rows: 50px;
     -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
 }
@@ -27,7 +27,7 @@ body {
 <body>
 <div>This test checks that changing the grid-column on a grid item properly repaint. The final grid item should be 50px * 50px. There should be no trace of the grid item at the old position.</div>
 <div class="constrainedContainer">
-    <div class="grid">
+    <div class="grid fit-content">
         <div class="sizedToGridArea"></div>
     </div>
 </div>
index bcd0d81..c6b0ffc 100644 (file)
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-    display: -webkit-grid;
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 100px;
-    width: -webkit-fit-content;
 }
 .sizedToGridArea {
     background-color: green;
 <body>
     <p>This test checks that 'order' changes the paint ordering.</p>
     <p>There should be 2 green squares below.</p>
-    <div class="grid">
+    <div class="grid fit-content">
         <div class="sizedToGridArea firstRowFirstColumn"></div>
         <div class="sizedToGridArea firstRowFirstColumn negativeOrder red"></div>
     </div>
 
-    <div class="grid">
+    <div class="grid fit-content">
         <div class="sizedToGridArea firstRowFirstColumn positiveOrder"></div>
         <div class="sizedToGridArea firstRowFirstColumn red"></div>
     </div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-expected.txt
new file mode 100644 (file)
index 0000000..a13da5d
--- /dev/null
@@ -0,0 +1,50 @@
+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr-expected.txt
new file mode 100644 (file)
index 0000000..e788dcc
--- /dev/null
@@ -0,0 +1,50 @@
+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html
new file mode 100644 (file)
index 0000000..e0e21ac
--- /dev/null
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px 100px;
+    -webkit-grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+    position: relative;
+    font: 15px/1 Ahem;
+}
+
+.margins {
+    margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+    padding: 4px 6px 8px 10px;
+}
+
+.borders {
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84"></div>
+    </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalLR  directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl-expected.txt
new file mode 100644 (file)
index 0000000..e788dcc
--- /dev/null
@@ -0,0 +1,50 @@
+This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.
+
+direction: LTR | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
+direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px
+
+X X X X X X X X X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html
new file mode 100644 (file)
index 0000000..ce4cda9
--- /dev/null
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px 100px;
+    -webkit-grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+    position: relative;
+    font: 15px/1 Ahem;
+}
+
+.margins {
+    margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+    padding: 4px 6px 8px 10px;
+}
+
+.borders {
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="margins firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="borders firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="paddings firstRowFirstColumn" data-total-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="104" data-expected-width="176" data-expected-height="84"></div>
+    </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="borders firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="170" data-expected-client-height="80"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="paddings firstRowFirstColumn" data-total-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84" data-expected-client-width="176" data-expected-client-height="84"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content verticalRL  directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="216" data-offset-y="104" data-expected-width="176" data-expected-height="84" data-expected-client-width="146" data-expected-client-height="64">X X X X X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100" data-expected-client-width="200" data-expected-client-height="100"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="4" data-expected-width="176" data-expected-height="84"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html b/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html
new file mode 100644 (file)
index 0000000..26f0edb
--- /dev/null
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px 100px;
+    -webkit-grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+    position: relative;
+    font: 15px/1 Ahem;
+}
+
+.margins {
+    margin: 4px 8px 12px 16px;
+}
+
+.paddings {
+    padding: 4px 6px 8px 10px;
+}
+
+.borders {
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="margins firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="borders firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="paddings firstRowFirstColumn" data-total-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="16" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="116" data-offset-y="204" data-expected-width="76" data-expected-height="184"></div>
+    </div>
+</div>
+
+<!-- rtl direction -->
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="margins firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="borders firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="borders secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="70" data-expected-client-height="180"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="paddings firstRowFirstColumn" data-total-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="paddings secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="margins borders firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins borders secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="margins paddings firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184" data-expected-client-width="76" data-expected-client-height="184"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | margin: 4px 8px 12px 16px | border: 5px 10px 15px 20px | padding: 4px 6px 8px 10px</p>
+    <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+        <div class="margins borders paddings firstRowFirstColumn" data-offset-x="116" data-offset-y="4" data-expected-width="76" data-expected-height="184" data-expected-client-width="46" data-expected-client-height="164">X X X X X X X X X X</div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200" data-expected-client-width="100" data-expected-client-height="200"></div>
+        <div class="margins borders paddings secondRowSecondColumn" data-offset-x="16" data-offset-y="204" data-expected-width="76" data-expected-height="184"></div>
+    </div>
+</div>
+
+</body>
+</html>
index bda0fc0..229785f 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
 <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
 <p>For this test to pass, there should be no red below.</p>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green"></div>
 </div>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green"></div>
 </div>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green firstRowBothColumn"></div>
 </div>
 
index 45f8269..b7208e7 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
 <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
 <p>For this test to pass, there should be no red below.</p>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green positiveZIndex firstRowFirstColumn"></div>
     <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green firstRowFirstColumn"></div>
     <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
 </div>
 
-<div class="grid">
+<div class="grid fit-content">
     <div class="sizedToGridArea green firstRowBothColumn"></div>
     <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
     <div class="sizedToGridArea red negativeZIndex firstRowSecondColumn"></div>
index c9124bb..2ff6cf9 100644 (file)
@@ -1,9 +1,9 @@
 <!DOCTYPE HTML>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 .grid {
-    width: -webkit-fit-content;
     position: relative;
 }
 .content {
 #fromMarginAuto { margin: auto; }
 </style>
 <p>The grids below had initially 'stretched' items, but we have changed 'height', 'width' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height and width accordingly.</p>
-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
     <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
     <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
     <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
     <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
 </div>
-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
     <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
     <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
     <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
     <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
 </div>
-<div class="grid" style="-webkit-grid-template: 200px 200px / 200px 200px;">
+<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
     <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
         <div style="width: 150px; height: 100px"></div>
     </div>
         <div style="width: 150px; height: 100px"></div>
     </div>
 </div>
-<div class="grid">
+<div class="grid fit-content">
     <div id="contentSized-toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
     <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
     <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
     <div id="contentSized-fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
 </div>
-<div class="grid">
+<div class="grid fit-content">
     <div id="contentSized-toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
     <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
     <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
     <div id="contentSized-fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
 </div>
-<div class="grid">
+<div class="grid fit-content">
     <div id="contentSized-toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
         <div style="width: 150px; height: 100px"></div>
     </div>
index 1d1e80c..5f68cf6 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -19,22 +20,6 @@ body {
 .stretchedGrid {
     -webkit-grid-auto-columns: auto;
 }
-
-.justifyContentSpaceBetween {
-    justify-content: space-between;
-}
-
-.justifyContentSpaceAround {
-    justify-content: space-around;
-}
-
-.justifyContentSpaceEvenly {
-    justify-content: space-evenly;
-}
-
-.justifyContentStretch {
-    justify-content: stretch;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index 76203a5..5c2ce56 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -19,34 +20,6 @@ body {
     width: 20px;
     height: 40px;
 }
-
-.justifyContentStart {
-    justify-content: start;
-}
-
-.justifyContentEnd {
-    justify-content: end;
-}
-
-.justifyContentCenter {
-    justify-content: center;
-}
-
-.justifyContentLeft {
-    justify-content: left;
-}
-
-.justifyContentRight {
-    justify-content: right;
-}
-
-.justifyContentFlexStart {
-    justify-content: flex-start;
-}
-
-.justifyContentFlexEnd {
-    justify-content: flex-end;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index 3c1119d..005b47e 100644 (file)
@@ -2,6 +2,7 @@
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
 <script src="../../resources/check-layout.js"></script>
 <style>
 body {
@@ -19,34 +20,6 @@ body {
     width: 20px;
     height: 40px;
 }
-
-.justifyContentStart {
-    justify-content: start;
-}
-
-.justifyContentEnd {
-    justify-content: end;
-}
-
-.justifyContentCenter {
-    justify-content: center;
-}
-
-.justifyContentLeft {
-    justify-content: left;
-}
-
-.justifyContentRight {
-    justify-content: right;
-}
-
-.justifyContentFlexStart {
-    justify-content: flex-start;
-}
-
-.justifyContentFlexEnd {
-    justify-content: flex-end;
-}
 </style>
 </head>
 <body onload="checkLayout('.grid')">
index 1c6aa5e..ca101ba 100644 (file)
@@ -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 {
     -webkit-grid-template-columns: 100px 100px;
     -webkit-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>
 
 <!-- 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>
 </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>
 
 <!-- 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>
 </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>
 
 <!-- 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>
 </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>
index 06423b7..bd85f9c 100644 (file)
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .columnsSmallerThanContentBox { -webkit-grid-template-columns: 80px; }
@@ -26,8 +28,8 @@
     background-color: blue;
 }
 
-.fitContentHeight { align-items: start; }
-.fitContentWidth { justify-items: start; }
+.fitContentOnlyHeight { width: auto; align-items: start; }
+.fitContentOnlyWidth { height: auto; justify-items: start; }
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid')">
 <!-- Checking shrink-to-fit in row-axis -->
 <p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
     </div>
 </div>
 <!-- Checking min-height: auto logic -->
 <p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
     </div>
 </div>
 
 <p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
 <div class="container">
-    <div class="grid fitContentHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
+    <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
         <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
     </div>
 </div>
index b6d74cd..0106a86 100644 (file)
 #grid4 {
     -webkit-grid-template-columns: 30px;
     -webkit-grid-template-rows: minmax(20px, 80px) 60px;
-    -webkit-writing-mode: vertical-rl;
 }
 
 #grid5 {
     -webkit-grid-template-columns: 30px;
     /* 90% > 80px, 80px should be ignored. */
     -webkit-grid-template-rows: minmax(90%, 80px) minmax(10px, 60%);
-    -webkit-writing-mode: vertical-lr;
 }
 
 #grid6 {
     /* Overlapping range. */
     -webkit-grid-template-columns: 30px;
     -webkit-grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
-    -webkit-writing-mode: horizontal-bt;
 }
 
 .firstRowFirstColumn {
     <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
 </div>
 
-<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
+<div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
     <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
 </div>
 
-<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
+<div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="90"></div>
     <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="10"></div>
 </div>
 
-<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
+<div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
     <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
 </div>
index b86560c..1fe0676 100644 (file)
 #grid4 {
     -webkit-grid-template-columns: minmax(20px, 80px) 160px;
     -webkit-grid-template-rows: 30px;
-    -webkit-writing-mode: vertical-rl;
 }
 
 #grid5 {
     /* 50% > 80px, 80px should be ignored. */
     -webkit-grid-template-columns: minmax(50%, 80px) minmax(10px, 60%);
     -webkit-grid-template-rows: 30px;
-    -webkit-writing-mode: vertical-lr;
 }
 
 #grid6 {
     /* Overlapping range. */
     -webkit-grid-template-columns: minmax(10px, 180px) minmax(30px, 150px);
     -webkit-grid-template-rows: 30px;
-    -webkit-writing-mode: horizontal-bt;
 }
 
 .firstRowFirstColumn {
     <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="50"></div>
 </div>
 
-<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
+<div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
     <div class="firstRowSecondColumn" data-expected-height="160" data-expected-width="30"></div>
 </div>
 
-<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
+<div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="100" data-expected-width="30"></div>
     <div class="firstRowSecondColumn" data-expected-height="100" data-expected-width="30"></div>
 </div>
 
-<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
+<div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expected-height="200">
     <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
     <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
 </div>
index a929464..b441c62 100644 (file)
     width: 100%;
     height: 100%;
 }
-
-.verticalRL {
-    -webkit-writing-mode: vertical-rl;
-}
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
index 8b64ed3..81bc11d 100644 (file)
     width: 100%;
     height: 100%;
 }
-
-.verticalRL {
-    -webkit-writing-mode: vertical-rl;
-}
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
index c171f37..4303611 100644 (file)
@@ -1,9 +1,10 @@
 <!DOCTYPE HTML>
 <html>
 <head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-.grid {
+.definite {
     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
     width: 800px;
     height: 600px;
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
-<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
-<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
     <div class="gridItem"></div>
 </div>
-<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
-<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
+<div class="grid definite gridWithAuto" id="gridWithAutoElement"></div>
+<div class="grid definite gridWithAuto" id="gridWithAutoWithChildrenElement">
     <div class="gridItem"></div>
 </div>
-<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
-<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
-<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
-<div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
-<div class="grid gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
-<div class="grid gridWithoutBrackets" id="gridWithoutBrackets"></div>
-<div class="grid gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
-<div class="grid gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
-<div class="grid gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
-<div class="grid gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
+<div class="grid definite gridWithMinMax" id="gridWithMinMax"></div>
+<div class="grid definite gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
+<div class="grid definite gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+<div class="grid definite gridWithRepeat" id="gridWithRepeatElement"></div>
+<div class="grid definite gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
+<div class="grid definite gridWithoutBrackets" id="gridWithoutBrackets"></div>
+<div class="grid definite gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
+<div class="grid definite gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
+<div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
+<div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
+<div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
index d3c72ad..a5879f4 100644 (file)
@@ -50,7 +50,7 @@
 </div>
 
 <div class="container">
-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
+<div class="grid horizontalBT" data-expected-width="400" data-expected-height="300">
     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
@@ -59,7 +59,7 @@
 </div>
 
 <div class="container">
-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
+<div class="grid verticalRL" data-expected-width="400" data-expected-height="300">
     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
@@ -68,7 +68,7 @@
 </div>
 
 <div class="container">
-<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
+<div class="grid verticalLR" data-expected-width="400" data-expected-height="300">
     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
index e7962a4..d7b5009 100644 (file)
@@ -44,7 +44,7 @@
 </div>
 
 <div style="position: relative">
-<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
+<div class="grid horizontalBT" data-expected-width="400" data-expected-height="300">
     <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
@@ -53,7 +53,7 @@
 </div>
 
 <div style="position: relative">
-<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
+<div class="grid verticalRL" data-expected-width="400" data-expected-height="300">
     <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
@@