Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

tests/wpt/web-platform-tests/css/css-grid/support/grid-alignment.css

@@ -0,0 +1,240 @@
+/* align-self */
+.alignSelfAuto { align-self: auto; }
+.alignSelfStretch { align-self: stretch; }
+.alignSelfStart { align-self: start; }
+.alignSelfEnd { align-self: end; }
+.alignSelfCenter { align-self: center; }
+.alignSelfRight { align-self: right; }
+.alignSelfLeft { align-self: left; }
+
+.alignSelfFlexStart { align-self: flex-start; }
+.alignSelfFlexEnd { align-self: flex-end; }
+
+.alignSelfSelfStart { align-self: self-start; }
+.alignSelfSelfEnd { align-self: self-end; }
+
+.alignSelfCenterSafe { align-self: center safe; }
+.alignSelfCenterUnsafe { align-self: center unsafe; }
+.alignSelfEndSafe { align-self: end safe; }
+.alignSelfEndUnsafe { align-self: end unsafe; }
+
+.alignSelfBaseline { align-self: baseline; }
+
+/* align-items */
+.alignItemsAuto { align-items: auto; }
+.alignItemsStretch { align-items: stretch; }
+.alignItemsStart { align-items: start; }
+.alignItemsCenter { align-items: center; }
+.alignItemsEnd { align-items: end; }
+.alignItemsBaseline { align-items: baseline; }
+
+.alignItemsCenterSafe { align-items: center safe; }
+.alignItemsCenterUnsafe { align-items: center unsafe; }
+.alignItemsEndSafe { align-items: end safe; }
+.alignItemsEndUnsafe { align-items: end unsafe; }
+
+/* align-content */
+.alignContentBaseline { align-content: baseline; }
+.alignContentLastBaseline { align-content: last-baseline; }
+.alignContentStart { align-content: start; }
+.alignContentEnd { align-content: end; }
+.alignContentCenter { align-content: center; }
+.alignContentLeft { align-content: left; }
+.alignContentRight { align-content: right; }
+.alignContentFlexStart { align-content: flex-start; }
+.alignContentFlexEnd { align-content: flex-end; }
+.alignContentSpaceBetween { align-content: space-between; }
+.alignContentSpaceAround { align-content: space-around; }
+.alignContentSpaceEvenly { align-content: space-evenly; }
+.alignContentStretch { align-content: stretch; }
+
+/* justify-self */
+.justifySelfAuto { justify-self: auto; }
+.justifySelfStretch { justify-self: stretch; }
+.justifySelfStart { justify-self: start; }
+.justifySelfCenter { justify-self: center; }
+.justifySelfEnd { justify-self: end; }
+.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; }
+
+.justifySelfCenterSafe { justify-self: center safe; }
+.justifySelfCenterUnsafe { justify-self: center unsafe; }
+
+.justifySelfBaseline { justify-self: baseline; }
+
+/* justify-items */
+.justifyItemsAuto { justify-items: auto; }
+.justifyItemsStretch { justify-items: stretch; }
+.justifyItemsStart { justify-items: start; }
+.justifyItemsCenter { justify-items: center; }
+.justifyItemsEnd { justify-items: end; }
+
+.justifyItemsCenterSafe { justify-items: center safe; }
+.justifyItemsCenterUnsafe { justify-items: center unsafe; }
+.justifyItemsEndSafe { justify-items: end safe; }
+.justifyItemsEndUnsafe { justify-items: end unsafe; }
+
+.justifyItemsBaseline { justify-items: baseline; }
+
+/* justify-content */
+.justifyContentBaseline { justify-content: baseline; }
+.justifyContentLastBaseline { justify-content: last-baseline; }
+.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; }
+.justifyContentSpaceBetween { justify-content: space-between; }
+.justifyContentSpaceAround { justify-content: space-around; }
+.justifyContentSpaceEvenly { justify-content: space-evenly; }
+.justifyContentStretch { justify-content: stretch; }
+
+/* Both align-items and justify-items */
+.itemsNormal {
+  align-items: normal;
+  justify-items: normal;
+}
+
+.itemsStretch {
+  align-items: stretch;
+  justify-items: stretch;
+}
+
+.itemsStart {
+  align-items: start;
+  justify-items: start;
+}
+
+.itemsCenter {
+  align-items: center;
+  justify-items: center;
+}
+
+.itemsEnd {
+  align-items: end;
+  justify-items: end;
+}
+
+.itemsLeft {
+  align-items: left;
+  justify-items: left;
+}
+
+.itemsRight {
+  align-items: right;
+  justify-items: right;
+}
+
+.itemsSelfStart {
+  align-items: self-start;
+  justify-items: self-start;
+}
+
+.itemsSelfEnd {
+  align-items: self-end;
+  justify-items: self-end;
+}
+.itemsBaseline {
+  align-items: baseline;
+  justify-items: baseline;
+}
+
+/* Both align-self and justify-self */
+.selfStretch {
+  align-self: stretch;
+  justify-self: stretch;
+}
+.selfStart {
+  align-self: start;
+  justify-self: start;
+}
+.selfEnd {
+  align-self: end;
+  justify-self: end;
+}
+.selfCenter {
+  align-self: center;
+  justify-self: center;
+}
+.selfRight {
+  align-self: right;
+  justify-self: right;
+}
+.selfLeft {
+  align-self: left;
+  justify-self: left;
+}
+.selfSelfStart {
+  align-self: self-start;
+  justify-self: self-start;
+}
+.selfSelfEnd {
+  align-self: self-end;
+  justify-self: self-end;
+}
+.selfBaseline {
+  align-self: baseline;
+  justify-self: baseline;
+}
+
+/* Both align-content and justify-content */
+.contentStart {
+  align-content: start;
+  justify-content: start;
+}
+.contentCenter {
+  align-content: center;
+  justify-content: center;
+}
+.contentEnd {
+  align-content: end;
+  justify-content: end;
+}
+
+.contentCenterSafe {
+  align-content: center safe;
+  justify-content: center safe;
+}
+
+.contentCenterUnsafe {
+  align-content: center unsafe;
+  justify-content: center unsafe;
+}
+
+.contentEndSafe {
+  align-content: end safe;
+  justify-content: end safe;
+}
+
+.contentEndUnsafe {
+  align-content: end unsafe;
+  justify-content: end unsafe;
+}
+
+.contentSpaceBetween {
+  justify-content: space-between;
+  align-content: space-between;
+}
+
+.contentSpaceAround {
+  justify-content: space-around;
+  align-content: space-around;
+}
+
+.contentSpaceEvenly {
+  justify-content: space-evenly;
+  align-content: space-evenly;
+}
+
+.contentStretch {
+  justify-content: stretch;
+  align-content: stretch;
+}

tests/wpt/web-platform-tests/css/css-grid/support/grid.css

@@ -0,0 +1,277 @@
+.grid {
+  display: grid;
+  background-color: grey;
+}
+
+.inline-grid {
+  display: inline-grid;
+  background-color: grey;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: blue;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlySecondColumn {
+  background-color: lime;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+  background-color: purple;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlySecondColumn {
+  background-color: orange;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+  background-color: orange;
+  grid-column-end: 3;
+  grid-row-end: 3;
+}
+
+.thirdRowSecondColumn {
+  background-color: red;
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.firstRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.secondRowThirdColumn {
+  background-color: navy;
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.firstRowFourthColumn {
+  background-color: green;
+  grid-column: 4;
+  grid-row: 1;
+}
+
+.secondRowFourthColumn {
+  background-color: pink;
+  grid-column: 4;
+  grid-row: 2;
+}
+
+.firstAutoRowSecondAutoColumn {
+  grid-row: 1 / auto;
+  grid-column: 2 / auto;
+}
+
+.autoLastRowAutoLastColumn {
+  grid-row: auto / -1;
+  grid-column: auto / -1;
+}
+
+.autoSecondRowAutoFirstColumn {
+  grid-row: auto / 2;
+  grid-column: auto / 1;
+}
+
+.firstRowBothColumn {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+
+.secondRowBothColumn {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+.bothRowFirstColumn {
+  grid-row: 1 / -1;
+  grid-column: 1;
+}
+
+.bothRowSecondColumn {
+  grid-row: 1 / -1;
+  grid-column: 2;
+}
+
+.bothRowBothColumn {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+/* Auto column / row. */
+.autoRowAutoColumn {
+  background-color: pink;
+  grid-column: auto;
+  grid-row: auto;
+}
+
+.firstRowAutoColumn {
+  background-color: blue;
+  grid-column: auto;
+  grid-row: 1;
+}
+
+.secondRowAutoColumn {
+  background-color: purple;
+  grid-column: auto;
+  grid-row: 2;
+}
+
+.thirdRowAutoColumn {
+  background-color: navy;
+  grid-column: auto;
+  grid-row: 3;
+}
+
+.autoRowFirstColumn {
+  background-color: lime;
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.autoRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: auto;
+}
+
+.autoRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: auto;
+}
+
+.autoRowAutoColumnSpanning2 {
+  background-color: maroon;
+  grid-column: span 2;
+  grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+  background-color: aqua;
+  grid-column: auto;
+  grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+  background-color: olive;
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+  background-color: indigo;
+  grid-column: span 2;
+  grid-row: span 3;
+}
+
+.autoRowFirstColumnSpanning2 {
+  background-color: maroon;
+  grid-column: 1 / span 2;
+  grid-row: auto;
+}
+
+.autoRowSecondColumnSpanning2 {
+  background-color: olive;
+  grid-column: 2 / span 2;
+  grid-row: auto;
+}
+
+.firstRowSpanning2AutoColumn {
+  background-color: maroon;
+  grid-column: auto;
+  grid-row: 1 / span 2;
+  height: 100%;
+}
+
+.secondRowSpanning2AutoColumn {
+  background-color: olive;
+  grid-column: auto;
+  grid-row: 2 / span 2;
+  height: 100%;
+}
+
+/* Grid element flow. */
+.gridAutoFlowColumnSparse {
+  grid-auto-flow: column;
+}
+
+.gridAutoFlowColumnDense {
+  grid-auto-flow: column dense;
+}
+
+.gridAutoFlowRowSparse {
+  grid-auto-flow: row;
+}
+
+.gridAutoFlowRowDense {
+  grid-auto-flow: row dense;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+  width: 10px;
+  height: 10px;
+}
+
+.unconstrainedContainer {
+  width: 1000px;
+  height: 1000px;
+}
+
+.sizedToGridArea {
+  font: 10px/1 Ahem;
+  /* Make us fit our grid area. */
+  width: 100%;
+  height: 100%;
+}
+
+.verticalRL {
+  writing-mode: vertical-rl;
+}
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+.horizontalTB {
+  writing-mode: horizontal-tb;
+}
+.directionRTL {
+  direction: rtl;
+}
+.directionLTR {
+  direction: ltr;
+}

tests/wpt/web-platform-tests/css/css-grid/support/style-change.js

@@ -0,0 +1,5 @@
+function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
+    element.className += " " + phase;
+    element.setAttribute(expectedProperty, expectedResult);
+    checkLayout("." + phase);
+}