<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[200510] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/200510">200510</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-05-06 01:17:12 -0700 (Fri, 06 May 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Unprefix CSS Grid Layout properties
https://bugs.webkit.org/show_bug.cgi?id=157137
Reviewed by Simon Fraser.
Remove "-webkit" prefix from all the grid layout properties,
including the display value.
Update the source code to remove the prefix where it was used too.
.:
* ManualTests/css-grid-layout-item-with-huge-span-crash.html:
PerformanceTests:
* Layout/auto-grid-lots-of-data.html:
* Layout/fixed-grid-lots-of-data.html:
* Layout/fixed-grid-lots-of-stretched-data.html:
Source/WebCore:
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::isLayoutDependent):
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::isSimpleLengthPropertyID):
(WebCore::isValidKeywordPropertyAndValue):
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridGapShorthand):
(WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
(WebCore::CSSParser::parseGridTemplateShorthand):
(WebCore::CSSParser::parseGridShorthand):
(WebCore::CSSParser::parseGridAreaShorthand):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
* css/CSSPropertyNames.in:
* css/CSSValueKeywords.in:
* css/StyleBuilderCustom.h:
(WebCore::StyleBuilderCustom::applyInitialGridTemplateAreas):
(WebCore::StyleBuilderCustom::applyInheritGridTemplateAreas):
(WebCore::StyleBuilderCustom::applyValueGridTemplateAreas):
(WebCore::StyleBuilderCustom::applyInitialGridTemplateColumns):
(WebCore::StyleBuilderCustom::applyInheritGridTemplateColumns):
(WebCore::StyleBuilderCustom::applyValueGridTemplateColumns):
(WebCore::StyleBuilderCustom::applyInitialGridTemplateRows):
(WebCore::StyleBuilderCustom::applyInheritGridTemplateRows):
(WebCore::StyleBuilderCustom::applyValueGridTemplateRows):
* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue):
Source/WebInspectorUI:
* UserInterface/Models/CSSKeywordCompletions.js:
Tools:
* TestWebKitAPI/Tests/WebCore/CSSParser.cpp:
(TestWebKitAPI::TEST):
LayoutTests:
* css3/parse-align-content.html:
* css3/parse-align-items.html:
* css3/parse-align-self.html:
* css3/parse-justify-content.html:
* fast/css-grid-layout/absolute-positioning-definite-sizes.html:
* fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
* fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
* fast/css-grid-layout/anonymous-grid-items-expected.html:
* fast/css-grid-layout/anonymous-grid-items.html:
* fast/css-grid-layout/auto-content-resolution-columns.html:
* fast/css-grid-layout/auto-content-resolution-rows.html:
* fast/css-grid-layout/breadth-size-resolution-grid.html:
* fast/css-grid-layout/calc-resolution-grid-item.html:
* fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html:
* fast/css-grid-layout/display-grid-set-get-expected.txt:
* fast/css-grid-layout/explicit-grid-size.html:
* fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt:
* fast/css-grid-layout/flex-and-content-sized-resolution-columns.html:
* fast/css-grid-layout/flex-and-intrinsic-sizes.html:
* fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html:
* fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
* fast/css-grid-layout/flex-content-distribution.html:
* fast/css-grid-layout/flex-content-resolution-columns.html:
* fast/css-grid-layout/flex-content-resolution-rows.html:
* fast/css-grid-layout/flex-content-sized-column-use-available-width.html:
* fast/css-grid-layout/flex-content-sized-columns-resize.html:
* fast/css-grid-layout/flex-factor-sum-less-than-1.html:
* fast/css-grid-layout/float-not-protruding-into-next-grid-item.html:
* fast/css-grid-layout/floating-empty-grids.html:
* fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html:
* fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html:
* fast/css-grid-layout/grid-align-content-distribution.html:
* fast/css-grid-layout/grid-align-content-vertical-lr.html:
* fast/css-grid-layout/grid-align-content-vertical-rl.html:
* fast/css-grid-layout/grid-align-content.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-stretching-replaced-items.html:
* fast/css-grid-layout/grid-align.html:
* fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
* fast/css-grid-layout/grid-auto-columns-rows-resolution.html:
* fast/css-grid-layout/grid-auto-columns-rows-update.html:
* fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-flow-get-set.html:
* fast/css-grid-layout/grid-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-flow-sparse.html:
* fast/css-grid-layout/grid-auto-flow-update.html:
* fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt:
* fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html:
* fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt:
* fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html:
* fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
* 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-change-named-grid-lines-recompute-child.html:
* fast/css-grid-layout/grid-container-ignore-first-letter.html:
* fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.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-stretch-only-valid-for-auto-sized-tracks.html:
* fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.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-content-sized-columns-resolution-expected.txt:
* fast/css-grid-layout/grid-content-sized-columns-resolution.html:
* fast/css-grid-layout/grid-disable.html:
* fast/css-grid-layout/grid-dynamic-updates-relayout.html:
* fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
* fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
* fast/css-grid-layout/grid-element-border-grid-item.html:
* fast/css-grid-layout/grid-element-border-padding-grid-item.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-empty-row-column.html:
* fast/css-grid-layout/grid-element-min-max-height.html:
* fast/css-grid-layout/grid-element-min-max-width.html:
* fast/css-grid-layout/grid-element-padding-grid-item.html:
* fast/css-grid-layout/grid-element-padding-margin.html:
* fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
* fast/css-grid-layout/grid-element-repeat-get-set.html:
* fast/css-grid-layout/grid-element-shrink-to-fit.html:
* fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt:
* fast/css-grid-layout/grid-grow-tracks-to-their-max.html:
* fast/css-grid-layout/grid-gutters-and-alignment.html:
* fast/css-grid-layout/grid-gutters-and-flex-content.html:
* fast/css-grid-layout/grid-gutters-and-tracks.html:
* fast/css-grid-layout/grid-gutters-get-set-expected.txt:
* fast/css-grid-layout/grid-gutters-get-set.html:
* fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt:
* fast/css-grid-layout/grid-indefinite-calculated-height-crash.html:
* fast/css-grid-layout/grid-initialize-span-one-items-expected.txt:
* fast/css-grid-layout/grid-initialize-span-one-items.html:
* fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
* fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
* fast/css-grid-layout/grid-item-area-get-set-expected.txt:
* fast/css-grid-layout/grid-item-area-get-set.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-margins-must-respect-specified-margins.html:
* fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
* fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
* fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html:
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
* fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
* fast/css-grid-layout/grid-item-bad-resolution-double-span.html:
* fast/css-grid-layout/grid-item-change-column-repaint.html:
* fast/css-grid-layout/grid-item-change-row-repaint.html:
* fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
* fast/css-grid-layout/grid-item-column-row-get-set.html:
* fast/css-grid-layout/grid-item-display.html:
* fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
* fast/css-grid-layout/grid-item-end-after-get-set.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html:
* fast/css-grid-layout/grid-item-margin-resolution.html:
* fast/css-grid-layout/grid-item-margins-not-collapse.html:
* fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
* fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
* fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
* fast/css-grid-layout/grid-item-negative-indexes.html:
* fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html:
* fast/css-grid-layout/grid-item-negative-position-resolution.html:
* fast/css-grid-layout/grid-item-order-auto-flow-resolution.html:
* fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html:
* fast/css-grid-layout/grid-item-order-paint-order.html:
* fast/css-grid-layout/grid-item-position-changed-dynamic.html:
* fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
* fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
* fast/css-grid-layout/grid-item-spanning-resolution.html:
* fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
* fast/css-grid-layout/grid-item-start-before-get-set.html:
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html:
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html:
* fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html:
* fast/css-grid-layout/grid-item-text-background-not-interleaved.html:
* fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html:
* fast/css-grid-layout/grid-item-with-border-in-fr.html:
* fast/css-grid-layout/grid-item-with-border-in-intrinsic.html:
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
* fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html:
* fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html:
* fast/css-grid-layout/grid-item-z-index-change-repaint.html:
* 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-item-z-index-support.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-vertical-lr.html:
* fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.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/grid-justify-content.html:
* fast/css-grid-layout/grid-percent-track-margin-border-padding.html:
* fast/css-grid-layout/grid-percent-track-scrollbar.html:
* fast/css-grid-layout/grid-positioned-children-writing-modes.html:
* fast/css-grid-layout/grid-positioned-items-background-rtl.html:
* fast/css-grid-layout/grid-positioned-items-background.html:
* fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html:
* fast/css-grid-layout/grid-positioned-items-content-alignment.html:
* fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
* fast/css-grid-layout/grid-positioned-items-gaps.html:
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
* fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
* fast/css-grid-layout/grid-positioned-items-padding.html:
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
* fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
* fast/css-grid-layout/grid-preferred-logical-widths.html:
* fast/css-grid-layout/grid-repeat-calc-expected.txt:
* fast/css-grid-layout/grid-repeat-calc.html:
* fast/css-grid-layout/grid-shorthand-computed-style-crash.html:
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:
* fast/css-grid-layout/grid-sizing-positioned-items.html:
* fast/css-grid-layout/grid-strict-ordering-crash.html:
* fast/css-grid-layout/grid-template-areas-empty-string-crash.html:
* fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
* fast/css-grid-layout/grid-template-areas-get-set.html:
* fast/css-grid-layout/grid-template-areas-infinite-loop.html:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
* fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html:
* fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-template-shorthand-get-set.html:
* fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt:
* fast/css-grid-layout/grid-update-sizes-after-distributing-all.html:
* fast/css-grid-layout/grid-was-populated-assert.html:
* fast/css-grid-layout/grid-with-relative-font-length-crash.html:
* fast/css-grid-layout/implicit-columns-auto-resolution.html:
* fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
* fast/css-grid-layout/implicit-position-dynamic-change.html:
* fast/css-grid-layout/implicit-rows-auto-resolution.html:
* fast/css-grid-layout/implicit-tracks-before-explicit.html:
* fast/css-grid-layout/justify-self-cell.html:
* fast/css-grid-layout/mark-as-infinitely-growable-expected.txt:
* fast/css-grid-layout/mark-as-infinitely-growable.html:
* fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html:
* fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html:
* fast/css-grid-layout/min-height-border-box.html:
* fast/css-grid-layout/min-width-height-auto-and-margins.html:
* fast/css-grid-layout/min-width-height-auto-overflow.html:
* fast/css-grid-layout/min-width-height-auto.html:
* fast/css-grid-layout/min-width-margin-box.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/minmax-min-content-column-resolution-columns.html:
* fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
* fast/css-grid-layout/minmax-spanning-resolution-columns.html:
* fast/css-grid-layout/minmax-spanning-resolution-rows.html:
* fast/css-grid-layout/named-grid-line-get-set-expected.txt:
* fast/css-grid-layout/named-grid-line-get-set.html:
* fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt:
* fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
* fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
* fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html:
* fast/css-grid-layout/non-grid-columns-rows-get-set.html:
* fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt:
* fast/css-grid-layout/non-grid-element-repeat-get-set.html:
* fast/css-grid-layout/non-named-grid-line-get-set-expected.txt:
* fast/css-grid-layout/non-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-update.html:
* fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
* fast/css-grid-layout/percent-intrinsic-track-breadth.html:
* fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
* fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html:
* fast/css-grid-layout/percent-of-indefinite-track-size.html:
* fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html:
* fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html:
* fast/css-grid-layout/percent-resolution-grid-item.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/positioned-grid-items-should-not-create-implicit-tracks.html:
* fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html:
* fast/css-grid-layout/relayout-align-items-changed.html:
* fast/css-grid-layout/relayout-align-self-changed.html:
* fast/css-grid-layout/relayout-indefinite-heights.html:
* fast/css-grid-layout/relayout-justify-items-changed.html:
* fast/css-grid-layout/relayout-justify-self-changed.html:
* fast/css-grid-layout/resources/display-grid-set-get.js:
* fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
(testGridTemplatesValues):
(checkGridTemplatesSetJSValues):
(testGridTemplatesSetBadJSValues):
(checkGridAutoFlowSetCSSValue):
(checkGridAutoFlowSetJSValue):
(testGridAutoDefinitionsValues):
(testGridGapDefinitionsValues):
* fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js:
(checkColumnRowValues):
(window.testColumnRowJSParsing):
(window.testColumnRowInvalidJSParsing):
(window.testColumnStartRowStartJSParsing):
(window.testColumnEndRowEndJSParsing):
(setupInheritTest):
(setupInitialTest):
(window.testColumnRowInheritJSParsing):
(window.testStartBeforeInheritJSParsing):
(window.testEndAfterInheritJSParsing):
(window.testColumnRowInitialJSParsing):
(window.testStartBeforeInitialJSParsing):
(window.testEndAfterInitialJSParsing):
* fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js:
(testGridDefinitionsValues):
(checkGridDefinitionsSetJSValues):
(testGridDefinitionsSetBadJSValues):
* fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js:
(testGridDefinitionsValues):
(checkGridDefinitionsSetJSValues):
(testGridDefinitionsSetBadJSValues):
* fast/css-grid-layout/resources/grid.css:
(.grid):
(.inline-grid):
(.firstRowFirstColumn):
(.onlyFirstRowOnlyFirstColumn):
(.firstRowSecondColumn):
(.onlyFirstRowOnlySecondColumn):
(.firstRowThirdColumn):
(.firstRowFourthColumn):
(.secondRowFirstColumn):
(.onlySecondRowOnlyFirstColumn):
(.secondRowSecondColumn):
(.onlySecondRowOnlySecondColumn):
(.endSecondRowEndSecondColumn):
(.secondRowThirdColumn):
(.secondRowFourthColumn):
(.thirdRowFirstColumn):
(.thirdRowSecondColumn):
(.thirdRowThirdColumn):
(.fourthRowFirstColumn):
(.fourthRowSecondColumn):
(.firstAutoRowSecondAutoColumn):
(.autoLastRowAutoLastColumn):
(.autoSecondRowAutoFirstColumn):
(.firstRowBothColumn):
(.secondRowBothColumn):
(.bothRowFirstColumn):
(.bothRowSecondColumn):
(.bothRowBothColumn):
(.autoRowAutoColumn):
(.firstRowAutoColumn):
(.secondRowAutoColumn):
(.thirdRowAutoColumn):
(.autoRowFirstColumn):
(.autoRowSecondColumn):
(.autoRowThirdColumn):
(.autoRowAutoColumnSpanning2):
(.autoRowSpanning2AutoColumn):
(.autoRowSpanning2AutoColumnSpanning3):
(.autoRowSpanning3AutoColumnSpanning2):
(.autoRowFirstColumnSpanning2):
(.autoRowSecondColumnSpanning2):
(.firstRowSpanning2AutoColumn):
(.secondRowSpanning2AutoColumn):
(.gridAutoFlowColumnSparse):
(.gridAutoFlowColumnDense):
(.gridAutoFlowRowSparse):
(.gridAutoFlowRowDense):
* fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
(testInherit):
(testInitial):
* fast/css-grid-layout/should-not-collapse-anonymous-blocks.html:
* fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html:
* fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html:
* fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html:
* fast/css/auto-min-size.html:
* fast/css/first-letter-ignores-display-property.html:
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* fast/css/getComputedStyle/resources/property-names.js:
* fast/css/parse-justify-items.html:
* fast/events/key-events-in-editable-gridbox.html:
* fast/repaint/align-items-overflow-change.html:
* fast/repaint/align-self-change.html:
* fast/repaint/align-self-overflow-change.html:
* fast/repaint/justify-items-change.html:
* fast/repaint/justify-items-legacy-change.html:
* fast/repaint/justify-items-overflow-change.html:
* fast/repaint/justify-self-change.html:
* fast/repaint/justify-self-overflow-change.html:
* fast/text-autosizing/cluster-inline-grid-flex-box-expected.html:
* fast/text-autosizing/cluster-inline-grid-flex-box.html:
* ietestcenter/css3/grid/display-grid-001-expected.htm:
* ietestcenter/css3/grid/display-grid-001.htm:
* ietestcenter/css3/grid/display-grid-002-expected.htm:
* ietestcenter/css3/grid/display-grid-002.htm:
* ietestcenter/css3/grid/grid-column-001-expected.htm:
* ietestcenter/css3/grid/grid-column-001.htm:
* ietestcenter/css3/grid/grid-column-002-expected.htm:
* ietestcenter/css3/grid/grid-column-002.htm:
* ietestcenter/css3/grid/grid-column-003-expected.htm:
* ietestcenter/css3/grid/grid-column-003.htm:
* ietestcenter/css3/grid/grid-columns-001-expected.htm:
* ietestcenter/css3/grid/grid-columns-001.htm:
* ietestcenter/css3/grid/grid-items-001-expected.htm:
* ietestcenter/css3/grid/grid-items-001.htm:
* ietestcenter/css3/grid/grid-items-002-expected.htm:
* ietestcenter/css3/grid/grid-items-002.htm:
* ietestcenter/css3/grid/grid-items-003-expected.htm:
* ietestcenter/css3/grid/grid-items-003.htm:
* ietestcenter/css3/grid/grid-items-004-expected.htm:
* ietestcenter/css3/grid/grid-items-004.htm:
* ietestcenter/css3/grid/grid-items-005-expected.htm:
* ietestcenter/css3/grid/grid-items-005.htm:
* svg/css/getComputedStyle-basic-expected.txt:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkChangeLog">trunk/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestscss3parsealigncontenthtml">trunk/LayoutTests/css3/parse-align-content.html</a></li>
<li><a href="#trunkLayoutTestscss3parsealignitemshtml">trunk/LayoutTests/css3/parse-align-items.html</a></li>
<li><a href="#trunkLayoutTestscss3parsealignselfhtml">trunk/LayoutTests/css3/parse-align-self.html</a></li>
<li><a href="#trunkLayoutTestscss3parsejustifycontenthtml">trunk/LayoutTests/css3/parse-justify-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssautominsizehtml">trunk/LayoutTests/fast/css/auto-min-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssfirstletterignoresdisplaypropertyhtml">trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgetComputedStylecomputedstyleexpectedtxt">trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgetComputedStylecomputedstylewithoutrendererexpectedtxt">trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgetComputedStyleresourcespropertynamesjs">trunk/LayoutTests/fast/css/getComputedStyle/resources/property-names.js</a></li>
<li><a href="#trunkLayoutTestsfastcssparsejustifyitemshtml">trunk/LayoutTests/fast/css/parse-justify-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizeshtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparenthtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutanonymousgriditemsexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutanonymousgriditemshtml">trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutautocontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutautocontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutbreadthsizeresolutiongridhtml">trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutcalcresolutiongriditemhtml">trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutcomputeintrinsicwidthsscrollbarhtml">trunk/LayoutTests/fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutdisplaygridsetgetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/display-grid-set-get-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutexplicitgridsizehtml">trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandcontentsizedresolutioncolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandcontentsizedresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentdistributionhtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentsizedcolumnuseavailablewidthhtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-column-use-available-width.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentsizedcolumnsresizehtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexfactorsumlessthan1html">trunk/LayoutTests/fast/css-grid-layout/flex-factor-sum-less-than-1.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfloatnotprotrudingintonextgriditemhtml">trunk/LayoutTests/fast/css-grid-layout/float-not-protruding-into-next-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfloatingemptygridshtml">trunk/LayoutTests/fast/css-grid-layout/floating-empty-grids.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontentverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontentverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaligncontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifyoverflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignjustifystretchhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignhtml">trunk/LayoutTests/fast/css-grid-layout/grid-align.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsautoflowresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowsparsehtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautocolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautocolumnshtml">trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautorowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautorowshtml">trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultipleexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerchangenamedgridlinesrecomputechildhtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerignorefirstletterhtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanninghtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentstretchonlyvalidforautosizedtrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentstretchwithdifferentsizedtrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentsizedcolumnsresolutionexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentsizedcolumnsresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriddisablehtml">trunk/LayoutTests/fast/css-grid-layout/grid-disable.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriddynamicupdatesrelayouthtml">trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementbordergriditemhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementborderpaddinggriditemhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementchangerowsrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementemptyrowcolumnhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-empty-row-column.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementminmaxheighthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-height.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementminmaxwidthhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementpaddinggriditemhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementpaddingmarginhtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementshrinktofithtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridgrowtrackstotheirmaxexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridgrowtrackstotheirmaxhtml">trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersandtrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridguttersgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridindefinitecalculatedheightcrashexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridindefinitecalculatedheightcrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridinitializespanoneitemsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridinitializespanoneitemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemadditionautoplacementupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemadditiontrackbreadthupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemareagetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemareagetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsandstretchhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautomarginsmustrespectspecifiedmarginshtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautoplacementautomaticspanhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautoplacementdefinitespanhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautoplacementfixedrowcolumnhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditembadresolutiondoublespanhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangerowrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-row-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemcolumnrowgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemcolumnrowgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemdisplayhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-display.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemendaftergetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemendaftergetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowshorizontalltrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowshorizontalrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowsverticalltrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowsverticalrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmarginsnotcollapsehtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-margins-not-collapse.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemmultipleminmaxcontentresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnamedgridarearesolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnegativeindexeshtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnegativeintegerexplicitgridresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnegativepositionresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemorderautoflowresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemorderincontentsizedcolumnsresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemorderpaintorderhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditempositionchangeddynamichtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemremovalautoplacementupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemremovaltrackbreadthupdatehtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemspanningresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstartbeforegetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstartbeforegetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemtextbackgroundnotinterleavedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-text-background-not-interleaved.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithborderinfrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-fr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithborderinintrinsichtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-intrinsic.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentminmaxheightdynamichtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexchangerepaintexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexchangerepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontextexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontexthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemzindexsupporthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-support.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemsshouldnotbestretchedwhenheightorwidthormarginchangehtml">trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticallrhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticalrlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridjustifycontenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpercenttrackmarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpercenttrackscrollbarhtml">trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-scrollbar.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositionedchildrenwritingmodeshtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemscontentalignmentrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemscontentalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsgapsrtlhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsgapshtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlinehtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlinehtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpreferredlogicalwidthshtml">trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridrepeatcalcexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridrepeatcalchtml">trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridshorthandcomputedstylecrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-computed-style-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridshorthandgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridshorthandgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridstrictorderingcrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateareasemptystringcrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-empty-string-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateareasgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateareasgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateareasinfiniteloophtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-infinite-loop.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandcomputedstylecrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridupdatesizesafterdistributingallexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridupdatesizesafterdistributingallhtml">trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridwaspopulatedasserthtml">trunk/LayoutTests/fast/css-grid-layout/grid-was-populated-assert.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridwithrelativefontlengthcrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-with-relative-font-length-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicitcolumnsautoresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicitpositiondynamicchangeexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicitpositiondynamicchangehtml">trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicitrowsautoresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/implicit-rows-auto-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicithtml">trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml">trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmarkasinfinitelygrowableexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmarkasinfinitelygrowablehtml">trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowshtml">trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminheightborderboxhtml">trunk/LayoutTests/fast/css-grid-layout/min-height-border-box.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowhtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthmarginboxhtml">trunk/LayoutTests/fast/css-grid-layout/min-width-margin-box.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalheightonlyhtml">trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalwidthonlyhtml">trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmincontentcolumnresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxmincontentcolumnresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxspanningresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminmaxspanningresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinescomputedstyleimplicittracksexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinescomputedstyleimplicittrackshtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasdynamicgetsethtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasgetsethtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetmultipleexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetmultiplehtml">trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridelementrepeatgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnongridelementrepeatgetsethtml">trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnonnamedgridlinegetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnonnamedgridlinegetsethtml">trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackinpercentgridhtml">trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackupdatehtml">trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackhtml">trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthhtml">trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinautohtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinminmaxcrashhtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentpaddingmarginresolutiongriditemupdatehtml">trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentpaddingmarginresolutiongriditemhtml">trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentresolutiongriditemhtml">trunk/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutplacecellbyindexhtml">trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittrackshtml">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspacehtml">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightshtml">trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesdisplaygridsetgetjs">trunk/LayoutTests/fast/css-grid-layout/resources/display-grid-set-get.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetmultiplejs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgriddefinitionsparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgriditemcolumnrowparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridshorthandparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridtemplateshorthandparsingutilsjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid.css</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesnongridcolumnsrowsgetsetmultiplejs">trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesnongridcolumnsrowsgetsetjs">trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutshouldnotcollapseanonymousblockshtml">trunk/LayoutTests/fast/css-grid-layout/should-not-collapse-anonymous-blocks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutswaplinesifstartisfurtherendwardthanendlineexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutswaplinesifstartisfurtherendwardthanendlinehtml">trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayouttracksnumbergreatlyexceedingavailablesizecrashhtml">trunk/LayoutTests/fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html</a></li>
<li><a href="#trunkLayoutTestsfasteventskeyeventsineditablegridboxhtml">trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignitemsoverflowchangehtml">trunk/LayoutTests/fast/repaint/align-items-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfchangehtml">trunk/LayoutTests/fast/repaint/align-self-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfoverflowchangehtml">trunk/LayoutTests/fast/repaint/align-self-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemschangehtml">trunk/LayoutTests/fast/repaint/justify-items-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemslegacychangehtml">trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemsoverflowchangehtml">trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfchangehtml">trunk/LayoutTests/fast/repaint/justify-self-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfoverflowchangehtml">trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfasttextautosizingclusterinlinegridflexboxexpectedhtml">trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html</a></li>
<li><a href="#trunkLayoutTestsfasttextautosizingclusterinlinegridflexboxhtml">trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3griddisplaygrid001expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3griddisplaygrid001htm">trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3griddisplaygrid002expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3griddisplaygrid002htm">trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn001expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn001htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn002expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn002htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn003expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumn003htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumns001expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgridcolumns001htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems001expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems001htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems002expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems002htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems003expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems003htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems004expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems004htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems005expectedhtm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm</a></li>
<li><a href="#trunkLayoutTestsietestcentercss3gridgriditems005htm">trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005.htm</a></li>
<li><a href="#trunkLayoutTestssvgcssgetComputedStylebasicexpectedtxt">trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt</a></li>
<li><a href="#trunkManualTestscssgridlayoutitemwithhugespancrashhtml">trunk/ManualTests/css-grid-layout-item-with-huge-span-crash.html</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
<li><a href="#trunkPerformanceTestsLayoutautogridlotsofdatahtml">trunk/PerformanceTests/Layout/auto-grid-lots-of-data.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutfixedgridlotsofdatahtml">trunk/PerformanceTests/Layout/fixed-grid-lots-of-data.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutfixedgridlotsofstretcheddatahtml">trunk/PerformanceTests/Layout/fixed-grid-lots-of-stretched-data.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValueMappingsh">trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertyNamesin">trunk/Source/WebCore/css/CSSPropertyNames.in</a></li>
<li><a href="#trunkSourceWebCorecssCSSValueKeywordsin">trunk/Source/WebCore/css/CSSValueKeywords.in</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderCustomh">trunk/Source/WebCore/css/StyleBuilderCustom.h</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiescpp">trunk/Source/WebCore/css/StyleProperties.cpp</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSKeywordCompletionsjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js</a></li>
<li><a href="#trunkToolsChangeLog">trunk/Tools/ChangeLog</a></li>
<li><a href="#trunkToolsTestWebKitAPITestsWebCoreCSSParsercpp">trunk/Tools/TestWebKitAPI/Tests/WebCore/CSSParser.cpp</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * ManualTests/css-grid-layout-item-with-huge-span-crash.html:
+
</ins><span class="cx"> 2016-05-02 Per Arne Vollan <peavo@outlook.com>
</span><span class="cx">
</span><span class="cx"> [Win] Enable IndexedDB.
</span></span></pre></div>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,406 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * css3/parse-align-content.html:
+ * css3/parse-align-items.html:
+ * css3/parse-align-self.html:
+ * css3/parse-justify-content.html:
+ * fast/css-grid-layout/absolute-positioning-definite-sizes.html:
+ * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
+ * fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
+ * fast/css-grid-layout/anonymous-grid-items-expected.html:
+ * fast/css-grid-layout/anonymous-grid-items.html:
+ * fast/css-grid-layout/auto-content-resolution-columns.html:
+ * fast/css-grid-layout/auto-content-resolution-rows.html:
+ * fast/css-grid-layout/breadth-size-resolution-grid.html:
+ * fast/css-grid-layout/calc-resolution-grid-item.html:
+ * fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html:
+ * fast/css-grid-layout/display-grid-set-get-expected.txt:
+ * fast/css-grid-layout/explicit-grid-size.html:
+ * fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt:
+ * fast/css-grid-layout/flex-and-content-sized-resolution-columns.html:
+ * fast/css-grid-layout/flex-and-intrinsic-sizes.html:
+ * fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html:
+ * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
+ * fast/css-grid-layout/flex-content-distribution.html:
+ * fast/css-grid-layout/flex-content-resolution-columns.html:
+ * fast/css-grid-layout/flex-content-resolution-rows.html:
+ * fast/css-grid-layout/flex-content-sized-column-use-available-width.html:
+ * fast/css-grid-layout/flex-content-sized-columns-resize.html:
+ * fast/css-grid-layout/flex-factor-sum-less-than-1.html:
+ * fast/css-grid-layout/float-not-protruding-into-next-grid-item.html:
+ * fast/css-grid-layout/floating-empty-grids.html:
+ * fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html:
+ * fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html:
+ * fast/css-grid-layout/grid-align-content-distribution.html:
+ * fast/css-grid-layout/grid-align-content-vertical-lr.html:
+ * fast/css-grid-layout/grid-align-content-vertical-rl.html:
+ * fast/css-grid-layout/grid-align-content.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-stretching-replaced-items.html:
+ * fast/css-grid-layout/grid-align.html:
+ * fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html:
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
+ * fast/css-grid-layout/grid-auto-columns-rows-resolution.html:
+ * fast/css-grid-layout/grid-auto-columns-rows-update.html:
+ * fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
+ * fast/css-grid-layout/grid-auto-flow-get-set.html:
+ * fast/css-grid-layout/grid-auto-flow-resolution.html:
+ * fast/css-grid-layout/grid-auto-flow-sparse.html:
+ * fast/css-grid-layout/grid-auto-flow-update.html:
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt:
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html:
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt:
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
+ * 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-change-named-grid-lines-recompute-child.html:
+ * fast/css-grid-layout/grid-container-ignore-first-letter.html:
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.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-stretch-only-valid-for-auto-sized-tracks.html:
+ * fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.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-content-sized-columns-resolution-expected.txt:
+ * fast/css-grid-layout/grid-content-sized-columns-resolution.html:
+ * fast/css-grid-layout/grid-disable.html:
+ * fast/css-grid-layout/grid-dynamic-updates-relayout.html:
+ * fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
+ * fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
+ * fast/css-grid-layout/grid-element-border-grid-item.html:
+ * fast/css-grid-layout/grid-element-border-padding-grid-item.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-empty-row-column.html:
+ * fast/css-grid-layout/grid-element-min-max-height.html:
+ * fast/css-grid-layout/grid-element-min-max-width.html:
+ * fast/css-grid-layout/grid-element-padding-grid-item.html:
+ * fast/css-grid-layout/grid-element-padding-margin.html:
+ * fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
+ * fast/css-grid-layout/grid-element-repeat-get-set.html:
+ * fast/css-grid-layout/grid-element-shrink-to-fit.html:
+ * fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt:
+ * fast/css-grid-layout/grid-grow-tracks-to-their-max.html:
+ * fast/css-grid-layout/grid-gutters-and-alignment.html:
+ * fast/css-grid-layout/grid-gutters-and-flex-content.html:
+ * fast/css-grid-layout/grid-gutters-and-tracks.html:
+ * fast/css-grid-layout/grid-gutters-get-set-expected.txt:
+ * fast/css-grid-layout/grid-gutters-get-set.html:
+ * fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt:
+ * fast/css-grid-layout/grid-indefinite-calculated-height-crash.html:
+ * fast/css-grid-layout/grid-initialize-span-one-items-expected.txt:
+ * fast/css-grid-layout/grid-initialize-span-one-items.html:
+ * fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
+ * fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
+ * fast/css-grid-layout/grid-item-area-get-set-expected.txt:
+ * fast/css-grid-layout/grid-item-area-get-set.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-margins-must-respect-specified-margins.html:
+ * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
+ * fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
+ * fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html:
+ * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html:
+ * fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
+ * fast/css-grid-layout/grid-item-bad-resolution-double-span.html:
+ * fast/css-grid-layout/grid-item-change-column-repaint.html:
+ * fast/css-grid-layout/grid-item-change-row-repaint.html:
+ * fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
+ * fast/css-grid-layout/grid-item-column-row-get-set.html:
+ * fast/css-grid-layout/grid-item-display.html:
+ * fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
+ * fast/css-grid-layout/grid-item-end-after-get-set.html:
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html:
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html:
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html:
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html:
+ * fast/css-grid-layout/grid-item-margin-resolution.html:
+ * fast/css-grid-layout/grid-item-margins-not-collapse.html:
+ * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
+ * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
+ * fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
+ * fast/css-grid-layout/grid-item-negative-indexes.html:
+ * fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html:
+ * fast/css-grid-layout/grid-item-negative-position-resolution.html:
+ * fast/css-grid-layout/grid-item-order-auto-flow-resolution.html:
+ * fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html:
+ * fast/css-grid-layout/grid-item-order-paint-order.html:
+ * fast/css-grid-layout/grid-item-position-changed-dynamic.html:
+ * fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
+ * fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
+ * fast/css-grid-layout/grid-item-spanning-resolution.html:
+ * fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
+ * fast/css-grid-layout/grid-item-start-before-get-set.html:
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html:
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html:
+ * fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html:
+ * fast/css-grid-layout/grid-item-text-background-not-interleaved.html:
+ * fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html:
+ * fast/css-grid-layout/grid-item-with-border-in-fr.html:
+ * fast/css-grid-layout/grid-item-with-border-in-intrinsic.html:
+ * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
+ * fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html:
+ * fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html:
+ * fast/css-grid-layout/grid-item-z-index-change-repaint.html:
+ * 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-item-z-index-support.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-vertical-lr.html:
+ * fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.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/grid-justify-content.html:
+ * fast/css-grid-layout/grid-percent-track-margin-border-padding.html:
+ * fast/css-grid-layout/grid-percent-track-scrollbar.html:
+ * fast/css-grid-layout/grid-positioned-children-writing-modes.html:
+ * fast/css-grid-layout/grid-positioned-items-background-rtl.html:
+ * fast/css-grid-layout/grid-positioned-items-background.html:
+ * fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html:
+ * fast/css-grid-layout/grid-positioned-items-content-alignment.html:
+ * fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
+ * fast/css-grid-layout/grid-positioned-items-gaps.html:
+ * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
+ * fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
+ * fast/css-grid-layout/grid-positioned-items-padding.html:
+ * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
+ * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html:
+ * fast/css-grid-layout/grid-preferred-logical-widths.html:
+ * fast/css-grid-layout/grid-repeat-calc-expected.txt:
+ * fast/css-grid-layout/grid-repeat-calc.html:
+ * fast/css-grid-layout/grid-shorthand-computed-style-crash.html:
+ * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+ * fast/css-grid-layout/grid-shorthand-get-set.html:
+ * fast/css-grid-layout/grid-sizing-positioned-items.html:
+ * fast/css-grid-layout/grid-strict-ordering-crash.html:
+ * fast/css-grid-layout/grid-template-areas-empty-string-crash.html:
+ * fast/css-grid-layout/grid-template-areas-get-set-expected.txt:
+ * fast/css-grid-layout/grid-template-areas-get-set.html:
+ * fast/css-grid-layout/grid-template-areas-infinite-loop.html:
+ * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
+ * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
+ * fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html:
+ * fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
+ * fast/css-grid-layout/grid-template-shorthand-get-set.html:
+ * fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt:
+ * fast/css-grid-layout/grid-update-sizes-after-distributing-all.html:
+ * fast/css-grid-layout/grid-was-populated-assert.html:
+ * fast/css-grid-layout/grid-with-relative-font-length-crash.html:
+ * fast/css-grid-layout/implicit-columns-auto-resolution.html:
+ * fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
+ * fast/css-grid-layout/implicit-position-dynamic-change.html:
+ * fast/css-grid-layout/implicit-rows-auto-resolution.html:
+ * fast/css-grid-layout/implicit-tracks-before-explicit.html:
+ * fast/css-grid-layout/justify-self-cell.html:
+ * fast/css-grid-layout/mark-as-infinitely-growable-expected.txt:
+ * fast/css-grid-layout/mark-as-infinitely-growable.html:
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html:
+ * fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html:
+ * fast/css-grid-layout/min-height-border-box.html:
+ * fast/css-grid-layout/min-width-height-auto-and-margins.html:
+ * fast/css-grid-layout/min-width-height-auto-overflow.html:
+ * fast/css-grid-layout/min-width-height-auto.html:
+ * fast/css-grid-layout/min-width-margin-box.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/minmax-min-content-column-resolution-columns.html:
+ * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
+ * fast/css-grid-layout/minmax-spanning-resolution-columns.html:
+ * fast/css-grid-layout/minmax-spanning-resolution-rows.html:
+ * fast/css-grid-layout/named-grid-line-get-set-expected.txt:
+ * fast/css-grid-layout/named-grid-line-get-set.html:
+ * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt:
+ * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt:
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html:
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt:
+ * fast/css-grid-layout/non-grid-element-repeat-get-set.html:
+ * fast/css-grid-layout/non-named-grid-line-get-set-expected.txt:
+ * fast/css-grid-layout/non-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-update.html:
+ * fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
+ * fast/css-grid-layout/percent-intrinsic-track-breadth.html:
+ * fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html:
+ * fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html:
+ * fast/css-grid-layout/percent-of-indefinite-track-size.html:
+ * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html:
+ * fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html:
+ * fast/css-grid-layout/percent-resolution-grid-item.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/positioned-grid-items-should-not-create-implicit-tracks.html:
+ * fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html:
+ * fast/css-grid-layout/relayout-align-items-changed.html:
+ * fast/css-grid-layout/relayout-align-self-changed.html:
+ * fast/css-grid-layout/relayout-indefinite-heights.html:
+ * fast/css-grid-layout/relayout-justify-items-changed.html:
+ * fast/css-grid-layout/relayout-justify-self-changed.html:
+ * fast/css-grid-layout/resources/display-grid-set-get.js:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
+ (testInherit):
+ (testInitial):
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+ (testInherit):
+ (testInitial):
+ * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
+ (testGridTemplatesValues):
+ (checkGridTemplatesSetJSValues):
+ (testGridTemplatesSetBadJSValues):
+ (checkGridAutoFlowSetCSSValue):
+ (checkGridAutoFlowSetJSValue):
+ (testGridAutoDefinitionsValues):
+ (testGridGapDefinitionsValues):
+ * fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js:
+ (checkColumnRowValues):
+ (window.testColumnRowJSParsing):
+ (window.testColumnRowInvalidJSParsing):
+ (window.testColumnStartRowStartJSParsing):
+ (window.testColumnEndRowEndJSParsing):
+ (setupInheritTest):
+ (setupInitialTest):
+ (window.testColumnRowInheritJSParsing):
+ (window.testStartBeforeInheritJSParsing):
+ (window.testEndAfterInheritJSParsing):
+ (window.testColumnRowInitialJSParsing):
+ (window.testStartBeforeInitialJSParsing):
+ (window.testEndAfterInitialJSParsing):
+ * fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js:
+ (testGridDefinitionsValues):
+ (checkGridDefinitionsSetJSValues):
+ (testGridDefinitionsSetBadJSValues):
+ * fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js:
+ (testGridDefinitionsValues):
+ (checkGridDefinitionsSetJSValues):
+ (testGridDefinitionsSetBadJSValues):
+ * fast/css-grid-layout/resources/grid.css:
+ (.grid):
+ (.inline-grid):
+ (.firstRowFirstColumn):
+ (.onlyFirstRowOnlyFirstColumn):
+ (.firstRowSecondColumn):
+ (.onlyFirstRowOnlySecondColumn):
+ (.firstRowThirdColumn):
+ (.firstRowFourthColumn):
+ (.secondRowFirstColumn):
+ (.onlySecondRowOnlyFirstColumn):
+ (.secondRowSecondColumn):
+ (.onlySecondRowOnlySecondColumn):
+ (.endSecondRowEndSecondColumn):
+ (.secondRowThirdColumn):
+ (.secondRowFourthColumn):
+ (.thirdRowFirstColumn):
+ (.thirdRowSecondColumn):
+ (.thirdRowThirdColumn):
+ (.fourthRowFirstColumn):
+ (.fourthRowSecondColumn):
+ (.firstAutoRowSecondAutoColumn):
+ (.autoLastRowAutoLastColumn):
+ (.autoSecondRowAutoFirstColumn):
+ (.firstRowBothColumn):
+ (.secondRowBothColumn):
+ (.bothRowFirstColumn):
+ (.bothRowSecondColumn):
+ (.bothRowBothColumn):
+ (.autoRowAutoColumn):
+ (.firstRowAutoColumn):
+ (.secondRowAutoColumn):
+ (.thirdRowAutoColumn):
+ (.autoRowFirstColumn):
+ (.autoRowSecondColumn):
+ (.autoRowThirdColumn):
+ (.autoRowAutoColumnSpanning2):
+ (.autoRowSpanning2AutoColumn):
+ (.autoRowSpanning2AutoColumnSpanning3):
+ (.autoRowSpanning3AutoColumnSpanning2):
+ (.autoRowFirstColumnSpanning2):
+ (.autoRowSecondColumnSpanning2):
+ (.firstRowSpanning2AutoColumn):
+ (.secondRowSpanning2AutoColumn):
+ (.gridAutoFlowColumnSparse):
+ (.gridAutoFlowColumnDense):
+ (.gridAutoFlowRowSparse):
+ (.gridAutoFlowRowDense):
+ * fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
+ (testInherit):
+ (testInitial):
+ * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
+ (testInherit):
+ (testInitial):
+ * fast/css-grid-layout/should-not-collapse-anonymous-blocks.html:
+ * fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html:
+ * fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html:
+ * fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html:
+ * fast/css/auto-min-size.html:
+ * fast/css/first-letter-ignores-display-property.html:
+ * fast/css/getComputedStyle/computed-style-expected.txt:
+ * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+ * fast/css/getComputedStyle/resources/property-names.js:
+ * fast/css/parse-justify-items.html:
+ * fast/events/key-events-in-editable-gridbox.html:
+ * fast/repaint/align-items-overflow-change.html:
+ * fast/repaint/align-self-change.html:
+ * fast/repaint/align-self-overflow-change.html:
+ * fast/repaint/justify-items-change.html:
+ * fast/repaint/justify-items-legacy-change.html:
+ * fast/repaint/justify-items-overflow-change.html:
+ * fast/repaint/justify-self-change.html:
+ * fast/repaint/justify-self-overflow-change.html:
+ * fast/text-autosizing/cluster-inline-grid-flex-box-expected.html:
+ * fast/text-autosizing/cluster-inline-grid-flex-box.html:
+ * ietestcenter/css3/grid/display-grid-001-expected.htm:
+ * ietestcenter/css3/grid/display-grid-001.htm:
+ * ietestcenter/css3/grid/display-grid-002-expected.htm:
+ * ietestcenter/css3/grid/display-grid-002.htm:
+ * ietestcenter/css3/grid/grid-column-001-expected.htm:
+ * ietestcenter/css3/grid/grid-column-001.htm:
+ * ietestcenter/css3/grid/grid-column-002-expected.htm:
+ * ietestcenter/css3/grid/grid-column-002.htm:
+ * ietestcenter/css3/grid/grid-column-003-expected.htm:
+ * ietestcenter/css3/grid/grid-column-003.htm:
+ * ietestcenter/css3/grid/grid-columns-001-expected.htm:
+ * ietestcenter/css3/grid/grid-columns-001.htm:
+ * ietestcenter/css3/grid/grid-items-001-expected.htm:
+ * ietestcenter/css3/grid/grid-items-001.htm:
+ * ietestcenter/css3/grid/grid-items-002-expected.htm:
+ * ietestcenter/css3/grid/grid-items-002.htm:
+ * ietestcenter/css3/grid/grid-items-003-expected.htm:
+ * ietestcenter/css3/grid/grid-items-003.htm:
+ * ietestcenter/css3/grid/grid-items-004-expected.htm:
+ * ietestcenter/css3/grid/grid-items-004.htm:
+ * ietestcenter/css3/grid/grid-items-005-expected.htm:
+ * ietestcenter/css3/grid/grid-items-005.htm:
+ * svg/css/getComputedStyle-basic-expected.txt:
+
</ins><span class="cx"> 2016-05-06 Nan Wang <n_wang@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: <attachment> element should have a replacement character
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealigncontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-content.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-content.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/css3/parse-align-content.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -300,7 +300,7 @@
</span><span class="cx"> element.style.alignContent = "normal";
</span><span class="cx"> checkValues(element, "alignContent", "align-content", "normal", "normal");
</span><span class="cx">
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> element.style.alignContent = "normal";
</span><span class="cx"> checkValues(element, "alignContent", "align-content", "normal", "normal");
</span><span class="cx">
</span><span class="lines">@@ -342,7 +342,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> checkInitialValues(element, "alignContent", "align-content", "space-between left", "normal");
</span><span class="cx">
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/css3/parse-align-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -207,7 +207,7 @@
</span><span class="cx"> element.style.webkitAlignItems = "auto";
</span><span class="cx"> checkValues(element, "webkitAlignItems", "-webkit-align-items", "auto", "stretch");
</span><span class="cx">
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> element.style.webkitAlignItems = "auto";
</span><span class="cx"> checkValues(element, "webkitAlignItems", "-webkit-align-items", "auto", "stretch");
</span><span class="cx">
</span><span class="lines">@@ -251,7 +251,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "stretch");
</span><span class="cx">
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsealignselfhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-align-self.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-align-self.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/css3/parse-align-self.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -208,7 +208,7 @@
</span><span class="cx"> element.style.webkitAlignSelf = "auto";
</span><span class="cx"> checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "stretch");
</span><span class="cx">
</span><del>-container.style.display = "-webkit-grid";
</del><ins>+container.style.display = "grid";
</ins><span class="cx"> element.style.webkitAlignSelf = "auto";
</span><span class="cx"> checkValues(element, "webkitAlignSelf", "-webkit-align-self", "auto", "stretch");
</span><span class="cx">
</span><span class="lines">@@ -254,7 +254,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-container.style.display = "-webkit-grid";
</del><ins>+container.style.display = "grid";
</ins><span class="cx"> checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "stretch");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="lines">@@ -270,7 +270,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for positioned elements in grid containers");
</span><del>-container.style.display = "-webkit-grid";
</del><ins>+container.style.display = "grid";
</ins><span class="cx"> element.style.position = "absolute";
</span><span class="cx"> checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right", "auto");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestscss3parsejustifycontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/parse-justify-content.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-justify-content.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/css3/parse-justify-content.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -296,7 +296,7 @@
</span><span class="cx"> element.style.justifyContent = "normal";
</span><span class="cx"> checkValues(element, "justifyContent", "justify-content", "normal", "normal");
</span><span class="cx">
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> element.style.justifyContent = "normal";
</span><span class="cx"> checkValues(element, "justifyContent", "justify-content", "normal", "normal");
</span><span class="cx">
</span><span class="lines">@@ -338,7 +338,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
</span><span class="cx">
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssautominsizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/auto-min-size.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/auto-min-size.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/auto-min-size.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <script src='../../resources/js-test-pre.js'></script>
</span><span class="cx"> <div id=foo></div>
</span><span class="cx"> <div id="flexbox" style="display: flex;"><div id="flexitem"></div></div>
</span><del>-<div id="grid" style="display: -webkit-grid;"><div id="griditem"></div></div>
</del><ins>+<div id="grid" style="display: grid;"><div id="griditem"></div></div>
</ins><span class="cx"> <script>
</span><span class="cx"> div = document.getElementById('foo');
</span><span class="cx"> shouldBe('div.style.minWidth', '""');
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssfirstletterignoresdisplaypropertyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -24,8 +24,8 @@
</span><span class="cx">
</span><span class="cx"> .grid::first-letter {
</span><span class="cx"> color: green;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgetComputedStylecomputedstyleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -165,15 +165,15 @@
</span><span class="cx"> font-variant-numeric: normal;
</span><span class="cx"> font-variant-alternates: normal;
</span><span class="cx"> font-variant-east-asian: normal;
</span><del>--webkit-grid-auto-columns: auto;
--webkit-grid-auto-flow: row;
--webkit-grid-auto-rows: auto;
--webkit-grid-column-end: auto;
--webkit-grid-column-start: auto;
--webkit-grid-template-columns: none;
--webkit-grid-template-rows: none;
--webkit-grid-row-end: auto;
--webkit-grid-row-start: auto;
</del><ins>+grid-auto-columns: auto;
+grid-auto-flow: row;
+grid-auto-rows: auto;
+grid-column-end: auto;
+grid-column-start: auto;
+grid-template-columns: none;
+grid-template-rows: none;
+grid-row-end: auto;
+grid-row-start: auto;
</ins><span class="cx"> -webkit-hyphenate-character: auto;
</span><span class="cx"> -webkit-hyphenate-limit-after: auto;
</span><span class="cx"> -webkit-hyphenate-limit-before: auto;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgetComputedStylecomputedstylewithoutrendererexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -164,15 +164,15 @@
</span><span class="cx"> font-variant-numeric: normal
</span><span class="cx"> font-variant-alternates: normal
</span><span class="cx"> font-variant-east-asian: normal
</span><del>--webkit-grid-auto-columns: auto
--webkit-grid-auto-flow: row
--webkit-grid-auto-rows: auto
--webkit-grid-column-end: auto
--webkit-grid-column-start: auto
--webkit-grid-template-columns: none
--webkit-grid-template-rows: none
--webkit-grid-row-end: auto
--webkit-grid-row-start: auto
</del><ins>+grid-auto-columns: auto
+grid-auto-flow: row
+grid-auto-rows: auto
+grid-column-end: auto
+grid-column-start: auto
+grid-template-columns: none
+grid-template-rows: none
+grid-row-end: auto
+grid-row-start: auto
</ins><span class="cx"> -webkit-hyphenate-character: auto
</span><span class="cx"> -webkit-hyphenate-limit-after: auto
</span><span class="cx"> -webkit-hyphenate-limit-before: auto
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgetComputedStyleresourcespropertynamesjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/getComputedStyle/resources/property-names.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/getComputedStyle/resources/property-names.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/getComputedStyle/resources/property-names.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -48,15 +48,15 @@
</span><span class="cx"> "flex-wrap": true,
</span><span class="cx"> "-webkit-font-kerning": true,
</span><span class="cx"> "-webkit-font-smoothing": true,
</span><del>- "-webkit-grid-auto-columns": true,
- "-webkit-grid-auto-flow": true,
- "-webkit-grid-auto-rows": true,
- "-webkit-grid-column-end": true,
- "-webkit-grid-column-start": true,
- "-webkit-grid-row-end": true,
- "-webkit-grid-row-start": true,
- "-webkit-grid-template-columns": true,
- "-webkit-grid-template-rows": true,
</del><ins>+ "grid-auto-columns": true,
+ "grid-auto-flow": true,
+ "grid-auto-rows": true,
+ "grid-column-end": true,
+ "grid-column-start": true,
+ "grid-row-end": true,
+ "grid-row-start": true,
+ "grid-template-columns": true,
+ "grid-template-rows": true,
</ins><span class="cx"> "-webkit-highlight": true,
</span><span class="cx"> "-webkit-hyphenate-character": true,
</span><span class="cx"> "-webkit-hyphenate-limit-after": true,
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssparsejustifyitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/parse-justify-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/parse-justify-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css/parse-justify-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -300,7 +300,7 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the value 'initial' for grid containers");
</span><del>-element.style.display = "-webkit-grid";
</del><ins>+element.style.display = "grid";
</ins><span class="cx"> checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch");
</span><span class="cx">
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizeshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template: 50px 1fr / 1fr;
</del><ins>+ grid-template: 50px 1fr / 1fr;
</ins><span class="cx">
</span><span class="cx"> position: absolute;
</span><span class="cx"> left: 50px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px 150px 200px;
- -webkit-grid-template-rows: 50px 100px 150px 200px;
</del><ins>+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 500px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -20,56 +20,56 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowThirdColumnSpanning2Rows {
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 3 / span 2;
</del><ins>+ grid-column: 3;
+ grid-row: 3 / span 2;
</ins><span class="cx"> background-color: maroon;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowThirdColumnSpanning2Rows2Columns {
</span><del>- -webkit-grid-column: 3 / span 2;
- -webkit-grid-row: 3 / span 2;
</del><ins>+ grid-column: 3 / span 2;
+ grid-row: 3 / span 2;
</ins><span class="cx"> background-color: aqua;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endFirstRowEndFirstColumn {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column-end: 2;
- -webkit-grid-row-end: 2;
</del><ins>+ grid-column-end: 2;
+ grid-row-end: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endFirstRowEndSecondColumn {
</span><span class="cx"> background-color: lime;
</span><del>- -webkit-grid-column-end: 3;
- -webkit-grid-row-end: 2;
</del><ins>+ grid-column-end: 3;
+ grid-row-end: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endSecondRowEndFirstColumn {
</span><span class="cx"> background-color: purple;
</span><del>- -webkit-grid-column-end: 2;
- -webkit-grid-row-end: 3;
</del><ins>+ grid-column-end: 2;
+ grid-row-end: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endThirdRowEndThirdColumnSpanning2Rows {
</span><del>- -webkit-grid-column-end: 4;
- -webkit-grid-row: span 2 / 4;
</del><ins>+ grid-column-end: 4;
+ grid-row: span 2 / 4;
</ins><span class="cx"> background-color: maroon;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endThirdRowEndThirdColumnSpanning2Rows2Columns {
</span><del>- -webkit-grid-column: span 2 / 4;
- -webkit-grid-row: span 2 / 4;
</del><ins>+ grid-column: span 2 / 4;
+ grid-row: span 2 / 4;
</ins><span class="cx"> background-color: aqua;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlyThirdRowOnlyThirdColumnSpanning2Rows {
</span><del>- -webkit-grid-column: 3 / 4;
- -webkit-grid-row: 3 / 5;
</del><ins>+ grid-column: 3 / 4;
+ grid-row: 3 / 5;
</ins><span class="cx"> background-color: maroon;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
</span><del>- -webkit-grid-column: 3 / 5;
- -webkit-grid-row: 3 / 5;
</del><ins>+ grid-column: 3 / 5;
+ grid-row: 3 / 5;
</ins><span class="cx"> background-color: aqua;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px 150px;
- -webkit-grid-template-rows: 25px 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px 150px;
+ grid-template-rows: 25px 50px 100px;
</ins><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> border: 5px solid black;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutanonymousgriditemsexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items-expected.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items-expected.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items-expected.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <body>
</span><span class="cx"> <div>Checks that anonymous grid items are supported. This should not crash.</div>
</span><del>- <div style="display: -webkit-grid;">
</del><ins>+ <div style="display: grid;">
</ins><span class="cx"> <div>anonymous item</div>
</span><span class="cx"> </div>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutanonymousgriditemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/anonymous-grid-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <body>
</span><span class="cx"> <div>Checks that anonymous grid items are supported. This should not crash.</div>
</span><del>- <div style="display: -webkit-grid;">
</del><ins>+ <div style="display: grid;">
</ins><span class="cx"> anonymous item
</span><span class="cx"> </div>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutautocontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoContent {
</span><del>- -webkit-grid-template-columns: auto;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: auto;
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutautocontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: auto;
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutbreadthsizeresolutiongridhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 10vw;
- -webkit-grid-template-rows: 10vh 100px;
</del><ins>+ grid-template-columns: 100px 10vw;
+ grid-template-rows: 10vh 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutcalcresolutiongriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 300px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 300px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> height: 200px;
</span><span class="cx"> width: 400px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutcomputeintrinsicwidthsscrollbarhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/compute-intrinsic-widths-scrollbar.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,11 +11,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .oneColumn {
</span><del>- -webkit-grid-template-columns: 200px;
</del><ins>+ grid-template-columns: 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .fourColumns {
</span><del>- -webkit-grid-template-columns: repeat(4, 50px);
</del><ins>+ grid-template-columns: repeat(4, 50px);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutdisplaygridsetgetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/display-grid-set-get-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/display-grid-set-get-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/display-grid-set-get-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,14 +4,14 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting |display| set through CSS
</span><del>-PASS getComputedStyle(gridElement, '').getPropertyValue('display') is '-webkit-grid'
-PASS getComputedStyle(inlineGridElement, '').getPropertyValue('display') is '-webkit-inline-grid'
</del><ins>+PASS getComputedStyle(gridElement, '').getPropertyValue('display') is 'grid'
+PASS getComputedStyle(inlineGridElement, '').getPropertyValue('display') is 'inline-grid'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting display through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-grid'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('display') is 'grid'
</ins><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-inline-grid'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('display') is 'inline-grid'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutexplicitgridsizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/explicit-grid-size.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,46 +3,46 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 10px;
- -webkit-grid-auto-rows: 10px;
</del><ins>+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .oneColumnOneRow {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoColumnsOneRow {
</span><del>- -webkit-grid-template-columns: 50px 50px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 50px 50px;
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .oneColumnTwoRows {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: 50px 50px;
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: 50px 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoColumnsTwoRows {
</span><del>- -webkit-grid-template-columns: 50px 50px;
- -webkit-grid-template-rows: 50px 50px;
</del><ins>+ grid-template-columns: 50px 50px;
+ grid-template-rows: 50px 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .oneColumnOneRowAreas {
</span><del>- -webkit-grid-template-areas: "a";
</del><ins>+ grid-template-areas: "a";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoColumnsOneRowAreas {
</span><del>- -webkit-grid-template-areas: "a b";
</del><ins>+ grid-template-areas: "a b";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .oneColumnTwoRowsAreas {
</span><del>- -webkit-grid-template-areas: "a"
</del><ins>+ grid-template-areas: "a"
</ins><span class="cx"> "b";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoColumnsTwoRowsAreas {
</span><del>- -webkit-grid-template-areas: "a b"
</del><ins>+ grid-template-areas: "a b"
</ins><span class="cx"> "c d";
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandcontentsizedresolutioncolumnsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,10 +1,10 @@
</span><del>-PASS window.getComputedStyle(gridFixedAndMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 30px 50px"
-PASS window.getComputedStyle(gridFixedAndMinContentAndFlexMultipleOverlap, '').getPropertyValue('-webkit-grid-template-columns') is "20px 10px 70px"
-PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "60px 20px 20px"
-PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('-webkit-grid-template-columns') is "100px 0px 0px"
-PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "35px 5px 25px"
-PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "20px 20px 60px"
-PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px 10px"
</del><ins>+PASS window.getComputedStyle(gridFixedAndMinContentAndFlex, '').getPropertyValue('grid-template-columns') is "20px 30px 50px"
+PASS window.getComputedStyle(gridFixedAndMinContentAndFlexMultipleOverlap, '').getPropertyValue('grid-template-columns') is "20px 10px 70px"
+PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('grid-template-columns') is "60px 20px 20px"
+PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('grid-template-columns') is "100px 0px 0px"
+PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('grid-template-columns') is "35px 5px 25px"
+PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('grid-template-columns') is "20px 20px 60px"
+PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('grid-template-columns') is "70px 20px 10px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandcontentsizedresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,23 +8,23 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedAndMinContentAndFlex {
</span><del>- -webkit-grid-template-columns: 20px -webkit-min-content 1fr;
</del><ins>+ grid-template-columns: 20px -webkit-min-content 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxFixedFlexAndMaxContentAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(20px, 1fr) -webkit-max-content auto;
</del><ins>+ grid-template-columns: minmax(20px, 1fr) -webkit-max-content auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxFlexFixedAndMinContentAndFixed {
</span><del>- -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
</del><ins>+ grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinContentAndMinMaxFixedMinContentAndFlex {
</span><del>- -webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr;
</del><ins>+ grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxContentAndMinMaxFixedMaxContentAndFlex {
</span><del>- -webkit-grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr;
</del><ins>+ grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -36,54 +36,54 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAndFlex">
</span><del>- <div style="-webkit-grid-column: 2 / span 2;">XXXXXXXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXXX</div>
</del><ins>+ <div style="grid-column: 2 / span 2;">XXXXXXXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixedAndMinContentAndFlex">
</span><del>- <div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXXX</div>
</del><ins>+ <div style="grid-column: 1 / span 2;">XXX XXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
</span><del>- <div style="-webkit-grid-column: 1 / span 2;">XXX XXX</div>
- <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXXX</div>
</del><ins>+ <div style="grid-column: 1 / span 2;">XXX XXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
</span><del>- <div style="-webkit-grid-column: 1 / -1;">XXX XXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 2;">XXXX XXXX</div>
</del><ins>+ <div style="grid-column: 1 / -1;">XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFlexFixedAndMinContentAndFixed">
</span><del>- <div style="-webkit-grid-column: 1 / span 2;">XXXX XXXX</div>
- <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;">XXX XXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 3;">XXXXX XXXXX</div>
- <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 4;">XX XX XX XX</div>
</del><ins>+ <div style="grid-column: 1 / span 2;">XXXX XXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinContentAndMinMaxFixedMinContentAndFlex">
</span><del>- <div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
</del><ins>+ <div style="grid-column: 2 / span 2;">XXXXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex">
</span><del>- <div style="-webkit-grid-column: 2 / span 2;">XXXXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;">XXX XXX XXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;">XXXX XXXX</div>
</del><ins>+ <div style="grid-column: 2 / span 2;">XXXXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -93,7 +93,7 @@
</span><span class="cx"> function checkColumns(gridId, columnValue)
</span><span class="cx"> {
</span><span class="cx"> window.gridElement = document.getElementById(gridId);
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('-webkit-grid-template-columns')", columnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('grid-template-columns')", columnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 1fr;
- -webkit-grid-template-rows: 1fr;
</del><ins>+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> div { font: 10px/1 Ahem; }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,37 +3,37 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMaxMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMinContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithIntrinsicSizeBiggerThanFlex {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridShrinkBelowItemsIntrinsicSize {
</span><del>- -webkit-grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNonFlexingItems {
</span><del>- -webkit-grid-template-columns: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowThirdColumn {
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> .firstRowFourthColumn {
</span><del>- -webkit-grid-column: 4;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 4;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,37 +3,37 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMaxMaxContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMinContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithIntrinsicSizeBiggerThanFlex {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridShrinkBelowItemsIntrinsicSize {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNonFlexingItems {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowFirstColumn {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 1;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> .fourthRowFirstColumn {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 4;
</del><ins>+ grid-column: 1;
+ grid-row: 4;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentdistributionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,13 +4,13 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .freeSpaceForColumnsGrid {
</span><del>- -webkit-grid-template: 100% / minmax(20px, 0.7fr);
</del><ins>+ grid-template: 100% / minmax(20px, 0.7fr);
</ins><span class="cx"> width: 50px;
</span><span class="cx"> height: 100px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .freeSpaceForRowsGrid {
</span><del>- -webkit-grid-template: minmax(20px, 0.7fr) / 100%;
</del><ins>+ grid-template: minmax(20px, 0.7fr) / 100%;
</ins><span class="cx"> width: 50px;
</span><span class="cx"> height: 100px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,49 +3,49 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinFlexContent {
</span><del>- -webkit-grid-template-columns: minmax(1fr, 50px);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(1fr, 50px);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridZeroFlexContent {
</span><del>- -webkit-grid-template-columns: minmax(1fr, 0px);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(1fr, 0px);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxFlexContent {
</span><del>- -webkit-grid-template-columns: minmax(30px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(30px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridTwoMaxFlexContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridTwoDoubleMaxFlexContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridIgnoreSecondGridItem {
</span><del>- -webkit-grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSize {
</span><del>- -webkit-grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectProportions {
</span><del>- -webkit-grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSizeProportions {
</span><del>- -webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSizeBeforeProportions {
</span><del>- -webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .firstRowThirdColumn {
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,45 +3,45 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinFlexContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(1fr, 50px);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(1fr, 50px);
</ins><span class="cx"> }
</span><span class="cx"> .gridZeroFlexContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(1fr, 0px);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(1fr, 0px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxFlexContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(30px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(30px, 2fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridTwoMaxFlexContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridTwoDoubleMaxFlexContent {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSize {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectProportions {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSizeProportions {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
</ins><span class="cx"> }
</span><span class="cx"> .gridRespectBaseSizeBeforeProportions {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
</ins><span class="cx"> }
</span><span class="cx"> .thirdRowFirstColumn {
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 1;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentsizedcolumnuseavailablewidthhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-column-use-available-width.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-column-use-available-width.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-column-use-available-width.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,11 +4,11 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style type="text/css">
</span><span class="cx"> #grid-1 {
</span><del>- -webkit-grid-template-columns: 1fr;
</del><ins>+ grid-template-columns: 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid-2 {
</span><del>- -webkit-grid-template-columns: auto;
</del><ins>+ grid-template-columns: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentsizedcolumnsresizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-sized-columns-resize.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,11 +4,11 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style type="text/css">
</span><span class="cx"> #grid-1 {
</span><del>- -webkit-grid-template-columns: 1fr 1fr;
</del><ins>+ grid-template-columns: 1fr 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid-2 {
</span><del>- -webkit-grid-template-columns: auto;
</del><ins>+ grid-template-columns: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexfactorsumlessthan1html"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-factor-sum-less-than-1.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-factor-sum-less-than-1.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-factor-sum-less-than-1.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,41 +3,41 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .onlyColumnFractionFlexFactors {
</span><del>- -webkit-grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
+ grid-template-rows: 50px;
</ins><span class="cx"> width: 100px;
</span><span class="cx"> }
</span><span class="cx"> .onlyRowFractionFlexFactors {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
</ins><span class="cx"> width: 50px;
</span><span class="cx"> height: 100px;
</span><span class="cx"> }
</span><span class="cx"> .fixedAndfractionFlexFactors {
</span><del>- -webkit-grid-template-columns: 50px minmax(0,0.2fr) 30px;
- -webkit-grid-template-rows: minmax(0,0.1fr) 50px minmax(0,0.3fr);
</del><ins>+ grid-template-columns: 50px minmax(0,0.2fr) 30px;
+ grid-template-rows: minmax(0,0.1fr) 50px minmax(0,0.3fr);
</ins><span class="cx"> width: 100px;
</span><span class="cx"> height: 100px;
</span><span class="cx"> }
</span><span class="cx"> .firstRowThirdColumn {
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> .secondRowThirdColumn {
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 3;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx"> .thirdRowFirstColumn {
</span><span class="cx"> background-color: brown;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 1;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> .thirdRowThirdColumn {
</span><span class="cx"> background-color: magenta;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 3;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutfloatnotprotrudingintonextgriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/float-not-protruding-into-next-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/float-not-protruding-into-next-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/float-not-protruding-into-next-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 50px;
- -webkit-grid-auto-rows: minmax(50px, -webkit-max-content);
</del><ins>+ grid-auto-columns: 50px;
+ grid-auto-rows: minmax(50px, -webkit-max-content);
</ins><span class="cx"> width: -webkit-fit-content;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutfloatingemptygridshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/floating-empty-grids.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/floating-empty-grids.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/floating-empty-grids.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <head>
</span><span class="cx"> <style>
</span><span class="cx"> span { width: 100px; height: 100px; }
</span><del>- .grid { display: -webkit-grid; background-color: green; }
- .inline-grid { display: -webkit-inline-grid; background-color: green; }
</del><ins>+ .grid { display: grid; background-color: green; }
+ .inline-grid { display: inline-grid; background-color: green; }
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,15 +9,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .alignContentSpaceBetween {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,15 +9,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .alignContentSpaceBetween {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontentdistributionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-distribution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,15 +9,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .alignContentSpaceBetween {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontentverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontentverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaligncontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> padding: 10px 15px 20px 30px;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddingverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> padding: 10px 15px 20px 30px;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifymarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> padding: 10px 15px 20px 30px;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifyoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 150px 150px;
- -webkit-grid-template-rows: 120px 120px 120px;
</del><ins>+ grid-template-columns: 150px 150px;
+ grid-template-rows: 120px 120px 120px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx"> .cellOverflowWidth {
</span><span class="lines">@@ -28,8 +28,8 @@
</span><span class="cx"> }
</span><span class="cx"> .thirdRowFirstColumn {
</span><span class="cx"> background-color: green;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 1;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignjustifystretchhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 500px;
- -webkit-grid-template-rows: 500px;
</del><ins>+ grid-template-columns: 500px;
+ grid-template-rows: 500px;
</ins><span class="cx"> }
</span><span class="cx"> .fixedSizes {
</span><span class="cx"> width: 150px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsautoflowresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,25 +4,25 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 5px;
- -webkit-grid-template-columns: 10px;
</del><ins>+ grid-template-rows: 5px;
+ grid-template-columns: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoFixedFixed {
</span><del>- -webkit-grid-auto-rows: 30px;
- -webkit-grid-auto-columns: 50px;
</del><ins>+ grid-auto-rows: 30px;
+ grid-auto-columns: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMax {
</span><span class="cx"> font: 10/1 Ahem;
</span><span class="cx"> width: 1000px;
</span><del>- -webkit-grid-auto-rows: minmax(10em, 15px);
- -webkit-grid-auto-columns: minmax(30%, 100px);
</del><ins>+ grid-auto-rows: minmax(10em, 15px);
+ grid-auto-columns: minmax(30%, 100px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMaxContent {
</span><del>- -webkit-grid-auto-rows: -webkit-min-content;
- -webkit-grid-auto-columns: -webkit-max-content;
</del><ins>+ grid-auto-rows: -webkit-min-content;
+ grid-auto-columns: -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,65 +3,65 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-auto-columns and -webkit-grid-auto-rows set through CSS
-PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
-PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-columns') is "50px"
-PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is "minmax(10%, 15px)"
-PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(30%, 100px)"
-PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows') is "-webkit-min-content"
-PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns') is "-webkit-max-content"
-PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is "minmax(auto, 48px)"
-PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(80px, auto)"
</del><ins>+Test getting grid-auto-columns and grid-auto-rows set through CSS
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns') is "50px"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(10%, 15px)"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(30%, 100px)"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows') is "-webkit-min-content"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns') is "-webkit-max-content"
+PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(auto, 48px)"
+PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(80px, auto)"
</ins><span class="cx">
</span><span class="cx"> Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
</span><del>-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-columns') is "50px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "30px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-columns') is "40px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "20px 40px 40px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "15px 30px 30px"
</del><ins>+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "40px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "20px 40px 40px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "15px 30px 30px"
</ins><span class="cx">
</span><span class="cx"> Test that grid-template-* definitions are not affected by grid-auto-* definitions
</span><del>-PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
</ins><span class="cx">
</span><del>-Test getting and setting -webkit-grid-auto-columns and -webkit-grid-auto-rows through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is '180px'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is '660px'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'minmax(-webkit-min-content, 48px)'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'minmax(80px, -webkit-min-content)'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
</del><ins>+Test getting and setting grid-auto-columns and grid-auto-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '180px'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '660px'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'minmax(-webkit-min-content, 48px)'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'minmax(80px, -webkit-min-content)'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is '50px'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is '101%'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '50px'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '101%'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is '150%'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is '1fr'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '150%'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '1fr'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,31 +4,31 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoFixedFixed {
</span><del>- -webkit-grid-auto-rows: 30px;
- -webkit-grid-auto-columns: 50px;
</del><ins>+ grid-auto-rows: 30px;
+ grid-auto-columns: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMax {
</span><del>- -webkit-grid-auto-rows: minmax(10%, 15px);
- -webkit-grid-auto-columns: minmax(30%, 100px);
</del><ins>+ grid-auto-rows: minmax(10%, 15px);
+ grid-auto-columns: minmax(30%, 100px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMaxContent {
</span><del>- -webkit-grid-auto-rows: -webkit-min-content;
- -webkit-grid-auto-columns: -webkit-max-content;
</del><ins>+ grid-auto-rows: -webkit-min-content;
+ grid-auto-columns: -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> .gridAutoFixedFixedWithFixedFixed {
</span><del>- -webkit-grid-auto-rows: 30px;
- -webkit-grid-auto-columns: 40px;
- -webkit-grid-template-rows: 15px;
- -webkit-grid-template-columns: 20px;
</del><ins>+ grid-auto-rows: 30px;
+ grid-auto-columns: 40px;
+ grid-template-rows: 15px;
+ grid-template-columns: 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoAutoInMinMax {
</span><del>- -webkit-grid-auto-rows: minmax(auto, 8vh);
- -webkit-grid-auto-columns: minmax(10vw, auto);
</del><ins>+ grid-auto-rows: minmax(auto, 8vh);
+ grid-auto-columns: minmax(10vw, auto);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -50,7 +50,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
</span><span class="cx">
</span><del>-debug("Test getting -webkit-grid-auto-columns and -webkit-grid-auto-rows set through CSS");
</del><ins>+debug("Test getting grid-auto-columns and grid-auto-rows set through CSS");
</ins><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
</span><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
</span><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
</span><span class="lines">@@ -73,81 +73,81 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><del>-debug("Test getting and setting -webkit-grid-auto-columns and -webkit-grid-auto-rows through JS");
</del><ins>+debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
</ins><span class="cx"> element.style.font = "10px Ahem";
</span><del>-element.style.webkitGridAutoColumns = "18em";
-element.style.webkitGridAutoRows = "66em";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'180px'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'660px'");
</del><ins>+element.style.gridAutoColumns = "18em";
+element.style.gridAutoRows = "66em";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'180px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'660px'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-element.style.webkitGridAutoColumns = "minmax(-webkit-min-content, 8vh)";
-element.style.webkitGridAutoRows = "minmax(10vw, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'minmax(-webkit-min-content, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'minmax(80px, -webkit-min-content)'");
</del><ins>+element.style.gridAutoColumns = "minmax(-webkit-min-content, 8vh)";
+element.style.gridAutoRows = "minmax(10vw, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, 48px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(80px, -webkit-min-content)'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-element.style.webkitGridAutoColumns = "minmax(-webkit-min-content, -webkit-max-content)";
-element.style.webkitGridAutoRows = "minmax(-webkit-max-content, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
</del><ins>+element.style.gridAutoColumns = "minmax(-webkit-min-content, -webkit-max-content)";
+element.style.gridAutoRows = "minmax(-webkit-max-content, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> // No comma.
</span><del>-element.style.webkitGridAutoColumns = "minmax(10px 20px)";
</del><ins>+element.style.gridAutoColumns = "minmax(10px 20px)";
</ins><span class="cx"> // Only 1 argument provided.
</span><del>-element.style.webkitGridAutoRows = "minmax(10px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+element.style.gridAutoRows = "minmax(10px)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> // Nested minmax.
</span><del>-element.style.webkitGridAutoColumns = "minmax(minmax(10px, 20px), 20px)";
</del><ins>+element.style.gridAutoColumns = "minmax(minmax(10px, 20px), 20px)";
</ins><span class="cx"> // Only 2 arguments are allowed.
</span><del>-element.style.webkitGridAutoRows = "minmax(10px, 20px, 30px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+element.style.gridAutoRows = "minmax(10px, 20px, 30px)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> // No breadth value.
</span><del>-element.style.webkitGridAutoColumns = "minmax()";
</del><ins>+element.style.gridAutoColumns = "minmax()";
</ins><span class="cx"> // No comma.
</span><del>-element.style.webkitGridAutoRows = "minmax(30px 30% 30em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+element.style.gridAutoRows = "minmax(30px 30% 30em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> // None is not allowed for grid-auto-{rows|columns}.
</span><del>-element.style.webkitGridAutoColumns = "none";
-element.style.webkitGridAutoRows = "none";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+element.style.gridAutoColumns = "none";
+element.style.gridAutoRows = "none";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> function testInherit()
</span><span class="cx"> {
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><del>- parentElement.style.webkitGridAutoColumns = "50px";
- parentElement.style.webkitGridAutoRows = "101%";
</del><ins>+ parentElement.style.gridAutoColumns = "50px";
+ parentElement.style.gridAutoRows = "101%";
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.webkitGridAutoColumns = "inherit";
- element.style.webkitGridAutoRows = "inherit";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'50px'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'101%'");
</del><ins>+ element.style.gridAutoColumns = "inherit";
+ element.style.gridAutoRows = "inherit";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'50px'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'101%'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="cx"> }
</span><span class="lines">@@ -159,15 +159,15 @@
</span><span class="cx"> {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridAutoColumns = "150%";
- element.style.webkitGridAutoRows = "1fr";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'150%'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'1fr'");
</del><ins>+ element.style.gridAutoColumns = "150%";
+ element.style.gridAutoRows = "1fr";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'150%'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'1fr'");
</ins><span class="cx">
</span><del>- element.style.webkitGridAutoColumns = "initial";
- element.style.webkitGridAutoRows = "initial";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+ element.style.gridAutoColumns = "initial";
+ element.style.gridAutoRows = "initial";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,25 +4,25 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 20px;
- -webkit-grid-template-columns: 10px;
</del><ins>+ grid-template-rows: 20px;
+ grid-template-columns: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoFixedFixed {
</span><del>- -webkit-grid-auto-rows: 30px;
- -webkit-grid-auto-columns: 50px;
</del><ins>+ grid-auto-rows: 30px;
+ grid-auto-columns: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMax {
</span><span class="cx"> width: 1000px;
</span><span class="cx"> height: 1000px;
</span><del>- -webkit-grid-auto-rows: minmax(10%, 15px);
- -webkit-grid-auto-columns: minmax(30%, 100px);
</del><ins>+ grid-auto-rows: minmax(10%, 15px);
+ grid-auto-columns: minmax(30%, 100px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoMinMaxContent {
</span><del>- -webkit-grid-auto-rows: -webkit-min-content;
- -webkit-grid-auto-columns: -webkit-max-content;
</del><ins>+ grid-auto-rows: -webkit-min-content;
+ grid-auto-columns: -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,10 +5,10 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 20px;
- -webkit-grid-template-columns: 10px;
- -webkit-grid-auto-rows: 30px;
- -webkit-grid-auto-columns: 50px;
</del><ins>+ grid-template-rows: 20px;
+ grid-template-columns: 10px;
+ grid-auto-rows: 30px;
+ grid-auto-columns: 50px;
</ins><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="lines">@@ -18,8 +18,8 @@
</span><span class="cx"> function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementById(gridElementID);
</span><del>- gridElement.style.webkitGridAutoRows = defaultSizing.rows;
- gridElement.style.webkitGridAutoColumns = defaultSizing.columns;
</del><ins>+ gridElement.style.gridAutoRows = defaultSizing.rows;
+ gridElement.style.gridAutoColumns = defaultSizing.columns;
</ins><span class="cx">
</span><span class="cx"> var gridItem = gridElement.firstChild.nextSibling;
</span><span class="cx"> gridItem.setAttribute("data-expected-width", gridItemSize.width);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,58 +1,58 @@
</span><del>-Test that setting and getting -webkit-grid-auto-flow works as expected
</del><ins>+Test that setting and getting grid-auto-flow works as expected
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-auto-flow set through CSS
-PASS window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
-PASS window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
-PASS window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+Test getting grid-auto-flow set through CSS
+PASS window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyValue('grid-auto-flow') is 'column'
+PASS window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('grid-auto-flow') is 'column dense'
+PASS window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('grid-auto-flow') is 'column'
+PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx">
</span><del>-Test getting -webkit-grid-auto-flow bad values set through CSS
-PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowDenseRowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+Test getting grid-auto-flow bad values set through CSS
+PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDenseRowRow, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+PASS element.style.gridAutoFlow is ''
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx">
</span><del>-Test getting and setting -webkit-grid-auto-flow through JS
-PASS element.style.webkitGridAutoFlow is 'column'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS element.style.webkitGridAutoFlow is 'column dense'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
-PASS element.style.webkitGridAutoFlow is 'row dense'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS element.style.webkitGridAutoFlow is 'row dense'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS element.style.webkitGridAutoFlow is 'column dense'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
-PASS element.style.webkitGridAutoFlow is 'row dense'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS element.style.webkitGridAutoFlow is 'row'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+Test getting and setting grid-auto-flow through JS
+PASS element.style.gridAutoFlow is 'column'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'column'
+PASS element.style.gridAutoFlow is 'column dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'column dense'
+PASS element.style.gridAutoFlow is 'row dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS element.style.gridAutoFlow is 'row dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS element.style.gridAutoFlow is 'column dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'column dense'
+PASS element.style.gridAutoFlow is 'row dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row dense'
+PASS element.style.gridAutoFlow is 'row'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx">
</span><del>-Test getting and setting bad values for -webkit-grid-auto-flow through JS
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+Test getting and setting bad values for grid-auto-flow through JS
+PASS element.style.gridAutoFlow is ''
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS element.style.gridAutoFlow is ''
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS element.style.gridAutoFlow is ''
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx">
</span><del>-Test setting -webkit-grid-auto-flow to 'initial' through JS
-PASS element.style.webkitGridAutoFlow is 'initial'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
</del><ins>+Test setting grid-auto-flow to 'initial' through JS
+PASS element.style.gridAutoFlow is 'initial'
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,41 +4,41 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoFlowDense {
</span><del>- -webkit-grid-auto-flow: dense;
</del><ins>+ grid-auto-flow: dense;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowColumnDense {
</span><del>- -webkit-grid-auto-flow: column dense;
</del><ins>+ grid-auto-flow: column dense;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowRowDense {
</span><del>- -webkit-grid-auto-flow: row dense;
</del><ins>+ grid-auto-flow: row dense;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowDenseColumn {
</span><del>- -webkit-grid-auto-flow: dense column;
</del><ins>+ grid-auto-flow: dense column;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowDenseRow {
</span><del>- -webkit-grid-auto-flow: dense row;
</del><ins>+ grid-auto-flow: dense row;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowInherit {
</span><del>- -webkit-grid-auto-flow: inherit;
</del><ins>+ grid-auto-flow: inherit;
</ins><span class="cx"> }
</span><span class="cx"> /* Bad values. */
</span><span class="cx"> .gridAutoFlowNone {
</span><del>- -webkit-grid-auto-flow: none;
</del><ins>+ grid-auto-flow: none;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowRows {
</span><del>- -webkit-grid-auto-flow: rows;
</del><ins>+ grid-auto-flow: rows;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowColumns {
</span><del>- -webkit-grid-auto-flow: columns;
</del><ins>+ grid-auto-flow: columns;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowColumnFoo {
</span><del>- -webkit-grid-auto-flow: column foo;
</del><ins>+ grid-auto-flow: column foo;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowColumnColumn {
</span><del>- -webkit-grid-auto-flow: column column;
</del><ins>+ grid-auto-flow: column column;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoFlowDenseRowRow {
</span><del>- -webkit-grid-auto-flow: dense row row;
</del><ins>+ grid-auto-flow: dense row row;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -66,9 +66,9 @@
</span><span class="cx"> <div class="grid gridAutoFlowDenseRowRow" id="gridAutoFlowDenseRowRow"></div>
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script>
</span><del>- description('Test that setting and getting -webkit-grid-auto-flow works as expected');
</del><ins>+ description('Test that setting and getting grid-auto-flow works as expected');
</ins><span class="cx">
</span><del>- debug("Test getting -webkit-grid-auto-flow set through CSS");
</del><ins>+ debug("Test getting grid-auto-flow set through CSS");
</ins><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
</span><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
</span><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense");
</span><span class="lines">@@ -80,7 +80,7 @@
</span><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test getting -webkit-grid-auto-flow bad values set through CSS");
</del><ins>+ debug("Test getting grid-auto-flow bad values set through CSS");
</ins><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
</span><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
</span><span class="cx"> checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
</span><span class="lines">@@ -93,7 +93,7 @@
</span><span class="cx"> checkGridAutoFlowSetJSValue("", "", "row");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test getting and setting -webkit-grid-auto-flow through JS");
</del><ins>+ debug("Test getting and setting grid-auto-flow through JS");
</ins><span class="cx"> checkGridAutoFlowSetJSValue("column", "column", "column");
</span><span class="cx"> checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
</span><span class="cx"> checkGridAutoFlowSetJSValue("dense", "row dense", "row dense");
</span><span class="lines">@@ -103,13 +103,13 @@
</span><span class="cx"> checkGridAutoFlowSetJSValue("row", "row", "row");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test getting and setting bad values for -webkit-grid-auto-flow through JS");
</del><ins>+ debug("Test getting and setting bad values for grid-auto-flow through JS");
</ins><span class="cx"> checkGridAutoFlowSetJSValue("noone", "", "row");
</span><span class="cx"> checkGridAutoFlowSetJSValue("column column", "", "row");
</span><span class="cx"> checkGridAutoFlowSetJSValue("dense row row", "", "row");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test setting -webkit-grid-auto-flow to 'initial' through JS");
</del><ins>+ debug("Test setting grid-auto-flow to 'initial' through JS");
</ins><span class="cx"> // Reusing the value so that we can check that it is set back to its initial value.
</span><span class="cx"> checkGridAutoFlowSetJSValue("initial", "initial", "row");
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,33 +4,33 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .smallGrid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bigGrid {
</span><del>- -webkit-grid-template-columns: 50px 100px 150px 200px;
- -webkit-grid-template-rows: 50px 100px 150px 200px;
</del><ins>+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .overflowingRowFirstColumn {
</span><del>- -webkit-grid-row: auto / 10;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: auto / 10;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowOverflowingColumn {
</span><del>- -webkit-grid-row: 2;
- -webkit-grid-column: auto / 8;
</del><ins>+ grid-row: 2;
+ grid-column: auto / 8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeOverflowingRowFirstColumn {
</span><del>- -webkit-grid-row: auto / -10;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: auto / -10;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowNegativeOverflowingColumn {
</span><del>- -webkit-grid-row: 2;
- -webkit-grid-column: auto / -8;
</del><ins>+ grid-row: 2;
+ grid-column: auto / -8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .unconstrainedContainer {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowsparsehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px 150px 200px;
- -webkit-grid-template-rows: 50px 100px 150px 200px;
</del><ins>+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .unconstrainedContainer {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,15 +4,15 @@
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script>
</span><span class="cx"> function testGrid(flow, positionAndSize)
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><del>- gridElement.style.webkitGridAutoFlow = flow;
</del><ins>+ gridElement.style.gridAutoFlow = flow;
</ins><span class="cx"> var gridItem = document.getElementById("autoItem");
</span><span class="cx"> gridItem.setAttribute("data-offset-x", positionAndSize.offsetX);
</span><span class="cx"> gridItem.setAttribute("data-offset-y", positionAndSize.offsetY);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautocolumnsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,40 +1,40 @@
</span><span class="cx"> Check that min-width is honored when sizing auto columns.
</span><del>-PASS window.getComputedStyle(gridAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('-webkit-grid-template-columns') is "30px"
-PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "60px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS window.getComputedStyle(gridAutoAndAutoFixedWidthChildren, '').getPropertyValue('-webkit-grid-template-columns') is "200px 50px"
</del><ins>+PASS window.getComputedStyle(gridAuto, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-columns') is "30px"
+PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridAutoAndAutoFixedWidthChildren, '').getPropertyValue('grid-template-columns') is "200px 50px"
</ins><span class="cx">
</span><span class="cx"> Check that min-width is honored when sizing auto columns and spanning grid items.
</span><del>-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('-webkit-grid-template-columns') is "35px 15px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "20px 40px"
-PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "20px 50px"
-PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "35px 35px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "25px 65px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "40px 50px"
</del><ins>+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-columns') is "35px 15px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "20px 40px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('grid-template-columns') is "20px 50px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('grid-template-columns') is "35px 35px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "25px 65px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "40px 50px"
</ins><span class="cx">
</span><span class="cx"> Check the interactions between width and min-width and auto tracks.
</span><del>-PASS window.getComputedStyle(gridAutoWithFixedWidthChild, '').getPropertyValue('-webkit-grid-template-columns') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndHigherMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "90px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidth, '').getPropertyValue('-webkit-grid-template-columns') is "25px 25px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "30px 30px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "35px 35px"
</del><ins>+PASS window.getComputedStyle(gridAutoWithFixedWidthChild, '').getPropertyValue('grid-template-columns') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "90px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidth, '').getPropertyValue('grid-template-columns') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('grid-template-columns') is "30px 30px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "35px 35px"
</ins><span class="cx">
</span><span class="cx"> Check that borders and paddings are considering when computing min sizes.
</span><del>-PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
-PASS window.getComputedStyle(gridAutoFixedMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "56px"
-PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-columns') is "66px"
-PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridAutoAutoMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "46px"
-PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-columns') is "56px"
-PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "90px"
-PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "96px"
-PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-columns') is "106px"
</del><ins>+PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "56px"
+PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "66px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "46px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "56px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "90px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "96px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "106px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautocolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -21,15 +21,15 @@
</span><span class="cx"> .padding8 { padding: 0px 8px 0px; }
</span><span class="cx">
</span><span class="cx"> /* All these 4 cases are equivalent. We use them interchangeably. */
</span><del>-.gridAuto { -webkit-grid-template-columns: auto; }
-.gridMinMaxAutoAuto { -webkit-grid-template-columns: minmax(auto, auto); }
-.gridMinMaxAutoMaxContent { -webkit-grid-template-columns: minmax(auto, -webkit-max-content); }
-.gridMinMaxMinContentAuto { -webkit-grid-template-columns: minmax(-webkit-min-content, auto); }
</del><ins>+.gridAuto { grid-template-columns: auto; }
+.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, -webkit-max-content); }
+.gridMinMaxMinContentAuto { grid-template-columns: minmax(-webkit-min-content, auto); }
</ins><span class="cx">
</span><span class="cx"> /* All these 3 cases are equivalent. We use them interchangeably. */
</span><del>-.gridAutoAndAuto { -webkit-grid-template-columns: auto auto; }
-.gridAutoAndMinMaxAutoAuto { -webkit-grid-template-columns: auto minmax(auto, auto); }
-.gridMinMaxAutoMaxContentAndAuto { -webkit-grid-template-columns: minmax(auto, -webkit-max-content) auto; }
</del><ins>+.gridAutoAndAuto { grid-template-columns: auto auto; }
+.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, -webkit-max-content) auto; }
</ins><span class="cx">
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -237,7 +237,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> function testGridColumnsValues(id, computedColumnValue)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> debug("Check that min-width is honored when sizing auto columns.");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautorowsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,41 +1,41 @@
</span><span class="cx">
</span><span class="cx"> Check that min-height is honored when sizing auto rows.
</span><del>-PASS window.getComputedStyle(gridAuto, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
-PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
-PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "30px"
-PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "50px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridAutoAndAutoFixedHeightChildren, '').getPropertyValue('-webkit-grid-template-rows') is "200px 50px"
</del><ins>+PASS window.getComputedStyle(gridAuto, '').getPropertyValue('grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight, '').getPropertyValue('grid-template-rows') is "50px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoAndAutoFixedHeightChildren, '').getPropertyValue('grid-template-rows') is "200px 50px"
</ins><span class="cx">
</span><span class="cx"> Check that min-height is honored when sizing auto rows and spanning grid items.
</span><del>-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('-webkit-grid-template-rows') is "10px 40px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "40px 20px"
-PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "40px 30px"
-PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "35px 35px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "25px 65px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "50px 40px"
</del><ins>+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-rows') is "10px 40px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "40px 20px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('grid-template-rows') is "40px 30px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('grid-template-rows') is "35px 35px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "25px 65px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "50px 40px"
</ins><span class="cx">
</span><span class="cx"> Check the interactions between height and min-height and auto tracks.
</span><del>-PASS window.getComputedStyle(gridAutoWithFixedHeightChild, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndHigherMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "90px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeight, '').getPropertyValue('-webkit-grid-template-rows') is "25px 25px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "30px 30px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "35px 35px"
</del><ins>+PASS window.getComputedStyle(gridAutoWithFixedHeightChild, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "90px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeight, '').getPropertyValue('grid-template-rows') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('grid-template-rows') is "30px 30px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "35px 35px"
</ins><span class="cx">
</span><span class="cx"> Check that borders and paddings are considering when computing min sizes.
</span><del>-PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "50px"
-PASS window.getComputedStyle(gridAutoFixedMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "56px"
-PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
-PASS window.getComputedStyle(gridAutoAutoMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "46px"
-PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-rows') is "56px"
-PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "30px"
-PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "36px"
-PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-rows') is "46px"
</del><ins>+PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "50px"
+PASS window.getComputedStyle(gridAutoFixedMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "56px"
+PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "66px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "46px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "56px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "36px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "46px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautomaticminimumforautorowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -22,15 +22,15 @@
</span><span class="cx"> .padding8 { padding: 8px 0px; }
</span><span class="cx">
</span><span class="cx"> /* All these 4 cases are equivalent. We use them interchangeably. */
</span><del>-.gridAuto { -webkit-grid-template-rows: auto; }
-.gridMinMaxAutoAuto { -webkit-grid-template-rows: minmax(auto, auto); }
-.gridMinMaxAutoMaxContent { -webkit-grid-template-rows: minmax(auto, -webkit-max-content); }
-.gridMinMaxMinContentAuto { -webkit-grid-template-rows: minmax(-webkit-min-content, auto); }
</del><ins>+.gridAuto { grid-template-rows: auto; }
+.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, -webkit-max-content); }
+.gridMinMaxMinContentAuto { grid-template-rows: minmax(-webkit-min-content, auto); }
</ins><span class="cx">
</span><span class="cx"> /* All these 3 cases are equivalent. We use them interchangeably. */
</span><del>-.gridAutoAndAuto { -webkit-grid-template-rows: auto auto; }
-.gridAutoAndMinMaxAutoAuto { -webkit-grid-template-rows: auto minmax(auto, auto); }
-.gridMinMaxAutoMaxContentAndAuto { -webkit-grid-template-rows: minmax(auto, -webkit-max-content) auto; }
</del><ins>+.gridAutoAndAuto { grid-template-rows: auto auto; }
+.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, -webkit-max-content) auto; }
</ins><span class="cx">
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -220,7 +220,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> function testGridRowsValues(id, computedRowValue)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('-webkit-grid-template-rows')", computedRowValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-rows')", computedRowValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> debug("");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,185 +3,185 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS
-PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "424px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "162px"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "7px"
-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "7px"
-PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-columns') is "100px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-rows') is "150px"
-PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-template-columns') is "64px"
-PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
-PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "17px"
-PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
-PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "17px"
-PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
-PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
-PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('-webkit-grid-template-rows') is "600px"
-PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('-webkit-grid-template-columns') is "150px"
-PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('-webkit-grid-template-rows') is "75px"
-PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('-webkit-grid-template-columns') is "550px"
-PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('-webkit-grid-template-rows') is "465px"
-PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
-PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "415px"
-PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
-PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
</del><ins>+Test getting grid-template-columns and grid-template-rows set through CSS
+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "7px"
+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "11px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-columns') is "64px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px"
+PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px"
+PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
+PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px"
+PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
+PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-columns') is "800px"
+PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-rows') is "600px"
+PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-template-columns') is "150px"
+PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-template-rows') is "75px"
+PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-template-columns') is "550px"
+PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-template-rows') is "465px"
+PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px"
+PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "415px"
+PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "11px"
</ins><span class="cx">
</span><del>-Test getting wrong values for -webkit-grid-template-columns and -webkit-grid-template-rows through CSS (they should resolve to the default: 'none')
-PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><del>-Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
-PASS element.style.webkitGridTemplateColumns is "18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS element.style.webkitGridTemplateRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "440px"
-PASS element.style.webkitGridTemplateColumns is "55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px"
-PASS element.style.webkitGridTemplateRows is "40%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS element.style.webkitGridTemplateColumns is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS element.style.webkitGridTemplateRows is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS element.style.webkitGridTemplateColumns is "10vw"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "150px"
-PASS element.style.webkitGridTemplateRows is "25vh"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS element.style.webkitGridTemplateColumns is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS element.style.webkitGridTemplateRows is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS element.style.webkitGridTemplateColumns is "-webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS element.style.webkitGridTemplateRows is "-webkit-max-content"
</del><ins>+Test getting and setting grid-template-columns and grid-template-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
+PASS element.style.gridTemplateColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
+PASS element.style.gridTemplateRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px"
+PASS element.style.gridTemplateColumns is "55%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px"
+PASS element.style.gridTemplateRows is "40%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "80px"
+PASS element.style.gridTemplateColumns is "10vw"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "150px"
+PASS element.style.gridTemplateRows is "25vh"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "-webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "-webkit-max-content"
</ins><span class="cx">
</span><del>-Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows to minmax() values through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "440px"
-PASS element.style.webkitGridTemplateColumns is "minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px"
-PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "220px"
-PASS element.style.webkitGridTemplateColumns is "minmax(22em, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "48px"
-PASS element.style.webkitGridTemplateColumns is "minmax(-webkit-min-content, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "220px"
-PASS element.style.webkitGridTemplateColumns is "minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS element.style.webkitGridTemplateColumns is "minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS element.style.webkitGridTemplateColumns is "minmax(auto, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
-PASS element.style.webkitGridTemplateColumns is "3600fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "600px"
-PASS element.style.webkitGridTemplateRows is "154fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
-PASS element.style.webkitGridTemplateColumns is "3.1459fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "600px"
-PASS element.style.webkitGridTemplateRows is "2.718fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
-PASS element.style.webkitGridTemplateColumns is "3fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "600px"
-PASS element.style.webkitGridTemplateRows is "4fr"
</del><ins>+Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px"
+PASS element.style.gridTemplateColumns is "minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px"
+PASS element.style.gridTemplateRows is "minmax(30px, 40%)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "220px"
+PASS element.style.gridTemplateColumns is "minmax(22em, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px"
+PASS element.style.gridTemplateRows is "minmax(10vw, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "48px"
+PASS element.style.gridTemplateColumns is "minmax(-webkit-min-content, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px"
+PASS element.style.gridTemplateRows is "minmax(10vw, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "220px"
+PASS element.style.gridTemplateColumns is "minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "minmax(auto, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px"
+PASS element.style.gridTemplateRows is "minmax(10vw, auto)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px"
+PASS element.style.gridTemplateColumns is "3600fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px"
+PASS element.style.gridTemplateRows is "154fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px"
+PASS element.style.gridTemplateColumns is "3.1459fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px"
+PASS element.style.gridTemplateRows is "2.718fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px"
+PASS element.style.gridTemplateColumns is "3fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px"
+PASS element.style.gridTemplateRows is "4fr"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-columns and grid-template-rows to calc() values through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "150px"
-PASS element.style.webkitGridTemplateColumns is "calc(150px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "75px"
-PASS element.style.webkitGridTemplateRows is "calc(75px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "370px"
-PASS element.style.webkitGridTemplateColumns is "calc(50% - 30px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "135px"
-PASS element.style.webkitGridTemplateRows is "calc(75px + 10%)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "200px"
-PASS element.style.webkitGridTemplateColumns is "minmax(25%, calc(30px))"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "450px"
-PASS element.style.webkitGridTemplateRows is "minmax(calc(75%), 40px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "110px"
-PASS element.style.webkitGridTemplateColumns is "minmax(10%, calc(30px + 10%))"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "200px"
-PASS element.style.webkitGridTemplateRows is "minmax(calc(25% - 50px), 200px)"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "150px"
+PASS element.style.gridTemplateColumns is "calc(150px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "75px"
+PASS element.style.gridTemplateRows is "calc(75px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "370px"
+PASS element.style.gridTemplateColumns is "calc(50% - 30px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "135px"
+PASS element.style.gridTemplateRows is "calc(75px + 10%)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "200px"
+PASS element.style.gridTemplateColumns is "minmax(25%, calc(30px))"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "450px"
+PASS element.style.gridTemplateRows is "minmax(calc(75%), 40px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "110px"
+PASS element.style.gridTemplateColumns is "minmax(10%, calc(30px + 10%))"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px"
+PASS element.style.gridTemplateRows is "minmax(calc(25% - 50px), 200px)"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to bad values through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
-PASS element.style.webkitGridTemplateColumns is "18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS element.style.webkitGridTemplateRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "none"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
+PASS element.style.gridTemplateColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
+PASS element.style.gridTemplateRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px [last]'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 20px'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '50px [last]'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 20px'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'initial' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '450px [last]'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 150px'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '450px [last]'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 150px'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultipleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,124 +4,124 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting |grid-template-columns| and |grid-template-rows| set through CSS
</span><del>-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "7px 11px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "17px 2px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "424px 792px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "162px 312px"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "7px 0px"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "11px 0px"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "0px 17px"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px 3px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-columns') is "100px 120px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-rows') is "150px 170px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-template-columns') is "15px 0px 100px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-template-rows') is "120px 18px 0px"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-template-columns') is "400px 120px"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-template-rows') is "210px 168px"
-PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "0px 0px"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "0px 0px"
-PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "7px 17px"
-PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px 3px"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "240px 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is "120px 210px"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "240px 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "120px 210px"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-template-columns') is "320px 480px"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-template-rows') is "225px 375px"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "45px 755px"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "586px 14px"
-PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('-webkit-grid-template-columns') is "200px 100px"
-PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('-webkit-grid-template-rows') is "150px 75px"
-PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "400px 80px"
-PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is "88px 150px"
-PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "190px 80px"
-PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px 53px"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "400px 120px"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px 175px"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "0px 30px"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "132px 60px"
</del><ins>+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px 792px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px 312px"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "7px 0px"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "11px 0px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px 170px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-columns') is "15px 0px 100px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-rows') is "120px 18px 0px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-columns') is "400px 120px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-rows') is "210px 168px"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "0px 0px"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "0px 0px"
+PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px 17px"
+PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px 3px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "240px 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px 210px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "240px 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-rows') is "120px 210px"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-columns') is "320px 480px"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-rows') is "225px 375px"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-columns') is "45px 755px"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-rows') is "586px 14px"
+PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-columns') is "200px 100px"
+PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-rows') is "150px 75px"
+PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "400px 80px"
+PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 150px"
+PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "190px 80px"
+PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "150px 53px"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "400px 120px"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px 175px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "0px 30px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "132px 60px"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-rows and grid-template-columns through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px 22px"
-PASS element.style.webkitGridTemplateColumns is "18px 22px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px 70px"
-PASS element.style.webkitGridTemplateRows is "66px 70px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "440px 640px"
-PASS element.style.webkitGridTemplateColumns is "55% 80%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px 378px"
-PASS element.style.webkitGridTemplateRows is "40% 63%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px 0px"
-PASS element.style.webkitGridTemplateColumns is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px 0px"
-PASS element.style.webkitGridTemplateRows is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px 160px 22px"
-PASS element.style.webkitGridTemplateColumns is "auto 16em 22px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "336px 100px 0px"
-PASS element.style.webkitGridTemplateRows is "56% 10em auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "160px 20px"
-PASS element.style.webkitGridTemplateColumns is "16em minmax(16px, 20px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "90px 0px"
-PASS element.style.webkitGridTemplateRows is "minmax(10%, 15%) auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "160px 640px"
-PASS element.style.webkitGridTemplateColumns is "16em 2fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "600px 0px"
-PASS element.style.webkitGridTemplateRows is "14fr auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "25px 20px"
-PASS element.style.webkitGridTemplateColumns is "calc(25px) calc(2em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px 60px"
-PASS element.style.webkitGridTemplateRows is "auto calc(10%)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "345px 92px"
-PASS element.style.webkitGridTemplateColumns is "calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "100px 0px"
-PASS element.style.webkitGridTemplateRows is "minmax(calc(75% - 350px), -webkit-max-content) auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px 16px"
-PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "90px 80px"
-PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px 22px"
+PASS element.style.gridTemplateColumns is "18px 22px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px 70px"
+PASS element.style.gridTemplateRows is "66px 70px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px 640px"
+PASS element.style.gridTemplateColumns is "55% 80%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px 378px"
+PASS element.style.gridTemplateRows is "40% 63%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px"
+PASS element.style.gridTemplateColumns is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 0px"
+PASS element.style.gridTemplateRows is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 160px 22px"
+PASS element.style.gridTemplateColumns is "auto 16em 22px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "336px 100px 0px"
+PASS element.style.gridTemplateRows is "56% 10em auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 20px"
+PASS element.style.gridTemplateColumns is "16em minmax(16px, 20px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 0px"
+PASS element.style.gridTemplateRows is "minmax(10%, 15%) auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 640px"
+PASS element.style.gridTemplateColumns is "16em 2fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px 0px"
+PASS element.style.gridTemplateRows is "14fr auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "25px 20px"
+PASS element.style.gridTemplateColumns is "calc(25px) calc(2em)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 60px"
+PASS element.style.gridTemplateRows is "auto calc(10%)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "345px 92px"
+PASS element.style.gridTemplateColumns is "calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px 0px"
+PASS element.style.gridTemplateRows is "minmax(calc(75% - 350px), -webkit-max-content) auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 16px"
+PASS element.style.gridTemplateColumns is "auto minmax(16px, auto)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 80px"
+PASS element.style.gridTemplateRows is "minmax(auto, 15%) 10vw"
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values set from CSS
</span><del>-PASS window.getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting and getting wrong values from JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 750px [last]"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px [middle] 45px"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 750px [last]"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'initial' through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "1200px [middle] 55px"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "200px [line] 400px [line]"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "1200px [middle] 55px"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px [line] 400px [line]"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,99 +11,99 @@
</span><span class="cx"> height: 600px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> width: 7px;
</span><span class="cx"> height: 11px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem2 {
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 2;
+ grid-row: 2;
</ins><span class="cx"> width: 17px;
</span><span class="cx"> height: 3px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: 7px 11px;
- -webkit-grid-template-rows: 17px 2px;
</del><ins>+ grid-template-columns: 7px 11px;
+ grid-template-rows: 17px 2px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53% 99%;
- -webkit-grid-template-rows: 27% 52%;
</del><ins>+ grid-template-columns: 53% 99%;
+ grid-template-rows: 27% 52%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: auto auto;
- -webkit-grid-template-rows: auto auto;
</del><ins>+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithEM {
</span><del>- -webkit-grid-template-columns: 10em 12em;
- -webkit-grid-template-rows: 15em 17em;
</del><ins>+ grid-template-columns: 10em 12em;
+ grid-template-rows: 15em 17em;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithNoneAndAuto {
</span><del>- -webkit-grid-template-columns: none auto;
- -webkit-grid-template-rows: none auto;
</del><ins>+ grid-template-columns: none auto;
+ grid-template-rows: none auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridNoneWithAndFixed {
</span><del>- -webkit-grid-template-columns: none 15px;
- -webkit-grid-template-rows: none 22px;
</del><ins>+ grid-template-columns: none 15px;
+ grid-template-rows: none 22px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithThreeItems {
</span><del>- -webkit-grid-template-columns: 15px auto 10em;
- -webkit-grid-template-rows: 12em 18px auto;
</del><ins>+ grid-template-columns: 15px auto 10em;
+ grid-template-rows: 12em 18px auto;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercentAndViewportPercent {
</span><del>- -webkit-grid-template-columns: 50% 15vw;
- -webkit-grid-template-rows: 35% 28vh;
</del><ins>+ grid-template-columns: 50% 15vw;
+ grid-template-rows: 35% 28vh;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitContentAndFitAvailable {
</span><del>- -webkit-grid-template-columns: -webkit-content-available;
- -webkit-grid-template-rows: -webkit-fitcontent -webkit-fit-available;
</del><ins>+ grid-template-columns: -webkit-content-available;
+ grid-template-rows: -webkit-fitcontent -webkit-fit-available;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content -webkit-max-content;
- -webkit-grid-template-rows: -webkit-max-content -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-min-content -webkit-max-content;
+ grid-template-rows: -webkit-max-content -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxAndFixed {
</span><del>- -webkit-grid-template-columns: minmax(45px, 30%) 15px;
- -webkit-grid-template-rows: 12em minmax(35%, 10px);
</del><ins>+ grid-template-columns: minmax(45px, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, 10px);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxAndMinMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 30%) 15px;
- -webkit-grid-template-rows: 12em minmax(35%, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, -webkit-max-content);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithFractionFraction {
</span><del>- -webkit-grid-template-columns: 2fr 3fr;
- -webkit-grid-template-rows: 3fr 5fr;
</del><ins>+ grid-template-columns: 2fr 3fr;
+ grid-template-rows: 3fr 5fr;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFractionMinMax {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 45px) 2fr;
- -webkit-grid-template-rows: 3fr minmax(14px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 45px) 2fr;
+ grid-template-rows: 3fr minmax(14px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcCalc {
</span><del>- -webkit-grid-template-columns: calc(200px) calc(10em);
- -webkit-grid-template-rows: calc(15em) calc(75px);
</del><ins>+ grid-template-columns: calc(200px) calc(10em);
+ grid-template-rows: calc(15em) calc(75px);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithCalcAndFixed {
</span><del>- -webkit-grid-template-columns: calc(50%) 8em;
- -webkit-grid-template-rows: 88px calc(25%);
</del><ins>+ grid-template-columns: calc(50%) 8em;
+ grid-template-rows: 88px calc(25%);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithCalcAndMinMax {
</span><del>- -webkit-grid-template-columns: calc(30px + 20%) minmax(-webkit-min-content, 80px);
- -webkit-grid-template-rows: minmax(25%, -webkit-max-content) calc(10% - 7px);
</del><ins>+ grid-template-columns: calc(30px + 20%) minmax(-webkit-min-content, 80px);
+ grid-template-rows: minmax(25%, -webkit-max-content) calc(10% - 7px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
- -webkit-grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
</del><ins>+ grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
+ grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithAutoInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(auto, -webkit-min-content) 30px;
- -webkit-grid-template-rows: calc(100px + 2em) minmax(10%, auto);
</del><ins>+ grid-template-columns: minmax(auto, -webkit-min-content) 30px;
+ grid-template-rows: calc(100px + 2em) minmax(10%, auto);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,85 +11,85 @@
</span><span class="cx"> height: 600px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> width: 7px;
</span><span class="cx"> height: 11px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem2 {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> width: 17px;
</span><span class="cx"> height: 3px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithNone {
</span><del>- -webkit-grid-template-columns: none;
- -webkit-grid-template-rows: none;
</del><ins>+ grid-template-columns: none;
+ grid-template-rows: none;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: 10px;
- -webkit-grid-template-rows: 15px;
</del><ins>+ grid-template-columns: 10px;
+ grid-template-rows: 15px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53%;
- -webkit-grid-template-rows: 27%;
</del><ins>+ grid-template-columns: 53%;
+ grid-template-rows: 27%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: auto;
- -webkit-grid-template-rows: auto;
</del><ins>+ grid-template-columns: auto;
+ grid-template-rows: auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithEM {
</span><del>- -webkit-grid-template-columns: 10em;
- -webkit-grid-template-rows: 15em;
</del><ins>+ grid-template-columns: 10em;
+ grid-template-rows: 15em;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithViewPortPercentage {
</span><del>- -webkit-grid-template-columns: 8vw;
- -webkit-grid-template-rows: 10vh;
</del><ins>+ grid-template-columns: 8vw;
+ grid-template-rows: 10vh;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitContent {
</span><del>- -webkit-grid-template-columns: -webkit-fit-content;
- -webkit-grid-template-rows: -webkit-fit-content;
</del><ins>+ grid-template-columns: -webkit-fit-content;
+ grid-template-rows: -webkit-fit-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitAvailable {
</span><del>- -webkit-grid-template-columns: -webkit-fit-available;
- -webkit-grid-template-rows: -webkit-fit-available;
</del><ins>+ grid-template-columns: -webkit-fit-available;
+ grid-template-rows: -webkit-fit-available;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, 15px);
- -webkit-grid-template-rows: minmax(20px, 50%);
</del><ins>+ grid-template-columns: minmax(10%, 15px);
+ grid-template-rows: minmax(20px, 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content;
- -webkit-grid-template-rows: -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-min-content;
+ grid-template-rows: -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-max-content;
- -webkit-grid-template-rows: -webkit-max-content;
</del><ins>+ grid-template-columns: -webkit-max-content;
+ grid-template-rows: -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFraction {
</span><del>- -webkit-grid-template-columns: 1fr;
- -webkit-grid-template-rows: 2fr;
</del><ins>+ grid-template-columns: 1fr;
+ grid-template-rows: 2fr;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalc {
</span><del>- -webkit-grid-template-columns: calc(150px);
- -webkit-grid-template-rows: calc(75px);
</del><ins>+ grid-template-columns: calc(150px);
+ grid-template-rows: calc(75px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcComplex {
</span><del>- -webkit-grid-template-columns: calc(50% + 150px);
- -webkit-grid-template-rows: calc(65% + 75px);
</del><ins>+ grid-template-columns: calc(50% + 150px);
+ grid-template-rows: calc(65% + 75px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, calc(15px));
- -webkit-grid-template-rows: minmax(calc(20px), 50%);
</del><ins>+ grid-template-columns: minmax(10%, calc(15px));
+ grid-template-rows: minmax(calc(20px), 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcComplexInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, calc(50% + 15px));
- -webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
</del><ins>+ grid-template-columns: minmax(10%, calc(50% + 15px));
+ grid-template-rows: minmax(calc(20px + 10%), 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAutoInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(auto, 20px);
- -webkit-grid-template-rows: minmax(max-content, auto);
</del><ins>+ grid-template-columns: minmax(auto, 20px);
+ grid-template-rows: minmax(max-content, auto);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerchangenamedgridlinesrecomputechildhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,30 +6,30 @@
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style type="text/css">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-flow: row dense;
</del><ins>+ grid-auto-flow: row dense;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #firstGridItem {
</span><del>- -webkit-grid-row: auto;
- -webkit-grid-column: column;
</del><ins>+ grid-row: auto;
+ grid-column: column;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #secondGridItem {
</span><del>- -webkit-grid-row: row;
- -webkit-grid-column: auto;
</del><ins>+ grid-row: row;
+ grid-column: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #thirdGridItem {
</span><del>- -webkit-grid-row: auto;
- -webkit-grid-column: auto;
</del><ins>+ grid-row: auto;
+ grid-column: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script>
</span><span class="cx"> function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><del>- gridElement.style.webkitGridTemplateRows = gridTemplateRows;
- gridElement.style.webkitGridTemplateColumns = gridTemplateColumns;
</del><ins>+ gridElement.style.gridTemplateRows = gridTemplateRows;
+ gridElement.style.gridTemplateColumns = gridTemplateColumns;
</ins><span class="cx">
</span><span class="cx"> var firstGridItem = document.getElementById("firstGridItem");
</span><span class="cx"> firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerignorefirstletterhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -22,22 +22,22 @@
</span><span class="cx">
</span><span class="cx"> .grid-before::before {
</span><span class="cx"> content: "Anonymous item.";
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid-after::before {
</span><span class="cx"> content: "Anonymous item.";
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .inline-grid-before::before {
</span><span class="cx"> content: "Anonymous item.";
</span><del>- display: -webkit-inline-grid;
</del><ins>+ display: inline-grid;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .inline-grid-after::before {
</span><span class="cx"> content: "Anonymous item.";
</span><del>- display: -webkit-inline-grid;
</del><ins>+ display: inline-grid;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .before-after-first-letter::first-letter {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanninghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,33 +10,33 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
- -webkit-grid-template-areas: "a a b"
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
+ grid-template-areas: "a a b"
</ins><span class="cx"> "c d b";
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> }
</span><span class="cx"> .a {
</span><del>- -webkit-grid-area: a;
</del><ins>+ grid-area: a;
</ins><span class="cx"> background-color: blue;
</span><span class="cx"> }
</span><span class="cx"> .b {
</span><del>- -webkit-grid-area: b;
</del><ins>+ grid-area: b;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx"> .c {
</span><del>- -webkit-grid-area: c;
</del><ins>+ grid-area: c;
</ins><span class="cx"> background-color: purple;
</span><span class="cx"> }
</span><span class="cx"> .d {
</span><del>- -webkit-grid-area: d;
</del><ins>+ grid-area: d;
</ins><span class="cx"> background-color: orange;
</span><span class="cx"> }
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: minmax(20px, auto);
- -webkit-grid-auto-rows: minmax(40px, auto);
</del><ins>+ grid-auto-columns: minmax(20px, auto);
+ grid-auto-rows: minmax(40px, auto);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 200px 100px;
- -webkit-grid-template-rows: 100px 50px;
</del><ins>+ grid-template-columns: 200px 100px;
+ grid-template-rows: 100px 50px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 350px;
</span><span class="cx"> position: relative;
</span><span class="lines">@@ -13,7 +13,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridGaps {
</span><del>- -webkit-grid-gap: 10px 20px;
</del><ins>+ grid-gap: 10px 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 50px;
- -webkit-grid-template-rows: 100px 100px;
</del><ins>+ grid-template-columns: 50px 50px;
+ grid-template-rows: 100px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .overflowWidth {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentstretchonlyvalidforautosizedtrackshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -33,15 +33,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* track sizes allowed to be stetched */
</span><del>-.autoTracks { -webkit-grid: auto auto / auto auto; }
-.autoMaxTracks { -webkit-grid: minmax(20px, auto) minmax(20px, auto) / minmax(40px, auto) minmax(40px, auto); }
</del><ins>+.autoTracks { grid: auto auto / auto auto; }
+.autoMaxTracks { grid: minmax(20px, auto) minmax(20px, auto) / minmax(40px, auto) minmax(40px, auto); }
</ins><span class="cx">
</span><span class="cx"> /* content-sized tracks disallowed to be stetched */
</span><del>-.minContentTracks { -webkit-grid: -webkit-min-content -webkit-min-content / -webkit-min-content -webkit-min-content; }
-.maxContentTracks { -webkit-grid: -webkit-max-content -webkit-max-content / -webkit-max-content -webkit-max-content; }
-.minMaxWithMaxContentTracks { -webkit-grid: minmax(20px, -webkit-max-content) minmax(20px, -webkit-max-content) / minmax(20px, -webkit-max-content) minmax(20px, -webkit-max-content); }
-.minMaxWithMinContentTracks { -webkit-grid: minmax(20px, -webkit-min-content) minmax(20px, -webkit-min-content) / minmax(20px, -webkit-min-content) minmax(20px, -webkit-min-content); }
-.minMaxWithMinAutoTracks { -webkit-grid: minmax(auto, -webkit-max-content) minmax(auto, -webkit-max-content) / minmax(auto, -webkit-max-content) minmax(auto, -webkit-max-content); }
</del><ins>+.minContentTracks { grid: -webkit-min-content -webkit-min-content / -webkit-min-content -webkit-min-content; }
+.maxContentTracks { grid: -webkit-max-content -webkit-max-content / -webkit-max-content -webkit-max-content; }
+.minMaxWithMaxContentTracks { grid: minmax(20px, -webkit-max-content) minmax(20px, -webkit-max-content) / minmax(20px, -webkit-max-content) minmax(20px, -webkit-max-content); }
+.minMaxWithMinContentTracks { grid: minmax(20px, -webkit-min-content) minmax(20px, -webkit-min-content) / minmax(20px, -webkit-min-content) minmax(20px, -webkit-min-content); }
+.minMaxWithMinAutoTracks { grid: minmax(auto, -webkit-max-content) minmax(auto, -webkit-max-content) / minmax(auto, -webkit-max-content) minmax(auto, -webkit-max-content); }
</ins><span class="cx">
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentstretchwithdifferentsizedtrackshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-with-different-sized-tracks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -16,12 +16,12 @@
</span><span class="cx"> align-content: stretch;
</span><span class="cx"> }
</span><span class="cx"> .fixedAndAutoTracks {
</span><del>- -webkit-grid-template-columns: 80px auto 100px;
- -webkit-grid-template-rows: auto 100px auto;
</del><ins>+ grid-template-columns: 80px auto 100px;
+ grid-template-rows: auto 100px auto;
</ins><span class="cx"> }
</span><span class="cx"> .flexibleAndAutoTracks {
</span><del>- -webkit-grid-template-columns: .5fr auto .5fr;
- -webkit-grid-template-rows: auto 1fr auto;
</del><ins>+ grid-template-columns: .5fr auto .5fr;
+ grid-template-rows: auto 1fr auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,33 +10,33 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
- -webkit-grid-template-areas: "a a b"
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
+ grid-template-areas: "a a b"
</ins><span class="cx"> "c d b";
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx"> .a {
</span><del>- -webkit-grid-area: a;
</del><ins>+ grid-area: a;
</ins><span class="cx"> background-color: blue;
</span><span class="cx"> }
</span><span class="cx"> .b {
</span><del>- -webkit-grid-area: b;
</del><ins>+ grid-area: b;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx"> .c {
</span><del>- -webkit-grid-area: c;
</del><ins>+ grid-area: c;
</ins><span class="cx"> background-color: purple;
</span><span class="cx"> }
</span><span class="cx"> .d {
</span><del>- -webkit-grid-area: d;
</del><ins>+ grid-area: d;
</ins><span class="cx"> background-color: orange;
</span><span class="cx"> }
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-columns: auto;
+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,33 +10,33 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
- -webkit-grid-template-areas: "a a b"
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
+ grid-template-areas: "a a b"
</ins><span class="cx"> "c d b";
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx"> .a {
</span><del>- -webkit-grid-area: a;
</del><ins>+ grid-area: a;
</ins><span class="cx"> background-color: blue;
</span><span class="cx"> }
</span><span class="cx"> .b {
</span><del>- -webkit-grid-area: b;
</del><ins>+ grid-area: b;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx"> .c {
</span><del>- -webkit-grid-area: c;
</del><ins>+ grid-area: c;
</ins><span class="cx"> background-color: purple;
</span><span class="cx"> }
</span><span class="cx"> .d {
</span><del>- -webkit-grid-area: d;
</del><ins>+ grid-area: d;
</ins><span class="cx"> background-color: orange;
</span><span class="cx"> }
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-columns: auto;
+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentwithspanhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,33 +10,33 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
- -webkit-grid-template-areas: "a a b"
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
+ grid-template-areas: "a a b"
</ins><span class="cx"> "c d b";
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> }
</span><span class="cx"> .a {
</span><del>- -webkit-grid-area: a;
</del><ins>+ grid-area: a;
</ins><span class="cx"> background-color: blue;
</span><span class="cx"> }
</span><span class="cx"> .b {
</span><del>- -webkit-grid-area: b;
</del><ins>+ grid-area: b;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx"> .c {
</span><del>- -webkit-grid-area: c;
</del><ins>+ grid-area: c;
</ins><span class="cx"> background-color: purple;
</span><span class="cx"> }
</span><span class="cx"> .d {
</span><del>- -webkit-grid-area: d;
</del><ins>+ grid-area: d;
</ins><span class="cx"> background-color: orange;
</span><span class="cx"> }
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
- -webkit-grid-auto-rows: auto;
</del><ins>+ grid-auto-columns: auto;
+ grid-auto-rows: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentsizedcolumnsresolutionexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,49 +1,49 @@
</span><del>-PASS window.getComputedStyle(gridMinContentFixedAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "15px 75px"
-PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "45px 45px"
-PASS window.getComputedStyle(gridMinContentAndMinContentFixed, '').getPropertyValue('-webkit-grid-template-columns') is "20px 30px"
-PASS window.getComputedStyle(gridMaxContentAndMinContent, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px"
-PASS window.getComputedStyle(gridFixedMinContentAndMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "10px 80px"
-PASS window.getComputedStyle(gridFixedMaxContentAndMinContent, '').getPropertyValue('-webkit-grid-template-columns') is "60px 30px"
-PASS window.getComputedStyle(gridMinContentAndMaxContentFixed, '').getPropertyValue('-webkit-grid-template-columns') is "20px 70px"
-PASS window.getComputedStyle(gridMaxContentFixedAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "65px 25px"
-PASS window.getComputedStyle(gridAutoMinContent, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px"
-PASS window.getComputedStyle(gridAutoMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "20px 70px"
-PASS window.getComputedStyle(gridMaxContentAndMinContentFixed, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px"
-PASS window.getComputedStyle(gridMaxContentAndMaxContentFixed, '').getPropertyValue('-webkit-grid-template-columns') is "55px 35px"
</del><ins>+PASS window.getComputedStyle(gridMinContentFixedAndAuto, '').getPropertyValue('grid-template-columns') is "15px 75px"
+PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('grid-template-columns') is "45px 45px"
+PASS window.getComputedStyle(gridMinContentAndMinContentFixed, '').getPropertyValue('grid-template-columns') is "20px 30px"
+PASS window.getComputedStyle(gridMaxContentAndMinContent, '').getPropertyValue('grid-template-columns') is "70px 20px"
+PASS window.getComputedStyle(gridFixedMinContentAndMaxContent, '').getPropertyValue('grid-template-columns') is "10px 80px"
+PASS window.getComputedStyle(gridFixedMaxContentAndMinContent, '').getPropertyValue('grid-template-columns') is "60px 30px"
+PASS window.getComputedStyle(gridMinContentAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "20px 70px"
+PASS window.getComputedStyle(gridMaxContentFixedAndAuto, '').getPropertyValue('grid-template-columns') is "65px 25px"
+PASS window.getComputedStyle(gridAutoMinContent, '').getPropertyValue('grid-template-columns') is "70px 20px"
+PASS window.getComputedStyle(gridAutoMaxContent, '').getPropertyValue('grid-template-columns') is "20px 70px"
+PASS window.getComputedStyle(gridMaxContentAndMinContentFixed, '').getPropertyValue('grid-template-columns') is "70px 20px"
+PASS window.getComputedStyle(gridMaxContentAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "55px 35px"
</ins><span class="cx">
</span><span class="cx"> Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
</span><del>-PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 40px"
-PASS window.getComputedStyle(gridAutoAndAutoUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "10px 30px"
-PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 40px"
-PASS window.getComputedStyle(gridMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 70px"
-PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "10px 70px"
-PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "10px 40px"
-PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 90px"
-PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "10px 40px"
-PASS window.getComputedStyle(gridAutoMinContentUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 60px"
-PASS window.getComputedStyle(gridAutoMaxContentUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "0px 90px"
-PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "50px 40px"
-PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('-webkit-grid-template-columns') is "40px 70px"
</del><ins>+PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 40px"
+PASS window.getComputedStyle(gridAutoAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 30px"
+PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 40px"
+PASS window.getComputedStyle(gridMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 70px"
+PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 70px"
+PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 40px"
+PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 90px"
+PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "10px 40px"
+PASS window.getComputedStyle(gridAutoMinContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 60px"
+PASS window.getComputedStyle(gridAutoMaxContentUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "0px 90px"
+PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "50px 40px"
+PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsortedConstrained, '').getPropertyValue('grid-template-columns') is "40px 70px"
</ins><span class="cx">
</span><span class="cx"> Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
</span><del>-PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "15px 90px"
-PASS window.getComputedStyle(gridAutoAndAutoUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "60px 30px"
-PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "0px 40px"
-PASS window.getComputedStyle(gridMaxContentAndMinContentUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "0px 70px"
-PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "10px 70px"
-PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "50px 40px"
-PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "0px 90px"
-PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "15px 70px"
-PASS window.getComputedStyle(gridAutoMinContentUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "50px 60px"
-PASS window.getComputedStyle(gridAutoMaxContentUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "0px 90px"
-PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "50px 40px"
-PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsorted, '').getPropertyValue('-webkit-grid-template-columns') is "40px 70px"
-PASS window.getComputedStyle(gridMinContentFixedAndAutoAboveLimits, '').getPropertyValue('-webkit-grid-template-columns') is "15px 95px"
-PASS window.getComputedStyle(gridMaxContentFixedAndAutoAboveLimits, '').getPropertyValue('-webkit-grid-template-columns') is "15px 135px"
-PASS window.getComputedStyle(gridMinContentFixedAndFixedFixedAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "20px 20px 60px"
-PASS window.getComputedStyle(gridAutoAndFixedFixedAndMaxContentFixed, '').getPropertyValue('-webkit-grid-template-columns') is "110px 20px 20px"
-PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedAndMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "70px 20px 50px"
-PASS window.getComputedStyle(gridAutoAndMinContentFixedAndMinContent, '').getPropertyValue('-webkit-grid-template-columns') is "55px 30px 65px"
</del><ins>+PASS window.getComputedStyle(gridMinContentFixedAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "15px 90px"
+PASS window.getComputedStyle(gridAutoAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "60px 30px"
+PASS window.getComputedStyle(gridMinContentAndMinContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "0px 40px"
+PASS window.getComputedStyle(gridMaxContentAndMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "0px 70px"
+PASS window.getComputedStyle(gridFixedMinContentAndMaxContentUnsorted, '').getPropertyValue('grid-template-columns') is "10px 70px"
+PASS window.getComputedStyle(gridFixedMaxContentAndMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "50px 40px"
+PASS window.getComputedStyle(gridMinContentAndMaxContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "0px 90px"
+PASS window.getComputedStyle(gridMaxContentFixedAndAutoUnsorted, '').getPropertyValue('grid-template-columns') is "15px 70px"
+PASS window.getComputedStyle(gridAutoMinContentUnsorted, '').getPropertyValue('grid-template-columns') is "50px 60px"
+PASS window.getComputedStyle(gridAutoMaxContentUnsorted, '').getPropertyValue('grid-template-columns') is "0px 90px"
+PASS window.getComputedStyle(gridMaxContentAndMinContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "50px 40px"
+PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedUnsorted, '').getPropertyValue('grid-template-columns') is "40px 70px"
+PASS window.getComputedStyle(gridMinContentFixedAndAutoAboveLimits, '').getPropertyValue('grid-template-columns') is "15px 95px"
+PASS window.getComputedStyle(gridMaxContentFixedAndAutoAboveLimits, '').getPropertyValue('grid-template-columns') is "15px 135px"
+PASS window.getComputedStyle(gridMinContentFixedAndFixedFixedAndAuto, '').getPropertyValue('grid-template-columns') is "20px 20px 60px"
+PASS window.getComputedStyle(gridAutoAndFixedFixedAndMaxContentFixed, '').getPropertyValue('grid-template-columns') is "110px 20px 20px"
+PASS window.getComputedStyle(gridMaxContentAndMaxContentFixedAndMaxContent, '').getPropertyValue('grid-template-columns') is "70px 20px 50px"
+PASS window.getComputedStyle(gridAutoAndMinContentFixedAndMinContent, '').getPropertyValue('grid-template-columns') is "55px 30px 65px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentsizedcolumnsresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,52 +7,52 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridMinContentFixedAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 15px) auto;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 15px) auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentFixedAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-max-content, 15px) auto;
</del><ins>+ grid-template-columns: minmax(-webkit-max-content, 15px) auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoAndAuto {
</span><del>- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-columns: auto auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentAndMinContentFixed {
</span><del>- -webkit-grid-template-columns: -webkit-min-content minmax(-webkit-min-content, 30px);
</del><ins>+ grid-template-columns: -webkit-min-content minmax(-webkit-min-content, 30px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentAndMaxContentFixed {
</span><del>- -webkit-grid-template-columns: -webkit-min-content minmax(-webkit-max-content, 30px);
</del><ins>+ grid-template-columns: -webkit-min-content minmax(-webkit-max-content, 30px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndMinContent {
</span><del>- -webkit-grid-template-columns: -webkit-max-content -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-max-content -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMinContentAndMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, -webkit-min-content) -webkit-max-content;
</del><ins>+ grid-template-columns: minmax(10px, -webkit-min-content) -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMaxContentAndMinContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, -webkit-max-content) -webkit-min-content;
</del><ins>+ grid-template-columns: minmax(10px, -webkit-max-content) -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoMinContent {
</span><del>- -webkit-grid-template-columns: auto -webkit-min-content;
</del><ins>+ grid-template-columns: auto -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoMaxContent {
</span><del>- -webkit-grid-template-columns: auto -webkit-max-content;
</del><ins>+ grid-template-columns: auto -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndMinContentFixed {
</span><del>- -webkit-grid-template-columns: -webkit-max-content minmax(-webkit-min-content, 35px);
</del><ins>+ grid-template-columns: -webkit-max-content minmax(-webkit-min-content, 35px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndMaxContentFixed {
</span><del>- -webkit-grid-template-columns: -webkit-max-content minmax(-webkit-max-content, 35px);
</del><ins>+ grid-template-columns: -webkit-max-content minmax(-webkit-max-content, 35px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentFixedAndFixedFixedAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 20px) minmax(20px, 30px) auto;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 20px) minmax(20px, 30px) auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoAndFixedFixedAndMaxContentFixed {
</span><del>- -webkit-grid-template-columns: auto minmax(20px, 30px) minmax(-webkit-max-content, 20px);
</del><ins>+ grid-template-columns: auto minmax(20px, 30px) minmax(-webkit-max-content, 20px);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndMaxContentFixedAndMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-max-content minmax(-webkit-max-content, 20px) -webkit-max-content;
</del><ins>+ grid-template-columns: -webkit-max-content minmax(-webkit-max-content, 20px) -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoAndMinContentFixedAndMinContent {
</span><del>- -webkit-grid-template-columns: auto minmax(-webkit-min-content, 30px) -webkit-min-content;
</del><ins>+ grid-template-columns: auto minmax(-webkit-min-content, 30px) -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -304,20 +304,20 @@
</span><span class="cx">
</span><span class="cx"> <div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent">
</span><span class="cx"> <div class="firstRowFirstColumn">X X X</div>
</span><del>- <div style="-webkit-grid-row: 1; -webkit-grid-column: 3;">X X</div>
</del><ins>+ <div style="grid-row: 1; grid-column: 3;">X X</div>
</ins><span class="cx"> <div class="firstRowBothColumn">XX XX XX XX XX</div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
</span><span class="cx"> <div class="firstRowFirstColumn">XX</div>
</span><span class="cx"> <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
</span><del>- <div style="-webkit-grid-row: 1; -webkit-grid-column: 3;">XXX XXX</div>
</del><ins>+ <div style="grid-row: 1; grid-column: 3;">XXX XXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <script>
</span><span class="cx"> function testGridColumnsValues(id, computedColumnValue)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriddisablehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-disable.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-disable.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-disable.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> window.internals.setCSSGridLayoutEnabled(false);
</span><span class="cx"> </script>
</span><span class="cx">
</span><del>-<div id="grid" style="display: -webkit-grid"></div>
-<div id="inlinegrid" style="display: -webkit-inline-grid"></div>
</del><ins>+<div id="grid" style="display: grid"></div>
+<div id="inlinegrid" style="display: inline-grid"></div>
</ins><span class="cx">
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> <script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriddynamicupdatesrelayouthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,8 +7,8 @@
</span><span class="cx"> function testLayout(gridElementID, gridTracks, size)
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementById(gridElementID);
</span><del>- gridElement.style.webkitGridTemplateColumns = gridTracks.columns;
- gridElement.style.webkitGridTemplateRows = gridTracks.rows;
</del><ins>+ gridElement.style.gridTemplateColumns = gridTracks.columns;
+ gridElement.style.gridTemplateRows = gridTracks.rows;
</ins><span class="cx"> var gridItem = gridElement.firstChild.nextSibling;
</span><span class="cx"> gridItem.setAttribute("data-expected-width", size.width);
</span><span class="cx"> gridItem.setAttribute("data-expected-height", size.height);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,59 +1,59 @@
</span><del>-Test that setting/getting -webkit-grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected
</del><ins>+Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test auto-repeat syntax.
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 10px"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] 10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px [foo bar]"
-PASS element.style.webkitGridTemplateRows is "2em [foo bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 800px"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo] 20px [bar]"
-PASS element.style.webkitGridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "100px 20px 20px"
-PASS element.style.webkitGridTemplateColumns is "minmax(10px, 100px) 20px 20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "70px 20px [bar foo] 10px [foo] 10px"
-PASS element.style.webkitGridTemplateRows is "70px minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 10px"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] 10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px [foo bar]"
-PASS element.style.webkitGridTemplateRows is "2em [foo bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 800px"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo] 20px [bar]"
-PASS element.style.webkitGridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px 20px 20px"
-PASS element.style.webkitGridTemplateColumns is "minmax(10px, -webkit-min-content) 20px 20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "60px 20px [bar foo] 10px [foo] 10px"
-PASS element.style.webkitGridTemplateRows is "10% minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
+PASS element.style.gridTemplateColumns is "[foo bar] 10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
+PASS element.style.gridTemplateRows is "2em [foo bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
+PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
+PASS element.style.gridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px 20px 20px"
+PASS element.style.gridTemplateColumns is "minmax(10px, 100px) 20px 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "70px 20px [bar foo] 10px [foo] 10px"
+PASS element.style.gridTemplateRows is "70px minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
+PASS element.style.gridTemplateColumns is "[foo bar] 10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
+PASS element.style.gridTemplateRows is "2em [foo bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
+PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
+PASS element.style.gridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px 20px 20px"
+PASS element.style.gridTemplateColumns is "minmax(10px, -webkit-min-content) 20px 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 20px [bar foo] 10px [foo] 10px"
+PASS element.style.gridTemplateRows is "10% minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
</ins><span class="cx">
</span><span class="cx"> Test invalid repeat syntax.
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> <body>
</span><span class="cx"> </body>
</span><span class="cx"> <script>
</span><del>- description('Test that setting/getting -webkit-grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
</del><ins>+ description('Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
</ins><span class="cx">
</span><span class="cx"> debug("Test auto-repeat syntax.");
</span><span class="cx"> testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
</span><span class="lines">@@ -21,8 +21,8 @@
</span><span class="cx"> function testInvalidSyntax(gridColumn) {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = gridColumn;
- shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
</del><ins>+ element.style.gridTemplateColumns = gridColumn;
+ shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementbordergriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,8 +8,8 @@
</span><span class="cx"> border-right: 30px dotted blue;
</span><span class="cx"> border-bottom: 40px dotted blue;
</span><span class="cx"> border-left: 50px dotted blue;
</span><del>- -webkit-grid-template-rows: 100px 100px;
- -webkit-grid-template-columns: 100px 100px;
</del><ins>+ grid-template-rows: 100px 100px;
+ grid-template-columns: 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementborderpaddinggriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,8 +9,8 @@
</span><span class="cx"> border-right: 20px dotted blue;
</span><span class="cx"> border-bottom: 30px dotted blue;
</span><span class="cx"> border-left: 40px dotted blue;
</span><del>- -webkit-grid-template-rows: 100px 100px;
- -webkit-grid-template-columns: 100px 100px;
</del><ins>+ grid-template-rows: 100px 100px;
+ grid-template-columns: 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> function repaintTest()
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><del>- gridElement.style.webkitGridTemplateColumns = "minmax(50px, 180px) 100px 100px";
</del><ins>+ gridElement.style.gridTemplateColumns = "minmax(50px, 180px) 100px 100px";
</ins><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><span class="lines">@@ -17,8 +17,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 50px;
- -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</del><ins>+ grid-template-rows: 50px;
+ grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</ins><span class="cx"> }
</span><span class="cx"> .sizedToGridArea {
</span><span class="cx"> background-color: purple;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementchangerowsrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> function repaintTest()
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><del>- gridElement.style.webkitGridTemplateRows = "100px 50px";
</del><ins>+ gridElement.style.gridTemplateRows = "100px 50px";
</ins><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><span class="lines">@@ -17,8 +17,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 50px 100px;
- -webkit-grid-template-columns: 100px;
</del><ins>+ grid-template-rows: 50px 100px;
+ grid-template-columns: 100px;
</ins><span class="cx"> }
</span><span class="cx"> .sizedToGridArea {
</span><span class="cx"> background-color: purple;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementemptyrowcolumnhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-empty-row-column.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-empty-row-column.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-empty-row-column.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,12 +3,12 @@
</span><span class="cx"> <link href=resources/grid.css rel=stylesheet>
</span><span class="cx"> <style>
</span><span class="cx"> .gridNoRow {
</span><del>- -webkit-grid-template-columns: 50px;
</del><ins>+ grid-template-columns: 50px;
</ins><span class="cx"> /* Make the grid shrink-to-fit. */
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span><span class="cx"> .gridNoColumn {
</span><del>- -webkit-grid-template-rows: 50px 80px;
</del><ins>+ grid-template-rows: 50px 80px;
</ins><span class="cx"> /* Make the grid shrink-to-fit. */
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementminmaxheighthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-height.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-height.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-height.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,13 +6,13 @@
</span><span class="cx"> <style>
</span><span class="cx"> .minHeightGrid {
</span><span class="cx"> min-height: 100px;
</span><del>- -webkit-grid-template-columns: 40px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 40px;
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx"> .maxHeightGrid {
</span><span class="cx"> max-height: 100px;
</span><del>- -webkit-grid-template-columns: 40px;
- -webkit-grid-template-rows: 150px 50px;
</del><ins>+ grid-template-columns: 40px;
+ grid-template-rows: 150px 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .minHeightAutoGrid {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementminmaxwidthhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-min-max-width.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,13 +6,13 @@
</span><span class="cx"> <style>
</span><span class="cx"> .minWidthGrid {
</span><span class="cx"> min-width: 100px;
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: 40px;
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: 40px;
</ins><span class="cx"> }
</span><span class="cx"> .maxWidthGrid {
</span><span class="cx"> max-width: 100px;
</span><del>- -webkit-grid-template-columns: 150px 50px;
- -webkit-grid-template-rows: 40px;
</del><ins>+ grid-template-columns: 150px 50px;
+ grid-template-rows: 40px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .minWidthAutoGrid {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementpaddinggriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="cx"> padding: 20px 30px 40px 50px;
</span><del>- -webkit-grid-template-rows: 100px 100px;
- -webkit-grid-template-columns: 100px 100px;
</del><ins>+ grid-template-rows: 100px 100px;
+ grid-template-columns: 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementpaddingmarginhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 100px;
+ grid-template-rows: 50px;
</ins><span class="cx"> /* Force the grid element to be shrink-to-fit. */
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,40 +4,40 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-columns and grid-template-rows set through CSS
</span><del>-PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-template-columns') is "120px"
-PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-template-rows') is "18px"
-PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
-PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "18px"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "400px 400px"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "0px 0px"
-PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "400px 400px"
-PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "44px 77px"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "33px 120px 0px 120px"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 77px 10px 0px"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "33px [middle] 250px [end] 0px [middle] 250px [end]"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [start] 77px [end] 10px [start] 0px [end]"
-PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[before] 0px [before] 0px"
-PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[before] 10px [before] 10px"
-PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px [end]"
-PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [end]"
-PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 250px 250px"
-PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[start] 10px 10px"
-PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 140px 250px 250px"
-PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "44px 10px 10px"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 120px [last]"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px [end] 0px"
</del><ins>+PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('grid-template-columns') is "120px"
+PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('grid-template-rows') is "18px"
+PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('grid-template-rows') is "18px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('grid-template-columns') is "400px 400px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('grid-template-rows') is "0px 0px"
+PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('grid-template-columns') is "400px 400px"
+PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('grid-template-rows') is "44px 77px"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('grid-template-columns') is "33px 120px 0px 120px"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('grid-template-rows') is "10px 77px 10px 0px"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "33px [middle] 250px [end] 0px [middle] 250px [end]"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "10px [start] 77px [end] 10px [start] 0px [end]"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "[before] 0px [before] 0px"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "[before] 10px [before] 10px"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "250px [end]"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "10px [end]"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "[start] 250px 250px"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "[start] 10px 10px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('grid-template-columns') is "[start] 140px 250px 250px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('grid-template-rows') is "44px 10px 10px"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-columns') is "250px 250px 120px [last]"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-rows') is "10px 10px [end] 0px"
</ins><span class="cx">
</span><span class="cx"> Test invalid repeat syntax.
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementrepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,62 +11,62 @@
</span><span class="cx"> height: 600px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> width: 33px;
</span><span class="cx"> height: 44px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItem2 {
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 2;
+ grid-row: 2;
</ins><span class="cx"> width: 66px;
</span><span class="cx"> height: 77px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .singleSingleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(1, 18px);
- -webkit-grid-template-columns: repeat(1, 15%);
</del><ins>+ grid-template-rows: repeat(1, 18px);
+ grid-template-columns: repeat(1, 15%);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoSingleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, auto);
- -webkit-grid-template-columns: repeat(2, minmax(15px, 50%));
</del><ins>+ grid-template-rows: repeat(2, auto);
+ grid-template-columns: repeat(2, minmax(15px, 50%));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, minmax(5px, 10px) auto);
- -webkit-grid-template-columns: repeat(2, auto minmax(100px, 120px));
</del><ins>+ grid-template-rows: repeat(2, minmax(5px, 10px) auto);
+ grid-template-columns: repeat(2, auto minmax(100px, 120px));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackWithNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, 10px [start] auto [end]);
- -webkit-grid-template-columns: repeat(2, auto [middle] 250px [end]);
</del><ins>+ grid-template-rows: repeat(2, 10px [start] auto [end]);
+ grid-template-columns: repeat(2, auto [middle] 250px [end]);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackWithTrailingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, [before] 10px);
- -webkit-grid-template-columns: repeat(2, [before] auto);
</del><ins>+ grid-template-rows: repeat(2, [before] 10px);
+ grid-template-columns: repeat(2, [before] auto);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .trailingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(1, 10px) [end];
- -webkit-grid-template-columns: repeat(1, 250px) [end];
</del><ins>+ grid-template-rows: repeat(1, 10px) [end];
+ grid-template-columns: repeat(1, 250px) [end];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .leadingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: [start] repeat(2, 10px);
- -webkit-grid-template-columns: [start] repeat(2, 250px);
</del><ins>+ grid-template-rows: [start] repeat(2, 10px);
+ grid-template-columns: [start] repeat(2, 250px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mixRepeatAfterNonRepeat {
</span><del>- -webkit-grid-template-rows: auto repeat(2, 10px);
- -webkit-grid-template-columns: [start] 140px repeat(2, 250px);
</del><ins>+ grid-template-rows: auto repeat(2, 10px);
+ grid-template-columns: [start] 140px repeat(2, 250px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mixNonRepeatAfterRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, 10px) [end] auto;
- -webkit-grid-template-columns: repeat(2, 250px) 15% [last];
</del><ins>+ grid-template-rows: repeat(2, 10px) [end] auto;
+ grid-template-columns: repeat(2, 250px) 15% [last];
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -117,8 +117,8 @@
</span><span class="cx"> function testInvalidSyntax(gridColumns) {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = gridColumns;
- shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
</del><ins>+ element.style.gridTemplateColumns = gridColumns;
+ shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx"> testInvalidSyntax("repeat(");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementshrinktofithtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 50px 50px;
- -webkit-grid-template-columns: 1fr 1fr;
</del><ins>+ grid-template-rows: 50px 50px;
+ grid-template-columns: 1fr 1fr;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .floatPos {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridgrowtrackstotheirmaxexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,18 +1,18 @@
</span><span class="cx"> Check that tracks are not shrinked if the available space is indefinite.
</span><del>-PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
-PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('-webkit-grid-template-rows') is "20px"
</del><ins>+PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridContentSizedColumn, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRow, '').getPropertyValue('grid-template-rows') is "20px"
</ins><span class="cx">
</span><span class="cx"> Check that tracks use the available free space if available.
</span><del>-PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
-PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
-PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('-webkit-grid-template-rows') is "100px"
</del><ins>+PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpace, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpace, '').getPropertyValue('grid-template-rows') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridContentSizedColumnFreeSpaceParentDefinite, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridContentSizedRowFreeSpaceParentDefinite, '').getPropertyValue('grid-template-rows') is "100px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridgrowtrackstotheirmaxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-grow-tracks-to-their-max.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,23 +7,23 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridContentSizedColumn {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 20px);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 20px);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridContentSizedColumnFreeSpace {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 100px);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 100px);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridContentSizedRow {
</span><del>- -webkit-grid-template-columns: 40px;
- -webkit-grid-template-rows: minmax(-webkit-max-content, 10px);
</del><ins>+ grid-template-columns: 40px;
+ grid-template-rows: minmax(-webkit-max-content, 10px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridContentSizedRowFreeSpace {
</span><del>- -webkit-grid-template-columns: 40px;
- -webkit-grid-template-rows: minmax(-webkit-max-content, 100px);
</del><ins>+ grid-template-columns: 40px;
+ grid-template-rows: minmax(-webkit-max-content, 100px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .definiteWidth { width: 80px; }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,29 +8,29 @@
</span><span class="cx"> body { margin: 0px; }
</span><span class="cx">
</span><span class="cx"> .grid100And200 {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> position: relative; /* For the <p> comments */
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid50And100 {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> position: relative; /* For the <p> comments */
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAuto20And40 {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> position: relative; /* For the <p> comments */
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithPaddingBorder {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> padding: 10px 15px 20px 30px;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span><span class="lines">@@ -47,18 +47,18 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithAutoRows {
</span><del>- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-rows: 40px;
</ins><span class="cx"> border: 2px solid black;
</span><span class="cx"> height: 50px;
</span><span class="cx"> width: 20px;
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.stretchedGrid { -webkit-grid-auto-columns: auto; }
</del><ins>+.stretchedGrid { grid-auto-columns: auto; }
</ins><span class="cx">
</span><span class="cx"> .gridRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 17px;
- -webkit-grid-column-gap: 21px;
</del><ins>+ grid-row-gap: 17px;
+ grid-column-gap: 21px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> div.grid > div { font: 10px/1 Ahem; }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandflexcontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,23 +5,23 @@
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <style>
</span><del>-.gridPercentAndFlexContent { -webkit-grid-template: 50px / 50% minmax(30px, 2fr); }
-.gridTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
-.gridIgnoreSecondGridItem { -webkit-grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
</del><ins>+.gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); }
+.gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+.gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
</ins><span class="cx">
</span><del>-.gridRowsPercentAndFlexContent { -webkit-grid-template: minmax(30px, 2fr) 50% / 50px; }
-.gridRowsTwoMaxFlexContent { -webkit-grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
-.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
</del><ins>+.gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; }
+.gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
+.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
</ins><span class="cx">
</span><del>-.gridMinMaxFlexFixedAndMinContentAndFixed { -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
-.gridMinContentAndMinMaxFixedMinContentAndFlex { -webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
-.gridMaxContentAndMinMaxFixedMaxContentAndFlex { -webkit-grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr; }
</del><ins>+.gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
+.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
+.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr; }
</ins><span class="cx">
</span><span class="cx"> div.grid > div { font: 10px/1 Ahem; }
</span><span class="cx">
</span><span class="cx"> .gridRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 33px;
- -webkit-grid-column-gap: 19px;
</del><ins>+ grid-row-gap: 33px;
+ grid-column-gap: 19px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -77,28 +77,28 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">
</span><del>- <div style="-webkit-grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
- <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
- <div style="-webkit-grid-column: 2 / span 2; -webkit-grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
</del><ins>+ <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
</span><del>- <div style="-webkit-grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
- <div style="-webkit-grid-column: 1; -webkit-grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
</del><ins>+ <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
+ <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative; width: 100px;">
</span><span class="cx"> <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
</span><del>- <div style="-webkit-grid-column: 2 / span 2;" data-expected-width="39">XX</div>
- <div style="-webkit-grid-column: 1 / -1; -webkit-grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
- <div style="-webkit-grid-column: 1 / span 2; -webkit-grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
- <div style="-webkit-grid-column: 1; -webkit-grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
</del><ins>+ <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
+ <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersandtrackshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,34 +6,34 @@
</span><span class="cx"> <style>
</span><span class="cx"> body { margin: 0px; }
</span><span class="cx">
</span><del>-.normalGap { -webkit-grid-gap: normal; }
</del><ins>+.normalGap { grid-gap: normal; }
</ins><span class="cx">
</span><del>-.gridGap { -webkit-grid-gap: 16px; }
</del><ins>+.gridGap { grid-gap: 16px; }
</ins><span class="cx">
</span><span class="cx"> .gridRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 12px;
- -webkit-grid-column-gap: 23px;
</del><ins>+ grid-row-gap: 12px;
+ grid-column-gap: 23px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.gridMultipleCols { -webkit-grid-template-columns: 30px minmax(10px, 50px) 80px; }
-.gridMultipleRows { -webkit-grid-template-rows: 90px 70px -webkit-min-content; }
-.gridAutoAuto { -webkit-grid-template: auto auto / auto auto; }
-.gridMultipleFixed { -webkit-grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
-.gridFixed100 { -webkit-grid-template: repeat(2, 100px) / repeat(2, 100px); }
-.gridWithPercent { -webkit-grid-template: 10% 10px / 10px 20% repeat(1, 30px); }
-.gridWithDoublePercent { -webkit-grid-template: 35% 65% / 60% 40%; }
</del><ins>+.gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; }
+.gridMultipleRows { grid-template-rows: 90px 70px -webkit-min-content; }
+.gridAutoAuto { grid-template: auto auto / auto auto; }
+.gridMultipleFixed { grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
+.gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); }
+.gridWithPercent { grid-template: 10% 10px / 10px 20% repeat(1, 30px); }
+.gridWithDoublePercent { grid-template: 35% 65% / 60% 40%; }
</ins><span class="cx">
</span><span class="cx"> .fixedSizeGrid {
</span><span class="cx"> width: 220px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx"> .gridFixedAutoTracks {
</span><del>- -webkit-grid-auto-rows: 20px;
- -webkit-grid-auto-columns: 40px;
</del><ins>+ grid-auto-rows: 20px;
+ grid-auto-columns: 40px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.thirdRowThirdColumn { -webkit-grid-area: 3 / 3; }
-.firstRowThirdColumn { -webkit-grid-area: 1 / 3; }
</del><ins>+.thirdRowThirdColumn { grid-area: 3 / 3; }
+.firstRowThirdColumn { grid-area: 1 / 3; }
</ins><span class="cx">
</span><span class="cx"> div.grid > div { font: 10px/1 Ahem; }
</span><span class="cx">
</span><span class="lines">@@ -88,9 +88,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridMultipleFixed gridRowColumnGaps">
</span><del>- <div style="-webkit-grid-row: 2; -webkit-grid-column: -2 / -1;" data-offset-x="86" data-offset-y="49" data-expected-width="35" data-expected-height="57">X X X</div>
- <div style="-webkit-grid-row: 1 / bar; -webkit-grid-column: bar" data-offset-x="86" data-offset-y="0" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div>
- <div style="-webkit-grid-row: -2; -webkit-grid-column-end: foo" data-offset-x="0" data-offset-y="118" data-expected-width="15" data-expected-height="77">X X</div>
</del><ins>+ <div style="grid-row: 2; grid-column: -2 / -1;" data-offset-x="86" data-offset-y="49" data-expected-width="35" data-expected-height="57">X X X</div>
+ <div style="grid-row: 1 / bar; grid-column: bar" data-offset-x="86" data-offset-y="0" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div>
+ <div style="grid-row: -2; grid-column-end: foo" data-offset-x="0" data-offset-y="118" data-expected-width="15" data-expected-height="77">X X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -130,9 +130,9 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridMultipleFixed gridRowColumnGaps">
</span><del>- <div style="-webkit-grid-row: 2; -webkit-grid-column: 1 / -1;" data-offset-x="0" data-offset-y="49" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div>
- <div style="-webkit-grid-row: first / last; -webkit-grid-column-start: 2" data-offset-x="38" data-offset-y="0" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
- <div style="-webkit-grid-row: 1 / 3; -webkit-grid-column: first / bar" data-offset-x="0" data-offset-y="0" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
</del><ins>+ <div style="grid-row: 2; grid-column: 1 / -1;" data-offset-x="0" data-offset-y="49" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div>
+ <div style="grid-row: first / last; grid-column-start: 2" data-offset-x="38" data-offset-y="0" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
+ <div style="grid-row: 1 / 3; grid-column: first / bar" data-offset-x="0" data-offset-y="0" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,42 +4,42 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-column-gap and grid-row-gap set through CSS
</span><del>-PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridGap, '').getPropertyValue('-webkit-grid-row-gap') is "20px"
-PASS window.getComputedStyle(gridGap, '').getPropertyValue('-webkit-grid-column-gap') is "15px"
-PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('-webkit-grid-row-gap') is "25px"
-PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('-webkit-grid-column-gap') is "25px"
-PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
-PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('-webkit-grid-row-gap') is "32px"
-PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('-webkit-grid-row-gap') is "13px"
-PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('-webkit-grid-column-gap') is "10px"
-PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "12px"
-PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
-PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "12px"
-PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "16px"
-PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('-webkit-grid-row-gap') is "25px"
-PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('-webkit-grid-column-gap') is "25px"
-PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
</del><ins>+PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(defaultGrid, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridGap, '').getPropertyValue('grid-row-gap') is "20px"
+PASS window.getComputedStyle(gridGap, '').getPropertyValue('grid-column-gap') is "15px"
+PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('grid-row-gap') is "25px"
+PASS window.getComputedStyle(gridSimpleGap, '').getPropertyValue('grid-column-gap') is "25px"
+PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridColumnGap, '').getPropertyValue('grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('grid-row-gap') is "32px"
+PASS window.getComputedStyle(gridRowGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('grid-row-gap') is "13px"
+PASS window.getComputedStyle(gridCalcGaps, '').getPropertyValue('grid-column-gap') is "10px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-row-gap') is "12px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-row-gap') is "12px"
+PASS window.getComputedStyle(gridRowColumnGaps, '').getPropertyValue('grid-column-gap') is "16px"
+PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('grid-row-gap') is "25px"
+PASS window.getComputedStyle(gridRowColumnInheritGaps, '').getPropertyValue('grid-column-gap') is "25px"
+PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridRowColumnInitialGaps, '').getPropertyValue('grid-column-gap') is "0px"
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values for grid-column-gap and grid-row-gap set through CSS
</span><del>-PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
</del><ins>+PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidRowGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidColumnGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidMultipleRowColumnGaps, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidGridGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidNoneGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidImplicitGridGap, '').getPropertyValue('grid-column-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('grid-row-gap') is "0px"
+PASS window.getComputedStyle(gridInvalidLengthRowColumnGaps, '').getPropertyValue('grid-column-gap') is "0px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridguttersgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,39 +3,39 @@
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.gridGap { -webkit-grid-gap: 20px 15px; }
-.gridSimpleGap { -webkit-grid-gap: 25px; }
-.gridColumnGap { -webkit-grid-column-gap: 2vw; }
-.gridRowGap { -webkit-grid-row-gap: 2em; }
</del><ins>+.gridGap { grid-gap: 20px 15px; }
+.gridSimpleGap { grid-gap: 25px; }
+.gridColumnGap { grid-column-gap: 2vw; }
+.gridRowGap { grid-row-gap: 2em; }
</ins><span class="cx"> .gridRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 12px;
- -webkit-grid-column-gap: 1rem;
</del><ins>+ grid-row-gap: 12px;
+ grid-column-gap: 1rem;
</ins><span class="cx"> }
</span><span class="cx"> .gridRowColumnInheritGaps {
</span><del>- -webkit-grid-row-gap: inherit;
- -webkit-grid-column-gap: inherit;
</del><ins>+ grid-row-gap: inherit;
+ grid-column-gap: inherit;
</ins><span class="cx"> }
</span><span class="cx"> .gridRowColumnInitialGaps {
</span><del>- -webkit-grid-row-gap: initial;
- -webkit-grid-column-gap: initial;
</del><ins>+ grid-row-gap: initial;
+ grid-column-gap: initial;
</ins><span class="cx"> }
</span><span class="cx"> .gridCalcGaps {
</span><del>- -webkit-grid-row-gap: calc(10px + 3px);
- -webkit-grid-column-gap: calc(2px + 1vw);
</del><ins>+ grid-row-gap: calc(10px + 3px);
+ grid-column-gap: calc(2px + 1vw);
</ins><span class="cx"> }
</span><del>-.gridInvalidRowGap { -webkit-grid-row-gap: 10%; }
-.gridInvalidColumnGap { -webkit-grid-column-gap: -webkit-max-content; }
</del><ins>+.gridInvalidRowGap { grid-row-gap: 10%; }
+.gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }
</ins><span class="cx"> .gridInvalidMultipleRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 10px 1px;
- -webkit-grid-column-gap: 0px 0px 0px;
</del><ins>+ grid-row-gap: 10px 1px;
+ grid-column-gap: 0px 0px 0px;
</ins><span class="cx"> }
</span><span class="cx"> .gridInvalidLengthRowColumnGaps {
</span><del>- -webkit-grid-row-gap: 2dpi;
- -webkit-grid-column-gap: 3rad;
</del><ins>+ grid-row-gap: 2dpi;
+ grid-column-gap: 3rad;
</ins><span class="cx"> }
</span><del>-.gridInvalidGridGap { -webkit-grid-gap: 20px 20px 10px; }
-.gridInvalidNoneGap { -webkit-grid-gap: none; }
-.gridInvalidImplicitGridGap { -webkit-grid-gap: -webkit-fit-content; }
</del><ins>+.gridInvalidGridGap { grid-gap: 20px 20px 10px; }
+.gridInvalidNoneGap { grid-gap: none; }
+.gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }
</ins><span class="cx">
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridindefinitecalculatedheightcrashexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,3 @@
</span><del>-* { display: -webkit-inline-grid; height: calc(100% - 10px); -webkit-grid-template-rows: minmax(100%, -webkit-max-content); }
</del><ins>+* { display: inline-grid; height: calc(100% - 10px); grid-template-rows: minmax(100%, -webkit-max-content); }
</ins><span class="cx"> if (window.testRunner) testRunner.dumpAsText();
</span><span class="cx"> This test has PASSED if it didn't CRASH on Debug builds.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridindefinitecalculatedheightcrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-indefinite-calculated-height-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,9 +2,9 @@
</span><span class="cx"> <head>
</span><span class="cx"> <style>
</span><span class="cx"> * {
</span><del>- display: -webkit-inline-grid;
</del><ins>+ display: inline-grid;
</ins><span class="cx"> height: calc(100% - 10px);
</span><del>- -webkit-grid-template-rows: minmax(100%, -webkit-max-content);
</del><ins>+ grid-template-rows: minmax(100%, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script type="text/javascript">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridinitializespanoneitemsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,15 +3,15 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px 90px"
-PASS window.getComputedStyle(gridAutoAndAutoReversed, '').getPropertyValue('-webkit-grid-template-columns') is "90px 10px"
-PASS window.getComputedStyle(gridFixedMinContentFixedMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "50px 50px"
-PASS window.getComputedStyle(gridFixedMinContentFixedMaxContentTwoEmptyChildren, '').getPropertyValue('-webkit-grid-template-columns') is "50px 50px"
-PASS window.getComputedStyle(gridFixedMinContentFixedMaxContentFixedSizeChild, '').getPropertyValue('-webkit-grid-template-columns') is "60px 40px"
-PASS window.getComputedStyle(gridMaxContentAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "80px 20px"
-PASS window.getComputedStyle(gridMaxContentAndAutoReversed, '').getPropertyValue('-webkit-grid-template-columns') is "90px 10px"
-PASS window.getComputedStyle(gridMinContentAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px 90px"
-PASS window.getComputedStyle(gridMinContentAndAutoReversed, '').getPropertyValue('-webkit-grid-template-columns') is "20px 80px"
</del><ins>+PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('grid-template-columns') is "10px 90px"
+PASS window.getComputedStyle(gridAutoAndAutoReversed, '').getPropertyValue('grid-template-columns') is "90px 10px"
+PASS window.getComputedStyle(gridFixedMinContentFixedMaxContent, '').getPropertyValue('grid-template-columns') is "50px 50px"
+PASS window.getComputedStyle(gridFixedMinContentFixedMaxContentTwoEmptyChildren, '').getPropertyValue('grid-template-columns') is "50px 50px"
+PASS window.getComputedStyle(gridFixedMinContentFixedMaxContentFixedSizeChild, '').getPropertyValue('grid-template-columns') is "60px 40px"
+PASS window.getComputedStyle(gridMaxContentAndAuto, '').getPropertyValue('grid-template-columns') is "80px 20px"
+PASS window.getComputedStyle(gridMaxContentAndAutoReversed, '').getPropertyValue('grid-template-columns') is "90px 10px"
+PASS window.getComputedStyle(gridMinContentAndAuto, '').getPropertyValue('grid-template-columns') is "10px 90px"
+PASS window.getComputedStyle(gridMinContentAndAutoReversed, '').getPropertyValue('grid-template-columns') is "20px 80px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridinitializespanoneitemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,16 +7,16 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridAutoAndAuto {
</span><del>- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-columns: auto auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMinContentFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndAuto {
</span><del>- -webkit-grid-template-columns: -webkit-max-content auto;
</del><ins>+ grid-template-columns: -webkit-max-content auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentAndAuto {
</span><del>- -webkit-grid-template-columns: -webkit-min-content auto;
</del><ins>+ grid-template-columns: -webkit-min-content auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -71,7 +71,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> function testGridColumnsValues(id, computedColumnValue)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> description('This test checks that content sized tracks are initialized using non-spanning grid items.');
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemadditionautoplacementupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -15,8 +15,8 @@
</span><span class="cx"> var gridElement = document.getElementById(gridElementID);
</span><span class="cx">
</span><span class="cx"> var gridItem = document.createElement("div");
</span><del>- gridItem.style.webkitGridRow = position.row;
- gridItem.style.webkitGridColumn = position.column;
</del><ins>+ gridItem.style.gridRow = position.row;
+ gridItem.style.gridColumn = position.column;
</ins><span class="cx"> gridElement.appendChild(gridItem);
</span><span class="cx">
</span><span class="cx"> var autoFlowElement = document.getElementById(autoFlowElementID);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemadditiontrackbreadthupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridFixedContent {
</span><del>- -webkit-grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
- -webkit-grid-template-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
</del><ins>+ grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
+ grid-template-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .sizedToGridArea {
</span><span class="lines">@@ -22,8 +22,8 @@
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> gridItem.classList.add("sizedToGridArea");
</span><span class="cx"> gridItem.innerHTML = content;
</span><del>- gridItem.style.webkitGridColumn = position.column;
- gridItem.style.webkitGridRow = position.row;
</del><ins>+ gridItem.style.gridColumn = position.column;
+ gridItem.style.gridRow = position.row;
</ins><span class="cx"> gridItem.setAttribute("data-expected-width", size.width);
</span><span class="cx"> gridItem.setAttribute("data-expected-height", size.height);
</span><span class="cx"> var gridElement = document.getElementById(gridElementID);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemareagetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,67 +1,67 @@
</span><del>-This test checks that -webkit-grid-area is properly parsed and stored internally.
</del><ins>+This test checks that grid-area is properly parsed and stored internally.
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-area set through CSS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "firstArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 8"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "9"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "nonexistent"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "1 foobar"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "firstArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 8"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "9"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "nonexistent"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "1 foobar"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-area set through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test setting some positions to invalid values through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
</ins><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemareagetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,36 +4,36 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-areas: "firstArea secondArea"
</del><ins>+ grid-template-areas: "firstArea secondArea"
</ins><span class="cx"> "thirdArea thirdArea";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #oneValueGridArea {
</span><del>- -webkit-grid-area: 1;
</del><ins>+ grid-area: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #oneValueIdentGridArea {
</span><del>- -webkit-grid-area: thirdArea;
</del><ins>+ grid-area: thirdArea;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #twoValueGridArea {
</span><del>- -webkit-grid-area: -1 / span 1;
</del><ins>+ grid-area: -1 / span 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #twoValueIdentGridArea {
</span><del>- -webkit-grid-area: firstArea / secondArea;
</del><ins>+ grid-area: firstArea / secondArea;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #threeValueGridArea {
</span><del>- -webkit-grid-area: span / 10 / -1;
</del><ins>+ grid-area: span / 10 / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #fourValueGridArea {
</span><del>- -webkit-grid-area: -5 / 5 span / span 8 / 9;
</del><ins>+ grid-area: -5 / 5 span / span 8 / 9;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #fourValueMixedGridArea {
</span><del>- -webkit-grid-area: firstArea / span / nonexistent / 1 foobar;
</del><ins>+ grid-area: firstArea / span / nonexistent / 1 foobar;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -49,7 +49,7 @@
</span><span class="cx"> <div id="fourValueMixedGridArea"></div>
</span><span class="cx"> </div>
</span><span class="cx"> <script>
</span><del>- description('This test checks that -webkit-grid-area is properly parsed and stored internally.');
</del><ins>+ description('This test checks that grid-area is properly parsed and stored internally.');
</ins><span class="cx"> function valueOrDefaultGridPosition(gridPosition)
</span><span class="cx"> {
</span><span class="cx"> return gridPosition === undefined ? "auto" : gridPosition;
</span><span class="lines">@@ -58,11 +58,11 @@
</span><span class="cx"> function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
</span><span class="cx"> {
</span><span class="cx"> this.gridItem = gridItem;
</span><del>- shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start')", gridRowStart);
- shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start')", valueOrDefaultGridPosition(gridColumnStart));
</del><ins>+ shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-start')", gridRowStart);
+ shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-start')", valueOrDefaultGridPosition(gridColumnStart));
</ins><span class="cx">
</span><del>- shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end')", valueOrDefaultGridPosition(gridRowEnd));
- shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd));
</del><ins>+ shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-end')", valueOrDefaultGridPosition(gridRowEnd));
+ shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testGridAreaCSSParsing(gridItemId, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
</span><span class="lines">@@ -75,8 +75,8 @@
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> // Pre-fill it with values to detect that we properly handle and reset unset values.
</span><del>- element.style.webkitGridArea = "1 / 2 / 3 / 4";
- element.style.webkitGridArea = gridAreaValue;
</del><ins>+ element.style.gridArea = "1 / 2 / 3 / 4";
+ element.style.gridArea = gridAreaValue;
</ins><span class="cx">
</span><span class="cx"> // Get the different values.
</span><span class="cx"> var gridColumnRowValues = gridAreaValue.split("/");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmentverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,8 +11,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsandstretchhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> font: 15px/1 Ahem;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautomarginsmustrespectspecifiedmarginshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,8 +8,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px;
- -webkit-grid-template-rows: 100px;
</del><ins>+ grid-template-columns: 100px;
+ grid-template-rows: 100px;
</ins><span class="cx"> width: -webkit-fit-content;
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautoplacementautomaticspanhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,64 +3,64 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-rows: 50px;
- -webkit-grid-auto-columns: 100px;
</del><ins>+ grid-auto-rows: 50px;
+ grid-auto-columns: 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridNamedGridLinesColumns {
</span><del>- -webkit-grid-template-columns: 50px 100px [line] 200px [line];
</del><ins>+ grid-template-columns: 50px 100px [line] 200px [line];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridNamedGridLinesRows {
</span><del>- -webkit-grid-template-rows: 50px 100px [line] 200px [line];
</del><ins>+ grid-template-rows: 50px 100px [line] 200px [line];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowAutoColumnSpanning3 {
</span><span class="cx"> background-color: teal;
</span><del>- -webkit-grid-column: span 3;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: span 3;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2AutoColumn {
</span><span class="cx"> background-color: aqua;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: span 2;
</del><ins>+ grid-column: auto;
+ grid-row: span 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning3AutoColumn {
</span><span class="cx"> background-color: salmon;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: span 3;
</del><ins>+ grid-column: auto;
+ grid-row: span 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2AutoColumnSpanning2 {
</span><span class="cx"> background-color: olive;
</span><del>- -webkit-grid-column: span 2;
- -webkit-grid-row: span 2;
</del><ins>+ grid-column: span 2;
+ grid-row: span 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowAutoColumnSpanningLine {
</span><span class="cx"> background-color: indigo;
</span><del>- -webkit-grid-column: span line; /* This is treated as "span 1". */
- -webkit-grid-row: auto;
</del><ins>+ grid-column: span line; /* This is treated as "span 1". */
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanningLineAutoColumn {
</span><span class="cx"> background-color: moccasin;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: span line; /* This is treated as "span 1". */
</del><ins>+ grid-column: auto;
+ grid-row: span line; /* This is treated as "span 1". */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowAutoColumnSpanning2Line {
</span><span class="cx"> background-color: sienna;
</span><del>- -webkit-grid-column: span 2 line; /* This is treated as "span 1". */
- -webkit-grid-row: auto;
</del><ins>+ grid-column: span 2 line; /* This is treated as "span 1". */
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2LineAutoColumn {
</span><span class="cx"> background-color: tomato;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: span 2 line; /* This is treated as "span 1". */
</del><ins>+ grid-column: auto;
+ grid-row: span 2 line; /* This is treated as "span 1". */
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautoplacementdefinitespanhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,20 +3,20 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-rows: 50px;
- -webkit-grid-auto-columns: 100px;
</del><ins>+ grid-auto-rows: 50px;
+ grid-auto-columns: 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowFirstColumnSpanning3 {
</span><span class="cx"> background-color: teal;
</span><del>- -webkit-grid-column: 1 / span 3;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 1 / span 3;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowSpanning3AutoColumn {
</span><span class="cx"> background-color: teal;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 1 / span 3;
</del><ins>+ grid-column: auto;
+ grid-row: 1 / span 3;
</ins><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautoplacementfixedrowcolumnhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,44 +3,44 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 50px;
- -webkit-grid-auto-rows: 50px;
</del><ins>+ grid-auto-columns: 50px;
+ grid-auto-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowAutoColumnSpanning2 {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-column: span 2;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: span 2;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2FirstColumn {
</span><span class="cx"> background-color: aqua;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 2;
</del><ins>+ grid-column: 1;
+ grid-row: span 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFourthColumn {
</span><span class="cx"> background-color: salmon;
</span><del>- -webkit-grid-column: 4;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 4;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .fourthRowFirstColumn {
</span><span class="cx"> background-color: salmon;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 4;
</del><ins>+ grid-column: 1;
+ grid-row: 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowThirdColumn {
</span><span class="cx"> background-color: red;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 3;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowSecondColumn {
</span><span class="cx"> background-color: red;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 2;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,8 +9,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> padding: 10px 15px 20px 30px;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="cx"> border-style: dotted;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,34 +4,34 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet"/>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 10px 20px;
- -webkit-grid-auto-rows: 5px;
- -webkit-grid-template-columns: 30px 40px;
- -webkit-grid-auto-columns: 15px;
- -webkit-grid-auto-flow: row;
</del><ins>+ grid-template-rows: 10px 20px;
+ grid-auto-rows: 5px;
+ grid-template-columns: 30px 40px;
+ grid-auto-columns: 15px;
+ grid-auto-flow: row;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothNamedGridLineRow {
</span><del>- -webkit-grid-row: nonExistentArea / nonExistentArea;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: nonExistentArea / nonExistentArea;
+ grid-column: 1;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothNamedGridLineColumn {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: nonExistentArea / span 3;
</del><ins>+ grid-row: 1;
+ grid-column: nonExistentArea / span 3;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineSpanRow {
</span><del>- -webkit-grid-row: nonExistentArea / span 5 firstRow;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: nonExistentArea / span 5 firstRow;
+ grid-column: 1;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineSpanColumn {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: nonExistentArea / span;
</del><ins>+ grid-row: 1;
+ grid-column: nonExistentArea / span;
</ins><span class="cx"> background-color: lime;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditembadresolutiondoublespanhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,30 +3,30 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- display: -webkit-grid;
- -webkit-grid-template-rows: [firstRow] 10px 20px;
- -webkit-grid-template-columns: [firstColumn] 30px 40px;
- -webkit-grid-auto-flow: row;
</del><ins>+ display: grid;
+ grid-template-rows: [firstRow] 10px 20px;
+ grid-template-columns: [firstColumn] 30px 40px;
+ grid-auto-flow: row;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothSpanRow {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 5 firstRow / span 1;
</del><ins>+ grid-column: 1;
+ grid-row: span 5 firstRow / span 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothSpanColumn {
</span><del>- -webkit-grid-column: span / span 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: span / span 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .spanAutoRow {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 5 firstRow / auto;
</del><ins>+ grid-column: 1;
+ grid-row: span 5 firstRow / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .spanAutoColumn {
</span><del>- -webkit-grid-column: span / auto;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: span / auto;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> function repaintTest()
</span><span class="cx"> {
</span><span class="cx"> var gridItem = document.getElementsByClassName("sizedToGridArea")[0];
</span><del>- gridItem.style.webkitGridColumn = "3";
</del><ins>+ gridItem.style.gridColumn = "3";
</ins><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><span class="lines">@@ -17,8 +17,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 50px;
- -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</del><ins>+ grid-template-rows: 50px;
+ grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</ins><span class="cx"> }
</span><span class="cx"> .sizedToGridArea {
</span><span class="cx"> background-color: purple;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangerowrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-row-repaint.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-row-repaint.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-row-repaint.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> function repaintTest()
</span><span class="cx"> {
</span><span class="cx"> var gridItem = document.getElementsByClassName("sizedToGridArea")[0];
</span><del>- gridItem.style.webkitGridRow = "2";
</del><ins>+ gridItem.style.gridRow = "2";
</ins><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", runRepaintTest, false);
</span><span class="cx"> </script>
</span><span class="lines">@@ -16,8 +16,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 50px 100px;
- -webkit-grid-template-columns: 100px 50px;
</del><ins>+ grid-template-rows: 50px 100px;
+ grid-template-columns: 100px 50px;
</ins><span class="cx"> /* Make the grid shrink to fit. */
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemcolumnrowgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,463 +3,463 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-column and -webkit-grid-row set through CSS
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "10 / auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is "15 / auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is "15"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is "-10 / auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is "-10"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is "-15 / auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is "-15"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-column') is "10 / 15"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-column-end') is "15"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-row') is "5 / 5"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-row-start') is "5"
-PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-column') is "10 / -10"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-column-end') is "-10"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-row') is "-8 / 5"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-row-start') is "-8"
-PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-column') is "span 2 / 4"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-column-end') is "4"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-row') is "3 / span 5"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-row-start') is "3"
-PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('-webkit-grid-row-end') is "span 5"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-column') is "span 2 / 4"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-column-end') is "4"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-row') is "3 / span 5"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-row-start') is "3"
-PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('-webkit-grid-row-end') is "span 5"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-column') is "span 1 / span 1"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-column-end') is "span 1"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-row') is "span 1 / span 1"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('-webkit-grid-row-end') is "span 1"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-column') is "10 / 11"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-column-end') is "11"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-row') is "4 / 5"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-row-start') is "4"
-PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-column') is "auto / 1"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-column-end') is "1"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-row') is "5 / auto"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-row-start') is "5"
-PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column') is "first / first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row') is "last / last"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "last"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "last"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-column') is "nav / nav"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "nav"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "nav"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-row') is "foo / foo"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "foo"
-PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "foo"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-column') is "1 / span 1 first"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "span 1 first"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-row') is "-1 / span 1 last"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-column') is "1 / span 3 first"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "span 3 first"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-row') is "-1 / span 2 last"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "-1"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "span 2 last"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column') is "thirdArea / thirdArea"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row') is "firstArea / firstArea"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
-PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row-end') is "firstArea"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column') is "thirdArea / span 1"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 1"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row') is "firstArea / span 2"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
-PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 2"
</del><ins>+Test getting grid-column and grid-row set through CSS
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column') is "10 / auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row') is "15 / auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-start') is "15"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column') is "-10 / auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-start') is "-10"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row') is "-15 / auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-start') is "-15"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-column') is "10 / 15"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-column-end') is "15"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-row') is "5 / 5"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-row-start') is "5"
+PASS getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-column') is "10 / -10"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-column-end') is "-10"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-row') is "-8 / 5"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-row-start') is "-8"
+PASS getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-column') is "span 2 / 4"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-column-start') is "span 2"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-column-end') is "4"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-row') is "3 / span 5"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-row-start') is "3"
+PASS getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyValue('grid-row-end') is "span 5"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-column') is "span 2 / 4"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-column-start') is "span 2"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-column-end') is "4"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-row') is "3 / span 5"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-row-start') is "3"
+PASS getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValue('grid-row-end') is "span 5"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-column') is "span 1 / span 1"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-column-start') is "span 1"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-column-end') is "span 1"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-row') is "span 1 / span 1"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValue('grid-row-end') is "span 1"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-column') is "10 / 11"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-column-end') is "11"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-row') is "4 / 5"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-row-start') is "4"
+PASS getComputedStyle(gridItemWithBothShortLongHandElement, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-column') is "auto / 1"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-column-end') is "1"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-row') is "5 / auto"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-row-start') is "5"
+PASS getComputedStyle(gridItemWithNoSpaceElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column') is "first / first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-start') is "first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-end') is "first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row') is "last / last"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-start') is "last"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-end') is "last"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-column') is "nav / nav"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-column-start') is "nav"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-column-end') is "nav"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-row') is "foo / foo"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-row-start') is "foo"
+PASS getComputedStyle(gridItemWithNonExistingCustomIdent, '').getPropertyValue('grid-row-end') is "foo"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-column') is "1 / span 1 first"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-column-end') is "span 1 first"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-row') is "-1 / span 1 last"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItemWithSpanCustomIdent, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-column') is "1 / span 3 first"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-column-end') is "span 3 first"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-row') is "-1 / span 2 last"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-row-start') is "-1"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdent, '').getPropertyValue('grid-row-end') is "span 2 last"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-column') is "thirdArea / thirdArea"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-column-start') is "thirdArea"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-column-end') is "thirdArea"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-row') is "firstArea / firstArea"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-row-start') is "firstArea"
+PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('grid-row-end') is "firstArea"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-column') is "thirdArea / span 1"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-column-start') is "thirdArea"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-column-end') is "span 1"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-row') is "firstArea / span 2"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-row-start') is "firstArea"
+PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('grid-row-end') is "span 2"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-column and grid-row through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "18 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "66 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "66"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "-55 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "-55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "-40 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-40"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "10 / 55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "1 / 10"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "10"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 5 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "4 / span 4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "-5 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "-5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "4 / -4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "4 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "4"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "5 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 8"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "8"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 1 / 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "5 / span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 1 first / 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "5 / span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "first / last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "nav / span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "3 first / 2 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "3 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "2 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "5 nav / span 7 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "5 nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 7 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 3 first / -3 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 3 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "-3 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 2 last / -1 nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 2 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-1 nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "5 / none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "8 / foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "8"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "nonExistent / none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "nonExistent"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "nonExistent / foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "nonExistent"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 3 first / none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 3 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "none"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 last / foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "foobar"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 5 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 first / span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 5 first / span 2 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 5 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 first / span 7 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 7 last"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "18 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "66 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "66"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "-55 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "-55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "-40 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-40"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "10 / 55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "1 / 10"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "10"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 5 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "4 / span 4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "-5 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "-5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "4 / -4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "4 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "4"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "5 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 8"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "8"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 1 / 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "5 / span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 1 first / 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "5 / span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "first / last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "nav / span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "3 first / 2 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "3 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "2 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "5 nav / span 7 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "5 nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 7 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 3 first / -3 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 3 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "-3 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 2 last / -1 nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 2 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-1 nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "5 / none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "8 / foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "8"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "nonExistent / none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "nonExistent"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "nonExistent / foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "nonExistent"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 3 first / none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 3 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "none"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 last / foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "foobar"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 5 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 first / span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 5 first / span 2 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 first / span 7 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 7 last"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-column and grid-row back to 'auto' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is '18 / 19'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is '18'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is '19'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is '66 / 68'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is '66'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is '68'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is '18 / 19'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is '18'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is '19'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is '66 / 68'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is '66'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is '68'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting 'initial' grid-column and grid-row through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting 'inherit' grid-column and grid-row through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 / 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "6 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "6"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "6 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "6"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 / 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "7"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 / 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "6 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "6"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "6 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "6"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 / 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting invalid grid-column and grid-row through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemcolumnrowgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,80 +4,80 @@
</span><span class="cx"> <script src="resources/grid-item-column-row-parsing-utils.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-areas: "firstArea secondArea"
</del><ins>+ grid-template-areas: "firstArea secondArea"
</ins><span class="cx"> "thirdArea thirdArea";
</span><span class="cx">
</span><del>- -webkit-grid-template-columns: [first nav] 10px 10px;
- -webkit-grid-template-rows: [last] 10px 10px;
</del><ins>+ grid-template-columns: [first nav] 10px 10px;
+ grid-template-rows: [last] 10px 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemWithPositiveInteger {
</span><del>- -webkit-grid-column: 10;
- -webkit-grid-row: 15;
</del><ins>+ grid-column: 10;
+ grid-row: 15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNegativeInteger {
</span><del>- -webkit-grid-column: -10;
- -webkit-grid-row: -15;
</del><ins>+ grid-column: -10;
+ grid-row: -15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAuto {
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: auto;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWith2Integer {
</span><del>- -webkit-grid-column: 10 / 15;
- -webkit-grid-row: 5 / 5;
</del><ins>+ grid-column: 10 / 15;
+ grid-row: 5 / 5;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNegativePositiveInteger {
</span><del>- -webkit-grid-column: 10 / -10;
- -webkit-grid-row: -8 / 5;
</del><ins>+ grid-column: 10 / -10;
+ grid-row: -8 / 5;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithBeforeSpan {
</span><del>- -webkit-grid-column: span 2 / 4;
- -webkit-grid-row: 3 / span 5;
</del><ins>+ grid-column: span 2 / 4;
+ grid-row: 3 / span 5;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAfterSpan {
</span><del>- -webkit-grid-column: 2 span / 4;
- -webkit-grid-row: 3 / 5 span;
</del><ins>+ grid-column: 2 span / 4;
+ grid-row: 3 / 5 span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWith2OnlySpan {
</span><del>- -webkit-grid-column: span / span;
- -webkit-grid-row: span / span;
</del><ins>+ grid-column: span / span;
+ grid-row: span / span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWith2Auto {
</span><del>- -webkit-grid-column: auto / auto;
- -webkit-grid-row: auto / auto;
</del><ins>+ grid-column: auto / auto;
+ grid-row: auto / auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithBothLongHand {
</span><del>- -webkit-grid-column-end: 11;
- -webkit-grid-row-start: 4;
</del><ins>+ grid-column-end: 11;
+ grid-row-start: 4;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNoSpace {
</span><del>- -webkit-grid-column: auto/1;
- -webkit-grid-row: 5/auto;
</del><ins>+ grid-column: auto/1;
+ grid-row: 5/auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithCustomIdent {
</span><del>- -webkit-grid-column: first;
- -webkit-grid-row: last;
</del><ins>+ grid-column: first;
+ grid-row: last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNonExistingCustomIdent {
</span><del>- -webkit-grid-column: nav;
- -webkit-grid-row: foo;
</del><ins>+ grid-column: nav;
+ grid-row: foo;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanCustomIdent {
</span><del>- -webkit-grid-column: 1 /span first;
- -webkit-grid-row: -1 / span last;
</del><ins>+ grid-column: 1 /span first;
+ grid-row: -1 / span last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanNumberCustomIdent {
</span><del>- -webkit-grid-column: 1 /span 3 first;
- -webkit-grid-row: -1 / last 2 span ;
</del><ins>+ grid-column: 1 /span 3 first;
+ grid-row: -1 / last 2 span ;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSingleNamedGridArea {
</span><del>- -webkit-grid-column: thirdArea;
- -webkit-grid-row: firstArea;
</del><ins>+ grid-column: thirdArea;
+ grid-row: firstArea;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNamedGridAreaAndSpan {
</span><del>- -webkit-grid-column: thirdArea / span;
- -webkit-grid-row: firstArea / span 2;
</del><ins>+ grid-column: thirdArea / span;
+ grid-row: firstArea / span 2;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -107,7 +107,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-column and grid-row works as expected');
</span><span class="cx">
</span><del>- debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS");
</del><ins>+ debug("Test getting grid-column and grid-row set through CSS");
</ins><span class="cx"> testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto");
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
</span><span class="lines">@@ -131,12 +131,12 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
</del><ins>+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-column and grid-row through JS");
</span><span class="lines">@@ -161,23 +161,23 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-column and grid-row back to 'auto' through JS");
</span><del>- element.style.webkitGridColumn = "18 / 19";
- element.style.webkitGridRow = "66 / 68";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18 / 19'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'18'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'19'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66 / 68'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'66'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'68'");
</del><ins>+ element.style.gridColumn = "18 / 19";
+ element.style.gridRow = "66 / 68";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / 19'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'19'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'68'");
</ins><span class="cx">
</span><del>- element.style.webkitGridColumn = "auto";
- element.style.webkitGridRow = "auto";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
</del><ins>+ element.style.gridColumn = "auto";
+ element.style.gridRow = "auto";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting 'initial' grid-column and grid-row through JS");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemdisplayhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-display.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-display.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-display.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,14 +3,14 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px 200px;
- -webkit-grid-template-rows: 50px 100px 200px;
</del><ins>+ grid-template-columns: 50px 100px 200px;
+ grid-template-rows: 50px 100px 200px;
</ins><span class="cx"> background-color: #aaa;
</span><span class="cx"> }
</span><span class="cx"> .grid > * {
</span><span class="cx"> margin: 0; /* Disable any margins as they change the top / left offsets. */
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 2;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemendaftergetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,191 +3,191 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-column-end and -webkit-grid-row-end set through CSS
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "auto / 10"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is "10"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is "auto / 15"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is "15"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is "auto / -10"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is "-10"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is "auto / -15"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is "-15"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 9"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 9"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 9"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 9"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 1"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end') is "span 1"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 1"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end') is "span 1"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column') is "auto / first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row') is "auto / last"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "last"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column') is "auto / 2 first"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "2 first"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row') is "auto / 3 last"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "3 last"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column') is "auto / span 1 first"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column-end') is "span 1 first"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row') is "auto / span 1 last"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column') is "auto / span 2 first"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column-end') is "span 2 first"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row') is "auto / span 3 last"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row-end') is "span 3 last"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column') is "auto / firstArea"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-end') is "firstArea"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row') is "auto / thirdArea"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-end') is "thirdArea"
</del><ins>+Test getting grid-column-end and grid-row-end set through CSS
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column') is "auto / 10"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-end') is "10"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row') is "auto / 15"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-end') is "15"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column') is "auto / -10"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-end') is "-10"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row') is "auto / -15"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-end') is "-15"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row') is "auto / span 9"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-end') is "span 9"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row') is "auto / span 9"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-end') is "span 9"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column') is "auto / span 1"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-end') is "span 1"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row') is "auto / span 1"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-end') is "span 1"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column') is "auto / first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-end') is "first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row') is "auto / last"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-end') is "last"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column') is "auto / 2 first"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-end') is "2 first"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row') is "auto / 3 last"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-end') is "3 last"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column') is "auto / span 1 first"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-end') is "span 1 first"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row') is "auto / span 1 last"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column') is "auto / span 2 first"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-end') is "span 2 first"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row') is "auto / span 3 last"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-end') is "span 3 last"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column') is "auto / firstArea"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-end') is "firstArea"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row') is "auto / thirdArea"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-end') is "thirdArea"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-column-end and grid-row-end through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / 18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 66"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "66"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / -55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "-55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / -40"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-40"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 1 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 1 first"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / nonExistentArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "nonExistentArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / nonExistentArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "nonExistentArea"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / 18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 66"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "66"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / -55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "-55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / -40"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-40"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 1 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 1 first"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / nonExistentArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "nonExistentArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / nonExistentArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "nonExistentArea"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-start and grid-before to 'inherit' through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 7"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "7"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 7"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-start and grid-before to 'initial' through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-column-end and grid-row-end back to 'auto' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is '18'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / 18'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is '66'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / 66'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is '18'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / 18'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is '66'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / 66'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemendaftergetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,53 +4,53 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-areas: "firstArea secondArea"
</del><ins>+ grid-template-areas: "firstArea secondArea"
</ins><span class="cx"> "thirdArea thirdArea";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemWithPositiveInteger {
</span><del>- -webkit-grid-column-end: 10;
- -webkit-grid-row-end: 15;
</del><ins>+ grid-column-end: 10;
+ grid-row-end: 15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNegativeInteger {
</span><del>- -webkit-grid-column-end: -10;
- -webkit-grid-row-end: -15;
</del><ins>+ grid-column-end: -10;
+ grid-row-end: -15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithBeforeSpan {
</span><del>- -webkit-grid-column-end: span 2;
- -webkit-grid-row-end: span 9;
</del><ins>+ grid-column-end: span 2;
+ grid-row-end: span 9;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAfterSpan {
</span><del>- -webkit-grid-column-end: 2 span;
- -webkit-grid-row-end: 9 span;
</del><ins>+ grid-column-end: 2 span;
+ grid-row-end: 9 span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithOnlySpan {
</span><del>- -webkit-grid-column-end: span;
- -webkit-grid-row-end: span;
</del><ins>+ grid-column-end: span;
+ grid-row-end: span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAuto {
</span><del>- -webkit-grid-column-end: auto;
- -webkit-grid-row-end: auto;
</del><ins>+ grid-column-end: auto;
+ grid-row-end: auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithCustomIdent {
</span><del>- -webkit-grid-column-end: first;
- -webkit-grid-row-end: last;
</del><ins>+ grid-column-end: first;
+ grid-row-end: last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNumberCustomIdent {
</span><del>- -webkit-grid-column-end: first 2;
- -webkit-grid-row-end: 3 last;
</del><ins>+ grid-column-end: first 2;
+ grid-row-end: 3 last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanCustomIdent {
</span><del>- -webkit-grid-column-end: first span;
- -webkit-grid-row-end: span last;
</del><ins>+ grid-column-end: first span;
+ grid-row-end: span last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanNumberCustomIdent {
</span><del>- -webkit-grid-column-end: 2 first span;
- -webkit-grid-row-end: last 3 span;
</del><ins>+ grid-column-end: 2 first span;
+ grid-row-end: last 3 span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithArea {
</span><del>- -webkit-grid-column-end: firstArea;
- -webkit-grid-row-end: thirdArea;
</del><ins>+ grid-column-end: firstArea;
+ grid-row-end: thirdArea;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="resources/grid-item-column-row-parsing-utils.js"></script>
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-column-end and grid-row-end works as expected');
</span><span class="cx">
</span><del>- debug("Test getting -webkit-grid-column-end and -webkit-grid-row-end set through CSS");
</del><ins>+ debug("Test getting grid-column-end and grid-row-end set through CSS");
</ins><span class="cx"> testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
</span><span class="lines">@@ -93,10 +93,10 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
</del><ins>+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-column-end and grid-row-end through JS");
</span><span class="lines">@@ -122,18 +122,18 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
</span><del>- element.style.webkitGridColumnEnd = "18";
- element.style.webkitGridRowEnd = "66";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'18'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / 18'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'66'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / 66'");
- element.style.webkitGridColumnEnd = "auto";
- element.style.webkitGridRowEnd = "auto";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
</del><ins>+ element.style.gridColumnEnd = "18";
+ element.style.gridRowEnd = "66";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'18'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'66'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'");
+ element.style.gridColumnEnd = "auto";
+ element.style.gridRowEnd = "auto";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
</ins><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowshorizontalltrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: auto auto;
- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-rows: auto auto;
+ grid-template-columns: auto auto;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowshorizontalrtlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: auto auto;
- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-rows: auto auto;
+ grid-template-columns: auto auto;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowsverticalltrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: auto auto;
- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-rows: auto auto;
+ grid-template-columns: auto auto;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginautocolumnsrowsverticalrtlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: auto auto;
- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-rows: auto auto;
+ grid-template-columns: auto auto;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px 100px;
- -webkit-grid-template-columns: 100px 100px;
</del><ins>+ grid-template-rows: 100px 100px;
+ grid-template-columns: 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmarginsnotcollapsehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margins-not-collapse.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margins-not-collapse.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margins-not-collapse.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx">
</span><span class="cx"> <div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
</span><span class="cx">
</span><del>-<div style="display: -webkit-grid;">
</del><ins>+<div style="display: grid;">
</ins><span class="cx"> <div><p margin="20px 0px">XXXXX</p></div>
</span><span class="cx"> <div style="margin:20px 0px;">XXXXX</div>
</span><span class="cx"> <div><p margin="20px 0px">XXXXX</p></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemmultipleminmaxcontentresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMaxAutoWithColumnMinMaxAuto {
</span><del>- -webkit-grid-template-columns: minmax(50px, 180px) auto;
- -webkit-grid-template-rows: auto minmax(50px, 100px);
</del><ins>+ grid-template-columns: minmax(50px, 180px) auto;
+ grid-template-rows: auto minmax(50px, 100px);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnamedgridarearesolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,52 +5,52 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: [before] 50px [middle] 100px [after] 150px;
- -webkit-grid-template-columns: 40px 80px 160px;
</del><ins>+ grid-template-rows: [before] 50px [middle] 100px [after] 150px;
+ grid-template-columns: 40px 80px 160px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithoutRepeat {
</span><del>- -webkit-grid-template-areas: "first second third"
</del><ins>+ grid-template-areas: "first second third"
</ins><span class="cx"> "fourth fifth sixth";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithRepeat {
</span><del>- -webkit-grid-template-areas: "first second third"
</del><ins>+ grid-template-areas: "first second third"
</ins><span class="cx"> "fourth fourth third";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemFirstArea {
</span><del>- -webkit-grid-area: first;
</del><ins>+ grid-area: first;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemSecondArea {
</span><del>- -webkit-grid-area: second;
</del><ins>+ grid-area: second;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemThirdArea {
</span><del>- -webkit-grid-area: third;
</del><ins>+ grid-area: third;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemFourthArea {
</span><del>- -webkit-grid-area: fourth;
</del><ins>+ grid-area: fourth;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemFifthArea {
</span><del>- -webkit-grid-area: fifth;
</del><ins>+ grid-area: fifth;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemSixthArea {
</span><del>- -webkit-grid-area: sixth;
</del><ins>+ grid-area: sixth;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemSpan2ThirdArea {
</span><del>- -webkit-grid-row: fourth;
- -webkit-grid-column: span 2 / third;
</del><ins>+ grid-row: fourth;
+ grid-column: span 2 / third;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemNamedGridLineWithArea {
</span><del>- -webkit-grid-row: third / after;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: third / after;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,63 +4,63 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 5px;
- -webkit-grid-auto-rows: 5px;
</del><ins>+ grid-auto-columns: 5px;
+ grid-auto-rows: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithoutRepeat {
</span><del>- -webkit-grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
- -webkit-grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
</del><ins>+ grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
+ grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithRepeat {
</span><del>- -webkit-grid-template-columns: [b] 50px [b] 100px [b] 200px [b];
- -webkit-grid-template-rows: [g] 50px [g] 100px [g] 200px [g];
</del><ins>+ grid-template-columns: [b] 50px [b] 100px [b] 200px [b];
+ grid-template-rows: [g] 50px [g] 100px [g] 200px [g];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFromSpecs {
</span><del>- -webkit-grid-template-columns: [A] 10px [B] 20px [C] 30px [A] 40px [B] 50px [C] 60px [A] 70px [B] 80px [C];
- -webkit-grid-template-rows: 100px;
</del><ins>+ grid-template-columns: [A] 10px [B] 20px [C] 30px [A] 40px [B] 50px [C] 60px [A] 70px [B] 80px [C];
+ grid-template-rows: 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemBToD {
</span><del>- -webkit-grid-column: b / d;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: b / d;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemGToH {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: g / h;
</del><ins>+ grid-column: 1;
+ grid-row: g / h;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemInvalidPositiveGridLine {
</span><del>- -webkit-grid-column: nonexistent / span 2;
- -webkit-grid-row: span 2 / nonexistent;
</del><ins>+ grid-column: nonexistent / span 2;
+ grid-row: span 2 / nonexistent;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemInvalidNegativeGridLine {
</span><del>- -webkit-grid-column: 1 / -1 nonexistent;
- -webkit-grid-row: span 2 / -10 nonexistent;
</del><ins>+ grid-column: 1 / -1 nonexistent;
+ grid-row: span 2 / -10 nonexistent;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemAToSpanC {
</span><del>- -webkit-grid-column: a / span c;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: a / span c;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemFToSpanH {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: f span / h;
</del><ins>+ grid-column: 1;
+ grid-row: f span / h;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItem2BSpan2B {
</span><del>- -webkit-grid-column: 2 b / span 2 b;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 2 b / span 2 b;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemSpan2GNegativeG {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 2 g / -1 g;
</del><ins>+ grid-column: 1;
+ grid-row: span 2 g / -1 g;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -162,61 +162,61 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: 4 / auto;" data-offset-x="60px" data-expected-width="40px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: 4 / auto;" data-offset-x="60px" data-expected-width="40px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: auto / 6;" data-offset-x="100px" data-expected-width="50px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: auto / 6;" data-offset-x="100px" data-expected-width="50px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: C / C -1;" data-offset-x="30px" data-expected-width="330px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: C / C -1;" data-offset-x="30px" data-expected-width="330px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: C / span C;" data-offset-x="30px" data-expected-width="120px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: C / span C;" data-offset-x="30px" data-expected-width="120px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: span C / C -1;" data-offset-x="150px" data-expected-width="210px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: span C / C -1;" data-offset-x="150px" data-expected-width="210px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: span C / span C;" data-offset-x="0px" data-expected-width="10px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: span C / span C;" data-offset-x="0px" data-expected-width="10px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: 5 / C -1;" data-offset-x="100px" data-expected-width="260px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: 5 / C -1;" data-offset-x="100px" data-expected-width="260px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: 5 / span C;" data-offset-x="100px" data-expected-width="50px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: 5 / span C;" data-offset-x="100px" data-expected-width="50px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: 8 / 8;" data-offset-x="280px" data-expected-width="80px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: 8 / 8;" data-offset-x="280px" data-expected-width="80px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridFromSpecs">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: B 2 / span 1;" data-offset-x="100px" data-expected-width="50px"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: B 2 / span 1;" data-offset-x="100px" data-expected-width="50px"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnegativeindexeshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-indexes.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,16 +3,16 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .negativeStartBeforePositionIndexes {
</span><del>- -webkit-grid-row: -10 / 1;
- -webkit-grid-column: -28 / 1;
</del><ins>+ grid-row: -10 / 1;
+ grid-column: -28 / 1;
</ins><span class="cx"> }
</span><span class="cx"> .negativeEndAfterPositionIndexes {
</span><del>- -webkit-grid-row: 1 / -17;
- -webkit-grid-column: 1 / -80;
</del><ins>+ grid-row: 1 / -17;
+ grid-column: 1 / -80;
</ins><span class="cx"> }
</span><span class="cx"> .negativePositionIndexes {
</span><del>- -webkit-grid-row: -50 / -3;
- -webkit-grid-column: -8 / -54;
</del><ins>+ grid-row: -50 / -3;
+ grid-column: -8 / -54;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnegativeintegerexplicitgridresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,14 +3,14 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .columnGrid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- /* -webkit-grid-template-rows is left unset so that the grid items' row is implicit. */
</del><ins>+ grid-template-columns: 50px 100px;
+ /* grid-template-rows is left unset so that the grid items' row is implicit. */
</ins><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .rowGrid {
</span><del>- -webkit-grid-template-rows: 50px 100px;
- /* -webkit-grid-template-columns is left unset so that the grid items' column is implicit. */
</del><ins>+ grid-template-rows: 50px 100px;
+ /* grid-template-columns is left unset so that the grid items' column is implicit. */
</ins><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnegativepositionresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,99 +3,99 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: [first] 50px [middle] 100px [last];
- -webkit-grid-template-rows: [first] 50px [middle] 100px [last];
</del><ins>+ grid-template-columns: [first] 50px [middle] 100px [last];
+ grid-template-rows: [first] 50px [middle] 100px [last];
</ins><span class="cx"> /* To detect how much we extend the grid. */
</span><del>- -webkit-grid-auto-columns: 200px;
- -webkit-grid-auto-rows: 200px;
</del><ins>+ grid-auto-columns: 200px;
+ grid-auto-rows: 200px;
</ins><span class="cx">
</span><span class="cx"> /* Make the grid shrink-to-fit. */
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeStartPositionGrowGridInColumnDirection {
</span><del>- -webkit-grid-column: -1 / auto;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -1 / auto;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeStartPositionGrowGridInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: -1 / auto;
</del><ins>+ grid-column: 1;
+ grid-row: -1 / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .lastNamedGridLineStartPositionGrowGridInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: -1 / auto;
</del><ins>+ grid-column: 1;
+ grid-row: -1 / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .lastNamedGridLineStartPositionGrowGridInColumnDirection {
</span><del>- -webkit-grid-column: last / auto;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: last / auto;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeStartPositionGrowGridInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: last / auto;
</del><ins>+ grid-column: 1;
+ grid-row: last / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endSpanGrowGridInColumnDirection {
</span><del>- -webkit-grid-column: -2 / span 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -2 / span 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endSpanGrowGridInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: -2 / span 3;
</del><ins>+ grid-column: 1;
+ grid-row: -2 / span 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedEndSpanGrowGridInColumnDirection {
</span><del>- -webkit-grid-column: -1 middle / span 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -1 middle / span 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedEndSpanGrowGridInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 2 middle / span 3;
</del><ins>+ grid-column: 1;
+ grid-row: 2 middle / span 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeEndPositionStartSpanInColumnDirection {
</span><del>- -webkit-grid-column: span / -1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: span / -1;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeEndPositionStartSpanInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 5 / -1;
</del><ins>+ grid-column: 1;
+ grid-row: span 5 / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeNamedGridLineEndPositionStartSpanInColumnDirection {
</span><del>- -webkit-grid-column: span / last;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: span / last;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeNamedGridLineEndPositionStartSpanInRowDirection {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: span 5 / last;
</del><ins>+ grid-column: 1;
+ grid-row: span 5 / last;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeEndPositionStartNegativeInColumnDirection {
</span><del>- -webkit-grid-column: -3 / -1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -3 / -1;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeEndPositionStartNegativeInRowDirection {
</span><del>- -webkit-grid-column: -5 / -2;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -5 / -2;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineEndPositionStartNegativeInColumnDirection {
</span><del>- -webkit-grid-column: -3 / 10 last;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -3 / 10 last;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineEndPositionStartNegativeInRowDirection {
</span><del>- -webkit-grid-column: -5 / -2 middle;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: -5 / -2 middle;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemorderautoflowresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,9 +3,9 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- display: -webkit-grid;
- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ display: grid;
+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeOrder {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemorderincontentsizedcolumnsresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-order-in-content-sized-columns-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,31 +8,31 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridFixedMinContentAndFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(20px, -webkit-min-content) minmax(20px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(20px, -webkit-min-content) minmax(20px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentFixedAndMinContentFixed {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-max-content, 50px) minmax(-webkit-min-content, 50px);
</del><ins>+ grid-template-columns: minmax(-webkit-max-content, 50px) minmax(-webkit-min-content, 50px);
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMinContentAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(20px, -webkit-min-content) auto;
</del><ins>+ grid-template-columns: minmax(20px, -webkit-min-content) auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMaxContentAndAuto {
</span><del>- -webkit-grid-template-columns: minmax(20px, -webkit-max-content) auto;
</del><ins>+ grid-template-columns: minmax(20px, -webkit-max-content) auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContentAndAuto {
</span><del>- -webkit-grid-template-columns: -webkit-max-content auto;
</del><ins>+ grid-template-columns: -webkit-max-content auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoAndMaxContent {
</span><del>- -webkit-grid-template-columns: auto -webkit-max-content;
</del><ins>+ grid-template-columns: auto -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentAndAuto {
</span><del>- -webkit-grid-template-columns: -webkit-min-content auto;
</del><ins>+ grid-template-columns: -webkit-min-content auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridAutoAndMinContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content auto;
</del><ins>+ grid-template-columns: -webkit-min-content auto;
</ins><span class="cx"> }
</span><span class="cx"> .spanTwo {
</span><del>- -webkit-grid-column: 1 / 3;
</del><ins>+ grid-column: 1 / 3;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -101,11 +101,11 @@
</span><span class="cx"> function checkTrackBreadthAfterItemRowSwap(gridId)
</span><span class="cx"> {
</span><span class="cx"> window.gridElement = document.getElementById(gridId);
</span><del>- var oldValue = getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-template-columns');
- var firstChildRow = getComputedStyle(gridElement.children[0],'').getPropertyValue('-webkit-grid-row');
- gridElement.children[0].style.webkitGridRow = getComputedStyle(gridElement.children[1],'').getPropertyValue('-webkit-grid-row');
- gridElement.children[1].style.webkitGridRow = firstChildRow;
- var newValue = getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-template-columns');
</del><ins>+ var oldValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns');
+ var firstChildRow = getComputedStyle(gridElement.children[0],'').getPropertyValue('grid-row');
+ gridElement.children[0].style.gridRow = getComputedStyle(gridElement.children[1],'').getPropertyValue('grid-row');
+ gridElement.children[1].style.gridRow = firstChildRow;
+ var newValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns');
</ins><span class="cx">
</span><span class="cx"> if (newValue == oldValue)
</span><span class="cx"> testPassed("grid-template-columns is " + newValue + " after grid row swap.");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemorderpaintorderhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px;
- -webkit-grid-template-columns: 100px;
</del><ins>+ grid-template-rows: 100px;
+ grid-template-columns: 100px;
</ins><span class="cx"> }
</span><span class="cx"> .sizedToGridArea {
</span><span class="cx"> background-color: green;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditempositionchangeddynamichtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,14 +3,14 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style type="text/css">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
- -webkit-grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
- -webkit-grid-auto-columns: 5px;
- -webkit-grid-auto-rows: 10px;
</del><ins>+ grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
+ grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
+ grid-auto-columns: 5px;
+ grid-auto-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx"> .differentNamedGridLines {
</span><del>- -webkit-grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
- -webkit-grid-template-rows: [row1] 70px [row2] 140px [row3] 280px [row4];
</del><ins>+ grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
+ grid-template-rows: [row1] 70px [row2] 140px [row3] 280px [row4];
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -18,8 +18,8 @@
</span><span class="cx"> function testPosition(position, size)
</span><span class="cx"> {
</span><span class="cx"> gridItem = document.getElementsByClassName("grid")[0].firstChild;
</span><del>- gridItem.style.webkitGridColumn = position.column;
- gridItem.style.webkitGridRow = position.row;
</del><ins>+ gridItem.style.gridColumn = position.column;
+ gridItem.style.gridRow = position.row;
</ins><span class="cx"> gridItem.setAttribute("data-expected-width", size.width);
</span><span class="cx"> gridItem.setAttribute("data-expected-height", size.height);
</span><span class="cx"> checkLayout(".grid");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemremovalautoplacementupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemremovaltrackbreadthupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,28 +4,28 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoContent {
</span><del>- -webkit-grid-template-columns: auto;
- -webkit-grid-template-rows: auto;
</del><ins>+ grid-template-columns: auto;
+ grid-template-rows: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinContentFixed {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 100px);
- -webkit-grid-template-rows: minmax(-webkit-min-content, 40px);
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 100px);
+ grid-template-rows: minmax(-webkit-min-content, 40px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxContentFixed {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-max-content, 150px);
- -webkit-grid-template-rows: minmax(-webkit-max-content, 40px);
</del><ins>+ grid-template-columns: minmax(-webkit-max-content, 150px);
+ grid-template-rows: minmax(-webkit-max-content, 40px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedMinContent {
</span><del>- -webkit-grid-template-columns: minmax(100px, -webkit-min-content);
- -webkit-grid-template-rows: minmax(40px, -webkit-min-content);
</del><ins>+ grid-template-columns: minmax(100px, -webkit-min-content);
+ grid-template-rows: minmax(40px, -webkit-min-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(100px, -webkit-max-content);
- -webkit-grid-template-rows: minmax(40px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(100px, -webkit-max-content);
+ grid-template-rows: minmax(40px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .lessConstrainedContainer {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemspanningresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,89 +3,89 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 40% 60%;
- -webkit-grid-template-rows: 30% 70%;
</del><ins>+ grid-template-columns: 40% 60%;
+ grid-template-rows: 30% 70%;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><del>- -webkit-grid-auto-columns: 200px;
- -webkit-grid-auto-rows: 250px;
</del><ins>+ grid-auto-columns: 200px;
+ grid-auto-rows: 250px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #bigGrid {
</span><del>- -webkit-grid-template-columns: 25% 25% 25% 25%;
- -webkit-grid-template-rows: 25% 25% 25% 25%;
</del><ins>+ grid-template-columns: 25% 25% 25% 25%;
+ grid-template-rows: 25% 25% 25% 25%;
</ins><span class="cx"> height: 100px;
</span><span class="cx"> width: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #fixedGrid {
</span><del>- -webkit-grid-template-columns: 10px 20px 40px 80px;
- -webkit-grid-template-rows: 15px 30px 60px 120px;
</del><ins>+ grid-template-columns: 10px 20px 40px 80px;
+ grid-template-rows: 15px 30px 60px 120px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .negativeOverflowRowFirstColumn {
</span><del>- -webkit-grid-row: 1 / -5;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1 / -5;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .overflowRowFirstColumn {
</span><del>- -webkit-grid-row: 1 / 5;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1 / 5;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowNegativeOverflowColumn {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1 / -5;
</del><ins>+ grid-row: 1;
+ grid-column: 1 / -5;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowOverflowColumn {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1 / 5;
</del><ins>+ grid-row: 1;
+ grid-column: 1 / 5;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowSecondColumnNoSpan {
</span><del>- -webkit-grid-column: 2 / 3;
- -webkit-grid-row: 2 / 3;
</del><ins>+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowThirdColumnNoSpan {
</span><del>- -webkit-grid-column: 3 / 4;
- -webkit-grid-row: 3 / 4;
</del><ins>+ grid-column: 3 / 4;
+ grid-row: 3 / 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowSpanning3SecondColumn {
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 1 / span 3;
</del><ins>+ grid-column: 2;
+ grid-row: 1 / span 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowSecondColumnSpanning2 {
</span><del>- -webkit-grid-column: 2 / span 2;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 2 / span 2;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .spanning3Row5SecondColumn {
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: span 3 / 5;
</del><ins>+ grid-column: 2;
+ grid-row: span 3 / 5;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowSpanning2Column3 {
</span><del>- -webkit-grid-column: span 2 / 3;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: span 2 / 3;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .underflowSpanning {
</span><del>- -webkit-grid-column: span 3 / 3;
- -webkit-grid-row: span 8 / 4;
</del><ins>+ grid-column: span 3 / 3;
+ grid-row: span 8 / 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .doubleSpan {
</span><del>- -webkit-grid-column: span 2 / span 2;
- -webkit-grid-row: span 3 / span 1;
</del><ins>+ grid-column: span 2 / span 2;
+ grid-row: span 3 / span 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .spanAndAuto {
</span><del>- -webkit-grid-column: auto / span 2;
- -webkit-grid-row: span 3 / auto;
</del><ins>+ grid-column: auto / span 2;
+ grid-row: span 3 / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -195,14 +195,14 @@
</span><span class="cx">
</span><span class="cx"> <!-- Check that the end span is ignored when two opposing spans are specified-->
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" id="fixedGrid" style="-webkit-grid-auto-flow: row;">
- <div class="sizedToGridArea" style="-webkit-grid-column: 1; -webkit-grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
</del><ins>+<div class="grid" id="fixedGrid" style="grid-auto-flow: row;">
+ <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
</ins><span class="cx"> <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" id="fixedGrid" style="-webkit-grid-auto-flow: column;">
- <div class="sizedToGridArea" style="-webkit-grid-column: 1; -webkit-grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
</del><ins>+<div class="grid" id="fixedGrid" style="grid-auto-flow: column;">
+ <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
</ins><span class="cx"> <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstartbeforegetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,188 +4,188 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-column-start and grid-row-start set through CSS
</span><del>-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
-PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "10 / auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "10"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is "15 / auto"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is "15"
-PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is "-10 / auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is "-10"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is "-15 / auto"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is "-15"
-PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is "span 2 / auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is "span 8 / auto"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start') is "span 8"
-PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is "span 2 / auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is "span 8 / auto"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start') is "span 8"
-PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is "span 1 / auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is "span 1 / auto"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column') is "first / auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "first"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row') is "last / auto"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "last"
-PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column') is "2 first / auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-start') is "2 first"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row') is "3 last / auto"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-start') is "3 last"
-PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column') is "span 1 first / auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column-start') is "span 1 first"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row') is "span 1 last / auto"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row-start') is "span 1 last"
-PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column') is "span 2 first / auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column-start') is "span 2 first"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row') is "span 3 last / auto"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row-start') is "span 3 last"
-PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column') is "firstArea / auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-start') is "firstArea"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row') is "thirdArea / auto"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-start') is "thirdArea"
-PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column-start') is 'auto'
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row-start') is 'auto'
+PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row') is 'auto / auto'
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column') is "10 / auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-start') is "10"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row') is "15 / auto"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-start') is "15"
+PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column') is "-10 / auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-start') is "-10"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row') is "-15 / auto"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-start') is "-15"
+PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column') is "span 2 / auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-start') is "span 2"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row') is "span 8 / auto"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-start') is "span 8"
+PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column') is "span 2 / auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-start') is "span 2"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row') is "span 8 / auto"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-start') is "span 8"
+PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column') is "span 1 / auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-start') is "span 1"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row') is "span 1 / auto"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column') is "first / auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-start') is "first"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row') is "last / auto"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-start') is "last"
+PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column') is "2 first / auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-start') is "2 first"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row') is "3 last / auto"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-start') is "3 last"
+PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column') is "span 1 first / auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-start') is "span 1 first"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row') is "span 1 last / auto"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-start') is "span 1 last"
+PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column') is "span 2 first / auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-start') is "span 2 first"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row') is "span 3 last / auto"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-start') is "span 3 last"
+PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column') is "firstArea / auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-start') is "firstArea"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row') is "thirdArea / auto"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-start') is "thirdArea"
+PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-column-start and grid-row-start through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "18 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "66 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "66"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "-55 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "-55"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "-40 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-40"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "nav / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "last / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 3 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 20 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 20"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 1 nav / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1 nav"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 last / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1 last"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "thirdArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "secondArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "nonExistentArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "nonExistentArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "secondArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "secondArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "secondArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "nonExistentArea / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "nonExistentArea"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "18 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "66 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "66"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "-55 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "-55"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "-40 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-40"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "nav / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "last / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 3 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 20 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 20"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "span 1 nav / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1 nav"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 last / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1 last"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "thirdArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "thirdArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "secondArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "nonExistentArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "nonExistentArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "secondArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "secondArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "secondArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "nonExistentArea / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "nonExistentArea"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-start and grid-before to 'inherit' through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "6 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "6"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "18 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "18"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "2 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "6 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "6"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 / auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "6 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "6"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "18 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "18"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "2 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "6 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "6"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 1 / auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-start and grid-before to 'initial' through JS
</span><del>-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "1 / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "1"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 3 / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 3"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 5"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "5"
</del><ins>+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 5"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-column-start and grid-row-start back to 'auto' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is '18'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is '18 / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is '66'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is '66 / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is '18'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is '18 / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is '66'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is '66 / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row-start') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstartbeforegetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,53 +4,53 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-areas: "firstArea secondArea"
</del><ins>+ grid-template-areas: "firstArea secondArea"
</ins><span class="cx"> "thirdArea thirdArea";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItemWithPositiveInteger {
</span><del>- -webkit-grid-column-start: 10;
- -webkit-grid-row-start: 15;
</del><ins>+ grid-column-start: 10;
+ grid-row-start: 15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNegativeInteger {
</span><del>- -webkit-grid-column-start: -10;
- -webkit-grid-row-start: -15;
</del><ins>+ grid-column-start: -10;
+ grid-row-start: -15;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithBeforeSpan {
</span><del>- -webkit-grid-column-start: span 2;
- -webkit-grid-row-start: span 8;
</del><ins>+ grid-column-start: span 2;
+ grid-row-start: span 8;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAfterSpan {
</span><del>- -webkit-grid-column-start: 2 span;
- -webkit-grid-row-start: 8 span;
</del><ins>+ grid-column-start: 2 span;
+ grid-row-start: 8 span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithOnlySpan {
</span><del>- -webkit-grid-column-start: span;
- -webkit-grid-row-start: span;
</del><ins>+ grid-column-start: span;
+ grid-row-start: span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithAuto {
</span><del>- -webkit-grid-column-start: auto;
- -webkit-grid-row-start: auto;
</del><ins>+ grid-column-start: auto;
+ grid-row-start: auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithCustomIdent {
</span><del>- -webkit-grid-column-start: first;
- -webkit-grid-row-start: last;
</del><ins>+ grid-column-start: first;
+ grid-row-start: last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithNumberCustomIdent {
</span><del>- -webkit-grid-column-start: first 2;
- -webkit-grid-row-start: 3 last;
</del><ins>+ grid-column-start: first 2;
+ grid-row-start: 3 last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanCustomIdent {
</span><del>- -webkit-grid-column-start: first span;
- -webkit-grid-row-start: span last;
</del><ins>+ grid-column-start: first span;
+ grid-row-start: span last;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithSpanNumberCustomIdent {
</span><del>- -webkit-grid-column-start: 2 first span;
- -webkit-grid-row-start: last 3 span;
</del><ins>+ grid-column-start: 2 first span;
+ grid-row-start: last 3 span;
</ins><span class="cx"> }
</span><span class="cx"> .gridItemWithArea {
</span><del>- -webkit-grid-column-start: firstArea;
- -webkit-grid-row-start: thirdArea;
</del><ins>+ grid-column-start: firstArea;
+ grid-row-start: thirdArea;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="resources/grid-item-column-row-parsing-utils.js"></script>
</span><span class="lines">@@ -77,10 +77,10 @@
</span><span class="cx">
</span><span class="cx"> debug("Test getting grid-column-start and grid-row-start set through CSS");
</span><span class="cx"> var gridElement = document.getElementById("gridElement");
</span><del>- shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
- shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
- shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
</del><ins>+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-start')", "'auto'");
+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start')", "'auto'");
+ shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", "'auto / auto'");
</ins><span class="cx">
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
</span><span class="cx"> testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
</span><span class="lines">@@ -98,10 +98,10 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
</del><ins>+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-column-start and grid-row-start through JS");
</span><span class="lines">@@ -127,18 +127,18 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-column-start and grid-row-start back to 'auto' through JS");
</span><del>- element.style.webkitGridColumnStart = "18";
- element.style.webkitGridRowStart = "66";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'18'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18 / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'66'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66 / auto'");
- element.style.webkitGridColumnStart = "auto";
- element.style.webkitGridRowStart = "auto";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
</del><ins>+ element.style.gridColumnStart = "18";
+ element.style.gridRowStart = "66";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'");
+ element.style.gridColumnStart = "auto";
+ element.style.gridRowStart = "auto";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
</ins><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> position: relative;
</span><span class="cx"> font: 15px/1 Ahem;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddingverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> position: relative;
</span><span class="cx"> font: 15px/1 Ahem;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemstretchwithmarginsborderspaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-stretch-with-margins-borders-padding.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,8 +10,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> margin-bottom: 20px;
</span><span class="cx"> position: relative;
</span><span class="cx"> font: 15px/1 Ahem;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemtextbackgroundnotinterleavedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-text-background-not-interleaved.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-text-background-not-interleaved.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-text-background-not-interleaved.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,12 +2,12 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 50px;
</del><ins>+ grid-template-columns: 50px 50px;
</ins><span class="cx"> }
</span><span class="cx"> .firstRowFirstColumnSpanning2 {
</span><span class="cx"> background: lime;
</span><del>- -webkit-grid-column: 1 / span 2;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1 / span 2;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,10 +2,10 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
- -webkit-grid-auto-columns: 10px;
- -webkit-grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
- -webkit-grid-auto-rows: 5px;
</del><ins>+ grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
+ grid-auto-columns: 10px;
+ grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
+ grid-auto-rows: 5px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -16,13 +16,13 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: foo; -webkit-grid-row: bar;"
</del><ins>+ <div style="grid-column: foo; grid-row: bar;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: a; -webkit-grid-row: b;"
</del><ins>+ <div style="grid-column: a; grid-row: b;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: line; -webkit-grid-row: line;"
</del><ins>+ <div style="grid-column: line; grid-row: line;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -30,19 +30,19 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: foo; -webkit-grid-row: bar;"
</del><ins>+ <div style="grid-column: foo; grid-row: bar;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 1 / foo; -webkit-grid-row: 1 / bar;"
</del><ins>+ <div style="grid-column: 1 / foo; grid-row: 1 / bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / 1; -webkit-grid-row: bar / 1;"
</del><ins>+ <div style="grid-column: foo / 1; grid-row: bar / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / foo; -webkit-grid-row: bar / bar;"
</del><ins>+ <div style="grid-column: foo / foo; grid-row: bar / bar;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / bar; -webkit-grid-row: bar / foo;"
</del><ins>+ <div style="grid-column: foo / bar; grid-row: bar / foo;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -50,31 +50,31 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 foo; -webkit-grid-row: 1 bar;"
</del><ins>+ <div style="grid-column: 1 foo; grid-row: 1 bar;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo; -webkit-grid-row: 2 bar;"
</del><ins>+ <div style="grid-column: 2 foo; grid-row: 2 bar;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 3 foo; -webkit-grid-row: 3 bar;"
</del><ins>+ <div style="grid-column: 3 foo; grid-row: 3 bar;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 4 foo; -webkit-grid-row: 4 bar;"
</del><ins>+ <div style="grid-column: 4 foo; grid-row: 4 bar;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 foo; -webkit-grid-row: 5 bar;"
</del><ins>+ <div style="grid-column: 5 foo; grid-row: 5 bar;"
</ins><span class="cx"> data-offset-x="200" data-offset-y="115" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo / 4 foo; -webkit-grid-row: 2 bar / 4 bar;"
</del><ins>+ <div style="grid-column: 2 foo / 4 foo; grid-row: 2 bar / 4 bar;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo / 4 bar; -webkit-grid-row: 2 bar / 4 foo;"
</del><ins>+ <div style="grid-column: 2 foo / 4 bar; grid-row: 2 bar / 4 foo;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 foo / 3 foo; -webkit-grid-row: 5 bar / 3 bar;"
</del><ins>+ <div style="grid-column: 5 foo / 3 foo; grid-row: 5 bar / 3 bar;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 foo / 3 bar; -webkit-grid-row: 5 bar / 3 foo;"
</del><ins>+ <div style="grid-column: 5 foo / 3 bar; grid-row: 5 bar / 3 foo;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -82,31 +82,31 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 foo; -webkit-grid-row: -1 bar;"
</del><ins>+ <div style="grid-column: -1 foo; grid-row: -1 bar;"
</ins><span class="cx"> data-offset-x="40" data-offset-y="20" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 foo; -webkit-grid-row: -2 bar;"
</del><ins>+ <div style="grid-column: -2 foo; grid-row: -2 bar;"
</ins><span class="cx"> data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -3 foo; -webkit-grid-row: -3 bar;"
</del><ins>+ <div style="grid-column: -3 foo; grid-row: -3 bar;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -4 foo; -webkit-grid-row: -4 bar;"
</del><ins>+ <div style="grid-column: -4 foo; grid-row: -4 bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -5 foo; -webkit-grid-row: -5 bar;"
</del><ins>+ <div style="grid-column: -5 foo; grid-row: -5 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -4 foo / -2 foo; -webkit-grid-row: -4 bar / -2 bar;"
</del><ins>+ <div style="grid-column: -4 foo / -2 foo; grid-row: -4 bar / -2 bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -4 foo / -2 bar; -webkit-grid-row: -4 bar / -2 foo;"
</del><ins>+ <div style="grid-column: -4 foo / -2 bar; grid-row: -4 bar / -2 foo;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -3 foo / -5 foo; -webkit-grid-row: -3 bar / -5 bar;"
</del><ins>+ <div style="grid-column: -3 foo / -5 foo; grid-row: -3 bar / -5 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -3 foo / -5 bar; -webkit-grid-row: -3 bar / -5 foo;"
</del><ins>+ <div style="grid-column: -3 foo / -5 bar; grid-row: -3 bar / -5 foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -114,22 +114,22 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / span foo; -webkit-grid-row: 1 / span bar;"
</del><ins>+ <div style="grid-column: 1 / span foo; grid-row: 1 / span bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / 1; -webkit-grid-row: span bar / 1;"
</del><ins>+ <div style="grid-column: span foo / 1; grid-row: span bar / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / span foo; -webkit-grid-row: bar / span bar;"
</del><ins>+ <div style="grid-column: foo / span foo; grid-row: bar / span bar;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / span bar; -webkit-grid-row: bar / span foo;"
</del><ins>+ <div style="grid-column: foo / span bar; grid-row: bar / span foo;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / foo; -webkit-grid-row: span bar / bar;"
</del><ins>+ <div style="grid-column: span foo / foo; grid-row: span bar / bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / bar; -webkit-grid-row: span bar / foo;"
</del><ins>+ <div style="grid-column: span foo / bar; grid-row: span bar / foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -137,22 +137,22 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 / span foo; -webkit-grid-row: -1 / span bar;"
</del><ins>+ <div style="grid-column: -1 / span foo; grid-row: -1 / span bar;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / -1; -webkit-grid-row: span bar / -1;"
</del><ins>+ <div style="grid-column: span foo / -1; grid-row: span bar / -1;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 foo / span foo; -webkit-grid-row: -1 bar / span bar;"
</del><ins>+ <div style="grid-column: -1 foo / span foo; grid-row: -1 bar / span bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 foo / span bar; -webkit-grid-row: -1 bar / span foo;"
</del><ins>+ <div style="grid-column: -1 foo / span bar; grid-row: -1 bar / span foo;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / -1 foo; -webkit-grid-row: span bar / -1 bar;"
</del><ins>+ <div style="grid-column: span foo / -1 foo; grid-row: span bar / -1 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / -1 bar; -webkit-grid-row: span bar / -1 foo;"
</del><ins>+ <div style="grid-column: span foo / -1 bar; grid-row: span bar / -1 foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -160,22 +160,22 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / span 2 foo; -webkit-grid-row: 1 / span 2 bar;"
</del><ins>+ <div style="grid-column: 1 / span 2 foo; grid-row: 1 / span 2 bar;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / 1; -webkit-grid-row: span 2 bar / 1;"
</del><ins>+ <div style="grid-column: span 2 foo / 1; grid-row: span 2 bar / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / span 2 foo; -webkit-grid-row: bar / span 2 bar;"
</del><ins>+ <div style="grid-column: foo / span 2 foo; grid-row: bar / span 2 bar;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: foo / span 2 bar; -webkit-grid-row: bar / span 2 foo;"
</del><ins>+ <div style="grid-column: foo / span 2 bar; grid-row: bar / span 2 foo;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / foo; -webkit-grid-row: span 2 bar / bar;"
</del><ins>+ <div style="grid-column: span 2 foo / foo; grid-row: span 2 bar / bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / bar; -webkit-grid-row: span 2 bar / foo;"
</del><ins>+ <div style="grid-column: span 2 foo / bar; grid-row: span 2 bar / foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -183,22 +183,22 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 / span 2 foo; -webkit-grid-row: -1 / span 2 bar;"
</del><ins>+ <div style="grid-column: -1 / span 2 foo; grid-row: -1 / span 2 bar;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / -1; -webkit-grid-row: span 2 bar / -1;"
</del><ins>+ <div style="grid-column: span 2 foo / -1; grid-row: span 2 bar / -1;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 foo / span 2 foo; -webkit-grid-row: -1 bar / span 2 bar;"
</del><ins>+ <div style="grid-column: -1 foo / span 2 foo; grid-row: -1 bar / span 2 bar;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 foo / span 2 bar; -webkit-grid-row: -1 bar / span 2 foo;"
</del><ins>+ <div style="grid-column: -1 foo / span 2 bar; grid-row: -1 bar / span 2 foo;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / -1 foo; -webkit-grid-row: span 2 bar / -1 bar;"
</del><ins>+ <div style="grid-column: span 2 foo / -1 foo; grid-row: span 2 bar / -1 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / -1 bar; -webkit-grid-row: span 2 bar / -1 foo;"
</del><ins>+ <div style="grid-column: span 2 foo / -1 bar; grid-row: span 2 bar / -1 foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -206,28 +206,28 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 foo / span foo; -webkit-grid-row: 2 bar / span bar;"
</del><ins>+ <div style="grid-column: 2 foo / span foo; grid-row: 2 bar / span bar;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo / span bar; -webkit-grid-row: 2 bar / span foo;"
</del><ins>+ <div style="grid-column: 2 foo / span bar; grid-row: 2 bar / span foo;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo / span 2 foo; -webkit-grid-row: 2 bar / span 2 bar;"
</del><ins>+ <div style="grid-column: 2 foo / span 2 foo; grid-row: 2 bar / span 2 bar;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 foo / span 2 bar; -webkit-grid-row: 2 bar / span 2 foo;"
</del><ins>+ <div style="grid-column: 2 foo / span 2 bar; grid-row: 2 bar / span 2 foo;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / 2 foo; -webkit-grid-row: span bar / 2 bar;"
</del><ins>+ <div style="grid-column: span foo / 2 foo; grid-row: span bar / 2 bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / 2 bar; -webkit-grid-row: span bar / 2 foo;"
</del><ins>+ <div style="grid-column: span foo / 2 bar; grid-row: span bar / 2 foo;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / 2 foo; -webkit-grid-row: span 2 bar / 2 bar;"
</del><ins>+ <div style="grid-column: span 2 foo / 2 foo; grid-row: span 2 bar / 2 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / 2 bar; -webkit-grid-row: span 2 bar / 2 foo;"
</del><ins>+ <div style="grid-column: span 2 foo / 2 bar; grid-row: span 2 bar / 2 foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -235,28 +235,28 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -2 foo / span foo; -webkit-grid-row: -2 bar / span bar;"
</del><ins>+ <div style="grid-column: -2 foo / span foo; grid-row: -2 bar / span bar;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 foo / span bar; -webkit-grid-row: -2 bar / span foo;"
</del><ins>+ <div style="grid-column: -2 foo / span bar; grid-row: -2 bar / span foo;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 foo / span 2 foo; -webkit-grid-row: -2 bar / span 2 bar;"
</del><ins>+ <div style="grid-column: -2 foo / span 2 foo; grid-row: -2 bar / span 2 bar;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 foo / span 2 bar; -webkit-grid-row: -2 bar / span 2 foo;"
</del><ins>+ <div style="grid-column: -2 foo / span 2 bar; grid-row: -2 bar / span 2 foo;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / -2 foo; -webkit-grid-row: span bar / -2 bar;"
</del><ins>+ <div style="grid-column: span foo / -2 foo; grid-row: span bar / -2 bar;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span foo / -2 bar; -webkit-grid-row: span bar / -2 foo;"
</del><ins>+ <div style="grid-column: span foo / -2 bar; grid-row: span bar / -2 foo;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / -2 foo; -webkit-grid-row: span 2 bar / -2 bar;"
</del><ins>+ <div style="grid-column: span 2 foo / -2 foo; grid-row: span 2 bar / -2 bar;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 foo / -2 bar; -webkit-grid-row: span 2 bar / -2 foo;"
</del><ins>+ <div style="grid-column: span 2 foo / -2 bar; grid-row: span 2 bar / -2 foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -264,25 +264,25 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 middle; -webkit-grid-row: 1 middle;"
</del><ins>+ <div style="grid-column: 1 middle; grid-row: 1 middle;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 middle; -webkit-grid-row: 2 middle;"
</del><ins>+ <div style="grid-column: 2 middle; grid-row: 2 middle;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 3 middle; -webkit-grid-row: 3 middle;"
</del><ins>+ <div style="grid-column: 3 middle; grid-row: 3 middle;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 4 middle; -webkit-grid-row: 4 middle;"
</del><ins>+ <div style="grid-column: 4 middle; grid-row: 4 middle;"
</ins><span class="cx"> data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 middle; -webkit-grid-row: 5 middle;"
</del><ins>+ <div style="grid-column: 5 middle; grid-row: 5 middle;"
</ins><span class="cx"> data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 middle / 4 middle; -webkit-grid-row: 2 middle / 4 middle;"
</del><ins>+ <div style="grid-column: 2 middle / 4 middle; grid-row: 2 middle / 4 middle;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 middle / 3 middle; -webkit-grid-row: 5 middle / 3 middle;"
</del><ins>+ <div style="grid-column: 5 middle / 3 middle; grid-row: 5 middle / 3 middle;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -290,25 +290,25 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 middle; -webkit-grid-row: -1 middle;"
</del><ins>+ <div style="grid-column: -1 middle; grid-row: -1 middle;"
</ins><span class="cx"> data-offset-x="90" data-offset-y="50" data-expected-width="100" data-expected-height="60">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 middle; -webkit-grid-row: -2 middle;"
</del><ins>+ <div style="grid-column: -2 middle; grid-row: -2 middle;"
</ins><span class="cx"> data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -3 middle; -webkit-grid-row: -3 middle;"
</del><ins>+ <div style="grid-column: -3 middle; grid-row: -3 middle;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -4 middle; -webkit-grid-row: -4 middle;"
</del><ins>+ <div style="grid-column: -4 middle; grid-row: -4 middle;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -5 middle; -webkit-grid-row: -5 middle;"
</del><ins>+ <div style="grid-column: -5 middle; grid-row: -5 middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 middle / -4 middle; -webkit-grid-row: -2 middle / -4 middle;"
</del><ins>+ <div style="grid-column: -2 middle / -4 middle; grid-row: -2 middle / -4 middle;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -5 middle / -3 middle; -webkit-grid-row: -5 middle / -3 middle;"
</del><ins>+ <div style="grid-column: -5 middle / -3 middle; grid-row: -5 middle / -3 middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -316,25 +316,25 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 vertical; -webkit-grid-row: 1 horizontal;"
</del><ins>+ <div style="grid-column: 1 vertical; grid-row: 1 horizontal;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 vertical; -webkit-grid-row: 2 horizontal;"
</del><ins>+ <div style="grid-column: 2 vertical; grid-row: 2 horizontal;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 3 vertical; -webkit-grid-row: 3 horizontal;"
</del><ins>+ <div style="grid-column: 3 vertical; grid-row: 3 horizontal;"
</ins><span class="cx"> data-offset-x="150" data-offset-y="90" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 4 vertical; -webkit-grid-row: 4 horizontal;"
</del><ins>+ <div style="grid-column: 4 vertical; grid-row: 4 horizontal;"
</ins><span class="cx"> data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 vertical; -webkit-grid-row: 5 horizontal;"
</del><ins>+ <div style="grid-column: 5 vertical; grid-row: 5 horizontal;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 2 vertical / 4 vertical; -webkit-grid-row: 2 horizontal / 4 horizontal;"
</del><ins>+ <div style="grid-column: 2 vertical / 4 vertical; grid-row: 2 horizontal / 4 horizontal;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="30" data-expected-width="110" data-expected-height="65">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 5 vertical / 3 vertical; -webkit-grid-row: 5 horizontal / 3 horizontal;"
</del><ins>+ <div style="grid-column: 5 vertical / 3 vertical; grid-row: 5 horizontal / 3 horizontal;"
</ins><span class="cx"> data-offset-x="150" data-offset-y="90" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -342,25 +342,25 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 vertical; -webkit-grid-row: -1 horizontal;"
</del><ins>+ <div style="grid-column: -1 vertical; grid-row: -1 horizontal;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 vertical; -webkit-grid-row: -2 horizontal;"
</del><ins>+ <div style="grid-column: -2 vertical; grid-row: -2 horizontal;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -3 vertical; -webkit-grid-row: -3 horizontal;"
</del><ins>+ <div style="grid-column: -3 vertical; grid-row: -3 horizontal;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -4 vertical; -webkit-grid-row: -4 horizontal;"
</del><ins>+ <div style="grid-column: -4 vertical; grid-row: -4 horizontal;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -5 vertical; -webkit-grid-row: -5 horizontal;"
</del><ins>+ <div style="grid-column: -5 vertical; grid-row: -5 horizontal;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -2 vertical / -4 vertical; -webkit-grid-row: -2 horizontal / -4 horizontal;"
</del><ins>+ <div style="grid-column: -2 vertical / -4 vertical; grid-row: -2 horizontal / -4 horizontal;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -5 vertical / -3 vertical; -webkit-grid-row: -5 horizontal / -3 horizontal;"
</del><ins>+ <div style="grid-column: -5 vertical / -3 vertical; grid-row: -5 horizontal / -3 horizontal;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -368,28 +368,28 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / span middle; -webkit-grid-row: 1 / span middle;"
</del><ins>+ <div style="grid-column: 1 / span middle; grid-row: 1 / span middle;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span middle / 1; -webkit-grid-row: span middle / 1;"
</del><ins>+ <div style="grid-column: span middle / 1; grid-row: span middle / 1;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: 1 / span 2 middle; -webkit-grid-row: 1 / span 2 middle;"
</del><ins>+ <div style="grid-column: 1 / span 2 middle; grid-row: 1 / span 2 middle;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 middle / 1; -webkit-grid-row: span 2 middle / 1;"
</del><ins>+ <div style="grid-column: span 2 middle / 1; grid-row: span 2 middle / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: middle / span middle; -webkit-grid-row: middle / span middle;"
</del><ins>+ <div style="grid-column: middle / span middle; grid-row: middle / span middle;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span middle / middle; -webkit-grid-row: span middle / middle;"
</del><ins>+ <div style="grid-column: span middle / middle; grid-row: span middle / middle;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: middle / span 2 middle; -webkit-grid-row: middle / span 2 middle;"
</del><ins>+ <div style="grid-column: middle / span 2 middle; grid-row: middle / span 2 middle;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 middle / middle; -webkit-grid-row: span 2 middle / middle;"
</del><ins>+ <div style="grid-column: span 2 middle / middle; grid-row: span 2 middle / middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -397,28 +397,28 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: -1 / span middle; -webkit-grid-row: -1 / span middle;"
</del><ins>+ <div style="grid-column: -1 / span middle; grid-row: -1 / span middle;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span middle / -1; -webkit-grid-row: span middle / -1;"
</del><ins>+ <div style="grid-column: span middle / -1; grid-row: span middle / -1;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 / span 2 middle; -webkit-grid-row: -1 / span 2 middle;"
</del><ins>+ <div style="grid-column: -1 / span 2 middle; grid-row: -1 / span 2 middle;"
</ins><span class="cx"> data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 middle / -1; -webkit-grid-row: span 2 middle / -1;"
</del><ins>+ <div style="grid-column: span 2 middle / -1; grid-row: span 2 middle / -1;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 middle / span middle; -webkit-grid-row: -1 middle / span middle;"
</del><ins>+ <div style="grid-column: -1 middle / span middle; grid-row: -1 middle / span middle;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span middle / -1 middle; -webkit-grid-row: span middle / -1 middle;"
</del><ins>+ <div style="grid-column: span middle / -1 middle; grid-row: span middle / -1 middle;"
</ins><span class="cx"> data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -1 middle / span 2 middle; -webkit-grid-row: -1 middle / span 2 middle;"
</del><ins>+ <div style="grid-column: -1 middle / span 2 middle; grid-row: -1 middle / span 2 middle;"
</ins><span class="cx"> data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 middle / -1 middle; -webkit-grid-row: span 2 middle / -1 middle;"
</del><ins>+ <div style="grid-column: span 2 middle / -1 middle; grid-row: span 2 middle / -1 middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -426,16 +426,16 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: span middle / 6; -webkit-grid-row: span middle / 6;"
</del><ins>+ <div style="grid-column: span middle / 6; grid-row: span middle / 6;"
</ins><span class="cx"> data-offset-x="80" data-offset-y="45" data-expected-width="130" data-expected-height="75">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: span 2 middle / 6; -webkit-grid-row: span 2 middle / 6;"
</del><ins>+ <div style="grid-column: span 2 middle / 6; grid-row: span 2 middle / 6;"
</ins><span class="cx"> data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -6 / span middle; -webkit-grid-row: -6 / span middle;"
</del><ins>+ <div style="grid-column: -6 / span middle; grid-row: -6 / span middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="45">
</span><span class="cx"> </div>
</span><del>- <div style="-webkit-grid-column: -6 / span 2 middle; -webkit-grid-row: -6 / span 2 middle;"
</del><ins>+ <div style="grid-column: -6 / span 2 middle; grid-row: -6 / span 2 middle;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithborderinfrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-fr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-fr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-fr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,7 +4,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .frGrid {
</span><del>- -webkit-grid: 1fr / 1fr;
</del><ins>+ grid: 1fr / 1fr;
</ins><span class="cx"> font: 50px/1 Ahem;
</span><span class="cx"> border: 50px solid magenta;
</span><span class="cx"> width: 300px;
</span><span class="lines">@@ -20,13 +20,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .frRowsGrid {
</span><del>- -webkit-grid-auto-columns: 100px;
- -webkit-grid-auto-rows: minmax(0, 1fr);
</del><ins>+ grid-auto-columns: 100px;
+ grid-auto-rows: minmax(0, 1fr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .frColsGrid {
</span><del>- -webkit-grid-auto-columns: minmax(0, 1fr);
- -webkit-grid-auto-rows: 100px;
</del><ins>+ grid-auto-columns: minmax(0, 1fr);
+ grid-auto-rows: 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> span {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithborderinintrinsichtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-intrinsic.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-intrinsic.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-border-in-intrinsic.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> font: 50px/1 Ahem;
</span><span class="cx"> border: 5px dashed magenta;
</span><span class="cx"> width: 150px;
</span><span class="lines">@@ -12,16 +12,16 @@
</span><span class="cx"> border: 50px solid rgba(0, 255, 250, 0.5);
</span><span class="cx"> }
</span><span class="cx"> .gridFR {
</span><del>- -webkit-grid: 1fr / 1fr;
</del><ins>+ grid: 1fr / 1fr;
</ins><span class="cx"> }
</span><span class="cx"> .gridMaxContent {
</span><del>- -webkit-grid: -webkit-max-content / -webkit-max-content;
</del><ins>+ grid: -webkit-max-content / -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContent {
</span><del>- -webkit-grid: -webkit-min-content / -webkit-min-content;
</del><ins>+ grid: -webkit-min-content / -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridAuto {
</span><del>- -webkit-grid: auto / auto;
</del><ins>+ grid: auto / auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMaxMinMax {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: minmax(10px, -webkit-min-content) minmax(50px, 100px);
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: minmax(10px, -webkit-min-content) minmax(50px, 100px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoAuto {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: auto auto;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: auto auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .sizedToGridAreaMinSizes {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentminmaxheightdynamichtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 70px 140px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 70px 140px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #minHeightPercent {
</span><span class="lines">@@ -22,7 +22,7 @@
</span><span class="cx"> function testLayout(gridElementID, gridTracks, size)
</span><span class="cx"> {
</span><span class="cx"> var gridElement = document.getElementById(gridElementID);
</span><del>- gridElement.style.webkitGridTemplateRows = gridTracks.rows;
</del><ins>+ gridElement.style.gridTemplateRows = gridTracks.rows;
</ins><span class="cx"> var gridItem = gridElement.firstChild.nextSibling;
</span><span class="cx"> gridItem.setAttribute("data-expected-width", size.width);
</span><span class="cx"> gridItem.setAttribute("data-expected-height", size.height);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexchangerepaintexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint-expected.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px;
- -webkit-grid-template-columns: 200px;
</del><ins>+ grid-template-rows: 100px;
+ grid-template-columns: 200px;
</ins><span class="cx"> margin-top: 10px;
</span><span class="cx"> }
</span><span class="cx"> .green {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexchangerepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px;
- -webkit-grid-template-columns: 200px;
</del><ins>+ grid-template-rows: 100px;
+ grid-template-columns: 200px;
</ins><span class="cx"> margin-top: 10px;
</span><span class="cx"> }
</span><span class="cx"> .red {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontextexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context-expected.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px;
- -webkit-grid-template-columns: 200px 200px;
</del><ins>+ grid-template-rows: 100px;
+ grid-template-columns: 200px 200px;
</ins><span class="cx"> margin-top: 10px;
</span><span class="cx"> }
</span><span class="cx"> .green {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexstackingcontexthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: 100px;
- -webkit-grid-template-columns: 200px 200px;
</del><ins>+ grid-template-rows: 100px;
+ grid-template-columns: 200px 200px;
</ins><span class="cx"> margin-top: 10px;
</span><span class="cx"> }
</span><span class="cx"> .red {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemzindexsupporthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-support.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-support.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-support.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -18,7 +18,7 @@
</span><span class="cx">
</span><span class="cx"> debug('Test z-index property once the element becomes a grid item');
</span><span class="cx"> var grid = document.getElementById("grid");
</span><del>-grid.style.display = "-webkit-grid";
</del><ins>+grid.style.display = "grid";
</ins><span class="cx"> shouldBe("getComputedStyle(item, '').getPropertyValue('z-index')", "'-10'");
</span><span class="cx"> item.style.zIndex = "10";
</span><span class="cx"> shouldBe("getComputedStyle(item, '').getPropertyValue('z-index')", "'10'");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemsshouldnotbestretchedwhenheightorwidthormarginchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-width-or-margin-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -15,19 +15,19 @@
</span><span class="cx"> #fromMarginAuto { margin: auto; }
</span><span class="cx"> </style>
</span><span class="cx"> <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>
</span><del>-<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
</span><span class="cx"> <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
</span><span class="cx"> </div>
</span><del>-<div class="grid fit-content" style="-webkit-grid-template: 200px 200px / 200px 200px;">
</del><ins>+<div class="grid fit-content" style="grid-template: 200px 200px / 200px 200px;">
</ins><span class="cx"> <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
</span><span class="cx"> <div style="width: 150px; height: 100px"></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,15 +10,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
</del><ins>+ grid-auto-columns: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,15 +10,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
</del><ins>+ grid-auto-columns: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentdistributionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,15 +10,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
</del><ins>+ grid-auto-columns: 20px;
+ grid-auto-rows: 40px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .stretchedGrid {
</span><del>- -webkit-grid-auto-columns: auto;
</del><ins>+ grid-auto-columns: auto;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticallrhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontentverticalrlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 300px;
</span><span class="cx"> height: 200px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridjustifycontenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 50px 50px;
</del><ins>+ grid: 100px 100px / 50px 50px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpercenttrackmarginborderpaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,8 +6,8 @@
</span><span class="cx"> .grid {
</span><span class="cx"> width: 100px;
</span><span class="cx"> height: 100px;
</span><del>- -webkit-grid-template-columns: 20% 50% 30%;
- -webkit-grid-template-rows: 40% 60%;
</del><ins>+ grid-template-columns: 20% 50% 30%;
+ grid-template-rows: 40% 60%;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .margin {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpercenttrackscrollbarhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-scrollbar.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-scrollbar.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-scrollbar.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,8 +6,8 @@
</span><span class="cx"> .grid {
</span><span class="cx"> width: 100px;
</span><span class="cx"> height: 100px;
</span><del>- -webkit-grid-template-columns: 20% 50% 30%;
- -webkit-grid-template-rows: 40% 60%;
</del><ins>+ grid-template-columns: 20% 50% 30%;
+ grid-template-rows: 40% 60%;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .scroll {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositionedchildrenwritingmodeshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-children-writing-modes.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> margin: 5px;
</span><span class="cx"> width: 50px;
</span><span class="cx"> height: 25px;
</span><del>- -webkit-grid: 20px / 30px;
</del><ins>+ grid: 20px / 30px;
</ins><span class="cx"> padding: 5px 10px 15px 20px;
</span><span class="cx"> border-style: solid;
</span><span class="cx"> border-width: 5px 10px 15px 20px;
</span><span class="lines">@@ -21,8 +21,8 @@
</span><span class="cx">
</span><span class="cx"> .onlyFirstRowOnlyFirstColumn {
</span><span class="cx"> background-color: green;
</span><del>- -webkit-grid-column: 1 / 2;
- -webkit-grid-row: 1 / 2;
</del><ins>+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .offsets {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundrtlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-rtl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> border: 5px solid black;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> border: 5px solid black;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemscontentalignmentrtlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 50px;
- -webkit-grid-template-rows: 70px 30px;
</del><ins>+ grid-template-columns: 100px 50px;
+ grid-template-rows: 70px 30px;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> margin: 5px;
</span><span class="lines">@@ -32,361 +32,361 @@
</span><span class="cx"> <p>This test checks the behavior of the positioned items in a grid using content alignment in RTL.</p>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="238" data-offset-y="0" data-expected-width="163" data-expected-height="95">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="238" data-offset-y="0" data-expected-width="163" data-expected-height="95">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemscontentalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 50px;
- -webkit-grid-template-rows: 70px 30px;
</del><ins>+ grid-template-columns: 100px 50px;
+ grid-template-rows: 70px 30px;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> margin: 5px;
</span><span class="lines">@@ -32,361 +32,361 @@
</span><span class="cx"> <p>This test checks the behavior of the positioned items in a grid using content alignment.</p>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="288" data-offset-y="145" data-expected-width="113" data-expected-height="55">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="288" data-offset-y="145" data-expected-width="113" data-expected-height="55">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentCenter">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentEnd">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceBetween">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceAround">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentSpaceEvenly">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsgapsrtlhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,9 +3,9 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px 100px 100px;
- -webkit-grid-template-rows: 50px 50px;
- -webkit-grid-gap: 25px 50px;
</del><ins>+ grid-template-columns: 100px 100px 100px 100px;
+ grid-template-rows: 50px 50px;
+ grid-gap: 25px 50px;
</ins><span class="cx"> width: 800px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -34,265 +34,265 @@
</span><span class="cx"> <p>This test checks the behavior of the positioned items in a grid container with gaps in RTL.</p>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
</del><ins>+ <div style="grid-column: 1 / auto; grid-row: 1 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
</del><ins>+ <div style="grid-column: 1 / 3; grid-row: 1 / 3;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
</del><ins>+ <div style="grid-column: 1 / 4; grid-row: 1 / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
</del><ins>+ <div style="grid-column: 1 / 5; grid-row: 1 / 5;"
</ins><span class="cx"> data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;"
</ins><span class="cx"> data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
</del><ins>+ <div style="grid-column: 1 / 6; grid-row: 1 / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
</del><ins>+ <div style="grid-column: 2 / 5; grid-row: 2 / 5;"
</ins><span class="cx"> data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;"
</ins><span class="cx"> data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
</del><ins>+ <div style="grid-column: 2 / 6; grid-row: 2 / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
</del><ins>+ <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="365" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
</del><ins>+ <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="265" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
</del><ins>+ <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
</ins><span class="cx"> data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="800" data-offset-y="15" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="700" data-offset-y="15" data-expected-width="115" data-expected-height="65">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
</del><ins>+ <div style="grid-column: auto / 3; grid-row: auto / 3;"
</ins><span class="cx"> data-offset-x="550" data-offset-y="15" data-expected-width="265" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
</del><ins>+ <div style="grid-column: auto / 4; grid-row: auto / 4;"
</ins><span class="cx"> data-offset-x="400" data-offset-y="15" data-expected-width="415" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
</del><ins>+ <div style="grid-column: auto / 5; grid-row: auto / 5;"
</ins><span class="cx"> data-offset-x="250" data-offset-y="15" data-expected-width="565" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;"
</ins><span class="cx"> data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
</del><ins>+ <div style="grid-column: auto / 6; grid-row: auto / 6;"
</ins><span class="cx"> data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsgapshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,9 +3,9 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px 100px 100px;
- -webkit-grid-template-rows: 50px 50px;
- -webkit-grid-gap: 25px 50px;
</del><ins>+ grid-template-columns: 100px 100px 100px 100px;
+ grid-template-rows: 50px 50px;
+ grid-gap: 25px 50px;
</ins><span class="cx"> width: 800px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -34,265 +34,265 @@
</span><span class="cx"> <p>This test checks the behavior of the positioned items in a grid container with gaps.</p>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
</del><ins>+ <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
</del><ins>+ <div style="grid-column: 1 / auto; grid-row: 1 / auto;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
</del><ins>+ <div style="grid-column: 1 / 3; grid-row: 1 / 3;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
</del><ins>+ <div style="grid-column: 1 / 4; grid-row: 1 / 4;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
</del><ins>+ <div style="grid-column: 1 / 5; grid-row: 1 / 5;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
</del><ins>+ <div style="grid-column: 1 / 6; grid-row: 1 / 6;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
</del><ins>+ <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
</del><ins>+ <div style="grid-column: 2 / 5; grid-row: 2 / 5;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
</del><ins>+ <div style="grid-column: 2 / 6; grid-row: 2 / 6;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
</del><ins>+ <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;"
</ins><span class="cx"> data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
</del><ins>+ <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
</ins><span class="cx"> data-offset-x="465" data-offset-y="15" data-expected-width="365" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;"
</ins><span class="cx"> data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
</del><ins>+ <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="15" data-expected-width="265" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;"
</ins><span class="cx"> data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
</del><ins>+ <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
</del><ins>+ <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="115" data-expected-height="65">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
</del><ins>+ <div style="grid-column: auto / 3; grid-row: auto / 3;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="265" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
</del><ins>+ <div style="grid-column: auto / 4; grid-row: auto / 4;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="415" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
</del><ins>+ <div style="grid-column: auto / 5; grid-row: auto / 5;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="565" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
</del><ins>+ <div style="grid-column: auto / 6; grid-row: auto / 6;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="offsets" style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
</del><ins>+ <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlinehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -20,26 +20,26 @@
</span><span class="cx">
</span><span class="cx"> .startImplicitLine {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: 5;
- -webkit-grid-row: 8;
</del><ins>+ grid-column: 5;
+ grid-row: 8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endImplicitLine {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 1 / 5;
- -webkit-grid-row: 1 / 8;
</del><ins>+ grid-column: 1 / 5;
+ grid-row: 1 / 8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .startImplicitLineSpan {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: span 5;
- -webkit-grid-row: span 8;
</del><ins>+ grid-column: span 5;
+ grid-row: span 8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endImplicitLineSpan {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 1 / span 5;
- -webkit-grid-row: 1 / span 8;
</del><ins>+ grid-column: 1 / span 5;
+ grid-row: 1 / span 8;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -14,8 +14,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid-columns-rows {
</span><del>- -webkit-grid-template-columns: 100px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 100px;
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .absolute {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -30,169 +30,169 @@
</span><span class="cx"> <p>This test checks that positioned grid items can be placed directly on the padding.</p>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: -5 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: -5 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 3 / 5;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / 5;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;"
</ins><span class="cx"> data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: span 2 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: span 2 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 3 / span 2;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / span 2;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;"
</ins><span class="cx"> data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: foo / 1;"
</del><ins>+ <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: foo / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
</ins><span class="cx"> data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 3 / foo;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / foo;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;"
</ins><span class="cx"> data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: -5 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: -5 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 3 / 5;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / 5;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;"
</ins><span class="cx"> data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: span 2 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: span 2 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 3 / span 2;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / span 2;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;"
</ins><span class="cx"> data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid directionRTL">
</span><del>- <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: foo / 1;"
</del><ins>+ <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: foo / 1;"
</del><ins>+ <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: 1 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;"
</ins><span class="cx"> data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 3 / foo;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / foo;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;"
</ins><span class="cx"> data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 2 / 3;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlinehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -20,20 +20,20 @@
</span><span class="cx">
</span><span class="cx"> .startUnknownLine {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: foo / 3;
- -webkit-grid-row: bar / 3;
</del><ins>+ grid-column: foo / 3;
+ grid-row: bar / 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endUnknownLine {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 1 / foo;
- -webkit-grid-row: 1 / bar;
</del><ins>+ grid-column: 1 / foo;
+ grid-row: 1 / bar;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .startAndEndUnknownLines {
</span><span class="cx"> background-color: green;
</span><del>- -webkit-grid-column: foo / bar;
- -webkit-grid-row: foo / bar;
</del><ins>+ grid-column: foo / bar;
+ grid-row: foo / bar;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,10 +3,10 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 200px 300px;
- -webkit-grid-template-rows: 150px 250px;
- -webkit-grid-auto-columns: 100px;
- -webkit-grid-auto-rows: 50px;
</del><ins>+ grid-template-columns: 200px 300px;
+ grid-template-rows: 150px 250px;
+ grid-auto-columns: 100px;
+ grid-auto-rows: 50px;
</ins><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="cx"> border: 5px solid black;
</span><span class="lines">@@ -27,8 +27,8 @@
</span><span class="cx">
</span><span class="cx"> .sixRowsAndSixColumns {
</span><span class="cx"> background: magenta;
</span><del>- -webkit-grid-row: -5 / 5;
- -webkit-grid-column: -5 / 5;
</del><ins>+ grid-row: -5 / 5;
+ grid-column: -5 / 5;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -41,7 +41,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -50,7 +50,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -59,7 +59,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -68,7 +68,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -77,7 +77,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -4 / 1; -webkit-grid-row: -4 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -86,7 +86,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -4 / 2; -webkit-grid-row: -4 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -95,7 +95,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 4; -webkit-grid-row: 3 / 4;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
</ins><span class="cx"> data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -104,7 +104,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -113,7 +113,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
</ins><span class="cx"> data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -122,7 +122,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
</del><ins>+ <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -131,7 +131,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -140,7 +140,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -149,7 +149,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -4 / 1; -webkit-grid-row: -4 / 1;"
</del><ins>+ <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
</ins><span class="cx"> data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -158,7 +158,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: -4 / 2; -webkit-grid-row: -4 / 2;"
</del><ins>+ <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
</ins><span class="cx"> data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -167,7 +167,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 3 / 4; -webkit-grid-row: 3 / 4;"
</del><ins>+ <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -176,7 +176,7 @@
</span><span class="cx"> <div class="sixRowsAndSixColumns"
</span><span class="cx"> data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
</span><span class="cx"> </div>
</span><del>- <div class="absolute" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
</del><ins>+ <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
</ins><span class="cx"> data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpreferredlogicalwidthshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,33 +10,33 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinContentFixed {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 40px) minmax(-webkit-min-content, 40px);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 40px) minmax(-webkit-min-content, 40px);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedMinContent {
</span><del>- -webkit-grid-template-columns: minmax(30px, -webkit-min-content) minmax(30px, -webkit-min-content);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(30px, -webkit-min-content) minmax(30px, -webkit-min-content);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(40px, -webkit-max-content) minmax(40px, -webkit-max-content);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(40px, -webkit-max-content) minmax(40px, -webkit-max-content);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedFixed {
</span><del>- -webkit-grid-template-columns: minmax(30px, 40px) minmax(30px, 40px);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(30px, 40px) minmax(30px, 40px);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoContent {
</span><del>- -webkit-grid-template-columns: auto auto;
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: auto auto;
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedFraction {
</span><del>- -webkit-grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
- -webkit-grid-template-rows: 10px;
</del><ins>+ grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
+ grid-template-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .margins {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridrepeatcalcexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,12 +1,12 @@
</span><del>-Tests using calculated value in function() for '-webkit-grid-template-rows' CSS property works.
</del><ins>+Tests using calculated value in function() for 'grid-template-rows' CSS property works.
</ins><span class="cx">
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS testDiv.style['-webkit-grid-template-rows'] is ""
-testDiv.style['-webkit-grid-template-rows'] = 'repeat(calc(1 + 1), 18px)'
-PASS testDiv.style['-webkit-grid-template-rows'] is "18px 18px"
-PASS window.getComputedStyle(testDiv).getPropertyValue('-webkit-grid-template-rows') is "18px 18px"
</del><ins>+PASS testDiv.style['grid-template-rows'] is ""
+testDiv.style['grid-template-rows'] = 'repeat(calc(1 + 1), 18px)'
+PASS testDiv.style['grid-template-rows'] is "18px 18px"
+PASS window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows') is "18px 18px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridrepeatcalchtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-repeat-calc.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,15 +3,15 @@
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> <div id="testDiv" style="width: 400px; height: 400px"></div>
</span><span class="cx"> <script>
</span><del>-description("Tests using calculated value in function() for '-webkit-grid-template-rows' CSS property works.");
</del><ins>+description("Tests using calculated value in function() for 'grid-template-rows' CSS property works.");
</ins><span class="cx">
</span><span class="cx"> var testDiv = document.getElementById("testDiv");
</span><del>-//-webkit-grid-template-rows: repeat(1, 18px);
-// -webkit-grid-template-columns: repeat(1, 15%);
-shouldBeEmptyString("testDiv.style['-webkit-grid-template-rows']");
-evalAndLog("testDiv.style['-webkit-grid-template-rows'] = 'repeat(calc(1 + 1), 18px)'");
-shouldBeEqualToString("testDiv.style['-webkit-grid-template-rows']", "18px 18px");
-shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('-webkit-grid-template-rows')", "18px 18px");
</del><ins>+//grid-template-rows: repeat(1, 18px);
+// grid-template-columns: repeat(1, 15%);
+shouldBeEmptyString("testDiv.style['grid-template-rows']");
+evalAndLog("testDiv.style['grid-template-rows'] = 'repeat(calc(1 + 1), 18px)'");
+shouldBeEqualToString("testDiv.style['grid-template-rows']", "18px 18px");
+shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('grid-template-rows')", "18px 18px");
</ins><span class="cx">
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandcomputedstylecrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-computed-style-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-computed-style-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-computed-style-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> </script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px / 50px;
</del><ins>+ grid: 100px / 50px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <p>This test checks that getting computed style of grid shorthand does not crash.</p>
</span><span class="lines">@@ -14,5 +14,5 @@
</span><span class="cx"> </div>
</span><span class="cx"> <script>
</span><span class="cx"> var grid = document.getElementById("grid");
</span><del>- getComputedStyle(grid).webkitGrid;
</del><ins>+ getComputedStyle(grid).grid;
</ins><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,266 +4,266 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting the longhand values when shorthand is set through CSS.
</span><del>-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-columns') is "15px"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow') is "column dense"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
-PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
</del><ins>+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-columns') is "15px"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplate1, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow') is "column dense"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "column"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px"
</ins><span class="cx">
</span><span class="cx"> Test setting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'row')
</span><del>-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
</del><ins>+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNoneAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash2, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithWrongSlash3, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowRowAndColumn, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithoutAutoFlowAndExtraBreath, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString1, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString2, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoFlowString3, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndAutoFlow, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithTemplateAndMisplacedString1, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting 'grid' shorthand through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS element.style.webkitGridTemplateColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px"
-PASS element.style.webkitGridTemplateRows is "20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS element.style.webkitGridAutoFlow is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS element.style.webkitGridAutoColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS element.style.webkitGridAutoRows is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS element.style.webkitGridTemplateColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[line] 20px"
-PASS element.style.webkitGridTemplateRows is "[line] 20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS element.style.webkitGridTemplateAreas is "\"a\""
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS element.style.webkitGridAutoFlow is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS element.style.webkitGridAutoColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS element.style.webkitGridAutoRows is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
-PASS element.style.webkitGridAutoFlow is "row dense"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
-PASS element.style.webkitGridAutoColumns is "20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
-PASS element.style.webkitGridAutoRows is "20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
-PASS element.style.webkitGridAutoFlow is "column"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS element.style.webkitGridAutoColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
-PASS element.style.webkitGridAutoRows is "20px"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
+PASS element.style.gridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px"
+PASS element.style.gridTemplateRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS element.style.gridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
+PASS element.style.gridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[line] 20px"
+PASS element.style.gridTemplateRows is "[line] 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS element.style.gridTemplateAreas is "\"a\""
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS element.style.gridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row dense"
+PASS element.style.gridAutoFlow is "row dense"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
+PASS element.style.gridAutoRows is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px"
+PASS element.style.gridAutoColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px"
+PASS element.style.gridAutoRows is "20px"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto'
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
-PASS element.style.webkitGridAutoFlow is "column"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "20px"
-PASS element.style.webkitGridAutoColumns is "20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS element.style.webkitGridAutoRows is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS element.style.webkitGridAutoFlow is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS element.style.webkitGridAutoColumns is "initial"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS element.style.webkitGridAutoRows is "initial"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column"
+PASS element.style.gridAutoFlow is "column"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px"
+PASS element.style.gridAutoColumns is "20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px"
+PASS element.style.gridAutoRows is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row"
+PASS element.style.gridAutoFlow is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS element.style.gridAutoColumns is "initial"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
+PASS element.style.gridAutoRows is "initial"
</ins><span class="cx">
</span><span class="cx"> Test the inherit value on reset-only subproperties (grid-*-gap)
</span><del>-PASS getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-column-gap') is "0px"
-PASS getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-row-gap') is "0px"
-PASS getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-column-gap') is "20px"
-PASS getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-row-gap') is "100px"
</del><ins>+PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "0px"
+PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "0px"
+PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "20px"
+PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "100px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridshorthandgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,88 +4,88 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> #gridWithDense {
</span><del>- -webkit-grid: dense;
</del><ins>+ grid: dense;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithTemplate {
</span><del>- -webkit-grid: 10px / 15px;
</del><ins>+ grid: 10px / 15px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithTemplate1 {
</span><del>- -webkit-grid: 10px / none;
</del><ins>+ grid: 10px / none;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithTemplateNone {
</span><del>- -webkit-grid: 10px / none;
</del><ins>+ grid: 10px / none;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowDenseAndRowsAndColumns {
</span><del>- -webkit-grid: dense 10px / 20px;
</del><ins>+ grid: dense 10px / 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowAndRows {
</span><del>- -webkit-grid: column 10px;
</del><ins>+ grid: column 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowDense {
</span><del>- -webkit-grid: dense 10px;
</del><ins>+ grid: dense 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowColumnDense {
</span><del>- -webkit-grid: column dense 10px;
</del><ins>+ grid: column dense 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowDenseRow {
</span><del>- -webkit-grid: dense row 10px;
</del><ins>+ grid: dense row 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowAndRowsAndColumns {
</span><del>- -webkit-grid: column 10px / 20px;
</del><ins>+ grid: column 10px / 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Bad values. */
</span><span class="cx">
</span><span class="cx"> #gridWithNone {
</span><del>- -webkit-grid: none;
</del><ins>+ grid: none;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowNoneAndRowsAndColumns {
</span><del>- -webkit-grid: none 10px / 20px;
</del><ins>+ grid: none 10px / 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowNone {
</span><del>- -webkit-grid: none 10px;
</del><ins>+ grid: none 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithExplicitAndImplicit {
</span><del>- -webkit-grid: 10px / 20px column;
</del><ins>+ grid: 10px / 20px column;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithMisplacedNone1 {
</span><del>- -webkit-grid: column 10px / none 20px;
</del><ins>+ grid: column 10px / none 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithMisplacedNone2 {
</span><del>- -webkit-grid: 10px / 20px none;
</del><ins>+ grid: 10px / 20px none;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithWrongSlash1 {
</span><del>- -webkit-grid: column / 10px;
</del><ins>+ grid: column / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithWrongSlash2 {
</span><del>- -webkit-grid: column 10px 20px;
</del><ins>+ grid: column 10px 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithWrongSlash3 {
</span><del>- -webkit-grid: 5x / 10px / 20px;
</del><ins>+ grid: 5x / 10px / 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowRowAndColumn {
</span><del>- -webkit-grid: row column 10px;
</del><ins>+ grid: row column 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithoutAutoFlowAndExtraBreath {
</span><del>- -webkit-grid: row 10px / 20px 30px;
</del><ins>+ grid: row 10px / 20px 30px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowString1 {
</span><del>- -webkit-grid: row 10px "a";
</del><ins>+ grid: row 10px "a";
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowString2 {
</span><del>- -webkit-grid: row "a" 10px;
</del><ins>+ grid: row "a" 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithAutoFlowString3 {
</span><del>- -webkit-grid: row "a";
</del><ins>+ grid: row "a";
</ins><span class="cx"> }
</span><span class="cx"> #gridWithTemplateAndAutoFlow {
</span><del>- -webkit-grid: 10px / 10px row;
</del><ins>+ grid: 10px / 10px row;
</ins><span class="cx"> }
</span><span class="cx"> #gridWithTemplateAndMisplacedString1 {
</span><del>- -webkit-grid: 10px / 10px "a";
</del><ins>+ grid: 10px / 10px "a";
</ins><span class="cx"> }
</span><span class="cx"> #gridWithMisplacedDense {
</span><del>- -webkit-grid: dense column dense;
</del><ins>+ grid: dense column dense;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -166,12 +166,12 @@
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "auto");
</span><del>- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
</del><ins>+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
</span><span class="lines">@@ -180,15 +180,15 @@
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test the inherit value on reset-only subproperties (grid-*-gap)");
</span><del>- document.body.style.webkitGridRowGap = "100px";
- document.body.style.webkitGridColumnGap = "20px";
</del><ins>+ document.body.style.gridRowGap = "100px";
+ document.body.style.gridColumnGap = "20px";
</ins><span class="cx"> var anotherElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(anotherElement);
</span><del>- shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-column-gap')", "0px");
- shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-row-gap')", "0px");
- anotherElement.style.webkitGrid = "inherit";
- shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-column-gap')", "20px");
- shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('-webkit-grid-row-gap')", "100px");
</del><ins>+ shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "0px");
+ shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "0px");
+ anotherElement.style.grid = "inherit";
+ shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap')", "20px");
+ shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap')", "100px");
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 200px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 200px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> width: 100%;
</span><span class="cx"> height: 100%;
</span><span class="cx"> border: 5px solid black;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridstrictorderingcrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,6 +8,6 @@
</span><span class="cx"> <p><a href="https://bugs.webkit.org/show_bug.cgi?id=108834">Bug 108834</a>: [CSS Grid Layout] Heap-buffer-overflow in std::sort</p>
</span><span class="cx"> <p>This test has PASSED if it doesn't CRASH.</p>
</span><span class="cx"> <div class="grid">
</span><del>- <div style="-webkit-grid-column: 100;"></div>
- <div style="-webkit-grid-row: 30;"></div>
</del><ins>+ <div style="grid-column: 100;"></div>
+ <div style="grid-row: 30;"></div>
</ins><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateareasemptystringcrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-empty-string-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-empty-string-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-empty-string-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,22 +8,22 @@
</span><span class="cx"> </script>
</span><span class="cx"> <style>
</span><span class="cx"> .space {
</span><del>- -webkit-grid-template-areas: "\0020";
</del><ins>+ grid-template-areas: "\0020";
</ins><span class="cx"> }
</span><span class="cx"> .tab {
</span><del>- -webkit-grid-template-areas: "\0009";
</del><ins>+ grid-template-areas: "\0009";
</ins><span class="cx"> }
</span><span class="cx"> .lineFeed {
</span><del>- -webkit-grid-template-areas: "\000A";
</del><ins>+ grid-template-areas: "\000A";
</ins><span class="cx"> }
</span><span class="cx"> .carriageReturn {
</span><del>- -webkit-grid-template-areas: "\000D";
</del><ins>+ grid-template-areas: "\000D";
</ins><span class="cx"> }
</span><span class="cx"> .formFeed {
</span><del>- -webkit-grid-template-areas: "\000C";
</del><ins>+ grid-template-areas: "\000C";
</ins><span class="cx"> }
</span><span class="cx"> .multipleSpace {
</span><del>- -webkit-grid-template-areas: " ";
</del><ins>+ grid-template-areas: " ";
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateareasgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,43 +4,43 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-areas set through CSS.
</span><del>-PASS getComputedStyle(gridWithDefaultTemplate).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(gridWithSingleStringTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"area\""
-PASS getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"first second\""
-PASS getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"first\" \"second\""
-PASS getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span span\""
-PASS getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
-PASS getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('-webkit-grid-template-areas') is "\"span\" \".\""
-PASS getComputedStyle(gridWithDotColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
-PASS getComputedStyle(gridWithDotsColumn).getPropertyValue('-webkit-grid-template-areas') is "\"header .\" \"footer .\""
-PASS getComputedStyle(gridWithDotCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
-PASS getComputedStyle(gridWithDotsCells).getPropertyValue('-webkit-grid-template-areas') is "\"first .\" \". second\""
-PASS getComputedStyle(gridWithComplexDotAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
-PASS getComputedStyle(gridWithComplexDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
-PASS getComputedStyle(gridWithMixedDotAndDotsAreas).getPropertyValue('-webkit-grid-template-areas') is "\". title .\" \". main main\" \"nav . aside\" \". footer .\""
-PASS getComputedStyle(gridWithDotsNoSpaceTwoColumns).getPropertyValue('-webkit-grid-template-areas') is "\". A\" \". A\" \"B .\" \"B .\""
-PASS getComputedStyle(gridWithDotsNoSpaceThreeColumns).getPropertyValue('-webkit-grid-template-areas') is "\". A .\" \". A .\" \"B . C\" \"B . C\""
-PASS getComputedStyle(gridWithDotsNoSpaceFourColumns).getPropertyValue('-webkit-grid-template-areas') is "\". A . B\" \". A . B\" \". A . B\" \". A . B\" \"C . D .\" \"C . D .\" \"C . D .\" \"C . D .\""
-PASS getComputedStyle(gridWithDotsNoSpaceComplex).getPropertyValue('-webkit-grid-template-areas') is "\". title . nav . . main test\" \". title . nav . . main test\" \". title . nav . . main test\" \". title . nav . . main test\""
-PASS getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a a\" \"a a a\""
-PASS getComputedStyle(gridWithVerticalRectangle).getPropertyValue('-webkit-grid-template-areas') is "\"a a\" \"a a\" \"a a\""
</del><ins>+PASS getComputedStyle(gridWithDefaultTemplate).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(gridWithSingleStringTemplate).getPropertyValue('grid-template-areas') is "\"area\""
+PASS getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('grid-template-areas') is "\"first second\""
+PASS getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('grid-template-areas') is "\"first\" \"second\""
+PASS getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('grid-template-areas') is "\"span span\""
+PASS getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('grid-template-areas') is "\"span\" \".\""
+PASS getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('grid-template-areas') is "\"span\" \".\""
+PASS getComputedStyle(gridWithDotColumn).getPropertyValue('grid-template-areas') is "\"header .\" \"footer .\""
+PASS getComputedStyle(gridWithDotsColumn).getPropertyValue('grid-template-areas') is "\"header .\" \"footer .\""
+PASS getComputedStyle(gridWithDotCells).getPropertyValue('grid-template-areas') is "\"first .\" \". second\""
+PASS getComputedStyle(gridWithDotsCells).getPropertyValue('grid-template-areas') is "\"first .\" \". second\""
+PASS getComputedStyle(gridWithComplexDotAreas).getPropertyValue('grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
+PASS getComputedStyle(gridWithComplexDotsAreas).getPropertyValue('grid-template-areas') is "\". header header .\" \". . . .\" \"nav main main aside\" \"nav main main aside\" \". . . aside\" \". footer footer aside\""
+PASS getComputedStyle(gridWithMixedDotAndDotsAreas).getPropertyValue('grid-template-areas') is "\". title .\" \". main main\" \"nav . aside\" \". footer .\""
+PASS getComputedStyle(gridWithDotsNoSpaceTwoColumns).getPropertyValue('grid-template-areas') is "\". A\" \". A\" \"B .\" \"B .\""
+PASS getComputedStyle(gridWithDotsNoSpaceThreeColumns).getPropertyValue('grid-template-areas') is "\". A .\" \". A .\" \"B . C\" \"B . C\""
+PASS getComputedStyle(gridWithDotsNoSpaceFourColumns).getPropertyValue('grid-template-areas') is "\". A . B\" \". A . B\" \". A . B\" \". A . B\" \"C . D .\" \"C . D .\" \"C . D .\" \"C . D .\""
+PASS getComputedStyle(gridWithDotsNoSpaceComplex).getPropertyValue('grid-template-areas') is "\". title . nav . . main test\" \". title . nav . . main test\" \". title . nav . . main test\" \". title . nav . . main test\""
+PASS getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('grid-template-areas') is "\"a a a\" \"a a a\""
+PASS getComputedStyle(gridWithVerticalRectangle).getPropertyValue('grid-template-areas') is "\"a a\" \"a a\" \"a a\""
</ins><span class="cx"> Test grid-template-areas: initial
</span><del>-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "\"foobar\""
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "\"foobar\""
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
</del><ins>+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "\"foobar\""
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "\"foobar\""
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
</ins><span class="cx"> Test grid-template-areas: inherit
</span><del>-PASS getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas') is "\"foo bar\""
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "\"foo bar\""
</del><ins>+PASS getComputedStyle(parentElement).getPropertyValue('grid-template-areas') is "\"foo bar\""
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "\"foo bar\""
</ins><span class="cx"> Test invalid grid-template-areas values.
</span><del>-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') is "none"
</del><ins>+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element).getPropertyValue('grid-template-areas') is "none"
</ins><span class="cx">
</span><span class="cx"> FIXME: We currently don't validate that the named grid areas are <indent>.
</span><del>-FAIL getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas') should be none. Was "nav-up".
</del><ins>+FAIL getComputedStyle(element).getPropertyValue('grid-template-areas') should be none. Was "nav-up".
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateareasgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,54 +4,54 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> #gridWithSingleStringTemplate {
</span><del>- -webkit-grid-template-areas: "area";
</del><ins>+ grid-template-areas: "area";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithTwoColumnsTemplate {
</span><del>- -webkit-grid-template-areas: "first second";
</del><ins>+ grid-template-areas: "first second";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithTwoRowsTemplate {
</span><del>- -webkit-grid-template-areas: "first"
</del><ins>+ grid-template-areas: "first"
</ins><span class="cx"> "second";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithSpanningColumnsTemplate {
</span><del>- -webkit-grid-template-areas: "span span";
</del><ins>+ grid-template-areas: "span span";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithSpanningRowsDotTemplate {
</span><del>- -webkit-grid-template-areas: "span"
</del><ins>+ grid-template-areas: "span"
</ins><span class="cx"> ".";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithSpanningRowsDotsTemplate {
</span><del>- -webkit-grid-template-areas: "span"
</del><ins>+ grid-template-areas: "span"
</ins><span class="cx"> "....";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotColumn {
</span><del>- -webkit-grid-template-areas: "header ."
</del><ins>+ grid-template-areas: "header ."
</ins><span class="cx"> "footer .";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsColumn {
</span><del>- -webkit-grid-template-areas: "header ......"
</del><ins>+ grid-template-areas: "header ......"
</ins><span class="cx"> "footer ......";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotCells {
</span><del>- -webkit-grid-template-areas: "first ."
</del><ins>+ grid-template-areas: "first ."
</ins><span class="cx"> ". second";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsCells {
</span><del>- -webkit-grid-template-areas: "first ......"
</del><ins>+ grid-template-areas: "first ......"
</ins><span class="cx"> "..... second";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithComplexDotAreas {
</span><del>- -webkit-grid-template-areas: ". header header ."
</del><ins>+ grid-template-areas: ". header header ."
</ins><span class="cx"> ". . . ."
</span><span class="cx"> "nav main main aside"
</span><span class="cx"> "nav main main aside"
</span><span class="lines">@@ -60,7 +60,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithComplexDotsAreas {
</span><del>- -webkit-grid-template-areas: "... header header ....."
</del><ins>+ grid-template-areas: "... header header ....."
</ins><span class="cx"> "... ...... ...... ....."
</span><span class="cx"> "nav main main aside"
</span><span class="cx"> "nav main main aside"
</span><span class="lines">@@ -69,28 +69,28 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithMixedDotAndDotsAreas {
</span><del>- -webkit-grid-template-areas: "... title ."
</del><ins>+ grid-template-areas: "... title ."
</ins><span class="cx"> ".. main main"
</span><span class="cx"> "nav ................... aside"
</span><span class="cx"> ". footer ......";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsNoSpaceTwoColumns {
</span><del>- -webkit-grid-template-areas: "...A"
</del><ins>+ grid-template-areas: "...A"
</ins><span class="cx"> ".A"
</span><span class="cx"> "B.."
</span><span class="cx"> "B.";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsNoSpaceThreeColumns {
</span><del>- -webkit-grid-template-areas: "...A.."
</del><ins>+ grid-template-areas: "...A.."
</ins><span class="cx"> ".A."
</span><span class="cx"> "B..C"
</span><span class="cx"> "B.C";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsNoSpaceFourColumns {
</span><del>- -webkit-grid-template-areas: "...A..B"
</del><ins>+ grid-template-areas: "...A..B"
</ins><span class="cx"> ".A.B"
</span><span class="cx"> "..A.B"
</span><span class="cx"> ".A...B"
</span><span class="lines">@@ -101,7 +101,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithDotsNoSpaceComplex {
</span><del>- -webkit-grid-template-areas: ".title...nav. ..main test"
</del><ins>+ grid-template-areas: ".title...nav. ..main test"
</ins><span class="cx"> "... title.nav... .main test"
</span><span class="cx"> "..title .. nav . .. main test"
</span><span class="cx"> ". title .nav... . main test";
</span><span class="lines">@@ -109,12 +109,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithHorizontalRectangle {
</span><del>- -webkit-grid-template-areas: "a a a"
</del><ins>+ grid-template-areas: "a a a"
</ins><span class="cx"> "a a a";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #gridWithVerticalRectangle {
</span><del>- -webkit-grid-template-areas: "a a"
</del><ins>+ grid-template-areas: "a a"
</ins><span class="cx"> "a a"
</span><span class="cx"> "a a";
</span><span class="cx"> }
</span><span class="lines">@@ -147,12 +147,12 @@
</span><span class="cx"> description("This test checks that grid-template-areas is properly parsed.");
</span><span class="cx">
</span><span class="cx"> function testGridTemplateAreas(gridItemID, expectedResult) {
</span><del>- shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult);
</del><ins>+ shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('grid-template-areas')", expectedResult);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testJSGridTemplateAreas(element, expectedResult) {
</span><span class="cx"> this.element = element;
</span><del>- shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult);
</del><ins>+ shouldBeEqualToString("getComputedStyle(element).getPropertyValue('grid-template-areas')", expectedResult);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> debug("Test getting grid-template-areas set through CSS.");
</span><span class="lines">@@ -180,25 +180,25 @@
</span><span class="cx"> debug("Test grid-template-areas: initial");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateAreas = "'foobar'";
</del><ins>+ element.style.gridTemplateAreas = "'foobar'";
</ins><span class="cx"> testJSGridTemplateAreas(element, '"foobar"');
</span><del>- element.style.webkitGridTemplateAreas = "initial";
</del><ins>+ element.style.gridTemplateAreas = "initial";
</ins><span class="cx"> testJSGridTemplateAreas(element, 'none');
</span><del>- element.style.webkitGridTemplateAreas = "'foobar'";
</del><ins>+ element.style.gridTemplateAreas = "'foobar'";
</ins><span class="cx"> testJSGridTemplateAreas(element, '"foobar"');
</span><del>- element.style.webkitGridTemplateAreas = "none";
</del><ins>+ element.style.gridTemplateAreas = "none";
</ins><span class="cx"> testJSGridTemplateAreas(element, 'none');
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx">
</span><span class="cx"> debug("Test grid-template-areas: inherit");
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><del>- parentElement.style.webkitGridTemplateAreas = "'foo bar'";
- shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"');
</del><ins>+ parentElement.style.gridTemplateAreas = "'foo bar'";
+ shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"');
</ins><span class="cx">
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.webkitGridTemplateAreas = "inherit";
</del><ins>+ element.style.gridTemplateAreas = "inherit";
</ins><span class="cx"> testJSGridTemplateAreas(element, '"foo bar"');
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="cx">
</span><span class="lines">@@ -207,29 +207,29 @@
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx">
</span><span class="cx"> // 'nav' is not a rectangular definition.
</span><del>- element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'";
</del><ins>+ element.style.gridTemplateAreas = "'nav head' 'nav nav'";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx">
</span><span class="cx"> // 'nav' is not contiguous in the column direction.
</span><del>- element.style.webkitGridTemplateAreas = "'nav head nav'";
</del><ins>+ element.style.gridTemplateAreas = "'nav head nav'";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx">
</span><span class="cx"> // 'nav' is not contiguous in the row direction.
</span><del>- element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
</del><ins>+ element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx">
</span><span class="cx"> // The rows don't have the same number of columns.
</span><del>- element.style.webkitGridTemplateAreas = "'nav head' 'foot'";
</del><ins>+ element.style.gridTemplateAreas = "'nav head' 'foot'";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx">
</span><span class="cx"> // Empty rows.
</span><del>- element.style.webkitGridTemplateAreas = "'' ''";
</del><ins>+ element.style.gridTemplateAreas = "'' ''";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
</span><span class="cx"> // <ident> only allows a leading '-'.
</span><del>- element.style.webkitGridTemplateAreas = "'nav-up'";
</del><ins>+ element.style.gridTemplateAreas = "'nav-up'";
</ins><span class="cx"> testJSGridTemplateAreas(element, "none");
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateareasinfiniteloophtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-infinite-loop.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-infinite-loop.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-areas-infinite-loop.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,6 +10,6 @@
</span><span class="cx"> </div>
</span><span class="cx"> <script>
</span><span class="cx"> var grid = document.getElementById("grid");
</span><del>- grid.style.webkitGridTemplateAreas = '"a"';
- grid.style.webkitGridTemplateAreas = '"b"';
</del><ins>+ grid.style.gridTemplateAreas = '"a"';
+ grid.style.gridTemplateAreas = '"b"';
</ins><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmentexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,34 +3,34 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
-PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('-webkit-grid-template-columns') is "300px 200px 100px"
-PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('-webkit-grid-template-rows') is "150px 100px 50px"
</del><ins>+PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
+PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,14 +3,14 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 300px 200px 100px;
- -webkit-grid-template-rows: 150px 100px 50px;
</del><ins>+ grid-template-columns: 300px 200px 100px;
+ grid-template-rows: 150px 100px 50px;
</ins><span class="cx"> width: 800px;
</span><span class="cx"> height: 500px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gaps {
</span><del>- -webkit-grid-gap: 10px 20px;
</del><ins>+ grid-gap: 10px 20px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandcomputedstylecrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-computed-style-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> </script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template: 100px / 50px;
</del><ins>+ grid-template: 100px / 50px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <p>This test checks that getting computed style of grid-template shorthand does not crash.</p>
</span><span class="lines">@@ -14,5 +14,5 @@
</span><span class="cx"> </div>
</span><span class="cx"> <script>
</span><span class="cx"> var grid = document.getElementById("grid");
</span><del>- getComputedStyle(grid).webkitGridTemplate;
</del><ins>+ getComputedStyle(grid).gridTemplate;
</ins><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,199 +4,199 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-areas set through CSS.
</span><del>-PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('-webkit-grid-template-rows') is "15px"
-PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-rows') is "15px"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('-webkit-grid-template-rows') is "15px"
-PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px 20px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px 20px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 15px [tail1 head2] 20px [tail2]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 0px [tail1 head2] 0px [tail2]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "100px [nav nav2] 25px [nav nav2] 25px [last]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "0px [nav nav2] 0px [nav nav2] 0px [last]"
-PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
-PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 0px"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
</del><ins>+PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('grid-template-rows') is "[head] 15px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('grid-template-rows') is "[head] 0px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('grid-template-columns') is "10px 20px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('grid-template-rows') is "[head] 15px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('grid-template-areas') is "\"a b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('grid-template-columns') is "10px 20px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('grid-template-rows') is "[head] 0px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('grid-template-areas') is "\"a b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('grid-template-rows') is "[head1] 15px [tail1 head2] 20px [tail2]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('grid-template-areas') is "\"a\" \"b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('grid-template-rows') is "[head1] 0px [tail1 head2] 0px [tail2]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('grid-template-areas') is "\"a\" \"b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('grid-template-rows') is "100px [nav nav2] 25px [nav nav2] 25px [last]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('grid-template-rows') is "0px [nav nav2] 0px [nav nav2] 0px [last]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-rows') is "0px"
+PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-rows') is "[first] 0px"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-areas') is "\"a\""
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values for grid-template shorthand through CSS (they should resolve to the default: 'none')
</span><del>-PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "none"
</del><ins>+PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames, '').getPropertyValue('grid-template-areas') is "none"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is 'none'
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'none'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS element.style.webkitGridTemplateColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[line] 20px"
-PASS element.style.webkitGridTemplateRows is "[line] 20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS element.style.webkitGridTemplateAreas is "\"a\""
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "none"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
+PASS element.style.gridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[line] 20px"
+PASS element.style.gridTemplateRows is "[line] 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS element.style.gridTemplateAreas is "\"a\""
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template shorthand through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
-PASS element.style.webkitGridTemplateColumns is "18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS element.style.webkitGridTemplateRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS element.style.webkitGridTemplateAreas is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS element.style.webkitGridTemplateColumns is "10px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
-PASS element.style.webkitGridTemplateRows is "[head] 15px [tail]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS element.style.webkitGridTemplateAreas is "\"a\""
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "100px"
-PASS element.style.webkitGridTemplateColumns is "100px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]"
-PASS element.style.webkitGridTemplateRows is "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
-PASS element.style.webkitGridTemplateAreas is "\"a\" \"b\""
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
-PASS element.style.webkitGridTemplateRows is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
-PASS element.style.webkitGridTemplateAreas is "\"a\""
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
+PASS element.style.gridTemplateColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
+PASS element.style.gridTemplateRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS element.style.gridTemplateAreas is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px"
+PASS element.style.gridTemplateColumns is "10px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[head] 15px [tail]"
+PASS element.style.gridTemplateRows is "[head] 15px [tail]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS element.style.gridTemplateAreas is "\"a\""
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px"
+PASS element.style.gridTemplateColumns is "100px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]"
+PASS element.style.gridTemplateRows is "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\" \"b\""
+PASS element.style.gridTemplateAreas is "\"a\" \"b\""
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\""
+PASS element.style.gridTemplateAreas is "\"a\""
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template shorthand to bad values through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplateshorthandgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,137 +4,137 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> #gridTemplateWithNone {
</span><del>- -webkit-grid-template: none;
</del><ins>+ grid-template: none;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleForm {
</span><del>- -webkit-grid-template: 15px / 10px;
</del><ins>+ grid-template: 15px / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithNoneColumns {
</span><del>- -webkit-grid-template: 15px / none;
</del><ins>+ grid-template: 15px / none;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithNoneRows {
</span><del>- -webkit-grid-template: none / 10px;
</del><ins>+ grid-template: none / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithNone {
</span><del>- -webkit-grid-template: none / none;
</del><ins>+ grid-template: none / none;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexForm {
</span><del>- -webkit-grid-template: "a" 15px / 10px;
</del><ins>+ grid-template: "a" 15px / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNames {
</span><del>- -webkit-grid-template: [head] "a" 15px [tail] / 10px;
</del><ins>+ grid-template: [head] "a" 15px [tail] / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesWithoutRowSize {
</span><del>- -webkit-grid-template: [head] "a" [tail] / 10px;
</del><ins>+ grid-template: [head] "a" [tail] / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleColumns {
</span><del>- -webkit-grid-template: [head] "a b" 15px [tail] / 10px 20px;
</del><ins>+ grid-template: [head] "a b" 15px [tail] / 10px 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize {
</span><del>- -webkit-grid-template: [head] "a b" [tail] / 10px 20px;
</del><ins>+ grid-template: [head] "a b" [tail] / 10px 20px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleRows {
</span><del>- -webkit-grid-template: [head1] "a" 15px [tail1]
</del><ins>+ grid-template: [head1] "a" 15px [tail1]
</ins><span class="cx"> [head2] "b" 20px [tail2] / 10px;
</span><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes {
</span><del>- -webkit-grid-template: [head1] "a" [tail1]
</del><ins>+ grid-template: [head1] "a" [tail1]
</ins><span class="cx"> [head2] "b" [tail2] / 10px;
</span><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
</span><del>- -webkit-grid-template: "a b c" 100px [nav]
</del><ins>+ grid-template: "a b c" 100px [nav]
</ins><span class="cx"> [nav2] "d e f" 25px [nav]
</span><span class="cx"> [nav2] "g h i" 25px [last] / [first] 10px repeat(2, [nav nav2] 15px);
</span><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes {
</span><del>- -webkit-grid-template: "a b c" [nav]
</del><ins>+ grid-template: "a b c" [nav]
</ins><span class="cx"> [nav2] "d e f" [nav]
</span><span class="cx"> [nav2] "g h i" [last] / [first] 10px repeat(2, [nav nav2] 15px);
</span><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithAuto {
</span><del>- -webkit-grid-template: "a" / 10px;
</del><ins>+ grid-template: "a" / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormOnlyAreas {
</span><del>- -webkit-grid-template: "a";
</del><ins>+ grid-template: "a";
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateNoColumnsRowWithEmptyTrailingLineNames {
</span><del>- -webkit-grid-template: [first] "a" auto [];
</del><ins>+ grid-template: [first] "a" auto [];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Bad values. */
</span><span class="cx">
</span><span class="cx"> #gridTemplateMultipleSlash {
</span><del>- -webkit-grid-template: 10px / 20px / 30px;
</del><ins>+ grid-template: 10px / 20px / 30px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormJustColumns {
</span><del>- -webkit-grid-template: 10px;
</del><ins>+ grid-template: 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormNoRows {
</span><del>- -webkit-grid-template: / 10px;
</del><ins>+ grid-template: / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormNoColumns {
</span><del>- -webkit-grid-template: 10px /;
</del><ins>+ grid-template: 10px /;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormNoColumnSize {
</span><del>- -webkit-grid-template: 10px / [line];
</del><ins>+ grid-template: 10px / [line];
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithFitContent {
</span><del>- -webkit-grid-template: 10px / -webkit-fit-content;
</del><ins>+ grid-template: 10px / -webkit-fit-content;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithWrongRepeat {
</span><del>- -webkit-grid-template: 10px / repeat(2, 50% [title] a);
</del><ins>+ grid-template: 10px / repeat(2, 50% [title] a);
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithMisplacedNone1 {
</span><del>- -webkit-grid-template: none 20px / 10px;
</del><ins>+ grid-template: none 20px / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithMisplacedNone2 {
</span><del>- -webkit-grid-template: 20px none / 10px;
</del><ins>+ grid-template: 20px none / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithMisplacedNone3 {
</span><del>- -webkit-grid-template: 20px / none 10px;
</del><ins>+ grid-template: 20px / none 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateSimpleFormWithMisplacedNone4 {
</span><del>- -webkit-grid-template: 20px / 10px none;
</del><ins>+ grid-template: 20px / 10px none;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithRepeat {
</span><del>- -webkit-grid-template: "a" repeat(2, 50% [title]) / 10px;
</del><ins>+ grid-template: "a" repeat(2, 50% [title]) / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithWrongRepeat {
</span><del>- -webkit-grid-template: "a" / repeat(2, 50% [title] a);
</del><ins>+ grid-template: "a" / repeat(2, 50% [title] a);
</ins><span class="cx"> }
</span><span class="cx"> #griTemplateComplexFormdWithFitAvailable {
</span><del>- -webkit-grid-template: "a" / -webkit-fit-available;
</del><ins>+ grid-template: "a" / -webkit-fit-available;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormNoColumnSize {
</span><del>- -webkit-grid-template: "a" / [line];
</del><ins>+ grid-template: "a" / [line];
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormMisplacedRowsSize1 {
</span><del>- -webkit-grid-template: 10px "a" / 25px;
</del><ins>+ grid-template: 10px "a" / 25px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormMisplacedRowsSize2 {
</span><del>- -webkit-grid-template: "a" [name] 10px / 25px;
</del><ins>+ grid-template: "a" [name] 10px / 25px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormMisplacedRowsSize3 {
</span><del>- -webkit-grid-template: [head] "a" [tail] 10px / 10px;
</del><ins>+ grid-template: [head] "a" [tail] 10px / 10px;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormMisplacedRowsSize4 {
</span><del>- -webkit-grid-template: [head1] "a" [tail1]
</del><ins>+ grid-template: [head1] "a" [tail1]
</ins><span class="cx"> [head2] "a" [tail2] 100px / 10px;
</span><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormColumnsNotParsing1 {
</span><del>- -webkit-grid-template: "a" [name] 10px / a;
</del><ins>+ grid-template: "a" [name] 10px / a;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormColumnsNotParsing2 {
</span><del>- -webkit-grid-template: "a" [name] 10px / "B";
</del><ins>+ grid-template: "a" [name] 10px / "B";
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateComplexFormWithNoneColumns {
</span><del>- -webkit-grid-template: "a" [name] 10px / none;
</del><ins>+ grid-template: "a" [name] 10px / none;
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
</span><del>- -webkit-grid-template: [first] "a" auto [] [];
</del><ins>+ grid-template: [first] "a" auto [] [];
</ins><span class="cx"> }
</span><span class="cx"> #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames {
</span><del>- -webkit-grid-template: [first] "a" auto [] [tail];
</del><ins>+ grid-template: [first] "a" auto [] [tail];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -238,9 +238,9 @@
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> testGridDefinitionsValues(element, "none", "none", "none");
</span><del>- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", "'none'");
</del><ins>+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridupdatesizesafterdistributingallexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,15 +1,15 @@
</span><span class="cx"> Check that tracks are updated after distributing the extra space for all the items in the same group span.
</span><del>-PASS window.getComputedStyle(gridAutoAndMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "25px 65px"
-PASS window.getComputedStyle(gridFixedMinContentAndFixedMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "25px 85px"
-PASS window.getComputedStyle(gridMinContentAndMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "15px 85px"
-PASS window.getComputedStyle(gridMinContentAndFixedAndMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "15px 20px 105px"
-PASS window.getComputedStyle(gridMaxContentAndFixedAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "105px 20px 15px"
-PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentTwoOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "115px 25px 85px 15px"
-PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentThreeOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "65px 25px 115px 15px"
-PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "70px 30px 80px 10px"
-PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentTwoOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "25px 115px 15px 85px"
-PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentThreeOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "20px 115px 25px 75px"
-PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping, '').getPropertyValue('-webkit-grid-template-columns') is "30px 70px 10px 80px"
</del><ins>+PASS window.getComputedStyle(gridAutoAndMaxContent, '').getPropertyValue('grid-template-columns') is "25px 65px"
+PASS window.getComputedStyle(gridFixedMinContentAndFixedMaxContent, '').getPropertyValue('grid-template-columns') is "25px 85px"
+PASS window.getComputedStyle(gridMinContentAndMaxContent, '').getPropertyValue('grid-template-columns') is "15px 85px"
+PASS window.getComputedStyle(gridMinContentAndFixedAndMaxContent, '').getPropertyValue('grid-template-columns') is "15px 20px 105px"
+PASS window.getComputedStyle(gridMaxContentAndFixedAndAuto, '').getPropertyValue('grid-template-columns') is "105px 20px 15px"
+PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentTwoOverlapping, '').getPropertyValue('grid-template-columns') is "115px 25px 85px 15px"
+PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentThreeOverlapping, '').getPropertyValue('grid-template-columns') is "65px 25px 115px 15px"
+PASS window.getComputedStyle(gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping, '').getPropertyValue('grid-template-columns') is "70px 30px 80px 10px"
+PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentTwoOverlapping, '').getPropertyValue('grid-template-columns') is "25px 115px 15px 85px"
+PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentThreeOverlapping, '').getPropertyValue('grid-template-columns') is "20px 115px 25px 75px"
+PASS window.getComputedStyle(gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping, '').getPropertyValue('grid-template-columns') is "30px 70px 10px 80px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridupdatesizesafterdistributingallhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-update-sizes-after-distributing-all.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,36 +6,36 @@
</span><span class="cx"> .grid { font: 10px/1 Ahem; }
</span><span class="cx">
</span><span class="cx"> .gridAutoAndMaxContent {
</span><del>- -webkit-grid-template-columns: auto -webkit-max-content;
</del><ins>+ grid-template-columns: auto -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridFixedMinContentAndFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(10px, -webkit-min-content) minmax(10px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(10px, -webkit-min-content) minmax(10px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridMinContentAndMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content -webkit-max-content;
</del><ins>+ grid-template-columns: -webkit-min-content -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinContentAndFixedAndMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content 20px -webkit-max-content;
</del><ins>+ grid-template-columns: -webkit-min-content 20px -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxContentAndFixedAndAuto {
</span><del>- -webkit-grid-template-columns: -webkit-max-content 20px auto;
</del><ins>+ grid-template-columns: -webkit-max-content 20px auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridRepeatTwoMaxContentAndMinContent {
</span><del>- -webkit-grid-template-columns: repeat(2, -webkit-max-content -webkit-min-content);
</del><ins>+ grid-template-columns: repeat(2, -webkit-max-content -webkit-min-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridRepeatTwoAutoAndMaxContent {
</span><del>- -webkit-grid-template-columns: repeat(2, auto -webkit-max-content);
</del><ins>+ grid-template-columns: repeat(2, auto -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .columns1And2 { -webkit-grid-column: 1 / span 2; }
- .columns2And3 { -webkit-grid-column: 2 / span 2; }
- .columns3And4 { -webkit-grid-column: 3 / span 2; }
- .columns1To3 { -webkit-grid-column: 1 / span 3; }
- .columns1To4 { -webkit-grid-column: 1 / span 4; }
</del><ins>+ .columns1And2 { grid-column: 1 / span 2; }
+ .columns2And3 { grid-column: 2 / span 2; }
+ .columns3And4 { grid-column: 3 / span 2; }
+ .columns1To3 { grid-column: 1 / span 3; }
+ .columns1To4 { grid-column: 1 / span 4; }
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> </head>
</span><span class="lines">@@ -115,7 +115,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> function testGridColumnsValues(id, computedColumnValue)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> debug("Check that tracks are updated after distributing the extra space for all the items in the same group span.");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridwaspopulatedasserthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-was-populated-assert.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-was-populated-assert.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-was-populated-assert.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,11 +8,11 @@
</span><span class="cx"> </script>
</span><span class="cx"> <style>
</span><span class="cx"> details {
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> -webkit-columns: 5;
</span><span class="cx"> }
</span><span class="cx"> div {
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> }
</span><span class="cx"> input {
</span><span class="cx"> -webkit-columns: 5;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridwithrelativefontlengthcrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-with-relative-font-length-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-with-relative-font-length-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-with-relative-font-length-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,7 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <style>
</span><span class="cx"> title {
</span><del>- -webkit-grid: dense row 1ex;
</del><ins>+ grid: dense row 1ex;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <title>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicitcolumnsautoresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-columns-auto-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoContent {
</span><del>- /* -webkit-grid-template-columns is left unset so that the grid item's column is implicit. */
- -webkit-grid-template-rows: 50px;
</del><ins>+ /* grid-template-columns is left unset so that the grid item's column is implicit. */
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicitpositiondynamicchangeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.
</del><ins>+This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.
</ins><span class="cx">
</span><span class="cx"> XXXX XXXX XXXX
</span><span class="cx"> PASS
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicitpositiondynamicchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridFixedContent {
</span><del>- -webkit-grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
- -webkit-grid-template-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
</del><ins>+ grid-template-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
+ grid-template-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="lines">@@ -13,8 +13,8 @@
</span><span class="cx"> function testPosition(gridElementID, position, size)
</span><span class="cx"> {
</span><span class="cx"> gridItem = document.getElementById(gridElementID).firstChild;
</span><del>- gridItem.style.webkitGridColumn = position.column;
- gridItem.style.webkitGridRow = position.row;
</del><ins>+ gridItem.style.gridColumn = position.column;
+ gridItem.style.gridRow = position.row;
</ins><span class="cx"> gridItem.setAttribute("data-expected-width", size.width);
</span><span class="cx"> gridItem.setAttribute("data-expected-height", size.height);
</span><span class="cx"> checkLayout("#" + gridElementID);
</span><span class="lines">@@ -104,7 +104,7 @@
</span><span class="cx"> </script>
</span><span class="cx"> <body>
</span><span class="cx">
</span><del>-<p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.</p>
</del><ins>+<p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.</p>
</ins><span class="cx">
</span><span class="cx"> <div class="constrainedContainer">
</span><span class="cx"> <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicitrowsautoresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-rows-auto-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-rows-auto-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-rows-auto-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoContent {
</span><del>- -webkit-grid-template-columns: 50px;
- /* -webkit-grid-template-rows is left unset so that the grid item's row is implicit. */
</del><ins>+ grid-template-columns: 50px;
+ /* grid-template-rows is left unset so that the grid item's row is implicit. */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicithtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,7 +4,7 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 50px / 100px;
</del><ins>+ grid: 50px / 100px;
</ins><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> position: relative;
</span><span class="cx"> margin: 25px;
</span><span class="lines">@@ -12,44 +12,44 @@
</span><span class="cx">
</span><span class="cx"> .firstNegativeRowFirstColumn {
</span><span class="cx"> background-color: purple;
</span><del>- -webkit-grid-row: -3;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: -3;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstNegativeRowFirstNegativeColumn {
</span><span class="cx"> background-color: navy;
</span><del>- -webkit-grid-row: -3;
- -webkit-grid-column: -3;
</del><ins>+ grid-row: -3;
+ grid-column: -3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondNegativeRowFirstColumn {
</span><span class="cx"> background-color: lime;
</span><del>- -webkit-grid-row: -4;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: -4;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondNegativeRowSecondNegativeColumn {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-row: -4;
- -webkit-grid-column: -4;
</del><ins>+ grid-row: -4;
+ grid-column: -4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstNegativeColumn {
</span><span class="cx"> background-color: magenta;
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: -3;
</del><ins>+ grid-row: 1;
+ grid-column: -3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstNegativeRowFirstNegativeColumn {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-row: -3;
- -webkit-grid-column: -3;
</del><ins>+ grid-row: -3;
+ grid-column: -3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowSecondNegativeColumn {
</span><span class="cx"> background-color: aqua;
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: -4;
</del><ins>+ grid-row: 1;
+ grid-column: -4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutjustifyselfcellhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/justify-self-cell.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 100px;
- -webkit-grid-template-rows: 200px 200px;
</del><ins>+ grid-template-columns: 100px 100px;
+ grid-template-rows: 200px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .cell {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmarkasinfinitelygrowableexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,7 +1,7 @@
</span><del>-PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "30px 70px"
-PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
-PASS window.getComputedStyle(gridFixedMaxContentAndFixedMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "20px 80px"
-PASS window.getComputedStyle(gridFixedMaxContentAndFixedMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
</del><ins>+PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('grid-template-columns') is "30px 70px"
+PASS window.getComputedStyle(gridAutoAndAuto, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(gridFixedMaxContentAndFixedMaxContent, '').getPropertyValue('grid-template-columns') is "20px 80px"
+PASS window.getComputedStyle(gridFixedMaxContentAndFixedMaxContent, '').getPropertyValue('grid-template-rows') is "10px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmarkasinfinitelygrowablehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,11 +7,11 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridAutoAndAuto {
</span><del>- -webkit-grid-template-columns: auto auto;
</del><ins>+ grid-template-columns: auto auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedMaxContentAndFixedMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(20px, -webkit-max-content) minmax(10px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(20px, -webkit-max-content) minmax(10px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-rows: minmax(0px, 100px);
</del><ins>+ grid-template-rows: minmax(0px, 100px);
</ins><span class="cx"> width: 40px;
</span><span class="cx">
</span><span class="cx"> align-items: start;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: -webkit-min-content 1fr;
- -webkit-grid-template-rows: -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-min-content 1fr;
+ grid-template-rows: -webkit-min-content;
</ins><span class="cx"> width: 500px;
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminheightborderboxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-height-border-box.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-height-border-box.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-height-border-box.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> .grid {
</span><span class="cx"> border: 5px solid magenta;
</span><span class="cx"> margin-bottom: 25px;
</span><del>- -webkit-grid-template-rows: minmax(auto, 0px);
</del><ins>+ grid-template-rows: minmax(auto, 0px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .item {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,17 +3,17 @@
</span><span class="cx"> <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><del>-.columnsSmallerThanContentBox { -webkit-grid-template-columns: 80px; }
-.columnsSameAsContentBox { -webkit-grid-template-columns: 100px; }
-.columnsBiggerThanContentBox { -webkit-grid-template-columns: 120px; }
-.columnsSameAsMarginBox { -webkit-grid-template-columns: 140px; }
-.columnsBiggerThanMarginBox { -webkit-grid-template-columns: 150px; }
</del><ins>+.columnsSmallerThanContentBox { grid-template-columns: 80px; }
+.columnsSameAsContentBox { grid-template-columns: 100px; }
+.columnsBiggerThanContentBox { grid-template-columns: 120px; }
+.columnsSameAsMarginBox { grid-template-columns: 140px; }
+.columnsBiggerThanMarginBox { grid-template-columns: 150px; }
</ins><span class="cx">
</span><del>-.rowsSmallerThanContentBox { -webkit-grid-template-rows: 20px; }
-.rowsEqualAsContentBox { -webkit-grid-template-rows: 25px; }
-.rowsBiggerThanContentBox { -webkit-grid-template-rows: 50px; }
-.rowsSameAsMarginBox { -webkit-grid-template-rows: 65px; }
-.rowsBiggerThanMarginBox { -webkit-grid-template-rows: 100px; }
</del><ins>+.rowsSmallerThanContentBox { grid-template-rows: 20px; }
+.rowsEqualAsContentBox { grid-template-rows: 25px; }
+.rowsBiggerThanContentBox { grid-template-rows: 50px; }
+.rowsSameAsMarginBox { grid-template-rows: 65px; }
+.rowsBiggerThanMarginBox { grid-template-rows: 100px; }
</ins><span class="cx">
</span><span class="cx"> .container {
</span><span class="cx"> position: relative;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautooverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-overflow.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,8 +2,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px;
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: 50px;
+ grid-template-rows: 50px;
</ins><span class="cx"> height: 50px;
</span><span class="cx"> width: 50px;
</span><span class="cx"> margin: 50px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,8 +2,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 5px;
- -webkit-grid-template-rows: 5px;
</del><ins>+ grid-template-columns: 5px;
+ grid-template-rows: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .container {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthmarginboxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-margin-box.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-margin-box.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-margin-box.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> .grid {
</span><span class="cx"> border: 5px solid magenta;
</span><span class="cx"> margin-bottom: 60px;
</span><del>- -webkit-grid-template-columns: minmax(auto, 0px);
</del><ins>+ grid-template-columns: minmax(auto, 0px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .item {
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx">
</span><span class="cx"> .stretchedItem {
</span><span class="cx"> background-color: green;
</span><del>- -webkit-grid-row: 2;
</del><ins>+ grid-row: 2;
</ins><span class="cx"> height: 15px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalheightonlyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,36 +8,36 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid1 {
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(20px, 80px) 160px;
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(20px, 80px) 160px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid2 {
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(50%, 120px) minmax(20px, 40%);
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(50%, 120px) minmax(20px, 40%);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid3 {
</span><del>- -webkit-grid-template-columns: 30px;
</del><ins>+ grid-template-columns: 30px;
</ins><span class="cx"> /* Overlapping range. */
</span><del>- -webkit-grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
</del><ins>+ grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid4 {
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(20px, 80px) 60px;
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(20px, 80px) 60px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid5 {
</span><del>- -webkit-grid-template-columns: 30px;
</del><ins>+ grid-template-columns: 30px;
</ins><span class="cx"> /* 90% > 80px, 80px should be ignored. */
</span><del>- -webkit-grid-template-rows: minmax(90%, 80px) minmax(10px, 60%);
</del><ins>+ grid-template-rows: minmax(90%, 80px) minmax(10px, 60%);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid6 {
</span><span class="cx"> /* Overlapping range. */
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(10px, 180px) minmax(30px, 150px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxfixedlogicalwidthonlyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,37 +8,37 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid1 {
</span><del>- -webkit-grid-template-columns: minmax(20px, 80px) 60px;
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(20px, 80px) 60px;
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid2 {
</span><span class="cx"> /* First minmax more constraining than available logical width. */
</span><del>- -webkit-grid-template-columns: minmax(50%, 60px) minmax(10px, 40%);
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(50%, 60px) minmax(10px, 40%);
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid3 {
</span><span class="cx"> /* Overlapping range. */
</span><del>- -webkit-grid-template-columns: minmax(10px, 80px) minmax(20px, 50px);
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(10px, 80px) minmax(20px, 50px);
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid4 {
</span><del>- -webkit-grid-template-columns: minmax(20px, 80px) 160px;
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(20px, 80px) 160px;
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid5 {
</span><span class="cx"> /* 50% > 80px, 80px should be ignored. */
</span><del>- -webkit-grid-template-columns: minmax(50%, 80px) minmax(10px, 60%);
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(50%, 80px) minmax(10px, 60%);
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #grid6 {
</span><span class="cx"> /* Overlapping range. */
</span><del>- -webkit-grid-template-columns: minmax(10px, 180px) minmax(30px, 150px);
- -webkit-grid-template-rows: 30px;
</del><ins>+ grid-template-columns: minmax(10px, 180px) minmax(30px, 150px);
+ grid-template-rows: 30px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-max-content, 50px);
- -webkit-grid-template-rows: 60px;
</del><ins>+ grid-template-columns: minmax(-webkit-max-content, 50px);
+ grid-template-rows: 60px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(30px, -webkit-max-content);
- -webkit-grid-template-rows: 20px;
</del><ins>+ grid-template-columns: minmax(30px, -webkit-max-content);
+ grid-template-rows: 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmaxcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMaxContent {
</span><del>- -webkit-grid-template-columns: 20px;
- -webkit-grid-template-rows: minmax(-webkit-max-content, 50px);
</del><ins>+ grid-template-columns: 20px;
+ grid-template-rows: minmax(-webkit-max-content, 50px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxMaxContent {
</span><del>- -webkit-grid-template-columns: 20px;
- -webkit-grid-template-rows: minmax(30px, -webkit-max-content);
</del><ins>+ grid-template-columns: 20px;
+ grid-template-rows: minmax(30px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmincontentcolumnresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMinContent {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 40px);
- -webkit-grid-template-rows: 50px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 40px);
+ grid-template-rows: 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxMinContent {
</span><del>- -webkit-grid-template-columns: minmax(30px, -webkit-min-content);
- -webkit-grid-template-rows: 20px;
</del><ins>+ grid-template-columns: minmax(30px, -webkit-min-content);
+ grid-template-rows: 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxmincontentcolumnresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,13 +3,13 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridMinMinContent {
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(-webkit-min-content, 40px);
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(-webkit-min-content, 40px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMaxMinContent {
</span><del>- -webkit-grid-template-columns: 30px;
- -webkit-grid-template-rows: minmax(30px, -webkit-min-content);
</del><ins>+ grid-template-columns: 30px;
+ grid-template-rows: minmax(30px, -webkit-min-content);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxspanningresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,23 +4,23 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoAutoContent {
</span><del>- -webkit-grid-template-columns: auto auto;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: auto auto;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedAutoContent {
</span><del>- -webkit-grid-template-columns: 10px auto;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 10px auto;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxMin {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 140px);
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 140px);
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxMax {
</span><del>- -webkit-grid-template-columns: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminmaxspanningresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,23 +3,23 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridAutoAutoContent {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: auto auto;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: auto auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridFixedAutoContent {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 10px auto;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 10px auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxMin {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 140px);
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 140px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridMinMaxMax {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: minmax(50px, -webkit-min-content) minmax(40px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,113 +3,113 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "424px [last]"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "162px [last]"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "0px [last]"
-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "77px [last]"
-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "22px [last]"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 77px"
-PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "22px [last]"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 80px"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "300px [last]"
-PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10px [last]"
-PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 15px [last]"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 80px [nav] 120px [last]"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 150px [nav2] 450px [last]"
-PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 400px [nav nav2] 400px"
-PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('-webkit-grid-template-rows') is "100px [nav nav2] 150px [nav nav2] 150px [last]"
-PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "20px 50px"
</del><ins>+Test getting grid-template-columns and grid-template-rows set through CSS
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "[first] 10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "[first] 15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px [last]"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px [last]"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px [last]"
+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "77px [last]"
+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "22px [last]"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "[first] 0px"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "[first] 77px"
+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "22px [last]"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-columns') is "[first] 80px"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-rows') is "300px [last]"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-columns') is "[first nav] 10px [last]"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-rows') is "[first nav] 15px [last]"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-columns') is "[first nav] 80px [nav] 120px [last]"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-rows') is "[first nav2] 150px [nav2] 450px [last]"
+PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('grid-template-columns') is "[first] 10px [nav nav2] 400px [nav nav2] 400px"
+PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('grid-template-rows') is "100px [nav nav2] 150px [nav nav2] 150px [last]"
+PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('grid-template-rows') is "20px 50px"
</ins><span class="cx">
</span><del>-Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 18px"
-PASS element.style.webkitGridTemplateColumns is "[first] 18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px [last]"
-PASS element.style.webkitGridTemplateRows is "66px [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 440px"
-PASS element.style.webkitGridTemplateColumns is "[first] 55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px [last]"
-PASS element.style.webkitGridTemplateRows is "40% [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
-PASS element.style.webkitGridTemplateColumns is "[first] auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS element.style.webkitGridTemplateRows is "auto [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
-PASS element.style.webkitGridTemplateColumns is "[first] -webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS element.style.webkitGridTemplateRows is "-webkit-min-content [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
-PASS element.style.webkitGridTemplateColumns is "[first] -webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS element.style.webkitGridTemplateRows is "-webkit-max-content [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 440px"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 220px"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 220px"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 0px [last]"
-PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 0px [last]"
-PASS element.style.webkitGridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 0px [nav] 0px [last]"
-PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 0px [nav2] 15px [last]"
-PASS element.style.webkitGridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 0px [foo] 0px [bar]"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo bar] 0px [foo] 0px [bar]"
-PASS element.style.webkitGridTemplateRows is "[foo bar] auto [foo] auto [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px [foo bar] 20px [foo bar] 20px"
-PASS element.style.webkitGridTemplateColumns is "[first] auto [foo bar] 20px [foo bar] 20px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "220px [foo] 300px [baz]"
-PASS element.style.webkitGridTemplateRows is "220px [foo] 50% [baz]"
</del><ins>+Test getting and setting grid-template-columns and grid-template-rows through JS
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 18px"
+PASS element.style.gridTemplateColumns is "[first] 18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px [last]"
+PASS element.style.gridTemplateRows is "66px [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 440px"
+PASS element.style.gridTemplateColumns is "[first] 55%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px [last]"
+PASS element.style.gridTemplateRows is "40% [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px"
+PASS element.style.gridTemplateColumns is "[first] auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS element.style.gridTemplateRows is "auto [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px"
+PASS element.style.gridTemplateColumns is "[first] -webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS element.style.gridTemplateRows is "-webkit-min-content [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px"
+PASS element.style.gridTemplateColumns is "[first] -webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS element.style.gridTemplateRows is "-webkit-max-content [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 440px"
+PASS element.style.gridTemplateColumns is "[first] minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px [last]"
+PASS element.style.gridTemplateRows is "minmax(30px, 40%) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 220px"
+PASS element.style.gridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 220px"
+PASS element.style.gridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px"
+PASS element.style.gridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] 0px [last]"
+PASS element.style.gridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav] 0px [last]"
+PASS element.style.gridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] 0px [nav] 0px [last]"
+PASS element.style.gridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav2] 0px [nav2] 15px [last]"
+PASS element.style.gridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo] 0px [bar]"
+PASS element.style.gridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo bar] 0px [foo] 0px [bar]"
+PASS element.style.gridTemplateRows is "[foo bar] auto [foo] auto [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px [foo bar] 20px [foo bar] 20px"
+PASS element.style.gridTemplateColumns is "[first] auto [foo bar] 20px [foo bar] 20px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "220px [foo] 300px [baz]"
+PASS element.style.gridTemplateRows is "220px [foo] 50% [baz]"
</ins><span class="cx">
</span><span class="cx"> Test getting invalid grid-template-columns and grid-template-rows set through CSS
</span><del>-PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><del>-Test getting and setting invalid -webkit-grid-template-columns and -webkit-grid-template-rows through JS
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+Test getting and setting invalid grid-template-columns and grid-template-rows through JS
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,62 +11,62 @@
</span><span class="cx"> height: 600px;
</span><span class="cx"> }
</span><span class="cx"> .gridItem {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> height: 22px;
</span><span class="cx"> width: 77px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: [first] 10px;
- -webkit-grid-template-rows: [first] 15px;
</del><ins>+ grid-template-columns: [first] 10px;
+ grid-template-rows: [first] 15px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53% [last];
- -webkit-grid-template-rows: 27% [last];
</del><ins>+ grid-template-columns: 53% [last];
+ grid-template-rows: 27% [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: [first] auto;
- -webkit-grid-template-rows: auto [last];
</del><ins>+ grid-template-columns: [first] auto;
+ grid-template-rows: auto [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMax {
</span><del>- -webkit-grid-template-columns: [first] minmax(10%, 15px);
- -webkit-grid-template-rows: minmax(20px, 50%) [last];
</del><ins>+ grid-template-columns: [first] minmax(10%, 15px);
+ grid-template-rows: minmax(20px, 50%) [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFixedMultiple {
</span><del>- -webkit-grid-template-columns: [first nav] 10px [last];
- -webkit-grid-template-rows: [first nav] 15px [last];
</del><ins>+ grid-template-columns: [first nav] 10px [last];
+ grid-template-rows: [first nav] 15px [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentageSameStringMultipleTimes {
</span><del>- -webkit-grid-template-columns: [first nav] 10% [nav] 15% [last];
- -webkit-grid-template-rows: [first nav2] 25% [nav2] 75% [last];
</del><ins>+ grid-template-columns: [first nav] 10% [nav] 15% [last];
+ grid-template-rows: [first nav2] 25% [nav2] 75% [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithRepeat {
</span><del>- -webkit-grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
- -webkit-grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
</del><ins>+ grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
+ grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithEmptyBrackets {
</span><del>- -webkit-grid-template-columns: [] 10px;
- -webkit-grid-template-rows: 20px [ ] 50px [];
</del><ins>+ grid-template-columns: [] 10px;
+ grid-template-rows: 20px [ ] 50px [];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithoutBrackets {
</span><del>- -webkit-grid-template-columns: first nav 10px;
- -webkit-grid-template-rows: first 50% last;
</del><ins>+ grid-template-columns: first nav 10px;
+ grid-template-rows: first 50% last;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithInvalidNestedBrackets {
</span><del>- -webkit-grid-template-columns: [first [nav]] 10px [last];
- -webkit-grid-template-rows: [first] 50% [last [nav] nav2];
</del><ins>+ grid-template-columns: [first [nav]] 10px [last];
+ grid-template-rows: [first] 50% [last [nav] nav2];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithUnbalancedBrackets {
</span><del>- -webkit-grid-template-columns: [first nav 10px;
- -webkit-grid-template-rows: [first] 50% last];
</del><ins>+ grid-template-columns: [first nav 10px;
+ grid-template-rows: [first] 50% last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMisplacedBrackets {
</span><del>- -webkit-grid-template-columns: [first 10px] 50%;
- -webkit-grid-template-rows: [first] [nav 50%];
</del><ins>+ grid-template-columns: [first 10px] 50%;
+ grid-template-rows: [first] [nav 50%];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithContiguousBrackets {
</span><del>- -webkit-grid-template-columns: [first] [nav] 10px;
- -webkit-grid-template-rows: 50px [nav nav2] [middle] 10px;
</del><ins>+ grid-template-columns: [first] [nav] 10px;
+ grid-template-rows: 50px [nav nav2] [middle] 10px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -97,7 +97,7 @@
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
</span><span class="cx">
</span><del>- debug("Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS");
</del><ins>+ debug("Test getting grid-template-columns and grid-template-rows set through CSS");
</ins><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
</span><span class="lines">@@ -111,7 +111,7 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS");
</del><ins>+ debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
</ins><span class="cx"> testGridTemplatesSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
</span><span class="cx"> testGridTemplatesSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
</span><span class="cx"> testGridTemplatesSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
</span><span class="lines">@@ -135,7 +135,7 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithContiguousBrackets"), "none", "none");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>- debug("Test getting and setting invalid -webkit-grid-template-columns and -webkit-grid-template-rows through JS");
</del><ins>+ debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
</ins><span class="cx"> testGridTemplatesSetBadJSValues("foo", "bar");
</span><span class="cx"> testGridTemplatesSetBadJSValues("foo bar", "bar foo");
</span><span class="cx"> testGridTemplatesSetBadJSValues("[foo]", "[bar");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinescomputedstyleimplicittracksexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,22 +3,22 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b]"
-PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px 50px 50px"
-PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px"
-PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px"
-PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px 100px"
-PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px"
-PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px 100px 50px"
-PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y]"
-PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e]"
-PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px 50px 50px"
-PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px"
-PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px"
-PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px 100px"
-PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px"
-PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px 100px 50px"
-PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w]"
</del><ins>+PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b]"
+PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px 50px 50px"
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px"
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px"
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px 100px"
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px"
+PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px 100px 50px"
+PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y]"
+PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e]"
+PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px 50px 50px"
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px"
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px"
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px 100px"
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px"
+PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px 100px 50px"
+PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w]"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinescomputedstyleimplicittrackshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,13 +7,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .singleNamedGridLines {
</span><del>- -webkit-grid-template-columns: [a] auto [b];
- -webkit-grid-template-rows: [x] auto [y];
</del><ins>+ grid-template-columns: [a] auto [b];
+ grid-template-rows: [x] auto [y];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .multipleNamedGridLines {
</span><del>- -webkit-grid-template-columns: [a b c] auto [d e];
- -webkit-grid-template-rows: [x y z] auto [v w];
</del><ins>+ grid-template-columns: [a b c] auto [d e];
+ grid-template-rows: [x y z] auto [v w];
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasdynamicgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,15 +10,15 @@
</span><span class="cx"> var gridContainer = document.getElementById("gridContainer");
</span><span class="cx"> var gridElement = document.createElement("div");
</span><span class="cx"> gridElement.className = "grid";
</span><del>- gridElement.style.webkitGridAutoFlow = "dense";
</del><ins>+ gridElement.style.gridAutoFlow = "dense";
</ins><span class="cx">
</span><span class="cx"> for (var key in gridDefinitions) {
</span><span class="cx"> if (key == "rows")
</span><del>- gridElement.style.webkitGridTemplateRows = gridDefinitions[key];
</del><ins>+ gridElement.style.gridTemplateRows = gridDefinitions[key];
</ins><span class="cx"> else if (key == "columns")
</span><del>- gridElement.style.webkitGridTemplateColumns = gridDefinitions[key];
</del><ins>+ gridElement.style.gridTemplateColumns = gridDefinitions[key];
</ins><span class="cx"> else
</span><del>- gridElement.style.webkitGridTemplateAreas = gridDefinitions[key];
</del><ins>+ gridElement.style.gridTemplateAreas = gridDefinitions[key];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> for (var i in itemsDefinitions) {
</span><span class="lines">@@ -27,9 +27,9 @@
</span><span class="cx"> gridItem.className = "sizedToGridArea";
</span><span class="cx">
</span><span class="cx"> if (itemDefinition.row)
</span><del>- gridItem.style.webkitGridRow = itemDefinition.row;
</del><ins>+ gridItem.style.gridRow = itemDefinition.row;
</ins><span class="cx"> if (itemDefinition.column)
</span><del>- gridItem.style.webkitGridColumn = itemDefinition.column;
</del><ins>+ gridItem.style.gridColumn = itemDefinition.column;
</ins><span class="cx">
</span><span class="cx"> gridItem.setAttribute("data-offset-x", itemDefinition.x);
</span><span class="cx"> gridItem.setAttribute("data-offset-y", itemDefinition.y);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,315 +1,315 @@
</span><del>-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-column') is "b / b"
-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-column-start') is "b"
-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-column-end') is "b"
-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-row') is "e / e"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-row-start') is "e"
-PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('-webkit-grid-row-end') is "e"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-column') is "b-start / b-start"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-column-start') is "b-start"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-column-end') is "b-start"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-row') is "g-start / g-start"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-row-start') is "g-start"
-PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('-webkit-grid-row-end') is "g-start"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-column') is "b / d"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-column-start') is "b"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-row') is "g / h"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-row-start') is "g"
-PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('-webkit-grid-row-end') is "h"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-row') is "f / f"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-row-start') is "f"
-PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('-webkit-grid-row-end') is "f"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-column') is "b / 4"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-column-start') is "b"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-column-end') is "4"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-row') is "3 / h"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-row-start') is "3"
-PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('-webkit-grid-row-end') is "h"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-column') is "2 / auto"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-column-start') is "2"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-row') is "g / g"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-row-start') is "g"
-PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('-webkit-grid-row-end') is "g"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-row') is "2 / auto"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-row-start') is "2"
-PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-column') is "c-start / c-start"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-column-start') is "c-start"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-column-end') is "c-start"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-row') is "f-start / f-start"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-row-start') is "f-start"
-PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('-webkit-grid-row-end') is "f-start"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-column') is "c-start / c-start"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-column-start') is "c-start"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-column-end') is "c-start"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-row') is "f-end / f-end"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-row-start') is "f-end"
-PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('-webkit-grid-row-end') is "f-end"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-column') is "b-end / b-end"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-column-start') is "b-end"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-column-end') is "b-end"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-row') is "h-start / h-start"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-row-start') is "h-start"
-PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('-webkit-grid-row-end') is "h-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-column') is "a-start / a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-column-start') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-column-end') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-row') is "d-start / d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-row-start') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('-webkit-grid-row-end') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-column') is "a-start / a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-column-start') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-column-end') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-column') is "d-start / d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-column-start') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-column-end') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-row') is "c-start / c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-row-start') is "c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('-webkit-grid-row-end') is "c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-column') is "d / d"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-row') is "c / c"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('-webkit-grid-row-end') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-row') is "a / a"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-row-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('-webkit-grid-row-end') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-row') is "a / a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-row-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('-webkit-grid-row-end') is "a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-column') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-row') is "c / c"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('-webkit-grid-row-end') is "c"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-column') is "a-start / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-column-start') is "a-start"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-row') is "c-start / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-row-start') is "c-start"
-PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-column') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-row') is "c / c"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('-webkit-grid-row-end') is "c"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-column') is "d-start / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-column-start') is "d-start"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-row') is "d-start / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-row-start') is "d-start"
-PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-column') is "a / a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-column-end') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-row') is "d-start / d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-row-start') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('-webkit-grid-row-end') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-column') is "d / d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-column-end') is "d-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-row') is "c-start / c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-row-start') is "c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('-webkit-grid-row-end') is "c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-row') is "a / a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-row-start') is "a"
-PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('-webkit-grid-row-end') is "a-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-column') is "d / d"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-row') is "c / c-start"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('-webkit-grid-row-end') is "c-start"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-row-start') is "auto"
-PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('-webkit-grid-row-end') is "auto"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-row') is "c / c"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('-webkit-grid-row-end') is "c"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-column-start') is "auto"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-column-end') is "auto"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-column') is "a / a"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-column-start') is "a"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-column-end') is "a"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-column') is "d / d"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-column-start') is "d"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-column-end') is "d"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-row') is "c / c"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-row-start') is "c"
-PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('-webkit-grid-row-end') is "c"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-column') is "d-start / d-end"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-column-start') is "d-start"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-column-end') is "d-end"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-row') is "c-start / c-end"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-row-start') is "c-start"
-PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('-webkit-grid-row-end') is "c-end"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-column') is "c / c"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-column-start') is "c"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-column-end') is "c"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-row') is "d / d"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-row-start') is "d"
-PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('-webkit-grid-row-end') is "d"
</del><ins>+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-column') is "b / b"
+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-column-start') is "b"
+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-column-end') is "b"
+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridUniqueColumnB, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-row') is "e / e"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-row-start') is "e"
+PASS getComputedStyle(GridUniqueRowE, '').getPropertyValue('grid-row-end') is "e"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-column') is "b-start / b-start"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-column-start') is "b-start"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-column-end') is "b-start"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridUniqueColumnBStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-row') is "g-start / g-start"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-row-start') is "g-start"
+PASS getComputedStyle(GridUniqueRowGStart, '').getPropertyValue('grid-row-end') is "g-start"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-column') is "b / d"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-column-start') is "b"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridUniqueColumnBD, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-row') is "g / h"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-row-start') is "g"
+PASS getComputedStyle(GridUniqueRowGH, '').getPropertyValue('grid-row-end') is "h"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-row') is "f / f"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-row-start') is "f"
+PASS getComputedStyle(GridUniqueColumnCRowF, '').getPropertyValue('grid-row-end') is "f"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-column') is "b / 4"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-column-start') is "b"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-column-end') is "4"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridUniqueColumnBInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-row') is "3 / h"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-row-start') is "3"
+PASS getComputedStyle(GridUniqueRowIntegerH, '').getPropertyValue('grid-row-end') is "h"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-column') is "2 / auto"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-column-start') is "2"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-row') is "g / g"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-row-start') is "g"
+PASS getComputedStyle(GridUniqueColumnIntegerRowG, '').getPropertyValue('grid-row-end') is "g"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-row') is "2 / auto"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-row-start') is "2"
+PASS getComputedStyle(GridUniqueColumnARowInteger, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-column') is "c-start / c-start"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-column-start') is "c-start"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-column-end') is "c-start"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridUniqueColumnCStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-row') is "f-start / f-start"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-row-start') is "f-start"
+PASS getComputedStyle(GridUniqueRowFStart, '').getPropertyValue('grid-row-end') is "f-start"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-column') is "c-start / c-start"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-column-start') is "c-start"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-column-end') is "c-start"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-row') is "f-end / f-end"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-row-start') is "f-end"
+PASS getComputedStyle(GridUniqueColumnCStartRowFEnd, '').getPropertyValue('grid-row-end') is "f-end"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-column') is "b-end / b-end"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-column-start') is "b-end"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-column-end') is "b-end"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-row') is "h-start / h-start"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-row-start') is "h-start"
+PASS getComputedStyle(GridUniqueColumnBEndRowHStart, '').getPropertyValue('grid-row-end') is "h-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-column') is "a-start / a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-column-start') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-column-end') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-row') is "d-start / d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-row-start') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowDStart, '').getPropertyValue('grid-row-end') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-column') is "a-start / a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-column-start') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-column-end') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnAStartRowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-column') is "d-start / d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-column-start') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-column-end') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-row') is "c-start / c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-row-start') is "c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDStartRowCStart, '').getPropertyValue('grid-row-end') is "c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-column') is "d / d"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesColumnD, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNoNamesRowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesColumnC, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-row') is "c / c"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasNoNamesRowC, '').getPropertyValue('grid-row-end') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesColumnA, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-row') is "a / a"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-row-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesRowA, '').getPropertyValue('grid-row-end') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-row') is "a / a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-row-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnARowA, '').getPropertyValue('grid-row-end') is "a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-column') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnD, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineAfterRowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnC, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-row') is "c / c"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasNamedLineAfterRowC, '').getPropertyValue('grid-row-end') is "c"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-column') is "a-start / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-column-start') is "a-start"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnStartAStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-row') is "c-start / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-row-start') is "c-start"
+PASS getComputedStyle(GridAreasNamedLineAfterRowStartCStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnA, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineAfterColumnARowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-column') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnD, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnC, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-row') is "c / c"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowC, '').getPropertyValue('grid-row-end') is "c"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-column') is "d-start / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-column-start') is "d-start"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnStartDStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-row') is "d-start / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-row-start') is "d-start"
+PASS getComputedStyle(GridAreasNamedLineBeforeRowStartDStart, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnA, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasNamedLineBeforeColumnARowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-column') is "a / a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-column-end') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-row') is "d-start / d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-row-start') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnAAStartRowDStart, '').getPropertyValue('grid-row-end') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-column') is "d / d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-column-end') is "d-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-row') is "c-start / c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-row-start') is "c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDDStartRowCStart, '').getPropertyValue('grid-row-end') is "c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-row') is "a / a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-row-start') is "a"
+PASS getComputedStyle(GridAreasNoNamesColumnCRowAAStart, '').getPropertyValue('grid-row-end') is "a-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-column') is "d / d"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-row') is "c / c-start"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasNoNamesColumnDRowCCStart, '').getPropertyValue('grid-row-end') is "c-start"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-row') is "auto / auto"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-row-start') is "auto"
+PASS getComputedStyle(GridAreasEnd, '').getPropertyValue('grid-row-end') is "auto"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-row') is "c / c"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasEndColumnARowC, '').getPropertyValue('grid-row-end') is "c"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-column') is "auto / auto"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-column-start') is "auto"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-column-end') is "auto"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasEndRowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-column') is "a / a"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-column-start') is "a"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-column-end') is "a"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasEndColumnARowD, '').getPropertyValue('grid-row-end') is "d"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-column') is "d / d"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-column-start') is "d"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-column-end') is "d"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-row') is "c / c"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-row-start') is "c"
+PASS getComputedStyle(GridAreasRepeatColumnDRowC, '').getPropertyValue('grid-row-end') is "c"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-column') is "d-start / d-end"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-column-start') is "d-start"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-column-end') is "d-end"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-row') is "c-start / c-end"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-row-start') is "c-start"
+PASS getComputedStyle(GridAreasRepeatColumnDStartDEndRowCStartCEnd, '').getPropertyValue('grid-row-end') is "c-end"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-column') is "c / c"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-column-start') is "c"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-column-end') is "c"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-row') is "d / d"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-row-start') is "d"
+PASS getComputedStyle(GridAreasRepeatColumnCRowD, '').getPropertyValue('grid-row-end') is "d"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,39 +5,39 @@
</span><span class="cx"> <style type="text/css">
</span><span class="cx">
</span><span class="cx"> .gridAreas {
</span><del>- -webkit-grid-template-areas: ". a a"
</del><ins>+ grid-template-areas: ". a a"
</ins><span class="cx"> "c a a"
</span><span class="cx"> ". . d";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridNoLineNames {
</span><del>- -webkit-grid-template-columns: 50px 100px 200px;
- -webkit-grid-template-rows: 50px 100px 200px;
</del><ins>+ grid-template-columns: 50px 100px 200px;
+ grid-template-rows: 50px 100px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridUniqueNames {
</span><del>- -webkit-grid-template-columns: [a] 50px (b b-start) 100px [c] 200px [d];
- -webkit-grid-template-rows: [e] 50px [f] 100px (g g-start) 200px [h];
</del><ins>+ grid-template-columns: [a] 50px (b b-start) 100px [c] 200px [d];
+ grid-template-rows: [e] 50px [f] 100px (g g-start) 200px [h];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNamedLineBeforeGridArea {
</span><del>- -webkit-grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px;
- -webkit-grid-template-rows: (c-start) 50px (d-start) 100px 200px;
</del><ins>+ grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px;
+ grid-template-rows: (c-start) 50px (d-start) 100px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNamedLineAfterGridArea {
</span><del>- -webkit-grid-template-columns: 50px 100px (a-start) 200px;
- -webkit-grid-template-rows: 50px 100px (c-start) 200px;
</del><ins>+ grid-template-columns: 50px 100px (a-start) 200px;
+ grid-template-rows: 50px 100px (c-start) 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithEndLines {
</span><del>- -webkit-grid-template-columns: 50px 100px (a-end) 200px (c-end);
- -webkit-grid-template-rows: 50px (c-end) 100px (d-end) 200px;
</del><ins>+ grid-template-columns: 50px 100px (a-end) 200px (c-end);
+ grid-template-rows: 50px (c-end) 100px (d-end) 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridRepeatedNames {
</span><del>- -webkit-grid-template-columns: (d-start) 50px (d-start) 100px (d-start) 200px;
- -webkit-grid-template-rows: 50px (c-end) 100px (c-end) 200px (c-end);
</del><ins>+ grid-template-columns: (d-start) 50px (d-start) 100px (d-start) 200px;
+ grid-template-rows: 50px (c-end) 100px (c-end) 200px (c-end);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -46,142 +46,142 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b;" id="GridUniqueColumnB"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: e;" id="GridUniqueRowE"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" id="GridUniqueColumnBStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: g-start;" id="GridUniqueRowGStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b;" id="GridUniqueColumnB"></div>
+ <div class="sizedToGridArea" style="grid-row: e;" id="GridUniqueRowE"></div>
+ <div class="sizedToGridArea" style="grid-column: b-start;" id="GridUniqueColumnBStart"></div>
+ <div class="sizedToGridArea" style="grid-row: g-start;" id="GridUniqueRowGStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b / d;" id="GridUniqueColumnBD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: g / h;" id="GridUniqueRowGH"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: f;" id="GridUniqueColumnCRowF"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b / d;" id="GridUniqueColumnBD"></div>
+ <div class="sizedToGridArea" style="grid-row: g / h;" id="GridUniqueRowGH"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: f;" id="GridUniqueColumnCRowF"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check positioning using unique grid-line names mixed with integers -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b / 4;" id="GridUniqueColumnBInteger"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: 3 / h;" id="GridUniqueRowIntegerH"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: 2; -webkit-grid-row: g;" id="GridUniqueColumnIntegerRowG"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: 2;" id="GridUniqueColumnARowInteger"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b / 4;" id="GridUniqueColumnBInteger"></div>
+ <div class="sizedToGridArea" style="grid-row: 3 / h;" id="GridUniqueRowIntegerH"></div>
+ <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" id="GridUniqueColumnIntegerRowG"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" id="GridUniqueColumnARowInteger"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" id="GridUniqueColumnCStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" id="GridUniqueRowFStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" id="GridUniqueColumnCStartRowFEnd"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" id="GridUniqueColumnBEndRowHStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: c-start;" id="GridUniqueColumnCStart"></div>
+ <div class="sizedToGridArea" style="grid-row: f-start;" id="GridUniqueRowFStart"></div>
+ <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" id="GridUniqueColumnCStartRowFEnd"></div>
+ <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" id="GridUniqueColumnBEndRowHStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that gridArea's implicit names are well defined -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d-start;" id="GridAreasNoNamesColumnAStartRowDStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d;" id="GridAreasNoNamesColumnAStartRowD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d-start; -webkit-grid-row: c-start;"id="GridAreasNoNamesColumnDStartRowCStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;" id="GridAreasNoNamesColumnAStartRowDStart"></div>
+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" id="GridAreasNoNamesColumnAStartRowD"></div>
+ <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;"id="GridAreasNoNamesColumnDStartRowCStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check positioning using grid areas -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" id="GridAreasNoNamesColumnD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" id="GridAreasNoNamesRowD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" id="GridAreasNoNamesColumnC"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" id="GridAreasNoNamesRowC"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNoNamesColumnD"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNoNamesRowD"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNoNamesColumnC"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNoNamesRowC"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" id="GridAreasNoNamesColumnA"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a;" id="GridAreasNoNamesRowA"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" id="GridAreasNoNamesColumnARowA"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNoNamesColumnA"></div>
+ <div class="sizedToGridArea" style="grid-row: a;" id="GridAreasNoNamesRowA"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" id="GridAreasNoNamesColumnARowA"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" id="GridAreasNamedLineAfterColumnD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" id="GridAreasNamedLineAfterRowD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" id="GridAreasNamedLineAfterColumnC"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" id="GridAreasNamedLineAfterRowC"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNamedLineAfterColumnD"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineAfterRowD"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineAfterColumnC"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineAfterRowC"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column-start: a-start;" id="GridAreasNamedLineAfterColumnStartAStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row-start: c-start;" id="GridAreasNamedLineAfterRowStartCStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column-start: a-start;" id="GridAreasNamedLineAfterColumnStartAStart"></div>
+ <div class="sizedToGridArea" style="grid-row-start: c-start;" id="GridAreasNamedLineAfterRowStartCStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" id="GridAreasNamedLineAfterColumnA"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" id="GridAreasNamedLineAfterColumnARowD"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineAfterColumnA"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineAfterColumnARowD"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Use explicitly named grid lines if they're defined before the grid area -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" id="GridAreasNamedLineBeforeColumnD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" id="GridAreasNamedLineBeforeRowD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" id="GridAreasNamedLineBeforeColumnC"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" id="GridAreasNamedLineBeforeRowC"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNamedLineBeforeColumnD"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineBeforeRowD"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineBeforeColumnC"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineBeforeRowC"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column-start: d-start;" id="GridAreasNamedLineBeforeColumnStartDStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row-start: d-start;" id="GridAreasNamedLineBeforeRowStartDStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column-start: d-start;" id="GridAreasNamedLineBeforeColumnStartDStart"></div>
+ <div class="sizedToGridArea" style="grid-row-start: d-start;" id="GridAreasNamedLineBeforeRowStartDStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" id="GridAreasNamedLineBeforeColumnA"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" id="GridAreasNamedLineBeforeColumnARowD"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineBeforeColumnA"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineBeforeColumnARowD"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that a "-start" ident in a end column or a "-end" ident in a start column is not treated as a implicit grid line of a grid area -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a / a-start; -webkit-grid-row: d-start;" id="GridAreasNoNamesColumnAAStartRowDStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d / d-start; -webkit-grid-row: c-start;" id="GridAreasNoNamesColumnDDStartRowCStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: a / a-start;" id="GridAreasNoNamesColumnCRowAAStart"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c / c-start;" id="GridAreasNoNamesColumnDRowCCStart"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-start;" id="GridAreasNoNamesColumnAAStartRowDStart"></div>
+ <div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" id="GridAreasNoNamesColumnDDStartRowCStart"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" id="GridAreasNoNamesColumnCRowAAStart"></div>
+ <div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" id="GridAreasNoNamesColumnDRowCCStart"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithEndLines">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a" id="GridAreasEnd"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: c" id="GridAreasEndColumnARowC"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" id="GridAreasEndRowD"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" id="GridAreasEndColumnARowD"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a" id="GridAreasEnd"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: c" id="GridAreasEndColumnARowC"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" id="GridAreasEndRowD"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasEndColumnARowD"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that we always pick the first definition when multiple grid lines have the same name -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridRepeatedNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c" id="GridAreasRepeatColumnDRowC"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d-start / d-end; -webkit-grid-row: c-start / c-end" id="GridAreasRepeatColumnDStartDEndRowCStartCEnd"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: d" id="GridAreasRepeatColumnCRowD"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d; grid-row: c" id="GridAreasRepeatColumnDRowC"></div>
+ <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" id="GridAreasRepeatColumnDStartDEndRowCStartCEnd"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: d" id="GridAreasRepeatColumnCRowD"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,50 +6,50 @@
</span><span class="cx"> <style type="text/css">
</span><span class="cx">
</span><span class="cx"> .gridAreas {
</span><del>- -webkit-grid-template-areas: ". a a"
</del><ins>+ grid-template-areas: ". a a"
</ins><span class="cx"> "c a a"
</span><span class="cx"> ". . d";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAreasSpecial {
</span><del>- -webkit-grid-template-areas: ". a-start a-start"
</del><ins>+ grid-template-areas: ". a-start a-start"
</ins><span class="cx"> "c a-end a-end"
</span><span class="cx"> ". . d";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridNoLineNames {
</span><del>- -webkit-grid-template-columns: 50px 100px 200px;
- -webkit-grid-template-rows: 50px 100px 200px;
</del><ins>+ grid-template-columns: 50px 100px 200px;
+ grid-template-rows: 50px 100px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridUniqueNames {
</span><del>- -webkit-grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d];
- -webkit-grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h];
</del><ins>+ grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d];
+ grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNamedLineBeforeGridArea {
</span><del>- -webkit-grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
- -webkit-grid-template-rows: [c-start] 50px [d-start] 100px 200px;
</del><ins>+ grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
+ grid-template-rows: [c-start] 50px [d-start] 100px 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithNamedLineAfterGridArea {
</span><del>- -webkit-grid-template-columns: 50px 100px [a-start] 200px;
- -webkit-grid-template-rows: 50px 100px [c-start] 200px;
</del><ins>+ grid-template-columns: 50px 100px [a-start] 200px;
+ grid-template-rows: 50px 100px [c-start] 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithEndLines {
</span><del>- -webkit-grid-template-columns: 50px 100px [a-end] 200px [c-end];
- -webkit-grid-template-rows: 50px [c-end] 100px [d-end] 200px;
</del><ins>+ grid-template-columns: 50px 100px [a-end] 200px [c-end];
+ grid-template-rows: 50px [c-end] 100px [d-end] 200px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridRepeatedNames {
</span><del>- -webkit-grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
- -webkit-grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
</del><ins>+ grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
+ grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridImplicitArea {
</span><del>- -webkit-grid-template-columns: 50px [z-start] 100px [z-end] 200px;
- -webkit-grid-template-rows: 50px [z-start] 100px 200px [z-end];
</del><ins>+ grid-template-columns: 50px [z-start] 100px [z-end] 200px;
+ grid-template-rows: 50px [z-start] 100px 200px [z-end];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><span class="lines">@@ -62,186 +62,186 @@
</span><span class="cx"> <!-- Check positioning using unique grid-line names -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-column: b-start;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b / d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: g / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: f;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b / d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: g / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: f;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check positioning using unique grid-line names mixed with integers -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: b / 4;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: 3 / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: 2; -webkit-grid-row: g;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: 2;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: b / 4;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: 3 / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: c-start;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: f-start;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that gridArea's implicit names are well defined -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d-start; -webkit-grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check positioning using grid areas -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column-start: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row-start: c-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column-start: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row-start: c-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Use explicitly named grid lines if they're defined before the grid area -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
+ <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that a "-start" ident in a end column or a "-end" ident in a start column is not treated as a implicit grid line of a grid area -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a / a-start; -webkit-grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d / d-start; -webkit-grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: a / a-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c / c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridWithEndLines">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: c" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: c" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check that we always pick the first definition when multiple grid lines have the same name -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridRepeatedNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: d; -webkit-grid-row: c" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: d-start / d-end; -webkit-grid-row: c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c; -webkit-grid-row: d" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: d; grid-row: c" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column: c; grid-row: d" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check behavior with areas named *-start or *-end -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridNoLineNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridWithNamedLineBeforeGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridWithNamedLineAfterGridArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a-start; -webkit-grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
+ <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Check behavior with lines named *-start or *-end -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridUniqueNames">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: -start;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: -end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column-end: -start; -webkit-grid-row-start: -end;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: -start;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: -end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea" style="grid-column-end: -start; grid-row-start: -end;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
</ins><span class="cx">
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -249,9 +249,9 @@
</span><span class="cx"> <!-- Check that <custom-ident>-{start|end} named lines define implicit named areas -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreas gridImplicitArea">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: z;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: z;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column-end: z; -webkit-grid-row-start: z;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
+ <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,154 +4,154 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-columns and grid-template-rows set through CSS
</span><del>-PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "53%"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "27%"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "auto"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-columns') is "100px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-rows') is "150px"
-PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-template-columns') is "64px"
-PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(10%, 15px)"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%)"
-PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-template-columns') is "-webkit-min-content"
-PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-min-content"
-PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "-webkit-max-content"
-PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content"
-PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-template-columns') is "1fr"
-PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('-webkit-grid-template-rows') is "2fr"
-PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('-webkit-grid-template-columns') is "150px"
-PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('-webkit-grid-template-rows') is "75px"
-PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('-webkit-grid-template-columns') is "calc(50% + 150px)"
-PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('-webkit-grid-template-rows') is "calc(65% + 75px)"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(10%, 15px)"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%)"
-PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(10%, calc(50% + 15px))"
-PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(calc(20px + 10%), 50%)"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px)"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, auto)"
</del><ins>+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "53%"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "27%"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "auto"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-columns') is "64px"
+PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, 15px)"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-rows') is "minmax(20px, 50%)"
+PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-template-columns') is "-webkit-min-content"
+PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-template-rows') is "-webkit-min-content"
+PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-template-columns') is "-webkit-max-content"
+PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-template-rows') is "-webkit-max-content"
+PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('grid-template-columns') is "1fr"
+PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('grid-template-rows') is "2fr"
+PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('grid-template-columns') is "150px"
+PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('grid-template-rows') is "75px"
+PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('grid-template-columns') is "calc(50% + 150px)"
+PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('grid-template-rows') is "calc(65% + 75px)"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, 15px)"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(20px, 50%)"
+PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, calc(50% + 15px))"
+PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(calc(20px + 10%), 50%)"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(auto, 20px)"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-min-content, auto)"
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
</span><del>-PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-columns and grid-template-rows through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
-PASS element.style.webkitGridTemplateColumns is "18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS element.style.webkitGridTemplateRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "55%"
-PASS element.style.webkitGridTemplateColumns is "55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "40%"
-PASS element.style.webkitGridTemplateRows is "40%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto"
-PASS element.style.webkitGridTemplateColumns is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "auto"
-PASS element.style.webkitGridTemplateRows is "auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
-PASS element.style.webkitGridTemplateColumns is "10vw"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "150px"
-PASS element.style.webkitGridTemplateRows is "25vh"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "-webkit-min-content"
-PASS element.style.webkitGridTemplateColumns is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-min-content"
-PASS element.style.webkitGridTemplateRows is "-webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "-webkit-max-content"
-PASS element.style.webkitGridTemplateColumns is "-webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content"
-PASS element.style.webkitGridTemplateRows is "-webkit-max-content"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
+PASS element.style.gridTemplateColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
+PASS element.style.gridTemplateRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "55%"
+PASS element.style.gridTemplateColumns is "55%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "40%"
+PASS element.style.gridTemplateRows is "40%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "auto"
+PASS element.style.gridTemplateColumns is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "auto"
+PASS element.style.gridTemplateRows is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "80px"
+PASS element.style.gridTemplateColumns is "10vw"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "150px"
+PASS element.style.gridTemplateRows is "25vh"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "-webkit-min-content"
+PASS element.style.gridTemplateColumns is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "-webkit-min-content"
+PASS element.style.gridTemplateRows is "-webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "-webkit-max-content"
+PASS element.style.gridTemplateColumns is "-webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "-webkit-max-content"
+PASS element.style.gridTemplateRows is "-webkit-max-content"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(55%, 45px)"
-PASS element.style.webkitGridTemplateColumns is "minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(30px, 40%)"
-PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(220px, 48px)"
-PASS element.style.webkitGridTemplateColumns is "minmax(22em, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(80px, 50px)"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(-webkit-min-content, 48px)"
-PASS element.style.webkitGridTemplateColumns is "minmax(-webkit-min-content, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(80px, -webkit-min-content)"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(220px, -webkit-max-content)"
-PASS element.style.webkitGridTemplateColumns is "minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, 50px)"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(-webkit-min-content, -webkit-max-content)"
-PASS element.style.webkitGridTemplateColumns is "minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "3600fr"
-PASS element.style.webkitGridTemplateColumns is "3600fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "154fr"
-PASS element.style.webkitGridTemplateRows is "154fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "3.1459fr"
-PASS element.style.webkitGridTemplateColumns is "3.1459fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "2.718fr"
-PASS element.style.webkitGridTemplateRows is "2.718fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "3fr"
-PASS element.style.webkitGridTemplateColumns is "3fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "4fr"
-PASS element.style.webkitGridTemplateRows is "4fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 48px)"
-PASS element.style.webkitGridTemplateColumns is "minmax(auto, 8vh)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(80px, auto)"
-PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(55%, 45px)"
+PASS element.style.gridTemplateColumns is "minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(30px, 40%)"
+PASS element.style.gridTemplateRows is "minmax(30px, 40%)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(220px, 48px)"
+PASS element.style.gridTemplateColumns is "minmax(22em, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, 50px)"
+PASS element.style.gridTemplateRows is "minmax(10vw, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(-webkit-min-content, 48px)"
+PASS element.style.gridTemplateColumns is "minmax(-webkit-min-content, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, -webkit-min-content)"
+PASS element.style.gridTemplateRows is "minmax(10vw, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(220px, -webkit-max-content)"
+PASS element.style.gridTemplateColumns is "minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-max-content, 50px)"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, 5em)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS element.style.gridTemplateColumns is "minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3600fr"
+PASS element.style.gridTemplateColumns is "3600fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "154fr"
+PASS element.style.gridTemplateRows is "154fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3.1459fr"
+PASS element.style.gridTemplateColumns is "3.1459fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "2.718fr"
+PASS element.style.gridTemplateRows is "2.718fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3fr"
+PASS element.style.gridTemplateColumns is "3fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "4fr"
+PASS element.style.gridTemplateRows is "4fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(auto, 48px)"
+PASS element.style.gridTemplateColumns is "minmax(auto, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, auto)"
+PASS element.style.gridTemplateRows is "minmax(10vw, auto)"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to bad values through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
-PASS element.style.webkitGridTemplateColumns is "18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
-PASS element.style.webkitGridTemplateRows is "66px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS element.style.webkitGridTemplateColumns is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS element.style.webkitGridTemplateRows is "none"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
+PASS element.style.gridTemplateColumns is "18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
+PASS element.style.gridTemplateRows is "66px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS element.style.gridTemplateColumns is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS element.style.gridTemplateRows is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px [last]'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 101%'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '50px [last]'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 101%'
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'initial' through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '150% [last]'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 1fr'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '150% [last]'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 1fr'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetmultipleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,114 +4,114 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting |grid-template-columns| and |grid-template-rows| set through CSS
</span><del>-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "7px 11px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "17px 2px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "53% 99%"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "27% 52%"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "auto auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "auto auto"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-columns') is "100px 120px"
-PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-template-rows') is "150px 170px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-template-columns') is "15px auto 100px"
-PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('-webkit-grid-template-rows') is "120px 18px auto"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-template-columns') is "50% 120px"
-PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('-webkit-grid-template-rows') is "35% 168px"
-PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "-webkit-min-content -webkit-max-content"
-PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content -webkit-min-content"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(45px, 30%) 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is "120px minmax(35%, 10px)"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(-webkit-min-content, 30%) 15px"
-PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "120px minmax(35%, -webkit-max-content)"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-template-columns') is "1fr 2fr"
-PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('-webkit-grid-template-rows') is "3fr 4fr"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(-webkit-min-content, 45px) 2fr"
-PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "3fr minmax(14px, -webkit-max-content)"
-PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('-webkit-grid-template-columns') is "200px 100px"
-PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('-webkit-grid-template-rows') is "150px 75px"
-PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is "50% 80px"
-PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is "88px 25%"
-PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "calc(30px + 20%) minmax(-webkit-min-content, 80px)"
-PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(25%, -webkit-max-content) calc(10% - 7px)"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(calc(23px + 10%), 400px) 120px"
-PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px minmax(5%, calc(50% - 125px))"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px) 10%"
-PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content minmax(-webkit-min-content, auto)"
</del><ins>+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "53% 99%"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "27% 52%"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "auto auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "auto auto"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px"
+PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px 170px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-columns') is "15px auto 100px"
+PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-rows') is "120px 18px auto"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-columns') is "50% 120px"
+PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-rows') is "35% 168px"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "-webkit-min-content -webkit-max-content"
+PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "-webkit-max-content -webkit-min-content"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "minmax(45px, 30%) 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px minmax(35%, 10px)"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "minmax(-webkit-min-content, 30%) 15px"
+PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-rows') is "120px minmax(35%, -webkit-max-content)"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-columns') is "1fr 2fr"
+PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-rows') is "3fr 4fr"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-columns') is "minmax(-webkit-min-content, 45px) 2fr"
+PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-rows') is "3fr minmax(14px, -webkit-max-content)"
+PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-columns') is "200px 100px"
+PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-rows') is "150px 75px"
+PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "50% 80px"
+PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 25%"
+PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "calc(30px + 20%) minmax(-webkit-min-content, 80px)"
+PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "minmax(25%, -webkit-max-content) calc(10% - 7px)"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(calc(23px + 10%), 400px) 120px"
+PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px minmax(5%, calc(50% - 125px))"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(auto, 20px) 10%"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "-webkit-max-content minmax(-webkit-min-content, auto)"
</ins><span class="cx">
</span><span class="cx"> Test the initial value
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-rows and grid-template-columns through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px 22px"
-PASS element.style.webkitGridTemplateColumns is "18px 22px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px 70px"
-PASS element.style.webkitGridTemplateRows is "66px 70px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "55% 80%"
-PASS element.style.webkitGridTemplateColumns is "55% 80%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "40% 63%"
-PASS element.style.webkitGridTemplateRows is "40% 63%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto auto"
-PASS element.style.webkitGridTemplateColumns is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "auto auto"
-PASS element.style.webkitGridTemplateRows is "auto auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto 160px 22px"
-PASS element.style.webkitGridTemplateColumns is "auto 16em 22px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "56% 100px auto"
-PASS element.style.webkitGridTemplateRows is "56% 10em auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "160px minmax(16px, 20px)"
-PASS element.style.webkitGridTemplateColumns is "16em minmax(16px, 20px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(10%, 15%) auto"
-PASS element.style.webkitGridTemplateRows is "minmax(10%, 15%) auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "160px 2fr"
-PASS element.style.webkitGridTemplateColumns is "16em 2fr"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "14fr auto"
-PASS element.style.webkitGridTemplateRows is "14fr auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50% 96px"
-PASS element.style.webkitGridTemplateColumns is "50% 12vw"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "5% 510px"
-PASS element.style.webkitGridTemplateRows is "5% 85vh"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto minmax(16px, auto)"
-PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(auto, 15%) 80px"
-PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px 22px"
+PASS element.style.gridTemplateColumns is "18px 22px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px 70px"
+PASS element.style.gridTemplateRows is "66px 70px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "55% 80%"
+PASS element.style.gridTemplateColumns is "55% 80%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "40% 63%"
+PASS element.style.gridTemplateRows is "40% 63%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "auto auto"
+PASS element.style.gridTemplateColumns is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "auto auto"
+PASS element.style.gridTemplateRows is "auto auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "auto 160px 22px"
+PASS element.style.gridTemplateColumns is "auto 16em 22px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "56% 100px auto"
+PASS element.style.gridTemplateRows is "56% 10em auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px minmax(16px, 20px)"
+PASS element.style.gridTemplateColumns is "16em minmax(16px, 20px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(10%, 15%) auto"
+PASS element.style.gridTemplateRows is "minmax(10%, 15%) auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 2fr"
+PASS element.style.gridTemplateColumns is "16em 2fr"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "14fr auto"
+PASS element.style.gridTemplateRows is "14fr auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50% 96px"
+PASS element.style.gridTemplateColumns is "50% 12vw"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "5% 510px"
+PASS element.style.gridTemplateRows is "5% 85vh"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "auto minmax(16px, auto)"
+PASS element.style.gridTemplateColumns is "auto minmax(16px, auto)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(auto, 15%) 80px"
+PASS element.style.gridTemplateRows is "minmax(auto, 15%) 10vw"
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values set from CSS
</span><del>-PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
-PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows') is 'none'
+PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx">
</span><span class="cx"> Test setting and getting wrong values from JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr [last]"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% [middle] 45px"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr [last]"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% [middle] 45px"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 1fr [last]"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "101% [middle] 45px"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 1fr [last]"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "101% [middle] 45px"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows to 'initial' through JS
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "150% [middle] 55px"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "1fr [line] 2fr [line]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "150% [middle] 55px"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "1fr [line] 2fr [line]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsetmultiplehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,88 +4,88 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: 7px 11px;
- -webkit-grid-template-rows: 17px 2px;
</del><ins>+ grid-template-columns: 7px 11px;
+ grid-template-rows: 17px 2px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53% 99%;
- -webkit-grid-template-rows: 27% 52%;
</del><ins>+ grid-template-columns: 53% 99%;
+ grid-template-rows: 27% 52%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: auto auto;
- -webkit-grid-template-rows: auto auto;
</del><ins>+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithEM {
</span><del>- -webkit-grid-template-columns: 10em 12em;
- -webkit-grid-template-rows: 15em 17em;
</del><ins>+ grid-template-columns: 10em 12em;
+ grid-template-rows: 15em 17em;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithNoneAndAuto {
</span><del>- -webkit-grid-template-columns: none auto;
- -webkit-grid-template-rows: none auto;
</del><ins>+ grid-template-columns: none auto;
+ grid-template-rows: none auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridNoneWithAndFixed {
</span><del>- -webkit-grid-template-columns: none 15px;
- -webkit-grid-template-rows: none 22px;
</del><ins>+ grid-template-columns: none 15px;
+ grid-template-rows: none 22px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithThreeItems {
</span><del>- -webkit-grid-template-columns: 15px auto 10em;
- -webkit-grid-template-rows: 12em 18px auto;
</del><ins>+ grid-template-columns: 15px auto 10em;
+ grid-template-rows: 12em 18px auto;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercentAndViewportPercent {
</span><del>- -webkit-grid-template-columns: 50% 15vw;
- -webkit-grid-template-rows: 35% 28vh;
</del><ins>+ grid-template-columns: 50% 15vw;
+ grid-template-rows: 35% 28vh;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitContentAndFitAvailable {
</span><del>- -webkit-grid-template-columns: -webkit-content-available;
- -webkit-grid-template-rows: -webkit-fit-content -webkit-fit-available;
</del><ins>+ grid-template-columns: -webkit-content-available;
+ grid-template-rows: -webkit-fit-content -webkit-fit-available;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content -webkit-max-content;
- -webkit-grid-template-rows: -webkit-max-content -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-min-content -webkit-max-content;
+ grid-template-rows: -webkit-max-content -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxAndFixed {
</span><del>- -webkit-grid-template-columns: minmax(45px, 30%) 15px;
- -webkit-grid-template-rows: 12em minmax(35%, 10px);
</del><ins>+ grid-template-columns: minmax(45px, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, 10px);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithMinMaxAndMinMaxContent {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 30%) 15px;
- -webkit-grid-template-rows: 12em minmax(35%, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 30%) 15px;
+ grid-template-rows: 12em minmax(35%, -webkit-max-content);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithFractionFraction {
</span><del>- -webkit-grid-template-columns: 1fr 2fr;
- -webkit-grid-template-rows: 3fr 4fr;
</del><ins>+ grid-template-columns: 1fr 2fr;
+ grid-template-rows: 3fr 4fr;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFractionMinMax {
</span><del>- -webkit-grid-template-columns: minmax(-webkit-min-content, 45px) 2fr;
- -webkit-grid-template-rows: 3fr minmax(14px, -webkit-max-content);
</del><ins>+ grid-template-columns: minmax(-webkit-min-content, 45px) 2fr;
+ grid-template-rows: 3fr minmax(14px, -webkit-max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcCalc {
</span><del>- -webkit-grid-template-columns: calc(200px) calc(10em);
- -webkit-grid-template-rows: calc(15em) calc(75px);
</del><ins>+ grid-template-columns: calc(200px) calc(10em);
+ grid-template-rows: calc(15em) calc(75px);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithCalcAndFixed {
</span><del>- -webkit-grid-template-columns: calc(50%) 8em;
- -webkit-grid-template-rows: 88px calc(25%);
</del><ins>+ grid-template-columns: calc(50%) 8em;
+ grid-template-rows: 88px calc(25%);
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithCalcAndMinMax {
</span><del>- -webkit-grid-template-columns: calc(30px + 20%) minmax(-webkit-min-content, 80px);
- -webkit-grid-template-rows: minmax(25%, -webkit-max-content) calc(10% - 7px);
</del><ins>+ grid-template-columns: calc(30px + 20%) minmax(-webkit-min-content, 80px);
+ grid-template-rows: minmax(25%, -webkit-max-content) calc(10% - 7px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
- -webkit-grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
</del><ins>+ grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
+ grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithAutoInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(auto, 20px) 10%;
- -webkit-grid-template-rows: -webkit-max-content minmax(-webkit-min-content, auto);
</del><ins>+ grid-template-columns: minmax(auto, 20px) 10%;
+ grid-template-rows: -webkit-max-content minmax(-webkit-min-content, auto);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridcolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,73 +4,73 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridWithNone {
</span><del>- -webkit-grid-template-columns: none;
- -webkit-grid-template-rows: none;
</del><ins>+ grid-template-columns: none;
+ grid-template-rows: none;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: 10px;
- -webkit-grid-template-rows: 15px;
</del><ins>+ grid-template-columns: 10px;
+ grid-template-rows: 15px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53%;
- -webkit-grid-template-rows: 27%;
</del><ins>+ grid-template-columns: 53%;
+ grid-template-rows: 27%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: auto;
- -webkit-grid-template-rows: auto;
</del><ins>+ grid-template-columns: auto;
+ grid-template-rows: auto;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithEM {
</span><del>- -webkit-grid-template-columns: 10em;
- -webkit-grid-template-rows: 15em;
</del><ins>+ grid-template-columns: 10em;
+ grid-template-rows: 15em;
</ins><span class="cx"> font: 10px Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithViewPortPercentage {
</span><del>- -webkit-grid-template-columns: 8vw;
- -webkit-grid-template-rows: 10vh;
</del><ins>+ grid-template-columns: 8vw;
+ grid-template-rows: 10vh;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitContent {
</span><del>- -webkit-grid-template-columns: -webkit-fit-content;
- -webkit-grid-template-rows: -webkit-fit-content;
</del><ins>+ grid-template-columns: -webkit-fit-content;
+ grid-template-rows: -webkit-fit-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFitAvailable {
</span><del>- -webkit-grid-template-columns: -webkit-fit-available;
- -webkit-grid-template-rows: -webkit-fit-available;
</del><ins>+ grid-template-columns: -webkit-fit-available;
+ grid-template-rows: -webkit-fit-available;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, 15px);
- -webkit-grid-template-rows: minmax(20px, 50%);
</del><ins>+ grid-template-columns: minmax(10%, 15px);
+ grid-template-rows: minmax(20px, 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinContent {
</span><del>- -webkit-grid-template-columns: -webkit-min-content;
- -webkit-grid-template-rows: -webkit-min-content;
</del><ins>+ grid-template-columns: -webkit-min-content;
+ grid-template-rows: -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMaxContent {
</span><del>- -webkit-grid-template-columns: -webkit-max-content;
- -webkit-grid-template-rows: -webkit-max-content;
</del><ins>+ grid-template-columns: -webkit-max-content;
+ grid-template-rows: -webkit-max-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFraction {
</span><del>- -webkit-grid-template-columns: 1fr;
- -webkit-grid-template-rows: 2fr;
</del><ins>+ grid-template-columns: 1fr;
+ grid-template-rows: 2fr;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalc {
</span><del>- -webkit-grid-template-columns: calc(150px);
- -webkit-grid-template-rows: calc(75px);
</del><ins>+ grid-template-columns: calc(150px);
+ grid-template-rows: calc(75px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcComplex {
</span><del>- -webkit-grid-template-columns: calc(50% + 150px);
- -webkit-grid-template-rows: calc(65% + 75px);
</del><ins>+ grid-template-columns: calc(50% + 150px);
+ grid-template-rows: calc(65% + 75px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, calc(15px));
- -webkit-grid-template-rows: minmax(calc(20px), 50%);
</del><ins>+ grid-template-columns: minmax(10%, calc(15px));
+ grid-template-rows: minmax(calc(20px), 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithCalcComplexInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(10%, calc(50% + 15px));
- -webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
</del><ins>+ grid-template-columns: minmax(10%, calc(50% + 15px));
+ grid-template-rows: minmax(calc(20px + 10%), 50%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAutoInsideMinMax {
</span><del>- -webkit-grid-template-columns: minmax(auto, 20px);
- -webkit-grid-template-rows: minmax(-webkit-min-content, auto);
</del><ins>+ grid-template-columns: minmax(auto, 20px);
+ grid-template-rows: minmax(-webkit-min-content, auto);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridelementrepeatgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,33 +4,33 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-columns and grid-template-rows set through CSS
</span><del>-PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "15%"
-PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "18px"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(15px, 50%) minmax(15px, 50%)"
-PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "auto auto"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "auto minmax(100px, 120px) auto minmax(100px, 120px)"
-PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(5px, 10px) auto minmax(5px, 10px) auto"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "auto [middle] 250px [end] auto [middle] 250px [end]"
-PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [start] auto [end] 10px [start] auto [end]"
-PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[before] auto [before] auto"
-PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[before] 10px [before] 10px"
-PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px [end]"
-PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [end]"
-PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 250px 250px"
-PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[start] 10px 10px"
-PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 140px 250px 250px"
-PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "auto 10px 10px"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 15% [last]"
-PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px [end] auto"
</del><ins>+PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('grid-template-columns') is "15%"
+PASS window.getComputedStyle(singleSingleTrackRepeat, '').getPropertyValue('grid-template-rows') is "18px"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('grid-template-columns') is "minmax(15px, 50%) minmax(15px, 50%)"
+PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('grid-template-rows') is "auto auto"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('grid-template-columns') is "auto minmax(100px, 120px) auto minmax(100px, 120px)"
+PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('grid-template-rows') is "minmax(5px, 10px) auto minmax(5px, 10px) auto"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "auto [middle] 250px [end] auto [middle] 250px [end]"
+PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "10px [start] auto [end] 10px [start] auto [end]"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "[before] auto [before] auto"
+PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "[before] 10px [before] 10px"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "250px [end]"
+PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "10px [end]"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('grid-template-columns') is "[start] 250px 250px"
+PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('grid-template-rows') is "[start] 10px 10px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('grid-template-columns') is "[start] 140px 250px 250px"
+PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('grid-template-rows') is "auto 10px 10px"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-columns') is "250px 250px 15% [last]"
+PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-rows') is "10px 10px [end] auto"
</ins><span class="cx">
</span><span class="cx"> Test invalid repeat syntax.
</span><del>-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
</del><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnongridelementrepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,48 +4,48 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .singleSingleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(1, 18px);
- -webkit-grid-template-columns: repeat(1, 15%);
</del><ins>+ grid-template-rows: repeat(1, 18px);
+ grid-template-columns: repeat(1, 15%);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoSingleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, auto);
- -webkit-grid-template-columns: repeat(2, minmax(15px, 50%));
</del><ins>+ grid-template-rows: repeat(2, auto);
+ grid-template-columns: repeat(2, minmax(15px, 50%));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, minmax(5px, 10px) auto);
- -webkit-grid-template-columns: repeat(2, auto minmax(100px, 120px));
</del><ins>+ grid-template-rows: repeat(2, minmax(5px, 10px) auto);
+ grid-template-columns: repeat(2, auto minmax(100px, 120px));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackWithNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, 10px [start] auto [end]);
- -webkit-grid-template-columns: repeat(2, auto [middle] 250px [end]);
</del><ins>+ grid-template-rows: repeat(2, 10px [start] auto [end]);
+ grid-template-columns: repeat(2, auto [middle] 250px [end]);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .twoDoubleTrackWithTrailingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, [before] 10px);
- -webkit-grid-template-columns: repeat(2, [before] auto);
</del><ins>+ grid-template-rows: repeat(2, [before] 10px);
+ grid-template-columns: repeat(2, [before] auto);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .trailingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: repeat(1, 10px) [end];
- -webkit-grid-template-columns: repeat(1, 250px) [end];
</del><ins>+ grid-template-rows: repeat(1, 10px) [end];
+ grid-template-columns: repeat(1, 250px) [end];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .leadingNamedGridLineRepeat {
</span><del>- -webkit-grid-template-rows: [start] repeat(2, 10px);
- -webkit-grid-template-columns: [start] repeat(2, 250px);
</del><ins>+ grid-template-rows: [start] repeat(2, 10px);
+ grid-template-columns: [start] repeat(2, 250px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mixRepeatAfterNonRepeat {
</span><del>- -webkit-grid-template-rows: auto repeat(2, 10px);
- -webkit-grid-template-columns: [start] 140px repeat(2, 250px);
</del><ins>+ grid-template-rows: auto repeat(2, 10px);
+ grid-template-columns: [start] 140px repeat(2, 250px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mixNonRepeatAfterRepeat {
</span><del>- -webkit-grid-template-rows: repeat(2, 10px) [end] auto;
- -webkit-grid-template-columns: repeat(2, 250px) 15% [last];
</del><ins>+ grid-template-rows: repeat(2, 10px) [end] auto;
+ grid-template-columns: repeat(2, 250px) 15% [last];
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -82,7 +82,7 @@
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> element.style.gridDefinitionColumns = gridColumn;
</span><del>- shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx"> testInvalidSyntax("repeat(");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnonnamedgridlinegetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,74 +4,74 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test getting grid-template-columns and grid-template-rows set through CSS
</span><del>-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px"
-PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 15px"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "53% [last]"
-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "27% [last]"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] auto"
-PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "auto [last]"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(10%, 15px)"
-PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%) [last]"
-PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10px [last]"
-PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 15px [last]"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10% [nav] 15% [last]"
-PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 25% [nav2] 75% [last]"
</del><ins>+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "[first] 10px"
+PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "[first] 15px"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "53% [last]"
+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "27% [last]"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "[first] auto"
+PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "auto [last]"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-columns') is "[first] minmax(10%, 15px)"
+PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-rows') is "minmax(20px, 50%) [last]"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-columns') is "[first nav] 10px [last]"
+PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-rows') is "[first nav] 15px [last]"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-columns') is "[first nav] 10% [nav] 15% [last]"
+PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-rows') is "[first nav2] 25% [nav2] 75% [last]"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-columns and grid-template-rows through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 18px"
-PASS element.style.webkitGridTemplateColumns is "[first] 18px"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px [last]"
-PASS element.style.webkitGridTemplateRows is "66px [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 55%"
-PASS element.style.webkitGridTemplateColumns is "[first] 55%"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "40% [last]"
-PASS element.style.webkitGridTemplateRows is "40% [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] auto"
-PASS element.style.webkitGridTemplateColumns is "[first] auto"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "auto [last]"
-PASS element.style.webkitGridTemplateRows is "auto [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] -webkit-min-content"
-PASS element.style.webkitGridTemplateColumns is "[first] -webkit-min-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-min-content [last]"
-PASS element.style.webkitGridTemplateRows is "-webkit-min-content [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] -webkit-max-content"
-PASS element.style.webkitGridTemplateColumns is "[first] -webkit-max-content"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content [last]"
-PASS element.style.webkitGridTemplateRows is "-webkit-max-content [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(55%, 45px)"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(55%, 45px)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(30px, 40%) [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(220px, -webkit-max-content)"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, 50px) [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(220px, -webkit-min-content)"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, 50px) [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(-webkit-min-content, -webkit-max-content)"
-PASS element.style.webkitGridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
-PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS element.style.webkitGridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
-PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
-PASS element.style.webkitGridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] auto [foo] auto [bar]"
-PASS element.style.webkitGridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo bar] auto [foo] auto [bar]"
-PASS element.style.webkitGridTemplateRows is "[foo bar] auto [foo] auto [bar]"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 18px"
+PASS element.style.gridTemplateColumns is "[first] 18px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px [last]"
+PASS element.style.gridTemplateRows is "66px [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 55%"
+PASS element.style.gridTemplateColumns is "[first] 55%"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "40% [last]"
+PASS element.style.gridTemplateRows is "40% [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] auto"
+PASS element.style.gridTemplateColumns is "[first] auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "auto [last]"
+PASS element.style.gridTemplateRows is "auto [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] -webkit-min-content"
+PASS element.style.gridTemplateColumns is "[first] -webkit-min-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "-webkit-min-content [last]"
+PASS element.style.gridTemplateRows is "-webkit-min-content [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] -webkit-max-content"
+PASS element.style.gridTemplateColumns is "[first] -webkit-max-content"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "-webkit-max-content [last]"
+PASS element.style.gridTemplateRows is "-webkit-max-content [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] minmax(55%, 45px)"
+PASS element.style.gridTemplateColumns is "[first] minmax(55%, 45px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(30px, 40%) [last]"
+PASS element.style.gridTemplateRows is "minmax(30px, 40%) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] minmax(220px, -webkit-max-content)"
+PASS element.style.gridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-max-content, 50px) [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] minmax(220px, -webkit-min-content)"
+PASS element.style.gridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-min-content, 50px) [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] minmax(-webkit-min-content, -webkit-max-content)"
+PASS element.style.gridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS element.style.gridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
+PASS element.style.gridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS element.style.gridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
+PASS element.style.gridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
+PASS element.style.gridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] auto [foo] auto [bar]"
+PASS element.style.gridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo bar] auto [foo] auto [bar]"
+PASS element.style.gridTemplateRows is "[foo bar] auto [foo] auto [bar]"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting invalid grid-template-columns and grid-template-rows through JS
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnonnamedgridlinegetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,34 +4,34 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .gridItem {
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> height: 22px;
</span><span class="cx"> width: 77px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithFixed {
</span><del>- -webkit-grid-template-columns: [first] 10px;
- -webkit-grid-template-rows: [first] 15px;
</del><ins>+ grid-template-columns: [first] 10px;
+ grid-template-rows: [first] 15px;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 53% [last];
- -webkit-grid-template-rows: 27% [last];
</del><ins>+ grid-template-columns: 53% [last];
+ grid-template-rows: 27% [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><del>- -webkit-grid-template-columns: [first] auto;
- -webkit-grid-template-rows: auto [last];
</del><ins>+ grid-template-columns: [first] auto;
+ grid-template-rows: auto [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithMinMax {
</span><del>- -webkit-grid-template-columns: [first] minmax(10%, 15px);
- -webkit-grid-template-rows: minmax(20px, 50%) [last];
</del><ins>+ grid-template-columns: [first] minmax(10%, 15px);
+ grid-template-rows: minmax(20px, 50%) [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithFixedMultiple {
</span><del>- -webkit-grid-template-columns: [first nav] 10px [last];
- -webkit-grid-template-rows: [first nav] 15px [last];
</del><ins>+ grid-template-columns: [first nav] 10px [last];
+ grid-template-rows: [first nav] 15px [last];
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentageSameStringMultipleTimes {
</span><del>- -webkit-grid-template-columns: [first nav] 10% [nav] 15% [last];
- -webkit-grid-template-rows: [first nav2] 25% [nav2] 75% [last];
</del><ins>+ grid-template-columns: [first nav] 10% [nav] 15% [last];
+ grid-template-rows: [first nav2] 25% [nav2] 75% [last];
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="lines">@@ -78,17 +78,17 @@
</span><span class="cx"> debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "[foo]";
- element.style.webkitGridTemplateRows = "[bar]";
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "none");
</del><ins>+ element.style.gridTemplateColumns = "[foo]";
+ element.style.gridTemplateRows = "[bar]";
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "[foo bar]";
- element.style.webkitGridTemplateRows = "(bar foo)";
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "none");
</del><ins>+ element.style.gridTemplateColumns = "[foo bar]";
+ element.style.gridTemplateRows = "(bar foo)";
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
</ins><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackinpercentgridhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -9,8 +9,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 40% 60%;
- -webkit-grid-template-rows: 30% 70%;
</del><ins>+ grid-template-columns: 40% 60%;
+ grid-template-rows: 30% 70%;
</ins><span class="cx"> width: 80%;
</span><span class="cx"> height: 50%;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 70% 30%;
- -webkit-grid-template-rows: 40% 60%;
</del><ins>+ grid-template-columns: 70% 30%;
+ grid-template-rows: 40% 60%;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span><span class="lines">@@ -37,12 +37,12 @@
</span><span class="cx"> var grid1 = document.getElementsByClassName("grid")[1];
</span><span class="cx"> var grid2 = document.getElementsByClassName("grid")[2];
</span><span class="cx"> document.body.offsetLeft;
</span><del>- grid0.style.webkitGridTemplateColumns = "40% 60%";
</del><ins>+ grid0.style.gridTemplateColumns = "40% 60%";
</ins><span class="cx">
</span><del>- grid1.style.webkitGridTemplateRows = "30% 70%";
</del><ins>+ grid1.style.gridTemplateRows = "30% 70%";
</ins><span class="cx">
</span><del>- grid2.style.webkitGridTemplateColumns = "40% 60%";
- grid2.style.webkitGridTemplateRows = "30% 70%";
</del><ins>+ grid2.style.gridTemplateColumns = "40% 60%";
+ grid2.style.gridTemplateRows = "30% 70%";
</ins><span class="cx">
</span><span class="cx"> checkLayout('.grid');
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentgriditeminpercentgridtrackhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 40% 60%;
- -webkit-grid-template-rows: 30% 70%;
</del><ins>+ grid-template-columns: 40% 60%;
+ grid-template-rows: 30% 70%;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -5,15 +5,15 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .intrinsic {
</span><del>- -webkit-grid-template-rows: max-content;
- -webkit-grid-template-columns: max-content;
</del><ins>+ grid-template-rows: max-content;
+ grid-template-columns: max-content;
</ins><span class="cx"> height: 500px;
</span><span class="cx"> width: 500px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .percentage {
</span><del>- -webkit-grid-template-rows: 100%;
- -webkit-grid-template-columns: 100%;
</del><ins>+ grid-template-rows: 100%;
+ grid-template-columns: 100%;
</ins><span class="cx"> height: 100%;
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinautohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,28 +6,28 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-auto-columns: 25%;
- -webkit-grid-auto-rows: 30%;
</del><ins>+ grid-auto-columns: 25%;
+ grid-auto-rows: 30%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMinOfMinMax {
</span><del>- -webkit-grid-auto-columns: minmax(20%, max-content);
- -webkit-grid-auto-rows: minmax(100%, 15px);
</del><ins>+ grid-auto-columns: minmax(20%, max-content);
+ grid-auto-rows: minmax(100%, 15px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMinOfMinMax2 {
</span><del>- -webkit-grid-auto-columns: minmax(20%, 50px);
- -webkit-grid-auto-rows: minmax(100%, max-content);
</del><ins>+ grid-auto-columns: minmax(20%, 50px);
+ grid-auto-rows: minmax(100%, max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMaxOfMinMax {
</span><del>- -webkit-grid-auto-columns: minmax(min-content, 25%);
- -webkit-grid-auto-rows: minmax(0px, 1%);
</del><ins>+ grid-auto-columns: minmax(min-content, 25%);
+ grid-auto-rows: minmax(0px, 1%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMaxOfMinMax2 {
</span><del>- -webkit-grid-auto-columns: minmax(20px, 25%);
- -webkit-grid-auto-rows: minmax(min-content, 1%);
</del><ins>+ grid-auto-columns: minmax(20px, 25%);
+ grid-auto-rows: minmax(min-content, 1%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentsInMinMax {
</span><del>- -webkit-grid-auto-columns: minmax(25%, 50%);
- -webkit-grid-auto-rows: minmax(10%, 90%);
</del><ins>+ grid-auto-columns: minmax(25%, 50%);
+ grid-auto-rows: minmax(10%, 90%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizeinminmaxcrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-minmax-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <style>
</span><span class="cx"> .inlineGrid {
</span><span class="cx"> display: inline-grid;
</span><del>- -webkit-grid-template-rows: minmax(100%, max-content);
</del><ins>+ grid-template-rows: minmax(100%, max-content);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -6,28 +6,28 @@
</span><span class="cx"> font: 10px/1 Ahem;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>- -webkit-grid-template-columns: 25%;
- -webkit-grid-template-rows: 30%;
</del><ins>+ grid-template-columns: 25%;
+ grid-template-rows: 30%;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMinOfMinMax {
</span><del>- -webkit-grid-template-columns: minmax(20%, max-content);
- -webkit-grid-template-rows: minmax(100%, 15px);
</del><ins>+ grid-template-columns: minmax(20%, max-content);
+ grid-template-rows: minmax(100%, 15px);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMinOfMinMax2 {
</span><del>- -webkit-grid-template-columns: minmax(20%, 50px);
- -webkit-grid-template-rows: minmax(100%, max-content);
</del><ins>+ grid-template-columns: minmax(20%, 50px);
+ grid-template-rows: minmax(100%, max-content);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMaxOfMinMax {
</span><del>- -webkit-grid-template-columns: minmax(min-content, 25%);
- -webkit-grid-template-rows: minmax(0px, 1%);
</del><ins>+ grid-template-columns: minmax(min-content, 25%);
+ grid-template-rows: minmax(0px, 1%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentInMaxOfMinMax2 {
</span><del>- -webkit-grid-template-columns: minmax(20px, 25%);
- -webkit-grid-template-rows: minmax(min-content, 1%);
</del><ins>+ grid-template-columns: minmax(20px, 25%);
+ grid-template-rows: minmax(min-content, 1%);
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercentsInMinMax {
</span><del>- -webkit-grid-template-columns: minmax(25%, 50%);
- -webkit-grid-template-rows: minmax(10%, 90%);
</del><ins>+ grid-template-columns: minmax(25%, 50%);
+ grid-template-rows: minmax(10%, 90%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentpaddingmarginresolutiongriditemupdatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 200px 200px;
- -webkit-grid-template-rows: 100px 100px;
</del><ins>+ grid-template-columns: 200px 200px;
+ grid-template-rows: 100px 100px;
</ins><span class="cx"> height: 200px;
</span><span class="cx"> width: 400px;
</span><span class="cx"> }
</span><span class="lines">@@ -34,8 +34,8 @@
</span><span class="cx"> {
</span><span class="cx"> var grid = document.getElementsByClassName("grid")[0];
</span><span class="cx"> grid.offsetLeft;
</span><del>- grid.style.webkitGridTemplateColumns = "100px 300px";
- grid.style.webkitGridTemplateRows = "50px 150px";
</del><ins>+ grid.style.gridTemplateColumns = "100px 300px";
+ grid.style.gridTemplateRows = "50px 150px";
</ins><span class="cx"> checkLayout('.grid');
</span><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", changeGridTrackSizesAndCheckLayout, false);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentpaddingmarginresolutiongriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 300px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 300px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> height: 200px;
</span><span class="cx"> width: 400px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentresolutiongriditemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 100px 300px;
- -webkit-grid-template-rows: 50px 150px;
</del><ins>+ grid-template-columns: 100px 300px;
+ grid-template-rows: 50px 150px;
</ins><span class="cx"> height: 200px;
</span><span class="cx"> width: 400px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -7,8 +7,8 @@
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 20% 50% 30%;
- -webkit-grid-template-rows: 40%;
</del><ins>+ grid-template-columns: 20% 50% 30%;
+ grid-template-rows: 40%;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .fixedSize {
</span><span class="lines">@@ -47,8 +47,8 @@
</span><span class="cx"> .firstRowThirdColumn {
</span><span class="cx"> color: brown;
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutplacecellbyindexhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 60px;
- -webkit-grid-template-rows: 20px 30px;
</del><ins>+ grid-template-columns: 50px 60px;
+ grid-template-rows: 20px 30px;
</ins><span class="cx"> max-width: 110px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittrackshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,8 +3,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 100px;
- -webkit-grid-auto-rows: 50px;
</del><ins>+ grid-auto-columns: 100px;
+ grid-auto-rows: 50px;
</ins><span class="cx"> width: 400px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
</span><span class="lines">@@ -17,8 +17,8 @@
</span><span class="cx">
</span><span class="cx"> .seventhRowFourthColumn {
</span><span class="cx"> background-color: coral;
</span><del>- -webkit-grid-column: 4;
- -webkit-grid-row: 7;
</del><ins>+ grid-column: 4;
+ grid-row: 7;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspacehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,8 +4,8 @@
</span><span class="cx"> <style>
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: 50px 100px;
- -webkit-grid-template-rows: 50px 100px;
</del><ins>+ grid-template-columns: 50px 100px;
+ grid-template-rows: 50px 100px;
</ins><span class="cx"> width: 150px;
</span><span class="cx"> height: 150px;
</span><span class="cx"> /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 150px / 100px 100px;
</del><ins>+ grid: 150px / 100px 100px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx"> #fromStretch { align-items: stretch; }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 150px / 100px 100px;
</del><ins>+ grid: 150px / 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: minmax(5px, 1fr) minmax(5px, 2fr) / 50px;
</del><ins>+ grid: minmax(5px, 1fr) minmax(5px, 2fr) / 50px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #fromIndefinite { height: auto; }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 150px;
</del><ins>+ grid: 100px 100px / 150px;
</ins><span class="cx"> width: 150px;
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid: 100px 100px / 150px;
</del><ins>+ grid: 100px 100px / 150px;
</ins><span class="cx"> width: 150px;
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesdisplaygridsetgetjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/display-grid-set-get.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/display-grid-set-get.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/display-grid-set-get.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,19 +3,19 @@
</span><span class="cx"> debug("Test getting |display| set through CSS");
</span><span class="cx"> var gridElement = document.getElementById("gridElement");
</span><span class="cx"> var inlineGridElement = document.getElementById("inlineGridElement");
</span><del>-shouldBe("getComputedStyle(gridElement, '').getPropertyValue('display')", "'-webkit-grid'");
-shouldBe("getComputedStyle(inlineGridElement, '').getPropertyValue('display')", "'-webkit-inline-grid'");
</del><ins>+shouldBe("getComputedStyle(gridElement, '').getPropertyValue('display')", "'grid'");
+shouldBe("getComputedStyle(inlineGridElement, '').getPropertyValue('display')", "'inline-grid'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting display through JS");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
</span><del>-element.style.display = "-webkit-grid";
-shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-grid'");
</del><ins>+element.style.display = "grid";
+shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'grid'");
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
</span><del>-element.style.display = "-webkit-inline-grid";
-shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-inline-grid'");
</del><ins>+element.style.display = "inline-grid";
+shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-grid'");
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetmultiplejs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -25,8 +25,8 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-template-rows and grid-template-columns through JS");
</span><span class="lines">@@ -67,14 +67,14 @@
</span><span class="cx"> document.body.appendChild(parentElement);
</span><span class="cx"> parentElement.style.width = "800px";
</span><span class="cx"> parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
</span><del>- parentElement.style.webkitGridTemplateColumns = "50px 1fr [last]";
- parentElement.style.webkitGridTemplateRows = "2em [middle] 45px";
</del><ins>+ parentElement.style.gridTemplateColumns = "50px 1fr [last]";
+ parentElement.style.gridTemplateRows = "2em [middle] 45px";
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.display = "-webkit-grid";
- element.style.webkitGridTemplateColumns = "inherit";
- element.style.webkitGridTemplateRows = "inherit";
</del><ins>+ element.style.display = "grid";
+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
</ins><span class="cx"> testGridTemplatesValues(element, "50px 750px [last]", "20px [middle] 45px");
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="lines">@@ -87,15 +87,15 @@
</span><span class="cx"> {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.display = "-webkit-grid";
</del><ins>+ element.style.display = "grid";
</ins><span class="cx"> element.style.width = "800px";
</span><span class="cx"> element.style.height = "600px";
</span><del>- element.style.webkitGridTemplateColumns = "150% [middle] 55px";
- element.style.webkitGridTemplateRows = "1fr [line] 2fr [line]";
</del><ins>+ element.style.gridTemplateColumns = "150% [middle] 55px";
+ element.style.gridTemplateRows = "1fr [line] 2fr [line]";
</ins><span class="cx"> testGridTemplatesValues(element, "1200px [middle] 55px", "200px [line] 400px [line]");
</span><span class="cx">
</span><del>- element.style.webkitGridTemplateColumns = "initial";
- element.style.webkitGridTemplateRows = "initial";
</del><ins>+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
</ins><span class="cx"> testGridTemplatesValues(element, "none", "none");
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(element);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,6 +1,6 @@
</span><span class="cx"> description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
</span><span class="cx">
</span><del>-debug("Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS");
</del><ins>+debug("Test getting grid-template-columns and grid-template-rows set through CSS");
</ins><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithNoneElement"), "none", "none");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px", "162px");
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "11px");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>-debug("Test getting wrong values for -webkit-grid-template-columns and -webkit-grid-template-rows through CSS (they should resolve to the default: 'none')");
</del><ins>+debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
</ins><span class="cx"> var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
</span><span class="cx"> testGridTemplatesValues(gridWithFitContentElement, "none", "none");
</span><span class="cx">
</span><span class="lines">@@ -37,7 +37,7 @@
</span><span class="cx"> testGridTemplatesValues(element, "none", "none");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>-debug("Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS");
</del><ins>+debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
</ins><span class="cx"> testGridTemplatesSetJSValues("18px", "66px");
</span><span class="cx"> testGridTemplatesSetJSValues("55%", "40%", "440px", "240px");
</span><span class="cx"> testGridTemplatesSetJSValues("auto", "auto", "0px", "0px");
</span><span class="lines">@@ -46,7 +46,7 @@
</span><span class="cx"> testGridTemplatesSetJSValues("-webkit-max-content", "-webkit-max-content", "0px", "0px");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>-debug("Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows to minmax() values through JS");
</del><ins>+debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
</ins><span class="cx"> testGridTemplatesSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px", "240px");
</span><span class="cx"> testGridTemplatesSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px", "80px");
</span><span class="cx"> testGridTemplatesSetJSValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "48px", "80px");
</span><span class="lines">@@ -102,16 +102,16 @@
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><span class="cx"> parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
</span><del>- parentElement.style.webkitGridTemplateColumns = "50px [last]";
- parentElement.style.webkitGridTemplateRows = "[first] 2em";
</del><ins>+ parentElement.style.gridTemplateColumns = "50px [last]";
+ parentElement.style.gridTemplateRows = "[first] 2em";
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.display = "-webkit-grid";
- element.style.webkitGridTemplateColumns = "inherit";
- element.style.webkitGridTemplateRows = "inherit";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px [last]'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 20px'");
</del><ins>+ element.style.display = "grid";
+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px [last]'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 20px'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="cx"> }
</span><span class="lines">@@ -123,19 +123,19 @@
</span><span class="cx"> {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.display = "-webkit-grid";
</del><ins>+ element.style.display = "grid";
</ins><span class="cx"> element.style.width = "300px";
</span><span class="cx"> element.style.height = "150px";
</span><del>- element.style.webkitGridTemplateColumns = "150% [last]";
- element.style.webkitGridTemplateRows = "[first] 1fr";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'450px [last]'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 150px'");
</del><ins>+ element.style.gridTemplateColumns = "150% [last]";
+ element.style.gridTemplateRows = "[first] 1fr";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'450px [last]'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 150px'");
</ins><span class="cx">
</span><del>- element.style.display = "-webkit-grid";
- element.style.webkitGridTemplateColumns = "initial";
- element.style.webkitGridTemplateRows = "initial";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+ element.style.display = "grid";
+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgriddefinitionsparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,8 +2,8 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = element;
</span><span class="cx"> var elementID = element.id || "element";
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue || columnValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-rows')", computedRowValue || rowValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-columns')", computedColumnValue || columnValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-rows')", computedRowValue || rowValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testGridTemplatesSetJSValues(columnValue, rowValue, computedColumnValue, computedRowValue, jsColumnValue, jsRowValue)
</span><span class="lines">@@ -21,19 +21,19 @@
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> if (useGrid) {
</span><del>- element.style.display = "-webkit-grid";
</del><ins>+ element.style.display = "grid";
</ins><span class="cx"> element.style.width = "800px";
</span><span class="cx"> element.style.height = "600px";
</span><span class="cx"> element.style.justifyContent = "start";
</span><span class="cx"> element.style.alignContent = "start";
</span><span class="cx"> }
</span><span class="cx"> element.style.font = "10px Ahem"; // Used to resolve em font consistently.
</span><del>- element.style.webkitGridTemplateColumns = columnValue;
- element.style.webkitGridTemplateRows = rowValue;
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", computedColumnValue || columnValue);
- shouldBeEqualToString("element.style.webkitGridTemplateColumns", jsColumnValue || columnValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", computedRowValue || rowValue);
- shouldBeEqualToString("element.style.webkitGridTemplateRows", jsRowValue || rowValue);
</del><ins>+ element.style.gridTemplateColumns = columnValue;
+ element.style.gridTemplateRows = rowValue;
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", computedColumnValue || columnValue);
+ shouldBeEqualToString("element.style.gridTemplateColumns", jsColumnValue || columnValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", computedRowValue || rowValue);
+ shouldBeEqualToString("element.style.gridTemplateRows", jsRowValue || rowValue);
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -41,24 +41,24 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = columnValue;
- element.style.webkitGridTemplateRows = rowValue;
- // We can't use testSetJSValues as element.style.webkitGridTemplateRows returns "".
</del><ins>+ element.style.gridTemplateColumns = columnValue;
+ element.style.gridTemplateRows = rowValue;
+ // We can't use testSetJSValues as element.style.gridTemplateRows returns "".
</ins><span class="cx"> testGridTemplatesValues(element, "none", "none");
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function checkGridAutoFlowSetCSSValue(elementId, expectedValue) {
</span><del>- shouldBe("window.getComputedStyle(" + elementId + ", '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedValue + "'");
</del><ins>+ shouldBe("window.getComputedStyle(" + elementId + ", '').getPropertyValue('grid-auto-flow')", "'" + expectedValue + "'");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function checkGridAutoFlowSetJSValue(newValue, expectedStyleValue, expectedComputedStyleValue) {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> if (newValue)
</span><del>- element.style.webkitGridAutoFlow = newValue;
- shouldBe("element.style.webkitGridAutoFlow", "'" + expectedStyleValue + "'");
- shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedComputedStyleValue + "'");
</del><ins>+ element.style.gridAutoFlow = newValue;
+ shouldBe("element.style.gridAutoFlow", "'" + expectedStyleValue + "'");
+ shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'" + expectedComputedStyleValue + "'");
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -66,12 +66,12 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = element;
</span><span class="cx"> var elementID = element.id || "element";
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", computedRowValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", computedColumnValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-rows')", computedRowValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-columns')", computedColumnValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testGridGapDefinitionsValues(element, computedRowGap, computedColumnGap)
</span><span class="cx"> {
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('-webkit-grid-row-gap')", computedRowGap);
- shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('-webkit-grid-column-gap')", computedColumnGap);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-row-gap')", computedRowGap);
+ shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-column-gap')", computedColumnGap);
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgriditemcolumnrowparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -13,12 +13,12 @@
</span><span class="cx"> var gridRowStartValue = gridRowStartEndValues[0].trim();
</span><span class="cx"> var gridRowEndValue = gridRowStartEndValues[1].trim();
</span><span class="cx">
</span><del>- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column')", columnValue);
- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column-start')", gridColumnStartValue);
- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column-end')", gridColumnEndValue);
- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row')", rowValue);
- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row-start')", gridRowStartValue);
- shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row-end')", gridRowEndValue);
</del><ins>+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-column')", columnValue);
+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-column-start')", gridColumnStartValue);
+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-column-end')", gridColumnEndValue);
+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-row')", rowValue);
+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-row-start')", gridRowStartValue);
+ shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('grid-row-end')", gridRowEndValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> window.testColumnRowCSSParsing = function(id, columnValue, rowValue)
</span><span class="lines">@@ -32,8 +32,8 @@
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><span class="cx"> gridElement.appendChild(gridItem);
</span><del>- gridItem.style.webkitGridColumn = columnValue;
- gridItem.style.webkitGridRow = rowValue;
</del><ins>+ gridItem.style.gridColumn = columnValue;
+ gridItem.style.gridRow = rowValue;
</ins><span class="cx">
</span><span class="cx"> checkColumnRowValues(gridItem, expectedColumnValue ? expectedColumnValue : columnValue, expectedRowValue ? expectedRowValue : rowValue);
</span><span class="cx">
</span><span class="lines">@@ -44,8 +44,8 @@
</span><span class="cx"> {
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> document.body.appendChild(gridItem);
</span><del>- gridItem.style.webkitGridColumn = columnValue;
- gridItem.style.webkitGridRow = rowValue;
</del><ins>+ gridItem.style.gridColumn = columnValue;
+ gridItem.style.gridRow = rowValue;
</ins><span class="cx">
</span><span class="cx"> checkColumnRowValues(gridItem, "auto / auto", "auto / auto");
</span><span class="cx">
</span><span class="lines">@@ -57,8 +57,8 @@
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><span class="cx"> gridElement.appendChild(gridItem);
</span><del>- gridItem.style.webkitGridColumnStart = columnStartValue;
- gridItem.style.webkitGridRowStart = rowStartValue;
</del><ins>+ gridItem.style.gridColumnStart = columnStartValue;
+ gridItem.style.gridRowStart = rowStartValue;
</ins><span class="cx">
</span><span class="cx"> if (expectedColumnStartValue === undefined)
</span><span class="cx"> expectedColumnStartValue = columnStartValue;
</span><span class="lines">@@ -75,8 +75,8 @@
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><span class="cx"> gridElement.appendChild(gridItem);
</span><del>- gridItem.style.webkitGridColumnEnd = columnEndValue;
- gridItem.style.webkitGridRowEnd = rowEndValue;
</del><ins>+ gridItem.style.gridColumnEnd = columnEndValue;
+ gridItem.style.gridRowEnd = rowEndValue;
</ins><span class="cx">
</span><span class="cx"> if (expectedColumnEndValue === undefined)
</span><span class="cx"> expectedColumnEndValue = columnEndValue;
</span><span class="lines">@@ -106,8 +106,8 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><del>- parentElement.style.webkitGridColumn = placeholderParentColumnValueForInherit;
- parentElement.style.webkitGridRow = placeholderParentRowValueForInherit;
</del><ins>+ parentElement.style.gridColumn = placeholderParentColumnValueForInherit;
+ parentElement.style.gridRow = placeholderParentRowValueForInherit;
</ins><span class="cx">
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(gridItem);
</span><span class="lines">@@ -118,8 +118,8 @@
</span><span class="cx"> {
</span><span class="cx"> var gridItem = document.createElement("div");
</span><span class="cx"> document.body.appendChild(gridItem);
</span><del>- gridItem.style.webkitGridColumn = placeholderColumnValueForInitial;
- gridItem.style.webkitGridRow = placeholderRowValueForInitial;
</del><ins>+ gridItem.style.gridColumn = placeholderColumnValueForInitial;
+ gridItem.style.gridRow = placeholderRowValueForInitial;
</ins><span class="cx">
</span><span class="cx"> checkColumnRowValues(gridItem, placeholderColumnValueForInitial, placeholderRowValueForInitial);
</span><span class="cx"> return gridItem;
</span><span class="lines">@@ -129,8 +129,8 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = setupInheritTest();
</span><span class="cx"> var gridItem = parentElement.firstChild;
</span><del>- gridItem.style.webkitGridColumn = columnValue;
- gridItem.style.webkitGridRow = rowValue;
</del><ins>+ gridItem.style.gridColumn = columnValue;
+ gridItem.style.gridRow = rowValue;
</ins><span class="cx">
</span><span class="cx"> checkColumnRowValues(gridItem, columnValue !== "inherit" ? columnValue : placeholderParentColumnValueForInherit, rowValue !== "inherit" ? rowValue : placeholderParentRowValueForInherit);
</span><span class="cx">
</span><span class="lines">@@ -141,8 +141,8 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = setupInheritTest();
</span><span class="cx"> var gridItem = parentElement.firstChild;
</span><del>- gridItem.style.webkitGridColumnStart = startValue;
- gridItem.style.webkitGridRowStart = beforeValue;
</del><ins>+ gridItem.style.gridColumnStart = startValue;
+ gridItem.style.gridRowStart = beforeValue;
</ins><span class="cx">
</span><span class="cx"> // Initial value is 'auto' but we shouldn't touch the opposite grid line.
</span><span class="cx"> var columnValueForInherit = (startValue !== "inherit" ? startValue : placeholderParentStartValueForInherit) + " / auto";
</span><span class="lines">@@ -156,8 +156,8 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = setupInheritTest();
</span><span class="cx"> var gridItem = parentElement.firstChild;
</span><del>- gridItem.style.webkitGridColumnEnd = endValue;
- gridItem.style.webkitGridRowEnd = afterValue;
</del><ins>+ gridItem.style.gridColumnEnd = endValue;
+ gridItem.style.gridRowEnd = afterValue;
</ins><span class="cx">
</span><span class="cx"> // Initial value is 'auto' but we shouldn't touch the opposite grid line.
</span><span class="cx"> var columnValueForInherit = "auto / " + (endValue !== "inherit" ? endValue : placeholderParentEndValueForInherit);
</span><span class="lines">@@ -171,10 +171,10 @@
</span><span class="cx"> {
</span><span class="cx"> var gridItem = setupInitialTest();
</span><span class="cx">
</span><del>- gridItem.style.webkitGridColumn = "initial";
</del><ins>+ gridItem.style.gridColumn = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, "auto / auto", placeholderRowValueForInitial);
</span><span class="cx">
</span><del>- gridItem.style.webkitGridRow = "initial";
</del><ins>+ gridItem.style.gridRow = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, "auto / auto", "auto / auto");
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(gridItem);
</span><span class="lines">@@ -184,10 +184,10 @@
</span><span class="cx"> {
</span><span class="cx"> var gridItem = setupInitialTest();
</span><span class="cx">
</span><del>- gridItem.style.webkitGridColumnStart = "initial";
</del><ins>+ gridItem.style.gridColumnStart = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, "auto / " + placeholderEndValueForInitial, placeholderRowValueForInitial);
</span><span class="cx">
</span><del>- gridItem.style.webkitGridRowStart = "initial";
</del><ins>+ gridItem.style.gridRowStart = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, "auto / " + placeholderEndValueForInitial, "auto / " + placeholderAfterValueForInitial);
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(gridItem);
</span><span class="lines">@@ -197,10 +197,10 @@
</span><span class="cx"> {
</span><span class="cx"> var gridItem = setupInitialTest();
</span><span class="cx">
</span><del>- gridItem.style.webkitGridColumnEnd = "initial";
</del><ins>+ gridItem.style.gridColumnEnd = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, placeholderStartValueForInitial + " / auto", placeholderRowValueForInitial);
</span><span class="cx">
</span><del>- gridItem.style.webkitGridRowEnd = "initial";
</del><ins>+ gridItem.style.gridRowEnd = "initial";
</ins><span class="cx"> checkColumnRowValues(gridItem, placeholderStartValueForInitial + " / auto", placeholderBeforeValueForInitial + " / auto");
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(gridItem);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridshorthandparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-shorthand-parsing-utils.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,12 +2,12 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = element;
</span><span class="cx"> var elementID = element.id || "element";
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-columns')", columnsValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-rows')", rowsValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-areas')", areasValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-flow')", autoFlowValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", autoColumnsValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", autoRowsValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-columns')", columnsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-rows')", rowsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-areas')", areasValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-flow')", autoFlowValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-columns')", autoColumnsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-auto-rows')", autoRowsValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, computedAutoFlowValue, computedAutoColumnsValue, computedAutoRowsValue, jsColumnsValue, jsRowsValue, jsAreasValue, jsAutoFlowValue, jsAutoColumnsValue, jsAutoRowsValue)
</span><span class="lines">@@ -25,24 +25,24 @@
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> if (useGrid) {
</span><del>- element.style.display = "-webkit-grid";
</del><ins>+ element.style.display = "grid";
</ins><span class="cx"> element.style.width = "800px";
</span><span class="cx"> element.style.height = "600px";
</span><span class="cx"> }
</span><span class="cx"> element.style.font = "10px Ahem"; // Used to resolve em font consistently.
</span><del>- element.style.webkitGrid = shorthandValue;
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", computedColumnsValue);
- shouldBeEqualToString("element.style.webkitGridTemplateColumns", jsColumnsValue || computedColumnsValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", computedRowsValue);
- shouldBeEqualToString("element.style.webkitGridTemplateRows", jsRowsValue || computedRowsValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", computedAreasValue);
- shouldBeEqualToString("element.style.webkitGridTemplateAreas", jsAreasValue || computedAreasValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", computedAutoFlowValue);
- shouldBeEqualToString("element.style.webkitGridAutoFlow", jsAutoFlowValue || computedAutoFlowValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", computedAutoColumnsValue);
- shouldBeEqualToString("element.style.webkitGridAutoColumns", jsAutoColumnsValue || computedAutoColumnsValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", computedAutoRowsValue);
- shouldBeEqualToString("element.style.webkitGridAutoRows", jsAutoRowsValue || computedAutoRowsValue);
</del><ins>+ element.style.grid = shorthandValue;
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", computedColumnsValue);
+ shouldBeEqualToString("element.style.gridTemplateColumns", jsColumnsValue || computedColumnsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", computedRowsValue);
+ shouldBeEqualToString("element.style.gridTemplateRows", jsRowsValue || computedRowsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", computedAreasValue);
+ shouldBeEqualToString("element.style.gridTemplateAreas", jsAreasValue || computedAreasValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", computedAutoFlowValue);
+ shouldBeEqualToString("element.style.gridAutoFlow", jsAutoFlowValue || computedAutoFlowValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", computedAutoColumnsValue);
+ shouldBeEqualToString("element.style.gridAutoColumns", jsAutoColumnsValue || computedAutoColumnsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", computedAutoRowsValue);
+ shouldBeEqualToString("element.style.gridAutoRows", jsAutoRowsValue || computedAutoRowsValue);
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -50,8 +50,8 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGrid = shorthandValue;
- // We can't use testSetJSValues as element.style.webkitGridTemplateRows returns "".
</del><ins>+ element.style.grid = shorthandValue;
+ // We can't use testSetJSValues as element.style.gridTemplateRows returns "".
</ins><span class="cx"> testGridDefinitionsValues(element, "none", "none", "none");
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridtemplateshorthandparsingutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-parsing-utils.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,9 +2,9 @@
</span><span class="cx"> {
</span><span class="cx"> window.element = element;
</span><span class="cx"> var elementID = element.id || "element";
</span><del>- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-columns')", computedColumnsValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-rows')", computedRowsValue);
- shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-template-areas')", computedAreasValue);
</del><ins>+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-columns')", computedColumnsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-rows')", computedRowsValue);
+ shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('grid-template-areas')", computedAreasValue);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function testGridDefinitionsSetJSValues(shorthandValue, computedColumnsValue, computedRowsValue, computedAreasValue, jsColumnsValue, jsRowsValue, jsAreasValue)
</span><span class="lines">@@ -22,7 +22,7 @@
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> if (useGrid) {
</span><del>- element.style.display = "-webkit-grid";
</del><ins>+ element.style.display = "grid";
</ins><span class="cx"> element.style.width = "800px";
</span><span class="cx"> element.style.height = "600px";
</span><span class="cx"> element.style.justifyContent = "start";
</span><span class="lines">@@ -30,13 +30,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> element.style.font = "10px Ahem"; // Used to resolve em font consistently.
</span><del>- element.style.webkitGridTemplate = shorthandValue;
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", computedColumnsValue);
- shouldBeEqualToString("element.style.webkitGridTemplateColumns", jsColumnsValue || computedColumnsValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", computedRowsValue);
- shouldBeEqualToString("element.style.webkitGridTemplateRows", jsRowsValue || computedRowsValue);
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas')", computedAreasValue);
- shouldBeEqualToString("element.style.webkitGridTemplateAreas", jsAreasValue || computedAreasValue);
</del><ins>+ element.style.gridTemplate = shorthandValue;
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", computedColumnsValue);
+ shouldBeEqualToString("element.style.gridTemplateColumns", jsColumnsValue || computedColumnsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", computedRowsValue);
+ shouldBeEqualToString("element.style.gridTemplateRows", jsRowsValue || computedRowsValue);
+ shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", computedAreasValue);
+ shouldBeEqualToString("element.style.gridTemplateAreas", jsAreasValue || computedAreasValue);
</ins><span class="cx"> document.body.removeChild(element);
</span><span class="cx">
</span><span class="cx"> }
</span><span class="lines">@@ -46,8 +46,8 @@
</span><span class="cx"> window.element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx">
</span><del>- element.style.webkitGridTemplate = shorthandValue;
- // We can't use testSetJSValues as element.style.webkitGridTemplateRows returns "".
</del><ins>+ element.style.gridTemplate = shorthandValue;
+ // We can't use testSetJSValues as element.style.gridTemplateRows returns "".
</ins><span class="cx"> testGridDefinitionsValues(element, "none", "none", "none");
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,119 +1,119 @@
</span><span class="cx"> .grid {
</span><del>- display: -webkit-grid;
</del><ins>+ display: grid;
</ins><span class="cx"> background-color: grey;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .inline-grid {
</span><del>- display: -webkit-inline-grid;
</del><ins>+ display: inline-grid;
</ins><span class="cx"> background-color: grey;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFirstColumn {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 1;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlyFirstRowOnlyFirstColumn {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: 1 / 2;
- -webkit-grid-row: 1 / 2;
</del><ins>+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowSecondColumn {
</span><span class="cx"> background-color: lime;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 2;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlyFirstRowOnlySecondColumn {
</span><span class="cx"> background-color: lime;
</span><del>- -webkit-grid-column: 2 / 3;
- -webkit-grid-row: 1 / 2;
</del><ins>+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowThirdColumn {
</span><span class="cx"> background-color: magenta;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 3;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowFourthColumn {
</span><span class="cx"> background-color: green;
</span><del>- -webkit-grid-column: 4;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: 4;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowFirstColumn {
</span><span class="cx"> background-color: purple;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 1;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlySecondRowOnlyFirstColumn {
</span><span class="cx"> background-color: purple;
</span><del>- -webkit-grid-column: 1 / 2;
- -webkit-grid-row: 2 / 3;
</del><ins>+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowSecondColumn {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 2;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .onlySecondRowOnlySecondColumn {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 2 / 3;
- -webkit-grid-row: 2 / 3;
</del><ins>+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .endSecondRowEndSecondColumn {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column-end: 3;
- -webkit-grid-row-end: 3;
</del><ins>+ grid-column-end: 3;
+ grid-row-end: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowThirdColumn {
</span><span class="cx"> background-color: navy;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 3;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowFourthColumn {
</span><span class="cx"> background-color: pink;
</span><del>- -webkit-grid-column: 4;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: 4;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowFirstColumn {
</span><span class="cx"> background-color: olive;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 1;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowSecondColumn {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 2;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowThirdColumn {
</span><span class="cx"> background-color: yellow;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: 3;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .fourthRowFirstColumn {
</span><span class="cx"> background-color: red;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: 4;
</del><ins>+ grid-column: 1;
+ grid-row: 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .fourthRowSecondColumn {
</span><span class="cx"> background-color: aqua;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: 4;
</del><ins>+ grid-column: 2;
+ grid-row: 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowThirdColumn {
</span><span class="lines">@@ -141,153 +141,153 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstAutoRowSecondAutoColumn {
</span><del>- -webkit-grid-row: 1 / auto;
- -webkit-grid-column: 2 / auto;
</del><ins>+ grid-row: 1 / auto;
+ grid-column: 2 / auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoLastRowAutoLastColumn {
</span><del>- -webkit-grid-row: auto / -1;
- -webkit-grid-column: auto / -1;
</del><ins>+ grid-row: auto / -1;
+ grid-column: auto / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoSecondRowAutoFirstColumn {
</span><del>- -webkit-grid-row: auto / 2;
- -webkit-grid-column: auto / 1;
</del><ins>+ grid-row: auto / 2;
+ grid-column: auto / 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowBothColumn {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1 / -1;
</del><ins>+ grid-row: 1;
+ grid-column: 1 / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowBothColumn {
</span><del>- -webkit-grid-row: 2;
- -webkit-grid-column: 1 / -1;
</del><ins>+ grid-row: 2;
+ grid-column: 1 / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothRowFirstColumn {
</span><del>- -webkit-grid-row: 1 / -1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1 / -1;
+ grid-column: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothRowSecondColumn {
</span><del>- -webkit-grid-row: 1 / -1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1 / -1;
+ grid-column: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothRowBothColumn {
</span><del>- -webkit-grid-row: 1 / -1;
- -webkit-grid-column: 1 / -1;
</del><ins>+ grid-row: 1 / -1;
+ grid-column: 1 / -1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Auto column / row. */
</span><span class="cx"> .autoRowAutoColumn {
</span><span class="cx"> background-color: pink;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: auto;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowAutoColumn {
</span><span class="cx"> background-color: blue;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 1;
</del><ins>+ grid-column: auto;
+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowAutoColumn {
</span><span class="cx"> background-color: purple;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 2;
</del><ins>+ grid-column: auto;
+ grid-row: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .thirdRowAutoColumn {
</span><span class="cx"> background-color: navy;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 3;
</del><ins>+ grid-column: auto;
+ grid-row: 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowFirstColumn {
</span><span class="cx"> background-color: lime;
</span><del>- -webkit-grid-column: 1;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 1;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSecondColumn {
</span><span class="cx"> background-color: orange;
</span><del>- -webkit-grid-column: 2;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 2;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowThirdColumn {
</span><span class="cx"> background-color: magenta;
</span><del>- -webkit-grid-column: 3;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 3;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowAutoColumnSpanning2 {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-column: span 2;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: span 2;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2AutoColumn {
</span><span class="cx"> background-color: aqua;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: span 2;
</del><ins>+ grid-column: auto;
+ grid-row: span 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning2AutoColumnSpanning3 {
</span><span class="cx"> background-color: olive;
</span><del>- -webkit-grid-column: span 3;
- -webkit-grid-row: span 2;
</del><ins>+ grid-column: span 3;
+ grid-row: span 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSpanning3AutoColumnSpanning2 {
</span><span class="cx"> background-color: indigo;
</span><del>- -webkit-grid-column: span 2;
- -webkit-grid-row: span 3;
</del><ins>+ grid-column: span 2;
+ grid-row: span 3;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowFirstColumnSpanning2 {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-column: 1 / span 2;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 1 / span 2;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .autoRowSecondColumnSpanning2 {
</span><span class="cx"> background-color: olive;
</span><del>- -webkit-grid-column: 2 / span 2;
- -webkit-grid-row: auto;
</del><ins>+ grid-column: 2 / span 2;
+ grid-row: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .firstRowSpanning2AutoColumn {
</span><span class="cx"> background-color: maroon;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 1 / span 2;
</del><ins>+ grid-column: auto;
+ grid-row: 1 / span 2;
</ins><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondRowSpanning2AutoColumn {
</span><span class="cx"> background-color: olive;
</span><del>- -webkit-grid-column: auto;
- -webkit-grid-row: 2 / span 2;
</del><ins>+ grid-column: auto;
+ grid-row: 2 / span 2;
</ins><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Grid element flow. */
</span><span class="cx"> .gridAutoFlowColumnSparse {
</span><del>- -webkit-grid-auto-flow: column;
</del><ins>+ grid-auto-flow: column;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoFlowColumnDense {
</span><del>- -webkit-grid-auto-flow: column dense;
</del><ins>+ grid-auto-flow: column dense;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoFlowRowSparse {
</span><del>- -webkit-grid-auto-flow: row;
</del><ins>+ grid-auto-flow: row;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridAutoFlowRowDense {
</span><del>- -webkit-grid-auto-flow: row dense;
</del><ins>+ grid-auto-flow: row dense;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesnongridcolumnsrowsgetsetmultiplejs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -23,8 +23,8 @@
</span><span class="cx"> debug("Test the initial value");
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-template-rows and grid-template-columns through JS");
</span><span class="lines">@@ -40,12 +40,12 @@
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting wrong values set from CSS");
</span><span class="cx"> var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
</span><del>-shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
</span><del>-shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting and getting wrong values from JS");
</span><span class="lines">@@ -63,14 +63,14 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><del>- parentElement.style.webkitGridTemplateColumns = "50px 1fr [last]";
- parentElement.style.webkitGridTemplateRows = "101% [middle] 45px";
</del><ins>+ parentElement.style.gridTemplateColumns = "50px 1fr [last]";
+ parentElement.style.gridTemplateRows = "101% [middle] 45px";
</ins><span class="cx"> testGridTemplatesValues(parentElement, "50px 1fr [last]", "101% [middle] 45px");
</span><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "inherit";
- element.style.webkitGridTemplateRows = "inherit";
</del><ins>+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
</ins><span class="cx"> testGridTemplatesValues(element, "50px 1fr [last]", "101% [middle] 45px");
</span><span class="cx">
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="lines">@@ -83,14 +83,14 @@
</span><span class="cx"> {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "150% [middle] 55px";
- element.style.webkitGridTemplateRows = "1fr [line] 2fr [line]";
</del><ins>+ element.style.gridTemplateColumns = "150% [middle] 55px";
+ element.style.gridTemplateRows = "1fr [line] 2fr [line]";
</ins><span class="cx"> testGridTemplatesValues(element, "150% [middle] 55px", "1fr [line] 2fr [line]");
</span><span class="cx">
</span><del>- element.style.webkitGridTemplateColumns = "initial";
- element.style.webkitGridTemplateRows = "initial";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesnongridcolumnsrowsgetsetjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -30,8 +30,8 @@
</span><span class="cx"> var element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><span class="cx"> testGridTemplatesValues(element, "none", "none");
</span><del>-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
</span><span class="lines">@@ -84,15 +84,15 @@
</span><span class="cx"> {
</span><span class="cx"> var parentElement = document.createElement("div");
</span><span class="cx"> document.body.appendChild(parentElement);
</span><del>- parentElement.style.webkitGridTemplateColumns = "50px [last]";
- parentElement.style.webkitGridTemplateRows = "[first] 101%";
</del><ins>+ parentElement.style.gridTemplateColumns = "50px [last]";
+ parentElement.style.gridTemplateRows = "[first] 101%";
</ins><span class="cx">
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> parentElement.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "inherit";
- element.style.webkitGridTemplateRows = "inherit";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px [last]'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 101%'");
</del><ins>+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px [last]'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 101%'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(parentElement);
</span><span class="cx"> }
</span><span class="lines">@@ -104,15 +104,15 @@
</span><span class="cx"> {
</span><span class="cx"> element = document.createElement("div");
</span><span class="cx"> document.body.appendChild(element);
</span><del>- element.style.webkitGridTemplateColumns = "150% [last]";
- element.style.webkitGridTemplateRows = "[first] 1fr";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'150% [last]'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 1fr'");
</del><ins>+ element.style.gridTemplateColumns = "150% [last]";
+ element.style.gridTemplateRows = "[first] 1fr";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'150% [last]'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'[first] 1fr'");
</ins><span class="cx">
</span><del>- element.style.webkitGridTemplateColumns = "initial";
- element.style.webkitGridTemplateRows = "initial";
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'none'");
</del><ins>+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
</ins><span class="cx">
</span><span class="cx"> document.body.removeChild(element);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutshouldnotcollapseanonymousblockshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/should-not-collapse-anonymous-blocks.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/should-not-collapse-anonymous-blocks.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/should-not-collapse-anonymous-blocks.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,7 +12,7 @@
</span><span class="cx"> </style>
</span><span class="cx"> <body>
</span><span class="cx"> <p>This test passes if it does not crash.</p>
</span><del>-<div style="display: -webkit-grid;">
</del><ins>+<div style="display: grid;">
</ins><span class="cx"> <div id=a></div>
</span><span class="cx"> <div style="display: inline; "></div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutswaplinesifstartisfurtherendwardthanendlineexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line-expected.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,31 +2,31 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
- -webkit-grid-auto-rows: 20px;
- -webkit-grid-auto-columns: 20px;
</del><ins>+ grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
+ grid-auto-rows: 20px;
+ grid-auto-columns: 20px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><span class="cx">
</span><del>- <div style="-webkit-grid-column: 1 / 3; background-color: gray"></div>
- <div style="-webkit-grid-column: 1 / -2; background-color: purple"></div>
- <div style="-webkit-grid-column: -2 / 4; background-color: orange"></div>
</del><ins>+ <div style="grid-column: 1 / 3; background-color: gray"></div>
+ <div style="grid-column: 1 / -2; background-color: purple"></div>
+ <div style="grid-column: -2 / 4; background-color: orange"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: 2 / d; background-color: gray"></div>
- <div style="-webkit-grid-column: b / -1; background-color: purple"></div>
- <div style="-webkit-grid-column: c / d; background-color: orange"></div>
</del><ins>+ <div style="grid-column: 2 / d; background-color: gray"></div>
+ <div style="grid-column: b / -1; background-color: purple"></div>
+ <div style="grid-column: c / d; background-color: orange"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: a -1 / 3; background-color: gray"></div>
- <div style="-webkit-grid-column: b 1 / -1; background-color: purple"></div>
- <div style="-webkit-grid-column: c -1 / d; background-color: orange"></div>
</del><ins>+ <div style="grid-column: a -1 / 3; background-color: gray"></div>
+ <div style="grid-column: b 1 / -1; background-color: purple"></div>
+ <div style="grid-column: c -1 / d; background-color: orange"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: 2 / 3; background-color: blue"></div>
- <div style="-webkit-grid-column: 1 / 3; background-color: lightblue"></div>
- <div style="-webkit-grid-column: 2 / 4; background-color: maroon"></div>
</del><ins>+ <div style="grid-column: 2 / 3; background-color: blue"></div>
+ <div style="grid-column: 1 / 3; background-color: lightblue"></div>
+ <div style="grid-column: 2 / 4; background-color: maroon"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: -3 / -3; background-color: lightgreen"></div>
- <div style="-webkit-grid-column: 3 / 3; background-color: green"></div>
</del><ins>+ <div style="grid-column: -3 / -3; background-color: lightgreen"></div>
+ <div style="grid-column: 3 / 3; background-color: green"></div>
</ins><span class="cx">
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutswaplinesifstartisfurtherendwardthanendlinehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/swap-lines-if-start-is-further-endward-than-end-line.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -2,32 +2,32 @@
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
- -webkit-grid-auto-rows: 20px;
- -webkit-grid-auto-columns: 20px;
</del><ins>+ grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
+ grid-auto-rows: 20px;
+ grid-auto-columns: 20px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx">
</span><span class="cx"> <div class="grid">
</span><span class="cx">
</span><del>- <div style="-webkit-grid-column: 3 / 1; background-color: gray"></div>
- <div style="-webkit-grid-column: -2 / 1; background-color: purple"></div>
- <div style="-webkit-grid-column: 4 / -2; background-color: orange"></div>
</del><ins>+ <div style="grid-column: 3 / 1; background-color: gray"></div>
+ <div style="grid-column: -2 / 1; background-color: purple"></div>
+ <div style="grid-column: 4 / -2; background-color: orange"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: d / 2; background-color: gray"></div>
- <div style="-webkit-grid-column: -1 / b; background-color: purple"></div>
- <div style="-webkit-grid-column: d / c; background-color: orange"></div>
</del><ins>+ <div style="grid-column: d / 2; background-color: gray"></div>
+ <div style="grid-column: -1 / b; background-color: purple"></div>
+ <div style="grid-column: d / c; background-color: orange"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: 3 / a -1; background-color: gray"></div>
- <div style="-webkit-grid-column: -1 / b 1; background-color: purple"></div>
- <div style="-webkit-grid-column: d / c -1; background-color: orange"></div>
</del><ins>+ <div style="grid-column: 3 / a -1; background-color: gray"></div>
+ <div style="grid-column: -1 / b 1; background-color: purple"></div>
+ <div style="grid-column: d / c -1; background-color: orange"></div>
</ins><span class="cx">
</span><span class="cx"> <!-- Check that we do not break already valid use cases. -->
</span><del>- <div style="-webkit-grid-column: -3 / -2; background-color: blue"></div>
- <div style="-webkit-grid-column: -4 / -2; background-color: lightblue"></div>
- <div style="-webkit-grid-column: -3 / -1; background-color: maroon"></div>
</del><ins>+ <div style="grid-column: -3 / -2; background-color: blue"></div>
+ <div style="grid-column: -4 / -2; background-color: lightblue"></div>
+ <div style="grid-column: -3 / -1; background-color: maroon"></div>
</ins><span class="cx">
</span><del>- <div style="-webkit-grid-column: 2 / 2; background-color: lightgreen"></div>
- <div style="-webkit-grid-column: c / c; background-color: green"></div>
</del><ins>+ <div style="grid-column: 2 / 2; background-color: lightgreen"></div>
+ <div style="grid-column: c / c; background-color: green"></div>
</ins><span class="cx">
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayouttracksnumbergreatlyexceedingavailablesizecrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/css-grid-layout/tracks-number-greatly-exceeding-available-size-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -10,19 +10,19 @@
</span><span class="cx"> <p>The test PASSES if it does not crash on Debug builds.</p>
</span><span class="cx"> <div style="position: relative;">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="width: 1px; -webkit-grid-column-start: span 100;"></div>
</del><ins>+ <div style="width: 1px; grid-column-start: span 100;"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative;">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="width: 1px; -webkit-grid-column: span 100;"></div>
</del><ins>+ <div style="width: 1px; grid-column: span 100;"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative;">
</span><span class="cx"> <div class="grid">
</span><del>- <div style="width: 1px; -webkit-grid-column-end: span 100;"></div>
</del><ins>+ <div style="width: 1px; grid-column-end: span 100;"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfasteventskeyeventsineditablegridboxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> <head>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <style>
</span><del>-.grid { display: -webkit-grid; }
</del><ins>+.grid { display: grid; }
</ins><span class="cx"> .intrinsicSize { height: -webkit-min-content; }
</span><span class="cx"> .fixedSize { height: 1px; }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignitemsoverflowchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/align-items-overflow-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,21 +11,21 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 150px 150px / 200px;
</del><ins>+ display: grid;
+ grid: 150px 150px / 200px;
</ins><span class="cx"> align-items: end unsafe;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 2;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 2;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/align-self-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/align-self-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,21 +12,21 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 300px / 100px 100px;
</del><ins>+ display: grid;
+ grid: 300px / 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> align-self: end;
</span><span class="cx"> background-color: green;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1;
+ grid-column: 2;
</ins><span class="cx"> align-self: start;
</span><span class="cx"> background-color: green;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfoverflowchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/align-self-overflow-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,21 +12,21 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 150px 150px / 200px;
</del><ins>+ display: grid;
+ grid: 150px 150px / 200px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> align-self: end unsafe;
</span><span class="cx"> background-color: green;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 2;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 2;
+ grid-column: 1;
</ins><span class="cx"> align-self: end unsafe;
</span><span class="cx"> background-color: green;
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemschangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/justify-items-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/justify-items-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,16 +11,16 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 300px / 200px;
</del><ins>+ display: grid;
+ grid: 300px / 200px;
</ins><span class="cx"> justify-items: end;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemslegacychangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -18,22 +18,22 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 100px 100px / 150px 150px;
</del><ins>+ display: grid;
+ grid: 100px 100px / 150px 150px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> border: solid thin blue;
</span><span class="cx"> width: 50px;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1;
+ grid-column: 2;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> border: solid thin blue;
</span><span class="cx"> width: 50px;
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemsoverflowchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -11,22 +11,22 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 300px / 100px 100px;
</del><ins>+ display: grid;
+ grid: 300px / 100px 100px;
</ins><span class="cx"> justify-items: end unsafe;
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> width: 160px;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1;
+ grid-column: 2;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> width: 50px;
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/justify-self-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/justify-self-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,21 +12,21 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 300px / 100px 100px;
</del><ins>+ display: grid;
+ grid: 300px / 100px 100px;
</ins><span class="cx"> justify-items: center;
</span><span class="cx"> width: 200px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> border: solid thin blue;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1;
+ grid-column: 2;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> border: solid thin blue;
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfoverflowchangehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,22 +12,22 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> #container {
</span><del>- display: -webkit-grid;
- -webkit-grid: 300px / 100px 100px;
</del><ins>+ display: grid;
+ grid: 300px / 100px 100px;
</ins><span class="cx"> width: 200px;
</span><span class="cx"> height: 300px;
</span><span class="cx"> background-color: red;
</span><span class="cx"> }
</span><span class="cx"> .item1 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 1;
</del><ins>+ grid-row: 1;
+ grid-column: 1;
</ins><span class="cx"> justify-self: end unsafe;
</span><span class="cx"> background-color: green;
</span><span class="cx"> width: 150px;
</span><span class="cx"> }
</span><span class="cx"> .item2 {
</span><del>- -webkit-grid-row: 1;
- -webkit-grid-column: 2;
</del><ins>+ grid-row: 1;
+ grid-column: 2;
</ins><span class="cx"> background-color: green;
</span><span class="cx"> justify-self: end unsafe;
</span><span class="cx"> width: 50px;
</span></span></pre></div>
<a id="trunkLayoutTestsfasttextautosizingclusterinlinegridflexboxexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box-expected.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -12,8 +12,8 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div>
</span><span class="cx"> <div>
</span><del>- <div style="display: -webkit-inline-grid; width: 600px; font-size: 1.875rem">
- This element becomes a separate autosizing cluster since it's a -webkit-inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
</del><ins>+ <div style="display: inline-grid; width: 600px; font-size: 1.875rem">
+ This element becomes a separate autosizing cluster since it's a inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
</ins><span class="cx"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfasttextautosizingclusterinlinegridflexboxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/fast/text-autosizing/cluster-inline-grid-flex-box.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -21,8 +21,8 @@
</span><span class="cx"> <body>
</span><span class="cx"> <div>
</span><span class="cx"> <div>
</span><del>- <div style="display: -webkit-inline-grid; width: 600px">
- This element becomes a separate autosizing cluster since it's a -webkit-inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
</del><ins>+ <div style="display: inline-grid; width: 600px">
+ This element becomes a separate autosizing cluster since it's a inline-grid element. Hence its computed font size is 30px (16 * 600 / 320).<br>
</ins><span class="cx"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span><span class="cx"> </div></div>
</span><span class="cx"> <div>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3griddisplaygrid001expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-template-rows: auto 1fr;
</del><ins>+ grid-template-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #title
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #board
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3griddisplaygrid001htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/display-grid-001.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #title
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #board
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3griddisplaygrid002expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-inline-grid;
</span><span class="cx"> display: -moz-inline-grid;
</span><span class="cx"> display: -o-inline-grid;
</span><del>- display: -webkit-inline-grid;
</del><span class="cx"> display: inline-grid;
</span><ins>+ display: inline-grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #title
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #board
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3griddisplaygrid002htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/display-grid-002.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-inline-grid;
</span><span class="cx"> display: -moz-inline-grid;
</span><span class="cx"> display: -o-inline-grid;
</span><del>- display: -webkit-inline-grid;
</del><span class="cx"> display: inline-grid;
</span><ins>+ display: inline-grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #title
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #board
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn001expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,19 +40,19 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn001htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-001.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,25 +40,25 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> -ms-grid-auto-flow: stack;
</span><span class="cx"> -moz-grid-auto-flow: stack;
</span><span class="cx"> -o-grid-auto-flow: stack;
</span><del>- -webkit-grid-auto-flow: stack;
</del><span class="cx"> grid-auto-flow: stack;
</span><ins>+ grid-auto-flow: stack;
</ins><span class="cx"> }
</span><span class="cx"> #griditem
</span><span class="cx"> {
</span><span class="lines">@@ -66,26 +66,26 @@
</span><span class="cx"> -ms-grid-column: -1;
</span><span class="cx"> -moz-grid-column: -1;
</span><span class="cx"> -o-grid-column: -1;
</span><del>- -webkit-grid-column: -1;
</del><span class="cx"> grid-column: -1;
</span><ins>+ grid-column: -1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #row1column1
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn002expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,19 +40,19 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn002htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -48,24 +48,24 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> -ms-grid-auto-flow: stack;
</span><span class="cx"> -moz-grid-auto-flow: stack;
</span><span class="cx"> -o-grid-auto-flow: stack;
</span><del>- -webkit-grid-auto-flow: stack;
</del><span class="cx"> grid-auto-flow: stack;
</span><ins>+ grid-auto-flow: stack;
</ins><span class="cx"> }
</span><span class="cx"> #griditem
</span><span class="cx"> {
</span><span class="lines">@@ -73,13 +73,13 @@
</span><span class="cx"> -ms-grid-column: 0;
</span><span class="cx"> -moz-grid-column: 0;
</span><span class="cx"> -o-grid-column: 0;
</span><del>- -webkit-grid-column: 0;
</del><span class="cx"> grid-column: 0;
</span><ins>+ grid-column: 0;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute {
</span><span class="cx"> position: absolute;
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn003expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,19 +40,19 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> span
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumn003htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,25 +40,25 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> -ms-grid-auto-flow: stack;
</span><span class="cx"> -moz-grid-auto-flow: stack;
</span><span class="cx"> -o-grid-auto-flow: stack;
</span><del>- -webkit-grid-auto-flow: stack;
</del><span class="cx"> grid-auto-flow: stack;
</span><ins>+ grid-auto-flow: stack;
</ins><span class="cx"> }
</span><span class="cx"> #griditem
</span><span class="cx"> {
</span><span class="lines">@@ -66,26 +66,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #row1column1
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> span
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumns001expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: -1em;
</span><span class="cx"> -moz-grid-columns: -1em;
</span><span class="cx"> -o-grid-columns: -1em;
</span><del>- -webkit-grid-defintion-columns: -1em;
</del><ins>+ grid-defintion-columns: -1em;
</ins><span class="cx"> grid-columns: -1em;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #left
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #right
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgridcolumns001htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-columns-001.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -46,18 +46,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> height: 3em;
</span><span class="cx"> -ms-grid-columns: -1em;
</span><span class="cx"> -moz-grid-columns: -1em;
</span><span class="cx"> -o-grid-columns: -1em;
</span><del>- -webkit-grid-defintion-columns: -1em;
</del><ins>+ grid-defintion-columns: -1em;
</ins><span class="cx"> grid-columns: -1em;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> }
</span><span class="cx"> #left
</span><span class="lines">@@ -65,26 +65,26 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #right
</span><span class="cx"> {
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #absolute
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems001expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #table
</span><span class="cx"> {
</span><span class="lines">@@ -75,13 +75,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #tr
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems001htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-001.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #table
</span><span class="cx"> {
</span><span class="lines">@@ -75,13 +75,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #tr
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems002expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,18 +40,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems002htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-002.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -40,18 +40,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-template-columns: auto 1fr;
</del><ins>+ grid-template-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-template-rows: auto 1fr;
</del><ins>+ grid-template-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> img
</span><span class="cx"> {
</span><span class="lines">@@ -75,13 +75,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> height: 1em;
</span><span class="cx"> width: 6em;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems003expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems003htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-003.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-template-columns: auto 1fr;
</del><ins>+ grid-template-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-template-rows: auto 1fr;
</del><ins>+ grid-template-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> span
</span><span class="cx"> {
</span><span class="lines">@@ -76,13 +76,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> height: 1em;
</span><span class="cx"> width: 6em;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems004expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,19 +41,19 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-rows: auto 1fr;
</del><span class="cx"> grid-rows: auto 1fr;
</span><ins>+ grid-rows: auto 1fr;
</ins><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="cx"> div div
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> span
</span><span class="cx"> {
</span><span class="lines">@@ -76,13 +76,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems004htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-004.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> span
</span><span class="cx"> {
</span><span class="lines">@@ -76,13 +76,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems005expectedhtm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #table
</span><span class="cx"> {
</span><span class="lines">@@ -75,13 +75,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #tr
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsietestcentercss3gridgriditems005htm"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005.htm (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005.htm 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/ietestcenter/css3/grid/grid-items-005.htm 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -41,18 +41,18 @@
</span><span class="cx"> display: -ms-grid;
</span><span class="cx"> display: -moz-grid;
</span><span class="cx"> display: -o-grid;
</span><del>- display: -webkit-grid;
</del><span class="cx"> display: grid;
</span><ins>+ display: grid;
</ins><span class="cx"> font: 20px/1 ahem;
</span><span class="cx"> -ms-grid-columns: auto 1fr;
</span><span class="cx"> -moz-grid-columns: auto 1fr;
</span><span class="cx"> -o-grid-columns: auto 1fr;
</span><del>- -webkit-grid-defintion-columns: auto 1fr;
</del><ins>+ grid-defintion-columns: auto 1fr;
</ins><span class="cx"> grid-columns: auto 1fr;
</span><span class="cx"> -ms-grid-rows: auto 1fr;
</span><span class="cx"> -moz-grid-rows: auto 1fr;
</span><span class="cx"> -o-grid-rows: auto 1fr;
</span><del>- -webkit-grid-defintion-rows: auto 1fr;
</del><ins>+ grid-defintion-rows: auto 1fr;
</ins><span class="cx"> grid-rows: auto 1fr;
</span><span class="cx"> width: 12em;
</span><span class="cx"> }
</span><span class="lines">@@ -61,13 +61,13 @@
</span><span class="cx"> -ms-grid-column: 1;
</span><span class="cx"> -moz-grid-column: 1;
</span><span class="cx"> -o-grid-column: 1;
</span><del>- -webkit-grid-column: 1;
</del><span class="cx"> grid-column: 1;
</span><ins>+ grid-column: 1;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #table
</span><span class="cx"> {
</span><span class="lines">@@ -75,13 +75,13 @@
</span><span class="cx"> -ms-grid-column: 2;
</span><span class="cx"> -moz-grid-column: 2;
</span><span class="cx"> -o-grid-column: 2;
</span><del>- -webkit-grid-column: 2;
</del><span class="cx"> grid-column: 2;
</span><ins>+ grid-column: 2;
</ins><span class="cx"> -ms-grid-row: 1;
</span><span class="cx"> -moz-grid-row: 1;
</span><span class="cx"> -o-grid-row: 1;
</span><del>- -webkit-grid-row: 1;
</del><span class="cx"> grid-row: 1;
</span><ins>+ grid-row: 1;
</ins><span class="cx"> }
</span><span class="cx"> #tr
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestssvgcssgetComputedStylebasicexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -328,24 +328,24 @@
</span><span class="cx"> rect: style.getPropertyCSSValue(font-variant-alternates) : [object CSSPrimitiveValue]
</span><span class="cx"> rect: style.getPropertyValue(font-variant-east-asian) : normal
</span><span class="cx"> rect: style.getPropertyCSSValue(font-variant-east-asian) : [object CSSPrimitiveValue]
</span><del>-rect: style.getPropertyValue(-webkit-grid-auto-columns) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-auto-columns) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-auto-flow) : row
-rect: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSValueList]
-rect: style.getPropertyValue(-webkit-grid-auto-rows) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-auto-rows) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-column-end) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-column-end) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-column-start) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-column-start) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-template-columns) : none
-rect: style.getPropertyCSSValue(-webkit-grid-template-columns) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-template-rows) : none
-rect: style.getPropertyCSSValue(-webkit-grid-template-rows) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-row-end) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-row-end) : [object CSSPrimitiveValue]
-rect: style.getPropertyValue(-webkit-grid-row-start) : auto
-rect: style.getPropertyCSSValue(-webkit-grid-row-start) : [object CSSPrimitiveValue]
</del><ins>+rect: style.getPropertyValue(grid-auto-columns) : auto
+rect: style.getPropertyCSSValue(grid-auto-columns) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-auto-flow) : row
+rect: style.getPropertyCSSValue(grid-auto-flow) : [object CSSValueList]
+rect: style.getPropertyValue(grid-auto-rows) : auto
+rect: style.getPropertyCSSValue(grid-auto-rows) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-column-end) : auto
+rect: style.getPropertyCSSValue(grid-column-end) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-column-start) : auto
+rect: style.getPropertyCSSValue(grid-column-start) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-template-columns) : none
+rect: style.getPropertyCSSValue(grid-template-columns) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-template-rows) : none
+rect: style.getPropertyCSSValue(grid-template-rows) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-row-end) : auto
+rect: style.getPropertyCSSValue(grid-row-end) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(grid-row-start) : auto
+rect: style.getPropertyCSSValue(grid-row-start) : [object CSSPrimitiveValue]
</ins><span class="cx"> rect: style.getPropertyValue(-webkit-hyphenate-character) : auto
</span><span class="cx"> rect: style.getPropertyCSSValue(-webkit-hyphenate-character) : [object CSSPrimitiveValue]
</span><span class="cx"> rect: style.getPropertyValue(-webkit-hyphenate-limit-after) : auto
</span><span class="lines">@@ -862,24 +862,24 @@
</span><span class="cx"> g: style.getPropertyCSSValue(font-variant-alternates) : [object CSSPrimitiveValue]
</span><span class="cx"> g: style.getPropertyValue(font-variant-east-asian) : normal
</span><span class="cx"> g: style.getPropertyCSSValue(font-variant-east-asian) : [object CSSPrimitiveValue]
</span><del>-g: style.getPropertyValue(-webkit-grid-auto-columns) : auto
-g: style.getPropertyCSSValue(-webkit-grid-auto-columns) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-auto-flow) : row
-g: style.getPropertyCSSValue(-webkit-grid-auto-flow) : [object CSSValueList]
-g: style.getPropertyValue(-webkit-grid-auto-rows) : auto
-g: style.getPropertyCSSValue(-webkit-grid-auto-rows) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-column-end) : auto
-g: style.getPropertyCSSValue(-webkit-grid-column-end) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-column-start) : auto
-g: style.getPropertyCSSValue(-webkit-grid-column-start) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-template-columns) : none
-g: style.getPropertyCSSValue(-webkit-grid-template-columns) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-template-rows) : none
-g: style.getPropertyCSSValue(-webkit-grid-template-rows) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-row-end) : auto
-g: style.getPropertyCSSValue(-webkit-grid-row-end) : [object CSSPrimitiveValue]
-g: style.getPropertyValue(-webkit-grid-row-start) : auto
-g: style.getPropertyCSSValue(-webkit-grid-row-start) : [object CSSPrimitiveValue]
</del><ins>+g: style.getPropertyValue(grid-auto-columns) : auto
+g: style.getPropertyCSSValue(grid-auto-columns) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-auto-flow) : row
+g: style.getPropertyCSSValue(grid-auto-flow) : [object CSSValueList]
+g: style.getPropertyValue(grid-auto-rows) : auto
+g: style.getPropertyCSSValue(grid-auto-rows) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-column-end) : auto
+g: style.getPropertyCSSValue(grid-column-end) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-column-start) : auto
+g: style.getPropertyCSSValue(grid-column-start) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-template-columns) : none
+g: style.getPropertyCSSValue(grid-template-columns) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-template-rows) : none
+g: style.getPropertyCSSValue(grid-template-rows) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-row-end) : auto
+g: style.getPropertyCSSValue(grid-row-end) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(grid-row-start) : auto
+g: style.getPropertyCSSValue(grid-row-start) : [object CSSPrimitiveValue]
</ins><span class="cx"> g: style.getPropertyValue(-webkit-hyphenate-character) : auto
</span><span class="cx"> g: style.getPropertyCSSValue(-webkit-hyphenate-character) : [object CSSPrimitiveValue]
</span><span class="cx"> g: style.getPropertyValue(-webkit-hyphenate-limit-after) : auto
</span></span></pre></div>
<a id="trunkManualTestscssgridlayoutitemwithhugespancrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/ManualTests/css-grid-layout-item-with-huge-span-crash.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/ManualTests/css-grid-layout-item-with-huge-span-crash.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/ManualTests/css-grid-layout-item-with-huge-span-crash.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -4,7 +4,7 @@
</span><span class="cx"> <input/>
</span><span class="cx"> <style>
</span><span class="cx"> * {
</span><del>- display:-webkit-inline-grid;
- -webkit-grid-row: span 400000;
</del><ins>+ display: inline-grid;
+ grid-row: span 400000;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/PerformanceTests/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * Layout/auto-grid-lots-of-data.html:
+ * Layout/fixed-grid-lots-of-data.html:
+ * Layout/fixed-grid-lots-of-stretched-data.html:
+
</ins><span class="cx"> 2016-04-25 Geoffrey Garen <ggaren@apple.com>
</span><span class="cx">
</span><span class="cx"> bmalloc: Misc improvements to MallocBench
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutautogridlotsofdatahtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/auto-grid-lots-of-data.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/auto-grid-lots-of-data.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/PerformanceTests/Layout/auto-grid-lots-of-data.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,9 +8,9 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body {
</span><del>- display: -webkit-grid;
- -webkit-grid-template-rows: repeat(100, auto);
- -webkit-grid-template-columns: repeat(20, auto);
</del><ins>+ display: grid;
+ grid-template-rows: repeat(100, auto);
+ grid-template-columns: repeat(20, auto);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItem {
</span><span class="lines">@@ -32,2005 +32,2005 @@
</span><span class="cx"> </script>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="startTest()">
</span><del>-<div class='gridItem' style='-webkit-grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 11; background-color: rgb(154, 120, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 12; background-color: rgb(57, 247, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 13; background-color: rgb(61, 121, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 14; background-color: rgb(226, 240, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 15; background-color: rgb(21, 125, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 16; background-color: rgb(236, 97, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 17; background-color: rgb(228, 209, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 18; background-color: rgb(189, 142, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 19; background-color: rgb(34, 147, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 20; background-color: rgb(206, 11, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 11; background-color: rgb(43, 188, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 12; background-color: rgb(220, 17, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 13; background-color: rgb(12, 247, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 14; background-color: rgb(41, 52, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 15; background-color: rgb(225, 235, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 16; background-color: rgb(125, 53, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 17; background-color: rgb(144, 206, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 18; background-color: rgb(18, 147, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 19; background-color: rgb(62, 214, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 20; background-color: rgb(188, 127, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 11; background-color: rgb(68, 96, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 12; background-color: rgb(59, 60, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 13; background-color: rgb(180, 204, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 14; background-color: rgb(7, 165, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 15; background-color: rgb(29, 91, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 16; background-color: rgb(59, 66, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 17; background-color: rgb(106, 41, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 18; background-color: rgb(174, 116, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 19; background-color: rgb(132, 94, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 20; background-color: rgb(238, 82, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 11; background-color: rgb(215, 247, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 12; background-color: rgb(138, 81, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 13; background-color: rgb(185, 107, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 14; background-color: rgb(246, 29, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 15; background-color: rgb(190, 100, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 16; background-color: rgb(26, 171, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 17; background-color: rgb(249, 143, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 18; background-color: rgb(71, 245, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 19; background-color: rgb(89, 231, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 20; background-color: rgb(233, 114, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 11; background-color: rgb(233, 77, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 12; background-color: rgb(94, 103, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 13; background-color: rgb(247, 92, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 14; background-color: rgb(144, 165, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 15; background-color: rgb(104, 195, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 16; background-color: rgb(6, 15, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 17; background-color: rgb(94, 238, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 18; background-color: rgb(150, 23, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 19; background-color: rgb(160, 34, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 20; background-color: rgb(254, 111, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 11; background-color: rgb(140, 57, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 12; background-color: rgb(150, 161, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 13; background-color: rgb(140, 25, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 14; background-color: rgb(208, 224, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 15; background-color: rgb(85, 46, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 16; background-color: rgb(105, 215, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 17; background-color: rgb(204, 21, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 18; background-color: rgb(181, 88, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 19; background-color: rgb(252, 135, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 20; background-color: rgb(235, 50, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 11; background-color: rgb(172, 83, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 12; background-color: rgb(36, 152, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 13; background-color: rgb(188, 94, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 14; background-color: rgb(42, 14, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 15; background-color: rgb(195, 162, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 16; background-color: rgb(17, 4, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 17; background-color: rgb(241, 160, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 18; background-color: rgb(29, 70, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 19; background-color: rgb(248, 179, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 20; background-color: rgb(195, 141, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 11; background-color: rgb(88, 188, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 12; background-color: rgb(23, 37, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 13; background-color: rgb(17, 100, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 14; background-color: rgb(84, 136, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 15; background-color: rgb(170, 7, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 16; background-color: rgb(176, 78, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 17; background-color: rgb(21, 98, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 18; background-color: rgb(79, 112, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 19; background-color: rgb(196, 57, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 20; background-color: rgb(225, 81, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 11; background-color: rgb(121, 67, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 12; background-color: rgb(211, 222, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 13; background-color: rgb(49, 244, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 14; background-color: rgb(60, 220, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 15; background-color: rgb(42, 46, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 16; background-color: rgb(251, 160, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 17; background-color: rgb(22, 35, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 18; background-color: rgb(147, 63, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 19; background-color: rgb(134, 238, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 20; background-color: rgb(157, 53, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 11; background-color: rgb(124, 251, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 12; background-color: rgb(150, 253, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 13; background-color: rgb(23, 100, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 14; background-color: rgb(116, 14, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 15; background-color: rgb(201, 159, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 16; background-color: rgb(66, 96, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 17; background-color: rgb(153, 219, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 18; background-color: rgb(86, 222, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 19; background-color: rgb(145, 71, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 20; background-color: rgb(250, 91, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 11; background-color: rgb(190, 81, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 12; background-color: rgb(121, 9, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 13; background-color: rgb(222, 23, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 14; background-color: rgb(8, 208, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 15; background-color: rgb(177, 111, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 16; background-color: rgb(186, 172, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 17; background-color: rgb(151, 27, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 18; background-color: rgb(198, 115, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 19; background-color: rgb(97, 208, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 20; background-color: rgb(219, 22, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 11; background-color: rgb(228, 130, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 12; background-color: rgb(129, 232, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 13; background-color: rgb(156, 142, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 14; background-color: rgb(218, 242, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 15; background-color: rgb(136, 133, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 16; background-color: rgb(27, 102, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 17; background-color: rgb(73, 60, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 18; background-color: rgb(117, 161, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 19; background-color: rgb(183, 150, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 20; background-color: rgb(223, 210, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 11; background-color: rgb(105, 21, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 12; background-color: rgb(41, 125, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 13; background-color: rgb(138, 198, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 14; background-color: rgb(245, 153, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 15; background-color: rgb(239, 42, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 16; background-color: rgb(162, 54, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 17; background-color: rgb(230, 54, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 18; background-color: rgb(68, 16, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 19; background-color: rgb(45, 159, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 20; background-color: rgb(33, 97, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 11; background-color: rgb(220, 19, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 12; background-color: rgb(77, 165, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 13; background-color: rgb(213, 63, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 14; background-color: rgb(144, 7, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 15; background-color: rgb(22, 190, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 16; background-color: rgb(124, 111, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 17; background-color: rgb(0, 41, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 18; background-color: rgb(25, 25, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 19; background-color: rgb(39, 119, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 20; background-color: rgb(66, 138, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 11; background-color: rgb(175, 139, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 12; background-color: rgb(176, 195, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 13; background-color: rgb(44, 101, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 14; background-color: rgb(31, 213, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 15; background-color: rgb(157, 97, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 16; background-color: rgb(227, 14, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 17; background-color: rgb(133, 37, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 18; background-color: rgb(129, 140, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 19; background-color: rgb(50, 151, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 20; background-color: rgb(174, 90, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 11; background-color: rgb(205, 63, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 12; background-color: rgb(17, 145, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 13; background-color: rgb(197, 117, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 14; background-color: rgb(137, 60, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 15; background-color: rgb(167, 23, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 16; background-color: rgb(137, 61, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 17; background-color: rgb(59, 0, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 18; background-color: rgb(74, 174, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 19; background-color: rgb(91, 205, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 20; background-color: rgb(120, 65, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 11; background-color: rgb(155, 80, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 12; background-color: rgb(220, 206, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 13; background-color: rgb(202, 63, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 14; background-color: rgb(133, 250, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 15; background-color: rgb(26, 207, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 16; background-color: rgb(242, 23, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 17; background-color: rgb(219, 231, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 18; background-color: rgb(81, 198, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 19; background-color: rgb(2, 116, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 20; background-color: rgb(219, 90, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 11; background-color: rgb(191, 112, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 12; background-color: rgb(16, 101, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 13; background-color: rgb(166, 127, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 14; background-color: rgb(12, 140, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 15; background-color: rgb(25, 163, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 16; background-color: rgb(169, 70, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 17; background-color: rgb(236, 172, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 18; background-color: rgb(207, 130, 221)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 19; background-color: rgb(27, 148, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 20; background-color: rgb(184, 170, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 11; background-color: rgb(40, 150, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 12; background-color: rgb(94, 136, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 13; background-color: rgb(194, 243, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 14; background-color: rgb(134, 98, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 15; background-color: rgb(96, 240, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 16; background-color: rgb(38, 90, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 17; background-color: rgb(91, 218, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 18; background-color: rgb(231, 191, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 19; background-color: rgb(246, 117, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 20; background-color: rgb(187, 19, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 11; background-color: rgb(138, 57, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 12; background-color: rgb(56, 58, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 13; background-color: rgb(132, 68, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 14; background-color: rgb(125, 57, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 15; background-color: rgb(197, 106, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 16; background-color: rgb(162, 215, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 17; background-color: rgb(70, 146, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 18; background-color: rgb(2, 149, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 19; background-color: rgb(219, 80, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 20; background-color: rgb(65, 57, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 11; background-color: rgb(250, 119, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 12; background-color: rgb(215, 170, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 13; background-color: rgb(141, 247, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 14; background-color: rgb(1, 220, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 15; background-color: rgb(189, 49, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 16; background-color: rgb(164, 252, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 17; background-color: rgb(10, 88, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 18; background-color: rgb(149, 210, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 19; background-color: rgb(215, 109, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 20; background-color: rgb(146, 166, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 11; background-color: rgb(193, 224, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 12; background-color: rgb(6, 145, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 13; background-color: rgb(57, 236, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 14; background-color: rgb(62, 125, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 15; background-color: rgb(66, 7, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 16; background-color: rgb(172, 65, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 17; background-color: rgb(52, 38, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 18; background-color: rgb(9, 80, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 19; background-color: rgb(34, 87, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 20; background-color: rgb(209, 175, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 11; background-color: rgb(253, 155, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 12; background-color: rgb(189, 249, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 13; background-color: rgb(158, 74, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 14; background-color: rgb(253, 176, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 15; background-color: rgb(44, 232, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 16; background-color: rgb(235, 108, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 17; background-color: rgb(99, 212, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 18; background-color: rgb(156, 238, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 19; background-color: rgb(143, 139, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 20; background-color: rgb(203, 38, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 11; background-color: rgb(219, 10, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 12; background-color: rgb(15, 94, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 13; background-color: rgb(23, 185, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 14; background-color: rgb(190, 202, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 15; background-color: rgb(210, 56, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 16; background-color: rgb(120, 227, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 17; background-color: rgb(198, 208, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 18; background-color: rgb(153, 172, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 19; background-color: rgb(209, 151, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 20; background-color: rgb(36, 3, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 11; background-color: rgb(165, 32, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 12; background-color: rgb(65, 20, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 13; background-color: rgb(126, 22, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 14; background-color: rgb(250, 39, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 15; background-color: rgb(94, 46, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 16; background-color: rgb(111, 58, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 17; background-color: rgb(206, 97, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 18; background-color: rgb(71, 51, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 19; background-color: rgb(237, 13, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 20; background-color: rgb(23, 188, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 11; background-color: rgb(219, 237, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 12; background-color: rgb(6, 46, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 13; background-color: rgb(152, 65, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 14; background-color: rgb(67, 172, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 15; background-color: rgb(101, 92, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 16; background-color: rgb(167, 128, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 17; background-color: rgb(18, 100, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 18; background-color: rgb(55, 94, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 19; background-color: rgb(23, 141, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 20; background-color: rgb(93, 91, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 11; background-color: rgb(207, 151, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 12; background-color: rgb(176, 23, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 13; background-color: rgb(96, 197, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 14; background-color: rgb(99, 23, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 15; background-color: rgb(231, 234, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 16; background-color: rgb(121, 228, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 17; background-color: rgb(223, 206, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 18; background-color: rgb(23, 89, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 19; background-color: rgb(174, 195, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 20; background-color: rgb(164, 120, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 11; background-color: rgb(219, 250, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 12; background-color: rgb(50, 148, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 13; background-color: rgb(22, 5, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 14; background-color: rgb(244, 168, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 15; background-color: rgb(78, 207, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 16; background-color: rgb(208, 50, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 17; background-color: rgb(104, 110, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 18; background-color: rgb(104, 240, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 19; background-color: rgb(155, 151, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 20; background-color: rgb(78, 119, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 11; background-color: rgb(99, 22, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 12; background-color: rgb(20, 35, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 13; background-color: rgb(205, 17, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 14; background-color: rgb(145, 59, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 15; background-color: rgb(56, 40, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 16; background-color: rgb(53, 57, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 17; background-color: rgb(14, 73, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 18; background-color: rgb(145, 76, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 19; background-color: rgb(136, 14, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 20; background-color: rgb(254, 79, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 11; background-color: rgb(153, 207, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 12; background-color: rgb(215, 33, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 13; background-color: rgb(137, 237, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 14; background-color: rgb(183, 125, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 15; background-color: rgb(254, 131, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 16; background-color: rgb(17, 74, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 17; background-color: rgb(134, 15, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 18; background-color: rgb(231, 214, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 19; background-color: rgb(39, 221, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 20; background-color: rgb(132, 62, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 1; background-color: rgb(16, 110, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 2; background-color: rgb(9, 6, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 3; background-color: rgb(124, 59, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 4; background-color: rgb(190, 187, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 5; background-color: rgb(178, 90, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 6; background-color: rgb(205, 26, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 7; background-color: rgb(123, 148, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 8; background-color: rgb(205, 242, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 9; background-color: rgb(217, 238, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 10; background-color: rgb(149, 192, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 11; background-color: rgb(133, 234, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 12; background-color: rgb(99, 190, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 13; background-color: rgb(100, 228, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 14; background-color: rgb(59, 181, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 15; background-color: rgb(191, 100, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 16; background-color: rgb(55, 137, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 17; background-color: rgb(107, 5, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 18; background-color: rgb(192, 129, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 19; background-color: rgb(65, 14, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 20; background-color: rgb(226, 108, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 1; background-color: rgb(254, 123, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 2; background-color: rgb(215, 97, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 3; background-color: rgb(159, 164, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 4; background-color: rgb(163, 92, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 5; background-color: rgb(187, 62, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 6; background-color: rgb(202, 181, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 7; background-color: rgb(198, 225, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 8; background-color: rgb(84, 188, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 9; background-color: rgb(85, 245, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 10; background-color: rgb(137, 228, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 11; background-color: rgb(89, 77, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 12; background-color: rgb(111, 68, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 13; background-color: rgb(5, 155, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 14; background-color: rgb(39, 128, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 15; background-color: rgb(7, 233, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 16; background-color: rgb(195, 122, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 17; background-color: rgb(184, 166, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 18; background-color: rgb(14, 231, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 19; background-color: rgb(130, 78, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 20; background-color: rgb(77, 15, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 1; background-color: rgb(97, 16, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 2; background-color: rgb(146, 109, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 3; background-color: rgb(18, 46, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 4; background-color: rgb(229, 130, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 5; background-color: rgb(230, 232, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 6; background-color: rgb(144, 132, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 7; background-color: rgb(72, 220, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 8; background-color: rgb(96, 176, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 9; background-color: rgb(45, 109, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 10; background-color: rgb(48, 93, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 11; background-color: rgb(88, 15, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 12; background-color: rgb(174, 74, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 13; background-color: rgb(236, 106, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 14; background-color: rgb(132, 141, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 15; background-color: rgb(157, 34, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 16; background-color: rgb(124, 221, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 17; background-color: rgb(58, 40, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 18; background-color: rgb(102, 202, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 19; background-color: rgb(107, 39, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 20; background-color: rgb(214, 82, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 1; background-color: rgb(123, 121, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 2; background-color: rgb(155, 138, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 3; background-color: rgb(217, 245, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 4; background-color: rgb(128, 164, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 5; background-color: rgb(43, 78, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 6; background-color: rgb(31, 74, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 7; background-color: rgb(32, 93, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 8; background-color: rgb(118, 56, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 9; background-color: rgb(68, 204, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 10; background-color: rgb(183, 134, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 11; background-color: rgb(213, 189, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 12; background-color: rgb(212, 218, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 13; background-color: rgb(32, 72, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 14; background-color: rgb(216, 142, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 15; background-color: rgb(214, 84, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 16; background-color: rgb(47, 20, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 17; background-color: rgb(187, 167, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 18; background-color: rgb(115, 18, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 19; background-color: rgb(194, 189, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 20; background-color: rgb(59, 158, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 1; background-color: rgb(128, 28, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 2; background-color: rgb(153, 7, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 3; background-color: rgb(226, 89, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 4; background-color: rgb(5, 33, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 5; background-color: rgb(180, 248, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 6; background-color: rgb(205, 20, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 7; background-color: rgb(28, 200, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 8; background-color: rgb(127, 65, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 9; background-color: rgb(143, 219, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 10; background-color: rgb(4, 85, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 11; background-color: rgb(190, 113, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 12; background-color: rgb(172, 154, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 13; background-color: rgb(253, 238, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 14; background-color: rgb(141, 81, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 15; background-color: rgb(188, 206, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 16; background-color: rgb(149, 77, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 17; background-color: rgb(212, 124, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 18; background-color: rgb(134, 27, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 19; background-color: rgb(252, 114, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 20; background-color: rgb(240, 190, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 1; background-color: rgb(170, 108, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 2; background-color: rgb(170, 202, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 3; background-color: rgb(16, 58, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 4; background-color: rgb(124, 98, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 5; background-color: rgb(245, 105, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 6; background-color: rgb(252, 155, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 7; background-color: rgb(11, 39, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 8; background-color: rgb(175, 10, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 9; background-color: rgb(29, 83, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 10; background-color: rgb(207, 137, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 11; background-color: rgb(117, 208, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 12; background-color: rgb(164, 87, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 13; background-color: rgb(10, 148, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 14; background-color: rgb(66, 106, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 15; background-color: rgb(203, 80, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 16; background-color: rgb(141, 96, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 17; background-color: rgb(59, 121, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 18; background-color: rgb(79, 206, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 19; background-color: rgb(107, 66, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 20; background-color: rgb(162, 27, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 1; background-color: rgb(82, 148, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 2; background-color: rgb(41, 212, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 3; background-color: rgb(143, 37, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 4; background-color: rgb(193, 99, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 5; background-color: rgb(118, 116, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 6; background-color: rgb(82, 162, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 7; background-color: rgb(214, 215, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 8; background-color: rgb(96, 131, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 9; background-color: rgb(21, 136, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 10; background-color: rgb(187, 24, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 11; background-color: rgb(36, 232, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 12; background-color: rgb(26, 112, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 13; background-color: rgb(226, 56, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 14; background-color: rgb(232, 51, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 15; background-color: rgb(57, 151, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 16; background-color: rgb(124, 131, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 17; background-color: rgb(157, 134, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 18; background-color: rgb(21, 249, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 19; background-color: rgb(238, 23, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 20; background-color: rgb(69, 110, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 1; background-color: rgb(24, 45, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 2; background-color: rgb(63, 57, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 3; background-color: rgb(227, 24, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 4; background-color: rgb(63, 118, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 5; background-color: rgb(70, 32, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 6; background-color: rgb(225, 73, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 7; background-color: rgb(223, 30, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 8; background-color: rgb(193, 130, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 9; background-color: rgb(132, 16, 19)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 10; background-color: rgb(95, 182, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 11; background-color: rgb(153, 14, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 12; background-color: rgb(199, 142, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 13; background-color: rgb(157, 197, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 14; background-color: rgb(55, 202, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 15; background-color: rgb(155, 126, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 16; background-color: rgb(85, 100, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 17; background-color: rgb(212, 249, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 18; background-color: rgb(61, 40, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 19; background-color: rgb(24, 67, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 20; background-color: rgb(157, 185, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 1; background-color: rgb(220, 220, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 2; background-color: rgb(11, 59, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 3; background-color: rgb(221, 75, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 4; background-color: rgb(71, 143, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 5; background-color: rgb(38, 158, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 6; background-color: rgb(20, 203, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 7; background-color: rgb(142, 209, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 8; background-color: rgb(17, 183, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 9; background-color: rgb(187, 239, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 10; background-color: rgb(17, 248, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 11; background-color: rgb(179, 234, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 12; background-color: rgb(176, 179, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 13; background-color: rgb(125, 145, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 14; background-color: rgb(99, 232, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 15; background-color: rgb(102, 2, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 16; background-color: rgb(59, 62, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 17; background-color: rgb(248, 210, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 18; background-color: rgb(186, 160, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 19; background-color: rgb(24, 32, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 20; background-color: rgb(38, 27, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 1; background-color: rgb(162, 41, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 2; background-color: rgb(100, 110, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 3; background-color: rgb(162, 102, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 4; background-color: rgb(160, 220, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 5; background-color: rgb(25, 81, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 6; background-color: rgb(112, 111, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 7; background-color: rgb(150, 252, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 8; background-color: rgb(214, 175, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 9; background-color: rgb(79, 74, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 10; background-color: rgb(47, 71, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 11; background-color: rgb(167, 150, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 12; background-color: rgb(58, 30, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 13; background-color: rgb(83, 89, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 14; background-color: rgb(206, 108, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 15; background-color: rgb(165, 85, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 16; background-color: rgb(116, 70, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 17; background-color: rgb(215, 168, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 18; background-color: rgb(114, 9, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 19; background-color: rgb(15, 181, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 20; background-color: rgb(79, 49, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 1; background-color: rgb(50, 42, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 2; background-color: rgb(128, 177, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 3; background-color: rgb(158, 166, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 4; background-color: rgb(43, 84, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 5; background-color: rgb(182, 156, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 6; background-color: rgb(154, 36, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 7; background-color: rgb(126, 172, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 8; background-color: rgb(183, 152, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 9; background-color: rgb(5, 169, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 10; background-color: rgb(46, 61, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 11; background-color: rgb(163, 175, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 12; background-color: rgb(145, 47, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 13; background-color: rgb(246, 183, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 14; background-color: rgb(193, 12, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 15; background-color: rgb(191, 250, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 16; background-color: rgb(231, 225, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 17; background-color: rgb(217, 46, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 18; background-color: rgb(224, 242, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 19; background-color: rgb(138, 33, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 20; background-color: rgb(58, 179, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 1; background-color: rgb(2, 153, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 2; background-color: rgb(96, 83, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 3; background-color: rgb(120, 155, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 4; background-color: rgb(231, 52, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 5; background-color: rgb(205, 248, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 6; background-color: rgb(39, 116, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 7; background-color: rgb(241, 23, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 8; background-color: rgb(249, 67, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 9; background-color: rgb(213, 132, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 10; background-color: rgb(187, 241, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 11; background-color: rgb(233, 111, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 12; background-color: rgb(25, 163, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 13; background-color: rgb(162, 51, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 14; background-color: rgb(65, 15, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 15; background-color: rgb(98, 251, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 16; background-color: rgb(124, 53, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 17; background-color: rgb(237, 179, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 18; background-color: rgb(20, 86, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 19; background-color: rgb(218, 104, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 20; background-color: rgb(62, 55, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 1; background-color: rgb(162, 207, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 2; background-color: rgb(82, 137, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 3; background-color: rgb(113, 15, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 4; background-color: rgb(27, 156, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 5; background-color: rgb(11, 186, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 6; background-color: rgb(213, 43, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 7; background-color: rgb(163, 26, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 8; background-color: rgb(122, 136, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 9; background-color: rgb(200, 78, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 10; background-color: rgb(81, 154, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 11; background-color: rgb(98, 83, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 12; background-color: rgb(227, 142, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 13; background-color: rgb(31, 186, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 14; background-color: rgb(166, 101, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 15; background-color: rgb(128, 25, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 16; background-color: rgb(119, 31, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 17; background-color: rgb(140, 76, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 18; background-color: rgb(72, 135, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 19; background-color: rgb(180, 252, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 20; background-color: rgb(171, 174, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 1; background-color: rgb(148, 54, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 2; background-color: rgb(49, 97, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 3; background-color: rgb(73, 64, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 4; background-color: rgb(8, 142, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 5; background-color: rgb(132, 207, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 6; background-color: rgb(171, 116, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 7; background-color: rgb(124, 237, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 8; background-color: rgb(118, 200, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 9; background-color: rgb(178, 215, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 10; background-color: rgb(201, 188, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 11; background-color: rgb(235, 9, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 12; background-color: rgb(230, 73, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 13; background-color: rgb(75, 151, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 14; background-color: rgb(56, 244, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 15; background-color: rgb(124, 120, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 16; background-color: rgb(102, 115, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 17; background-color: rgb(46, 199, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 18; background-color: rgb(169, 69, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 19; background-color: rgb(217, 188, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 20; background-color: rgb(224, 93, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 1; background-color: rgb(253, 217, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 2; background-color: rgb(31, 80, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 3; background-color: rgb(16, 239, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 4; background-color: rgb(7, 159, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 5; background-color: rgb(66, 217, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 6; background-color: rgb(54, 44, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 7; background-color: rgb(32, 45, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 8; background-color: rgb(81, 189, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 9; background-color: rgb(81, 75, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 10; background-color: rgb(63, 81, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 11; background-color: rgb(200, 97, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 12; background-color: rgb(222, 229, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 13; background-color: rgb(99, 113, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 14; background-color: rgb(138, 238, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 15; background-color: rgb(241, 221, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 16; background-color: rgb(46, 162, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 17; background-color: rgb(29, 63, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 18; background-color: rgb(127, 162, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 19; background-color: rgb(188, 89, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 20; background-color: rgb(103, 147, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 1; background-color: rgb(27, 155, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 2; background-color: rgb(181, 130, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 3; background-color: rgb(166, 223, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 4; background-color: rgb(221, 193, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 5; background-color: rgb(185, 92, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 6; background-color: rgb(180, 103, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 7; background-color: rgb(137, 30, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 8; background-color: rgb(131, 201, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 9; background-color: rgb(12, 119, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 10; background-color: rgb(26, 187, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 11; background-color: rgb(84, 52, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 12; background-color: rgb(158, 187, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 13; background-color: rgb(119, 158, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 14; background-color: rgb(83, 56, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 15; background-color: rgb(166, 123, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 16; background-color: rgb(77, 176, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 17; background-color: rgb(156, 141, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 18; background-color: rgb(240, 123, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 19; background-color: rgb(67, 43, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 20; background-color: rgb(37, 24, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 1; background-color: rgb(54, 189, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 2; background-color: rgb(191, 182, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 3; background-color: rgb(228, 58, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 4; background-color: rgb(250, 45, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 5; background-color: rgb(109, 117, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 6; background-color: rgb(135, 20, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 7; background-color: rgb(109, 113, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 8; background-color: rgb(57, 180, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 9; background-color: rgb(168, 176, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 10; background-color: rgb(182, 146, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 11; background-color: rgb(239, 2, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 12; background-color: rgb(51, 104, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 13; background-color: rgb(50, 6, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 14; background-color: rgb(69, 186, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 15; background-color: rgb(119, 80, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 16; background-color: rgb(214, 54, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 17; background-color: rgb(175, 199, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 18; background-color: rgb(242, 228, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 19; background-color: rgb(195, 33, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 20; background-color: rgb(41, 248, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 1; background-color: rgb(208, 57, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 2; background-color: rgb(142, 99, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 3; background-color: rgb(98, 120, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 4; background-color: rgb(49, 195, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 5; background-color: rgb(24, 103, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 6; background-color: rgb(178, 55, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 7; background-color: rgb(35, 244, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 8; background-color: rgb(186, 161, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 9; background-color: rgb(35, 41, 65)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 10; background-color: rgb(82, 102, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 11; background-color: rgb(24, 245, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 12; background-color: rgb(8, 76, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 13; background-color: rgb(43, 81, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 14; background-color: rgb(18, 26, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 15; background-color: rgb(156, 186, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 16; background-color: rgb(178, 201, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 17; background-color: rgb(114, 186, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 18; background-color: rgb(223, 5, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 19; background-color: rgb(107, 128, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 20; background-color: rgb(90, 233, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 1; background-color: rgb(96, 147, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 2; background-color: rgb(104, 85, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 3; background-color: rgb(35, 86, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 4; background-color: rgb(182, 235, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 5; background-color: rgb(71, 64, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 6; background-color: rgb(145, 195, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 7; background-color: rgb(168, 229, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 8; background-color: rgb(181, 148, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 9; background-color: rgb(133, 234, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 10; background-color: rgb(159, 122, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 11; background-color: rgb(84, 156, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 12; background-color: rgb(165, 123, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 13; background-color: rgb(210, 70, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 14; background-color: rgb(183, 129, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 15; background-color: rgb(146, 48, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 16; background-color: rgb(206, 131, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 17; background-color: rgb(105, 97, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 18; background-color: rgb(144, 180, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 19; background-color: rgb(130, 218, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 20; background-color: rgb(25, 212, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 1; background-color: rgb(191, 68, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 2; background-color: rgb(120, 216, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 3; background-color: rgb(35, 148, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 4; background-color: rgb(237, 77, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 5; background-color: rgb(232, 51, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 6; background-color: rgb(235, 225, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 7; background-color: rgb(231, 108, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 8; background-color: rgb(226, 182, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 9; background-color: rgb(187, 69, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 10; background-color: rgb(27, 199, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 11; background-color: rgb(75, 24, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 12; background-color: rgb(160, 219, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 13; background-color: rgb(148, 140, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 14; background-color: rgb(250, 0, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 15; background-color: rgb(227, 5, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 16; background-color: rgb(98, 167, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 17; background-color: rgb(132, 24, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 18; background-color: rgb(140, 152, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 19; background-color: rgb(100, 220, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 20; background-color: rgb(100, 70, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 1; background-color: rgb(205, 47, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 2; background-color: rgb(32, 175, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 3; background-color: rgb(177, 144, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 4; background-color: rgb(6, 132, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 5; background-color: rgb(92, 210, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 6; background-color: rgb(213, 216, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 7; background-color: rgb(19, 47, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 8; background-color: rgb(188, 48, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 9; background-color: rgb(91, 79, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 10; background-color: rgb(97, 61, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 11; background-color: rgb(44, 143, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 12; background-color: rgb(49, 4, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 13; background-color: rgb(238, 99, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 14; background-color: rgb(117, 211, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 15; background-color: rgb(51, 38, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 16; background-color: rgb(26, 46, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 17; background-color: rgb(164, 39, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 18; background-color: rgb(243, 167, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 19; background-color: rgb(23, 97, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 20; background-color: rgb(35, 250, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 1; background-color: rgb(251, 231, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 2; background-color: rgb(246, 2, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 3; background-color: rgb(193, 111, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 4; background-color: rgb(23, 159, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 5; background-color: rgb(194, 20, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 6; background-color: rgb(101, 130, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 7; background-color: rgb(53, 120, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 8; background-color: rgb(138, 250, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 9; background-color: rgb(18, 20, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 10; background-color: rgb(233, 230, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 11; background-color: rgb(46, 155, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 12; background-color: rgb(102, 199, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 13; background-color: rgb(9, 114, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 14; background-color: rgb(254, 126, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 15; background-color: rgb(231, 100, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 16; background-color: rgb(206, 170, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 17; background-color: rgb(25, 83, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 18; background-color: rgb(167, 220, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 19; background-color: rgb(217, 133, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 20; background-color: rgb(48, 191, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 1; background-color: rgb(187, 161, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 2; background-color: rgb(211, 24, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 3; background-color: rgb(254, 103, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 4; background-color: rgb(252, 227, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 5; background-color: rgb(239, 219, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 6; background-color: rgb(184, 25, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 7; background-color: rgb(120, 230, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 8; background-color: rgb(0, 12, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 9; background-color: rgb(17, 106, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 10; background-color: rgb(232, 137, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 11; background-color: rgb(7, 118, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 12; background-color: rgb(221, 35, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 13; background-color: rgb(126, 149, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 14; background-color: rgb(11, 98, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 15; background-color: rgb(188, 102, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 16; background-color: rgb(2, 83, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 17; background-color: rgb(243, 58, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 18; background-color: rgb(154, 114, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 19; background-color: rgb(232, 230, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 20; background-color: rgb(206, 71, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 1; background-color: rgb(200, 230, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 2; background-color: rgb(94, 74, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 3; background-color: rgb(250, 16, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 4; background-color: rgb(157, 109, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 5; background-color: rgb(194, 106, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 6; background-color: rgb(145, 14, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 7; background-color: rgb(5, 23, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 8; background-color: rgb(152, 243, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 9; background-color: rgb(225, 84, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 10; background-color: rgb(27, 156, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 11; background-color: rgb(229, 173, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 12; background-color: rgb(201, 84, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 13; background-color: rgb(107, 34, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 14; background-color: rgb(44, 4, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 15; background-color: rgb(139, 150, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 16; background-color: rgb(230, 175, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 17; background-color: rgb(130, 98, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 18; background-color: rgb(185, 24, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 19; background-color: rgb(204, 205, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 20; background-color: rgb(224, 205, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 1; background-color: rgb(218, 236, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 2; background-color: rgb(118, 11, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 3; background-color: rgb(189, 121, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 4; background-color: rgb(107, 200, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 5; background-color: rgb(8, 194, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 6; background-color: rgb(114, 195, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 7; background-color: rgb(90, 52, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 8; background-color: rgb(115, 68, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 9; background-color: rgb(11, 242, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 10; background-color: rgb(58, 138, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 11; background-color: rgb(169, 22, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 12; background-color: rgb(62, 92, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 13; background-color: rgb(33, 43, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 14; background-color: rgb(126, 202, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 15; background-color: rgb(151, 5, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 16; background-color: rgb(49, 130, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 17; background-color: rgb(22, 110, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 18; background-color: rgb(168, 221, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 19; background-color: rgb(30, 36, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 20; background-color: rgb(63, 102, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 1; background-color: rgb(204, 98, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 2; background-color: rgb(89, 49, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 3; background-color: rgb(169, 169, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 4; background-color: rgb(212, 124, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 5; background-color: rgb(245, 118, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 6; background-color: rgb(69, 136, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 7; background-color: rgb(250, 99, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 8; background-color: rgb(154, 142, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 9; background-color: rgb(32, 23, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 10; background-color: rgb(87, 21, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 11; background-color: rgb(174, 145, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 12; background-color: rgb(153, 90, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 13; background-color: rgb(80, 11, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 14; background-color: rgb(33, 21, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 15; background-color: rgb(139, 233, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 16; background-color: rgb(150, 207, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 17; background-color: rgb(52, 170, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 18; background-color: rgb(90, 172, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 19; background-color: rgb(229, 18, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 20; background-color: rgb(155, 83, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 1; background-color: rgb(94, 235, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 2; background-color: rgb(0, 160, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 3; background-color: rgb(200, 98, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 4; background-color: rgb(47, 244, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 5; background-color: rgb(184, 229, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 6; background-color: rgb(28, 15, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 7; background-color: rgb(54, 243, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 8; background-color: rgb(105, 225, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 9; background-color: rgb(46, 168, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 10; background-color: rgb(78, 131, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 11; background-color: rgb(246, 200, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 12; background-color: rgb(252, 184, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 13; background-color: rgb(254, 95, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 14; background-color: rgb(81, 198, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 15; background-color: rgb(41, 37, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 16; background-color: rgb(205, 172, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 17; background-color: rgb(50, 120, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 18; background-color: rgb(145, 79, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 19; background-color: rgb(121, 90, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 20; background-color: rgb(155, 59, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 1; background-color: rgb(57, 53, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 2; background-color: rgb(61, 189, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 3; background-color: rgb(113, 254, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 4; background-color: rgb(133, 114, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 5; background-color: rgb(184, 94, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 6; background-color: rgb(96, 61, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 7; background-color: rgb(40, 231, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 8; background-color: rgb(193, 252, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 9; background-color: rgb(189, 248, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 10; background-color: rgb(37, 77, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 11; background-color: rgb(62, 129, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 12; background-color: rgb(120, 212, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 13; background-color: rgb(10, 7, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 14; background-color: rgb(254, 73, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 15; background-color: rgb(5, 87, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 16; background-color: rgb(235, 77, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 17; background-color: rgb(144, 55, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 18; background-color: rgb(100, 111, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 19; background-color: rgb(20, 77, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 20; background-color: rgb(91, 99, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 1; background-color: rgb(121, 36, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 2; background-color: rgb(175, 14, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 3; background-color: rgb(107, 149, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 4; background-color: rgb(247, 21, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 5; background-color: rgb(239, 122, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 6; background-color: rgb(73, 78, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 7; background-color: rgb(82, 7, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 8; background-color: rgb(242, 83, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 9; background-color: rgb(172, 190, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 10; background-color: rgb(73, 114, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 11; background-color: rgb(202, 181, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 12; background-color: rgb(199, 82, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 13; background-color: rgb(234, 39, 219)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 14; background-color: rgb(113, 182, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 15; background-color: rgb(169, 201, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 16; background-color: rgb(236, 191, 32)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 17; background-color: rgb(241, 69, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 18; background-color: rgb(179, 178, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 19; background-color: rgb(108, 239, 230)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 20; background-color: rgb(204, 23, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 1; background-color: rgb(178, 157, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 2; background-color: rgb(7, 184, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 3; background-color: rgb(95, 151, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 4; background-color: rgb(46, 36, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 5; background-color: rgb(189, 190, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 6; background-color: rgb(69, 204, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 7; background-color: rgb(177, 126, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 8; background-color: rgb(18, 232, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 9; background-color: rgb(202, 138, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 10; background-color: rgb(72, 159, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 11; background-color: rgb(43, 76, 219)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 12; background-color: rgb(99, 164, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 13; background-color: rgb(249, 71, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 14; background-color: rgb(102, 148, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 15; background-color: rgb(225, 209, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 16; background-color: rgb(43, 53, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 17; background-color: rgb(66, 53, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 18; background-color: rgb(4, 190, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 19; background-color: rgb(174, 176, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 20; background-color: rgb(103, 233, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 1; background-color: rgb(97, 140, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 2; background-color: rgb(165, 145, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 3; background-color: rgb(3, 60, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 4; background-color: rgb(236, 95, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 5; background-color: rgb(215, 184, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 6; background-color: rgb(190, 225, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 7; background-color: rgb(141, 128, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 8; background-color: rgb(137, 26, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 9; background-color: rgb(171, 64, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 10; background-color: rgb(219, 153, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 11; background-color: rgb(174, 144, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 12; background-color: rgb(123, 222, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 13; background-color: rgb(120, 251, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 14; background-color: rgb(62, 135, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 15; background-color: rgb(138, 208, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 16; background-color: rgb(186, 199, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 17; background-color: rgb(127, 95, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 18; background-color: rgb(222, 193, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 19; background-color: rgb(47, 63, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 20; background-color: rgb(221, 237, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 1; background-color: rgb(148, 12, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 2; background-color: rgb(173, 147, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 3; background-color: rgb(222, 135, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 4; background-color: rgb(73, 91, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 5; background-color: rgb(14, 86, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 6; background-color: rgb(46, 35, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 7; background-color: rgb(52, 109, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 8; background-color: rgb(92, 88, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 9; background-color: rgb(152, 94, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 10; background-color: rgb(148, 148, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 11; background-color: rgb(3, 166, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 12; background-color: rgb(215, 54, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 13; background-color: rgb(231, 90, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 14; background-color: rgb(54, 87, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 15; background-color: rgb(113, 129, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 16; background-color: rgb(165, 195, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 17; background-color: rgb(223, 84, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 18; background-color: rgb(205, 190, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 19; background-color: rgb(164, 178, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 20; background-color: rgb(243, 39, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 1; background-color: rgb(6, 11, 59)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 2; background-color: rgb(48, 226, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 3; background-color: rgb(19, 34, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 4; background-color: rgb(179, 216, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 5; background-color: rgb(83, 239, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 6; background-color: rgb(1, 75, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 7; background-color: rgb(214, 215, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 8; background-color: rgb(178, 239, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 9; background-color: rgb(177, 156, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 10; background-color: rgb(114, 4, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 11; background-color: rgb(235, 5, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 12; background-color: rgb(127, 62, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 13; background-color: rgb(78, 126, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 14; background-color: rgb(239, 141, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 15; background-color: rgb(13, 73, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 16; background-color: rgb(197, 148, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 17; background-color: rgb(135, 90, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 18; background-color: rgb(100, 80, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 19; background-color: rgb(4, 202, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 20; background-color: rgb(239, 249, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 1; background-color: rgb(75, 11, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 2; background-color: rgb(75, 140, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 3; background-color: rgb(116, 238, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 4; background-color: rgb(106, 48, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 5; background-color: rgb(10, 178, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 6; background-color: rgb(76, 251, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 7; background-color: rgb(222, 188, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 8; background-color: rgb(81, 125, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 9; background-color: rgb(142, 82, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 10; background-color: rgb(74, 56, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 11; background-color: rgb(119, 56, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 12; background-color: rgb(97, 210, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 13; background-color: rgb(130, 168, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 14; background-color: rgb(183, 150, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 15; background-color: rgb(54, 253, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 16; background-color: rgb(1, 190, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 17; background-color: rgb(190, 3, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 18; background-color: rgb(92, 6, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 19; background-color: rgb(250, 132, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 20; background-color: rgb(17, 14, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 1; background-color: rgb(31, 89, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 2; background-color: rgb(69, 12, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 3; background-color: rgb(39, 21, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 4; background-color: rgb(81, 230, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 5; background-color: rgb(168, 156, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 6; background-color: rgb(161, 248, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 7; background-color: rgb(54, 110, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 8; background-color: rgb(231, 14, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 9; background-color: rgb(16, 77, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 10; background-color: rgb(88, 74, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 11; background-color: rgb(136, 33, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 12; background-color: rgb(46, 36, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 13; background-color: rgb(239, 77, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 14; background-color: rgb(183, 94, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 15; background-color: rgb(67, 122, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 16; background-color: rgb(182, 28, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 17; background-color: rgb(12, 119, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 18; background-color: rgb(108, 143, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 19; background-color: rgb(68, 141, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 20; background-color: rgb(188, 204, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 1; background-color: rgb(227, 104, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 2; background-color: rgb(235, 248, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 3; background-color: rgb(200, 178, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 4; background-color: rgb(177, 177, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 5; background-color: rgb(115, 23, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 6; background-color: rgb(175, 226, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 7; background-color: rgb(185, 207, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 8; background-color: rgb(205, 101, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 9; background-color: rgb(58, 212, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 10; background-color: rgb(207, 145, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 11; background-color: rgb(243, 236, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 12; background-color: rgb(146, 13, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 13; background-color: rgb(63, 248, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 14; background-color: rgb(199, 141, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 15; background-color: rgb(89, 22, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 16; background-color: rgb(135, 156, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 17; background-color: rgb(250, 243, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 18; background-color: rgb(20, 94, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 19; background-color: rgb(55, 172, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 20; background-color: rgb(234, 30, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 1; background-color: rgb(201, 210, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 2; background-color: rgb(208, 72, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 3; background-color: rgb(172, 116, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 4; background-color: rgb(19, 197, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 5; background-color: rgb(73, 208, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 6; background-color: rgb(165, 244, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 7; background-color: rgb(215, 66, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 8; background-color: rgb(178, 194, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 9; background-color: rgb(6, 195, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 10; background-color: rgb(3, 76, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 11; background-color: rgb(71, 92, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 12; background-color: rgb(209, 230, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 13; background-color: rgb(105, 103, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 14; background-color: rgb(160, 200, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 15; background-color: rgb(178, 92, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 16; background-color: rgb(232, 151, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 17; background-color: rgb(124, 35, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 18; background-color: rgb(118, 227, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 19; background-color: rgb(219, 224, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 20; background-color: rgb(211, 168, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 1; background-color: rgb(1, 41, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 2; background-color: rgb(45, 184, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 3; background-color: rgb(67, 228, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 4; background-color: rgb(100, 78, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 5; background-color: rgb(148, 170, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 6; background-color: rgb(31, 25, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 7; background-color: rgb(68, 240, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 8; background-color: rgb(19, 42, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 9; background-color: rgb(60, 100, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 10; background-color: rgb(22, 149, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 11; background-color: rgb(100, 14, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 12; background-color: rgb(51, 24, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 13; background-color: rgb(180, 146, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 14; background-color: rgb(55, 243, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 15; background-color: rgb(239, 239, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 16; background-color: rgb(115, 201, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 17; background-color: rgb(240, 221, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 18; background-color: rgb(179, 162, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 19; background-color: rgb(123, 253, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 20; background-color: rgb(223, 149, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 1; background-color: rgb(164, 167, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 2; background-color: rgb(6, 65, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 3; background-color: rgb(188, 174, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 4; background-color: rgb(168, 84, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 5; background-color: rgb(239, 20, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 6; background-color: rgb(199, 19, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 7; background-color: rgb(206, 51, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 8; background-color: rgb(109, 184, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 9; background-color: rgb(217, 59, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 10; background-color: rgb(172, 225, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 11; background-color: rgb(142, 89, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 12; background-color: rgb(135, 195, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 13; background-color: rgb(239, 128, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 14; background-color: rgb(191, 180, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 15; background-color: rgb(18, 130, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 16; background-color: rgb(83, 131, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 17; background-color: rgb(142, 176, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 18; background-color: rgb(26, 228, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 19; background-color: rgb(138, 250, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 20; background-color: rgb(51, 227, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 1; background-color: rgb(61, 155, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 2; background-color: rgb(123, 95, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 3; background-color: rgb(41, 198, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 4; background-color: rgb(210, 63, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 5; background-color: rgb(129, 191, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 6; background-color: rgb(26, 198, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 7; background-color: rgb(222, 210, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 8; background-color: rgb(94, 245, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 9; background-color: rgb(52, 208, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 10; background-color: rgb(197, 143, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 11; background-color: rgb(199, 66, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 12; background-color: rgb(137, 44, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 13; background-color: rgb(209, 148, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 14; background-color: rgb(109, 87, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 15; background-color: rgb(177, 150, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 16; background-color: rgb(27, 127, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 17; background-color: rgb(27, 70, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 18; background-color: rgb(6, 163, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 19; background-color: rgb(212, 217, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 20; background-color: rgb(227, 68, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 1; background-color: rgb(194, 1, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 2; background-color: rgb(27, 144, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 3; background-color: rgb(138, 104, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 4; background-color: rgb(32, 64, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 5; background-color: rgb(110, 96, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 6; background-color: rgb(25, 69, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 7; background-color: rgb(242, 223, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 8; background-color: rgb(67, 114, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 9; background-color: rgb(198, 147, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 10; background-color: rgb(52, 35, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 11; background-color: rgb(9, 169, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 12; background-color: rgb(250, 98, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 13; background-color: rgb(112, 57, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 14; background-color: rgb(248, 181, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 15; background-color: rgb(233, 167, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 16; background-color: rgb(113, 70, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 17; background-color: rgb(154, 52, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 18; background-color: rgb(8, 224, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 19; background-color: rgb(93, 32, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 20; background-color: rgb(120, 233, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 1; background-color: rgb(57, 201, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 2; background-color: rgb(16, 248, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 3; background-color: rgb(91, 123, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 4; background-color: rgb(22, 60, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 5; background-color: rgb(55, 121, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 6; background-color: rgb(87, 190, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 7; background-color: rgb(52, 15, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 8; background-color: rgb(94, 45, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 9; background-color: rgb(135, 212, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 10; background-color: rgb(106, 247, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 11; background-color: rgb(71, 173, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 12; background-color: rgb(175, 33, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 13; background-color: rgb(96, 62, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 14; background-color: rgb(134, 122, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 15; background-color: rgb(58, 145, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 16; background-color: rgb(109, 247, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 17; background-color: rgb(9, 105, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 18; background-color: rgb(24, 144, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 19; background-color: rgb(146, 195, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 20; background-color: rgb(155, 128, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 1; background-color: rgb(88, 9, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 2; background-color: rgb(171, 6, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 3; background-color: rgb(249, 203, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 4; background-color: rgb(79, 218, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 5; background-color: rgb(79, 15, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 6; background-color: rgb(191, 127, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 7; background-color: rgb(39, 104, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 8; background-color: rgb(119, 104, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 9; background-color: rgb(190, 60, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 10; background-color: rgb(169, 104, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 11; background-color: rgb(223, 253, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 12; background-color: rgb(90, 232, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 13; background-color: rgb(225, 155, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 14; background-color: rgb(207, 107, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 15; background-color: rgb(3, 117, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 16; background-color: rgb(254, 78, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 17; background-color: rgb(120, 127, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 18; background-color: rgb(21, 73, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 19; background-color: rgb(11, 18, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 20; background-color: rgb(193, 87, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 1; background-color: rgb(44, 250, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 2; background-color: rgb(95, 62, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 3; background-color: rgb(179, 123, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 4; background-color: rgb(101, 159, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 5; background-color: rgb(219, 189, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 6; background-color: rgb(57, 188, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 7; background-color: rgb(4, 74, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 8; background-color: rgb(203, 51, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 9; background-color: rgb(165, 116, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 10; background-color: rgb(121, 163, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 11; background-color: rgb(223, 35, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 12; background-color: rgb(151, 47, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 13; background-color: rgb(117, 21, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 14; background-color: rgb(165, 36, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 15; background-color: rgb(243, 249, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 16; background-color: rgb(159, 155, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 17; background-color: rgb(146, 233, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 18; background-color: rgb(250, 179, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 19; background-color: rgb(29, 53, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 20; background-color: rgb(167, 225, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 1; background-color: rgb(236, 142, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 2; background-color: rgb(176, 122, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 3; background-color: rgb(123, 200, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 4; background-color: rgb(65, 26, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 5; background-color: rgb(238, 150, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 6; background-color: rgb(41, 188, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 7; background-color: rgb(229, 86, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 8; background-color: rgb(39, 23, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 9; background-color: rgb(206, 19, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 10; background-color: rgb(246, 251, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 11; background-color: rgb(219, 89, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 12; background-color: rgb(150, 166, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 13; background-color: rgb(87, 201, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 14; background-color: rgb(158, 43, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 15; background-color: rgb(178, 214, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 16; background-color: rgb(159, 46, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 17; background-color: rgb(174, 142, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 18; background-color: rgb(69, 77, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 19; background-color: rgb(100, 164, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 20; background-color: rgb(211, 1, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 1; background-color: rgb(72, 242, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 2; background-color: rgb(2, 246, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 3; background-color: rgb(151, 118, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 4; background-color: rgb(216, 161, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 5; background-color: rgb(173, 240, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 6; background-color: rgb(59, 124, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 7; background-color: rgb(187, 44, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 8; background-color: rgb(172, 59, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 9; background-color: rgb(125, 20, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 10; background-color: rgb(130, 251, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 11; background-color: rgb(60, 9, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 12; background-color: rgb(29, 157, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 13; background-color: rgb(109, 66, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 14; background-color: rgb(157, 62, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 15; background-color: rgb(9, 177, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 16; background-color: rgb(67, 75, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 17; background-color: rgb(114, 49, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 18; background-color: rgb(24, 118, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 19; background-color: rgb(243, 66, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 20; background-color: rgb(100, 81, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 1; background-color: rgb(226, 179, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 2; background-color: rgb(11, 200, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 3; background-color: rgb(223, 96, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 4; background-color: rgb(140, 168, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 5; background-color: rgb(228, 58, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 6; background-color: rgb(66, 196, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 7; background-color: rgb(118, 185, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 8; background-color: rgb(25, 224, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 9; background-color: rgb(187, 170, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 10; background-color: rgb(80, 211, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 11; background-color: rgb(78, 94, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 12; background-color: rgb(24, 36, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 13; background-color: rgb(241, 73, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 14; background-color: rgb(126, 59, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 15; background-color: rgb(46, 101, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 16; background-color: rgb(59, 111, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 17; background-color: rgb(58, 29, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 18; background-color: rgb(144, 79, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 19; background-color: rgb(65, 233, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 20; background-color: rgb(208, 28, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 1; background-color: rgb(221, 165, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 2; background-color: rgb(6, 244, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 3; background-color: rgb(95, 122, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 4; background-color: rgb(82, 36, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 5; background-color: rgb(139, 111, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 6; background-color: rgb(140, 189, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 7; background-color: rgb(159, 225, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 8; background-color: rgb(216, 90, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 9; background-color: rgb(117, 248, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 10; background-color: rgb(19, 168, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 11; background-color: rgb(11, 56, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 12; background-color: rgb(21, 176, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 13; background-color: rgb(159, 240, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 14; background-color: rgb(112, 16, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 15; background-color: rgb(229, 65, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 16; background-color: rgb(13, 58, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 17; background-color: rgb(56, 99, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 18; background-color: rgb(97, 197, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 19; background-color: rgb(93, 116, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 20; background-color: rgb(199, 47, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 1; background-color: rgb(105, 25, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 2; background-color: rgb(164, 141, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 3; background-color: rgb(224, 18, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 4; background-color: rgb(212, 19, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 5; background-color: rgb(106, 164, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 6; background-color: rgb(221, 7, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 7; background-color: rgb(52, 96, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 8; background-color: rgb(219, 96, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 9; background-color: rgb(253, 20, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 10; background-color: rgb(49, 237, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 11; background-color: rgb(208, 23, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 12; background-color: rgb(242, 231, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 13; background-color: rgb(13, 221, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 14; background-color: rgb(188, 87, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 15; background-color: rgb(134, 224, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 16; background-color: rgb(181, 80, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 17; background-color: rgb(34, 59, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 18; background-color: rgb(162, 223, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 19; background-color: rgb(151, 65, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 20; background-color: rgb(145, 65, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 1; background-color: rgb(122, 230, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 2; background-color: rgb(215, 205, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 3; background-color: rgb(124, 165, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 4; background-color: rgb(238, 14, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 5; background-color: rgb(217, 143, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 6; background-color: rgb(137, 53, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 7; background-color: rgb(161, 5, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 8; background-color: rgb(26, 143, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 9; background-color: rgb(208, 132, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 10; background-color: rgb(143, 184, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 11; background-color: rgb(159, 155, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 12; background-color: rgb(60, 149, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 13; background-color: rgb(164, 63, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 14; background-color: rgb(133, 41, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 15; background-color: rgb(28, 6, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 16; background-color: rgb(159, 122, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 17; background-color: rgb(156, 13, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 18; background-color: rgb(109, 241, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 19; background-color: rgb(43, 160, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 20; background-color: rgb(6, 253, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 1; background-color: rgb(214, 100, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 2; background-color: rgb(41, 29, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 3; background-color: rgb(166, 79, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 4; background-color: rgb(217, 180, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 5; background-color: rgb(189, 242, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 6; background-color: rgb(4, 79, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 7; background-color: rgb(58, 171, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 8; background-color: rgb(110, 210, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 9; background-color: rgb(177, 78, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 10; background-color: rgb(72, 249, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 11; background-color: rgb(64, 169, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 12; background-color: rgb(60, 253, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 13; background-color: rgb(155, 49, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 14; background-color: rgb(97, 56, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 15; background-color: rgb(219, 189, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 16; background-color: rgb(70, 247, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 17; background-color: rgb(221, 64, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 18; background-color: rgb(50, 46, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 19; background-color: rgb(246, 109, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 20; background-color: rgb(37, 254, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 1; background-color: rgb(168, 205, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 2; background-color: rgb(180, 43, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 3; background-color: rgb(212, 203, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 4; background-color: rgb(45, 53, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 5; background-color: rgb(187, 16, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 6; background-color: rgb(242, 33, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 7; background-color: rgb(48, 254, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 8; background-color: rgb(129, 180, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 9; background-color: rgb(70, 64, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 10; background-color: rgb(67, 142, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 11; background-color: rgb(225, 57, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 12; background-color: rgb(225, 30, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 13; background-color: rgb(118, 47, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 14; background-color: rgb(203, 203, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 15; background-color: rgb(76, 187, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 16; background-color: rgb(231, 243, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 17; background-color: rgb(236, 74, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 18; background-color: rgb(196, 176, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 19; background-color: rgb(59, 223, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 20; background-color: rgb(247, 175, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 1; background-color: rgb(54, 7, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 2; background-color: rgb(166, 99, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 3; background-color: rgb(62, 200, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 4; background-color: rgb(128, 13, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 5; background-color: rgb(99, 43, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 6; background-color: rgb(226, 213, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 7; background-color: rgb(221, 157, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 8; background-color: rgb(179, 156, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 9; background-color: rgb(23, 38, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 10; background-color: rgb(76, 231, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 11; background-color: rgb(68, 94, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 12; background-color: rgb(219, 3, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 13; background-color: rgb(168, 69, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 14; background-color: rgb(93, 63, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 15; background-color: rgb(106, 0, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 16; background-color: rgb(102, 178, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 17; background-color: rgb(94, 138, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 18; background-color: rgb(75, 76, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 19; background-color: rgb(162, 81, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 20; background-color: rgb(104, 98, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 1; background-color: rgb(180, 68, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 2; background-color: rgb(201, 242, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 3; background-color: rgb(185, 236, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 4; background-color: rgb(215, 8, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 5; background-color: rgb(248, 148, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 6; background-color: rgb(148, 140, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 7; background-color: rgb(210, 26, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 8; background-color: rgb(189, 127, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 9; background-color: rgb(105, 145, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 10; background-color: rgb(163, 251, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 11; background-color: rgb(78, 107, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 12; background-color: rgb(52, 40, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 13; background-color: rgb(255, 233, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 14; background-color: rgb(217, 202, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 15; background-color: rgb(12, 24, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 16; background-color: rgb(191, 7, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 17; background-color: rgb(208, 108, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 18; background-color: rgb(172, 195, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 19; background-color: rgb(244, 82, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 20; background-color: rgb(163, 211, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 1; background-color: rgb(146, 37, 221)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 2; background-color: rgb(103, 13, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 3; background-color: rgb(43, 226, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 4; background-color: rgb(252, 32, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 5; background-color: rgb(170, 84, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 6; background-color: rgb(74, 7, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 7; background-color: rgb(62, 78, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 8; background-color: rgb(163, 161, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 9; background-color: rgb(127, 112, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 10; background-color: rgb(157, 76, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 11; background-color: rgb(208, 43, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 12; background-color: rgb(255, 186, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 13; background-color: rgb(121, 43, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 14; background-color: rgb(167, 125, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 15; background-color: rgb(8, 28, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 16; background-color: rgb(149, 36, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 17; background-color: rgb(190, 222, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 18; background-color: rgb(82, 110, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 19; background-color: rgb(245, 236, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 20; background-color: rgb(108, 168, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 1; background-color: rgb(65, 195, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 2; background-color: rgb(177, 225, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 3; background-color: rgb(84, 179, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 4; background-color: rgb(244, 107, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 5; background-color: rgb(145, 241, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 6; background-color: rgb(184, 94, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 7; background-color: rgb(167, 104, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 8; background-color: rgb(8, 42, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 9; background-color: rgb(207, 32, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 10; background-color: rgb(54, 212, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 11; background-color: rgb(95, 32, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 12; background-color: rgb(157, 207, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 13; background-color: rgb(62, 107, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 14; background-color: rgb(35, 71, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 15; background-color: rgb(55, 173, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 16; background-color: rgb(162, 130, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 17; background-color: rgb(43, 182, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 18; background-color: rgb(57, 159, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 19; background-color: rgb(101, 70, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 20; background-color: rgb(58, 160, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 1; background-color: rgb(233, 136, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 2; background-color: rgb(248, 22, 65)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 3; background-color: rgb(92, 251, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 4; background-color: rgb(156, 142, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 5; background-color: rgb(113, 145, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 6; background-color: rgb(249, 183, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 7; background-color: rgb(12, 213, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 8; background-color: rgb(83, 133, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 9; background-color: rgb(34, 19, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 10; background-color: rgb(126, 133, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 11; background-color: rgb(39, 5, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 12; background-color: rgb(115, 149, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 13; background-color: rgb(95, 204, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 14; background-color: rgb(157, 143, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 15; background-color: rgb(2, 117, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 16; background-color: rgb(108, 60, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 17; background-color: rgb(166, 178, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 18; background-color: rgb(86, 208, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 19; background-color: rgb(9, 149, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 20; background-color: rgb(41, 223, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 1; background-color: rgb(217, 32, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 2; background-color: rgb(231, 165, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 3; background-color: rgb(249, 87, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 4; background-color: rgb(226, 185, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 5; background-color: rgb(70, 124, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 6; background-color: rgb(230, 104, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 7; background-color: rgb(75, 68, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 8; background-color: rgb(246, 16, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 9; background-color: rgb(16, 226, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 10; background-color: rgb(216, 89, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 11; background-color: rgb(178, 127, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 12; background-color: rgb(225, 217, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 13; background-color: rgb(74, 135, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 14; background-color: rgb(163, 189, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 15; background-color: rgb(54, 78, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 16; background-color: rgb(136, 93, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 17; background-color: rgb(100, 25, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 18; background-color: rgb(196, 166, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 19; background-color: rgb(150, 104, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 20; background-color: rgb(170, 67, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 1; background-color: rgb(244, 76, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 2; background-color: rgb(110, 78, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 3; background-color: rgb(185, 12, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 4; background-color: rgb(96, 199, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 5; background-color: rgb(180, 34, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 6; background-color: rgb(143, 196, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 7; background-color: rgb(236, 187, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 8; background-color: rgb(35, 51, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 9; background-color: rgb(54, 157, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 10; background-color: rgb(3, 253, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 11; background-color: rgb(209, 31, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 12; background-color: rgb(114, 62, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 13; background-color: rgb(7, 209, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 14; background-color: rgb(18, 59, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 15; background-color: rgb(248, 140, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 16; background-color: rgb(118, 65, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 17; background-color: rgb(142, 123, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 18; background-color: rgb(178, 234, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 19; background-color: rgb(65, 133, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 20; background-color: rgb(10, 55, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 1; background-color: rgb(63, 55, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 2; background-color: rgb(115, 177, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 3; background-color: rgb(67, 96, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 4; background-color: rgb(221, 20, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 5; background-color: rgb(218, 64, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 6; background-color: rgb(87, 157, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 7; background-color: rgb(213, 182, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 8; background-color: rgb(86, 145, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 9; background-color: rgb(175, 107, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 10; background-color: rgb(149, 152, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 11; background-color: rgb(2, 148, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 12; background-color: rgb(131, 120, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 13; background-color: rgb(106, 202, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 14; background-color: rgb(167, 242, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 15; background-color: rgb(0, 97, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 16; background-color: rgb(97, 125, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 17; background-color: rgb(91, 116, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 18; background-color: rgb(205, 33, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 19; background-color: rgb(117, 144, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 20; background-color: rgb(149, 23, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 1; background-color: rgb(223, 94, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 2; background-color: rgb(143, 178, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 3; background-color: rgb(163, 49, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 4; background-color: rgb(11, 98, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 5; background-color: rgb(93, 206, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 6; background-color: rgb(38, 198, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 7; background-color: rgb(20, 109, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 8; background-color: rgb(104, 69, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 9; background-color: rgb(207, 254, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 10; background-color: rgb(3, 104, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 11; background-color: rgb(133, 91, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 12; background-color: rgb(243, 195, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 13; background-color: rgb(33, 66, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 14; background-color: rgb(67, 75, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 15; background-color: rgb(224, 171, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 16; background-color: rgb(94, 244, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 17; background-color: rgb(100, 51, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 18; background-color: rgb(70, 243, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 19; background-color: rgb(156, 21, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 20; background-color: rgb(76, 97, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 1; background-color: rgb(225, 95, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 2; background-color: rgb(191, 14, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 3; background-color: rgb(119, 75, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 4; background-color: rgb(91, 58, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 5; background-color: rgb(232, 78, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 6; background-color: rgb(54, 137, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 7; background-color: rgb(107, 170, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 8; background-color: rgb(170, 121, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 9; background-color: rgb(14, 122, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 10; background-color: rgb(91, 123, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 11; background-color: rgb(196, 226, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 12; background-color: rgb(6, 98, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 13; background-color: rgb(31, 46, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 14; background-color: rgb(6, 200, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 15; background-color: rgb(5, 136, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 16; background-color: rgb(3, 64, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 17; background-color: rgb(130, 32, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 18; background-color: rgb(144, 14, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 19; background-color: rgb(91, 231, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 20; background-color: rgb(167, 175, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 1; background-color: rgb(182, 75, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 2; background-color: rgb(175, 35, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 3; background-color: rgb(72, 72, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 4; background-color: rgb(74, 159, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 5; background-color: rgb(108, 21, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 6; background-color: rgb(130, 21, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 7; background-color: rgb(98, 152, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 8; background-color: rgb(247, 175, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 9; background-color: rgb(140, 170, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 10; background-color: rgb(50, 178, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 11; background-color: rgb(22, 162, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 12; background-color: rgb(235, 238, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 13; background-color: rgb(81, 205, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 14; background-color: rgb(170, 101, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 15; background-color: rgb(197, 4, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 16; background-color: rgb(221, 248, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 17; background-color: rgb(133, 99, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 18; background-color: rgb(194, 144, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 19; background-color: rgb(159, 104, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 20; background-color: rgb(94, 166, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 1; background-color: rgb(54, 15, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 2; background-color: rgb(46, 199, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 3; background-color: rgb(182, 99, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 4; background-color: rgb(239, 53, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 5; background-color: rgb(172, 17, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 6; background-color: rgb(89, 85, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 7; background-color: rgb(38, 75, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 8; background-color: rgb(188, 242, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 9; background-color: rgb(249, 108, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 10; background-color: rgb(12, 27, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 11; background-color: rgb(225, 199, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 12; background-color: rgb(13, 55, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 13; background-color: rgb(13, 81, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 14; background-color: rgb(119, 227, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 15; background-color: rgb(110, 131, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 16; background-color: rgb(138, 158, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 17; background-color: rgb(97, 66, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 18; background-color: rgb(2, 246, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 19; background-color: rgb(176, 67, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 20; background-color: rgb(174, 0, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 1; background-color: rgb(244, 53, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 2; background-color: rgb(244, 193, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 3; background-color: rgb(200, 21, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 4; background-color: rgb(118, 10, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 5; background-color: rgb(140, 10, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 6; background-color: rgb(40, 123, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 7; background-color: rgb(204, 136, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 8; background-color: rgb(238, 8, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 9; background-color: rgb(234, 210, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 10; background-color: rgb(2, 245, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 11; background-color: rgb(28, 105, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 12; background-color: rgb(69, 117, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 13; background-color: rgb(86, 155, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 14; background-color: rgb(121, 90, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 15; background-color: rgb(40, 75, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 16; background-color: rgb(189, 191, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 17; background-color: rgb(124, 90, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 18; background-color: rgb(108, 253, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 19; background-color: rgb(79, 218, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 20; background-color: rgb(44, 163, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 1; background-color: rgb(95, 104, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 2; background-color: rgb(17, 175, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 3; background-color: rgb(86, 115, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 4; background-color: rgb(163, 136, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 5; background-color: rgb(67, 84, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 6; background-color: rgb(15, 185, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 7; background-color: rgb(100, 64, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 8; background-color: rgb(4, 173, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 9; background-color: rgb(236, 245, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 10; background-color: rgb(55, 250, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 11; background-color: rgb(18, 188, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 12; background-color: rgb(26, 35, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 13; background-color: rgb(106, 80, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 14; background-color: rgb(63, 41, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 15; background-color: rgb(25, 26, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 16; background-color: rgb(76, 57, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 17; background-color: rgb(97, 105, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 18; background-color: rgb(229, 87, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 19; background-color: rgb(77, 41, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 20; background-color: rgb(5, 89, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 1; background-color: rgb(53, 56, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 2; background-color: rgb(253, 210, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 3; background-color: rgb(30, 189, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 4; background-color: rgb(197, 57, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 5; background-color: rgb(150, 93, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 6; background-color: rgb(179, 210, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 7; background-color: rgb(113, 129, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 8; background-color: rgb(181, 240, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 9; background-color: rgb(158, 156, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 10; background-color: rgb(102, 60, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 11; background-color: rgb(106, 109, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 12; background-color: rgb(69, 140, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 13; background-color: rgb(26, 105, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 14; background-color: rgb(130, 120, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 15; background-color: rgb(213, 46, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 16; background-color: rgb(88, 183, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 17; background-color: rgb(57, 111, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 18; background-color: rgb(43, 73, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 19; background-color: rgb(80, 86, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 20; background-color: rgb(27, 230, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 1; background-color: rgb(241, 61, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 2; background-color: rgb(217, 102, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 3; background-color: rgb(224, 54, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 4; background-color: rgb(56, 67, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 5; background-color: rgb(132, 146, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 6; background-color: rgb(132, 48, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 7; background-color: rgb(116, 222, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 8; background-color: rgb(208, 76, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 9; background-color: rgb(170, 254, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 10; background-color: rgb(141, 48, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 11; background-color: rgb(75, 215, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 12; background-color: rgb(58, 139, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 13; background-color: rgb(146, 190, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 14; background-color: rgb(236, 169, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 15; background-color: rgb(79, 148, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 16; background-color: rgb(2, 243, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 17; background-color: rgb(154, 246, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 18; background-color: rgb(134, 181, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 19; background-color: rgb(58, 61, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 20; background-color: rgb(47, 44, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 1; background-color: rgb(144, 120, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 2; background-color: rgb(242, 55, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 3; background-color: rgb(160, 17, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 4; background-color: rgb(41, 140, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 5; background-color: rgb(74, 121, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 6; background-color: rgb(73, 82, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 7; background-color: rgb(191, 7, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 8; background-color: rgb(82, 84, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 9; background-color: rgb(29, 8, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 10; background-color: rgb(156, 100, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 11; background-color: rgb(188, 226, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 12; background-color: rgb(78, 37, 230)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 13; background-color: rgb(39, 73, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 14; background-color: rgb(151, 94, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 15; background-color: rgb(21, 252, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 16; background-color: rgb(130, 166, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 17; background-color: rgb(8, 18, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 18; background-color: rgb(229, 140, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 19; background-color: rgb(189, 233, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 20; background-color: rgb(122, 67, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 1; background-color: rgb(255, 226, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 2; background-color: rgb(209, 174, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 3; background-color: rgb(192, 103, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 4; background-color: rgb(181, 167, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 5; background-color: rgb(61, 132, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 6; background-color: rgb(182, 125, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 7; background-color: rgb(20, 147, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 8; background-color: rgb(68, 233, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 9; background-color: rgb(216, 234, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 10; background-color: rgb(43, 10, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 11; background-color: rgb(206, 102, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 12; background-color: rgb(184, 210, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 13; background-color: rgb(214, 203, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 14; background-color: rgb(239, 54, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 15; background-color: rgb(86, 163, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 16; background-color: rgb(154, 6, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 17; background-color: rgb(191, 232, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 18; background-color: rgb(127, 179, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 19; background-color: rgb(45, 43, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 20; background-color: rgb(178, 180, 196)'></div>
</del><ins>+<div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
+<div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
+<div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
+<div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
+<div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
+<div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
+<div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
+<div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
+<div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
+<div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
+<div class='gridItem' style='grid-area: 1 / 11; background-color: rgb(154, 120, 173)'></div>
+<div class='gridItem' style='grid-area: 1 / 12; background-color: rgb(57, 247, 18)'></div>
+<div class='gridItem' style='grid-area: 1 / 13; background-color: rgb(61, 121, 26)'></div>
+<div class='gridItem' style='grid-area: 1 / 14; background-color: rgb(226, 240, 208)'></div>
+<div class='gridItem' style='grid-area: 1 / 15; background-color: rgb(21, 125, 254)'></div>
+<div class='gridItem' style='grid-area: 1 / 16; background-color: rgb(236, 97, 255)'></div>
+<div class='gridItem' style='grid-area: 1 / 17; background-color: rgb(228, 209, 187)'></div>
+<div class='gridItem' style='grid-area: 1 / 18; background-color: rgb(189, 142, 103)'></div>
+<div class='gridItem' style='grid-area: 1 / 19; background-color: rgb(34, 147, 180)'></div>
+<div class='gridItem' style='grid-area: 1 / 20; background-color: rgb(206, 11, 249)'></div>
+<div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
+<div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
+<div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
+<div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
+<div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
+<div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
+<div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
+<div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
+<div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
+<div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
+<div class='gridItem' style='grid-area: 2 / 11; background-color: rgb(43, 188, 145)'></div>
+<div class='gridItem' style='grid-area: 2 / 12; background-color: rgb(220, 17, 198)'></div>
+<div class='gridItem' style='grid-area: 2 / 13; background-color: rgb(12, 247, 112)'></div>
+<div class='gridItem' style='grid-area: 2 / 14; background-color: rgb(41, 52, 80)'></div>
+<div class='gridItem' style='grid-area: 2 / 15; background-color: rgb(225, 235, 184)'></div>
+<div class='gridItem' style='grid-area: 2 / 16; background-color: rgb(125, 53, 129)'></div>
+<div class='gridItem' style='grid-area: 2 / 17; background-color: rgb(144, 206, 84)'></div>
+<div class='gridItem' style='grid-area: 2 / 18; background-color: rgb(18, 147, 251)'></div>
+<div class='gridItem' style='grid-area: 2 / 19; background-color: rgb(62, 214, 193)'></div>
+<div class='gridItem' style='grid-area: 2 / 20; background-color: rgb(188, 127, 226)'></div>
+<div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
+<div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
+<div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
+<div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
+<div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
+<div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
+<div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
+<div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
+<div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
+<div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
+<div class='gridItem' style='grid-area: 3 / 11; background-color: rgb(68, 96, 14)'></div>
+<div class='gridItem' style='grid-area: 3 / 12; background-color: rgb(59, 60, 71)'></div>
+<div class='gridItem' style='grid-area: 3 / 13; background-color: rgb(180, 204, 137)'></div>
+<div class='gridItem' style='grid-area: 3 / 14; background-color: rgb(7, 165, 186)'></div>
+<div class='gridItem' style='grid-area: 3 / 15; background-color: rgb(29, 91, 113)'></div>
+<div class='gridItem' style='grid-area: 3 / 16; background-color: rgb(59, 66, 16)'></div>
+<div class='gridItem' style='grid-area: 3 / 17; background-color: rgb(106, 41, 144)'></div>
+<div class='gridItem' style='grid-area: 3 / 18; background-color: rgb(174, 116, 85)'></div>
+<div class='gridItem' style='grid-area: 3 / 19; background-color: rgb(132, 94, 166)'></div>
+<div class='gridItem' style='grid-area: 3 / 20; background-color: rgb(238, 82, 67)'></div>
+<div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
+<div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
+<div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
+<div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
+<div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
+<div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
+<div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
+<div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
+<div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
+<div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
+<div class='gridItem' style='grid-area: 4 / 11; background-color: rgb(215, 247, 53)'></div>
+<div class='gridItem' style='grid-area: 4 / 12; background-color: rgb(138, 81, 38)'></div>
+<div class='gridItem' style='grid-area: 4 / 13; background-color: rgb(185, 107, 33)'></div>
+<div class='gridItem' style='grid-area: 4 / 14; background-color: rgb(246, 29, 34)'></div>
+<div class='gridItem' style='grid-area: 4 / 15; background-color: rgb(190, 100, 182)'></div>
+<div class='gridItem' style='grid-area: 4 / 16; background-color: rgb(26, 171, 237)'></div>
+<div class='gridItem' style='grid-area: 4 / 17; background-color: rgb(249, 143, 96)'></div>
+<div class='gridItem' style='grid-area: 4 / 18; background-color: rgb(71, 245, 26)'></div>
+<div class='gridItem' style='grid-area: 4 / 19; background-color: rgb(89, 231, 158)'></div>
+<div class='gridItem' style='grid-area: 4 / 20; background-color: rgb(233, 114, 20)'></div>
+<div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
+<div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
+<div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
+<div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
+<div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
+<div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
+<div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
+<div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
+<div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
+<div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
+<div class='gridItem' style='grid-area: 5 / 11; background-color: rgb(233, 77, 35)'></div>
+<div class='gridItem' style='grid-area: 5 / 12; background-color: rgb(94, 103, 229)'></div>
+<div class='gridItem' style='grid-area: 5 / 13; background-color: rgb(247, 92, 231)'></div>
+<div class='gridItem' style='grid-area: 5 / 14; background-color: rgb(144, 165, 196)'></div>
+<div class='gridItem' style='grid-area: 5 / 15; background-color: rgb(104, 195, 130)'></div>
+<div class='gridItem' style='grid-area: 5 / 16; background-color: rgb(6, 15, 17)'></div>
+<div class='gridItem' style='grid-area: 5 / 17; background-color: rgb(94, 238, 63)'></div>
+<div class='gridItem' style='grid-area: 5 / 18; background-color: rgb(150, 23, 68)'></div>
+<div class='gridItem' style='grid-area: 5 / 19; background-color: rgb(160, 34, 119)'></div>
+<div class='gridItem' style='grid-area: 5 / 20; background-color: rgb(254, 111, 83)'></div>
+<div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
+<div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
+<div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
+<div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
+<div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
+<div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
+<div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
+<div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
+<div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
+<div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
+<div class='gridItem' style='grid-area: 6 / 11; background-color: rgb(140, 57, 187)'></div>
+<div class='gridItem' style='grid-area: 6 / 12; background-color: rgb(150, 161, 189)'></div>
+<div class='gridItem' style='grid-area: 6 / 13; background-color: rgb(140, 25, 168)'></div>
+<div class='gridItem' style='grid-area: 6 / 14; background-color: rgb(208, 224, 186)'></div>
+<div class='gridItem' style='grid-area: 6 / 15; background-color: rgb(85, 46, 240)'></div>
+<div class='gridItem' style='grid-area: 6 / 16; background-color: rgb(105, 215, 87)'></div>
+<div class='gridItem' style='grid-area: 6 / 17; background-color: rgb(204, 21, 106)'></div>
+<div class='gridItem' style='grid-area: 6 / 18; background-color: rgb(181, 88, 64)'></div>
+<div class='gridItem' style='grid-area: 6 / 19; background-color: rgb(252, 135, 115)'></div>
+<div class='gridItem' style='grid-area: 6 / 20; background-color: rgb(235, 50, 139)'></div>
+<div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
+<div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
+<div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
+<div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
+<div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
+<div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
+<div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
+<div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
+<div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
+<div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
+<div class='gridItem' style='grid-area: 7 / 11; background-color: rgb(172, 83, 30)'></div>
+<div class='gridItem' style='grid-area: 7 / 12; background-color: rgb(36, 152, 31)'></div>
+<div class='gridItem' style='grid-area: 7 / 13; background-color: rgb(188, 94, 121)'></div>
+<div class='gridItem' style='grid-area: 7 / 14; background-color: rgb(42, 14, 162)'></div>
+<div class='gridItem' style='grid-area: 7 / 15; background-color: rgb(195, 162, 180)'></div>
+<div class='gridItem' style='grid-area: 7 / 16; background-color: rgb(17, 4, 205)'></div>
+<div class='gridItem' style='grid-area: 7 / 17; background-color: rgb(241, 160, 89)'></div>
+<div class='gridItem' style='grid-area: 7 / 18; background-color: rgb(29, 70, 93)'></div>
+<div class='gridItem' style='grid-area: 7 / 19; background-color: rgb(248, 179, 147)'></div>
+<div class='gridItem' style='grid-area: 7 / 20; background-color: rgb(195, 141, 116)'></div>
+<div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
+<div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
+<div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
+<div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
+<div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
+<div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
+<div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
+<div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
+<div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
+<div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
+<div class='gridItem' style='grid-area: 8 / 11; background-color: rgb(88, 188, 130)'></div>
+<div class='gridItem' style='grid-area: 8 / 12; background-color: rgb(23, 37, 121)'></div>
+<div class='gridItem' style='grid-area: 8 / 13; background-color: rgb(17, 100, 106)'></div>
+<div class='gridItem' style='grid-area: 8 / 14; background-color: rgb(84, 136, 96)'></div>
+<div class='gridItem' style='grid-area: 8 / 15; background-color: rgb(170, 7, 128)'></div>
+<div class='gridItem' style='grid-area: 8 / 16; background-color: rgb(176, 78, 105)'></div>
+<div class='gridItem' style='grid-area: 8 / 17; background-color: rgb(21, 98, 217)'></div>
+<div class='gridItem' style='grid-area: 8 / 18; background-color: rgb(79, 112, 114)'></div>
+<div class='gridItem' style='grid-area: 8 / 19; background-color: rgb(196, 57, 133)'></div>
+<div class='gridItem' style='grid-area: 8 / 20; background-color: rgb(225, 81, 36)'></div>
+<div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
+<div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
+<div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
+<div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
+<div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
+<div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
+<div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
+<div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
+<div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
+<div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
+<div class='gridItem' style='grid-area: 9 / 11; background-color: rgb(121, 67, 143)'></div>
+<div class='gridItem' style='grid-area: 9 / 12; background-color: rgb(211, 222, 225)'></div>
+<div class='gridItem' style='grid-area: 9 / 13; background-color: rgb(49, 244, 4)'></div>
+<div class='gridItem' style='grid-area: 9 / 14; background-color: rgb(60, 220, 166)'></div>
+<div class='gridItem' style='grid-area: 9 / 15; background-color: rgb(42, 46, 236)'></div>
+<div class='gridItem' style='grid-area: 9 / 16; background-color: rgb(251, 160, 195)'></div>
+<div class='gridItem' style='grid-area: 9 / 17; background-color: rgb(22, 35, 27)'></div>
+<div class='gridItem' style='grid-area: 9 / 18; background-color: rgb(147, 63, 30)'></div>
+<div class='gridItem' style='grid-area: 9 / 19; background-color: rgb(134, 238, 42)'></div>
+<div class='gridItem' style='grid-area: 9 / 20; background-color: rgb(157, 53, 160)'></div>
+<div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
+<div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
+<div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
+<div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
+<div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
+<div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
+<div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
+<div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
+<div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
+<div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
+<div class='gridItem' style='grid-area: 10 / 11; background-color: rgb(124, 251, 141)'></div>
+<div class='gridItem' style='grid-area: 10 / 12; background-color: rgb(150, 253, 236)'></div>
+<div class='gridItem' style='grid-area: 10 / 13; background-color: rgb(23, 100, 146)'></div>
+<div class='gridItem' style='grid-area: 10 / 14; background-color: rgb(116, 14, 224)'></div>
+<div class='gridItem' style='grid-area: 10 / 15; background-color: rgb(201, 159, 118)'></div>
+<div class='gridItem' style='grid-area: 10 / 16; background-color: rgb(66, 96, 209)'></div>
+<div class='gridItem' style='grid-area: 10 / 17; background-color: rgb(153, 219, 172)'></div>
+<div class='gridItem' style='grid-area: 10 / 18; background-color: rgb(86, 222, 14)'></div>
+<div class='gridItem' style='grid-area: 10 / 19; background-color: rgb(145, 71, 211)'></div>
+<div class='gridItem' style='grid-area: 10 / 20; background-color: rgb(250, 91, 111)'></div>
+<div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
+<div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
+<div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
+<div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
+<div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
+<div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
+<div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
+<div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
+<div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
+<div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
+<div class='gridItem' style='grid-area: 11 / 11; background-color: rgb(190, 81, 147)'></div>
+<div class='gridItem' style='grid-area: 11 / 12; background-color: rgb(121, 9, 185)'></div>
+<div class='gridItem' style='grid-area: 11 / 13; background-color: rgb(222, 23, 135)'></div>
+<div class='gridItem' style='grid-area: 11 / 14; background-color: rgb(8, 208, 47)'></div>
+<div class='gridItem' style='grid-area: 11 / 15; background-color: rgb(177, 111, 139)'></div>
+<div class='gridItem' style='grid-area: 11 / 16; background-color: rgb(186, 172, 175)'></div>
+<div class='gridItem' style='grid-area: 11 / 17; background-color: rgb(151, 27, 224)'></div>
+<div class='gridItem' style='grid-area: 11 / 18; background-color: rgb(198, 115, 182)'></div>
+<div class='gridItem' style='grid-area: 11 / 19; background-color: rgb(97, 208, 141)'></div>
+<div class='gridItem' style='grid-area: 11 / 20; background-color: rgb(219, 22, 242)'></div>
+<div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
+<div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
+<div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
+<div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
+<div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
+<div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
+<div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
+<div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
+<div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
+<div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
+<div class='gridItem' style='grid-area: 12 / 11; background-color: rgb(228, 130, 248)'></div>
+<div class='gridItem' style='grid-area: 12 / 12; background-color: rgb(129, 232, 250)'></div>
+<div class='gridItem' style='grid-area: 12 / 13; background-color: rgb(156, 142, 10)'></div>
+<div class='gridItem' style='grid-area: 12 / 14; background-color: rgb(218, 242, 53)'></div>
+<div class='gridItem' style='grid-area: 12 / 15; background-color: rgb(136, 133, 150)'></div>
+<div class='gridItem' style='grid-area: 12 / 16; background-color: rgb(27, 102, 130)'></div>
+<div class='gridItem' style='grid-area: 12 / 17; background-color: rgb(73, 60, 131)'></div>
+<div class='gridItem' style='grid-area: 12 / 18; background-color: rgb(117, 161, 183)'></div>
+<div class='gridItem' style='grid-area: 12 / 19; background-color: rgb(183, 150, 89)'></div>
+<div class='gridItem' style='grid-area: 12 / 20; background-color: rgb(223, 210, 34)'></div>
+<div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
+<div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
+<div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
+<div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
+<div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
+<div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
+<div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
+<div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
+<div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
+<div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
+<div class='gridItem' style='grid-area: 13 / 11; background-color: rgb(105, 21, 202)'></div>
+<div class='gridItem' style='grid-area: 13 / 12; background-color: rgb(41, 125, 199)'></div>
+<div class='gridItem' style='grid-area: 13 / 13; background-color: rgb(138, 198, 125)'></div>
+<div class='gridItem' style='grid-area: 13 / 14; background-color: rgb(245, 153, 248)'></div>
+<div class='gridItem' style='grid-area: 13 / 15; background-color: rgb(239, 42, 121)'></div>
+<div class='gridItem' style='grid-area: 13 / 16; background-color: rgb(162, 54, 47)'></div>
+<div class='gridItem' style='grid-area: 13 / 17; background-color: rgb(230, 54, 235)'></div>
+<div class='gridItem' style='grid-area: 13 / 18; background-color: rgb(68, 16, 24)'></div>
+<div class='gridItem' style='grid-area: 13 / 19; background-color: rgb(45, 159, 40)'></div>
+<div class='gridItem' style='grid-area: 13 / 20; background-color: rgb(33, 97, 110)'></div>
+<div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
+<div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
+<div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
+<div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
+<div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
+<div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
+<div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
+<div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
+<div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
+<div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
+<div class='gridItem' style='grid-area: 14 / 11; background-color: rgb(220, 19, 109)'></div>
+<div class='gridItem' style='grid-area: 14 / 12; background-color: rgb(77, 165, 75)'></div>
+<div class='gridItem' style='grid-area: 14 / 13; background-color: rgb(213, 63, 96)'></div>
+<div class='gridItem' style='grid-area: 14 / 14; background-color: rgb(144, 7, 87)'></div>
+<div class='gridItem' style='grid-area: 14 / 15; background-color: rgb(22, 190, 21)'></div>
+<div class='gridItem' style='grid-area: 14 / 16; background-color: rgb(124, 111, 227)'></div>
+<div class='gridItem' style='grid-area: 14 / 17; background-color: rgb(0, 41, 172)'></div>
+<div class='gridItem' style='grid-area: 14 / 18; background-color: rgb(25, 25, 164)'></div>
+<div class='gridItem' style='grid-area: 14 / 19; background-color: rgb(39, 119, 44)'></div>
+<div class='gridItem' style='grid-area: 14 / 20; background-color: rgb(66, 138, 238)'></div>
+<div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
+<div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
+<div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
+<div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
+<div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
+<div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
+<div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
+<div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
+<div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
+<div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
+<div class='gridItem' style='grid-area: 15 / 11; background-color: rgb(175, 139, 192)'></div>
+<div class='gridItem' style='grid-area: 15 / 12; background-color: rgb(176, 195, 29)'></div>
+<div class='gridItem' style='grid-area: 15 / 13; background-color: rgb(44, 101, 107)'></div>
+<div class='gridItem' style='grid-area: 15 / 14; background-color: rgb(31, 213, 63)'></div>
+<div class='gridItem' style='grid-area: 15 / 15; background-color: rgb(157, 97, 231)'></div>
+<div class='gridItem' style='grid-area: 15 / 16; background-color: rgb(227, 14, 12)'></div>
+<div class='gridItem' style='grid-area: 15 / 17; background-color: rgb(133, 37, 37)'></div>
+<div class='gridItem' style='grid-area: 15 / 18; background-color: rgb(129, 140, 88)'></div>
+<div class='gridItem' style='grid-area: 15 / 19; background-color: rgb(50, 151, 18)'></div>
+<div class='gridItem' style='grid-area: 15 / 20; background-color: rgb(174, 90, 85)'></div>
+<div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
+<div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
+<div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
+<div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
+<div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
+<div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
+<div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
+<div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
+<div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
+<div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
+<div class='gridItem' style='grid-area: 16 / 11; background-color: rgb(205, 63, 60)'></div>
+<div class='gridItem' style='grid-area: 16 / 12; background-color: rgb(17, 145, 157)'></div>
+<div class='gridItem' style='grid-area: 16 / 13; background-color: rgb(197, 117, 57)'></div>
+<div class='gridItem' style='grid-area: 16 / 14; background-color: rgb(137, 60, 232)'></div>
+<div class='gridItem' style='grid-area: 16 / 15; background-color: rgb(167, 23, 60)'></div>
+<div class='gridItem' style='grid-area: 16 / 16; background-color: rgb(137, 61, 78)'></div>
+<div class='gridItem' style='grid-area: 16 / 17; background-color: rgb(59, 0, 74)'></div>
+<div class='gridItem' style='grid-area: 16 / 18; background-color: rgb(74, 174, 217)'></div>
+<div class='gridItem' style='grid-area: 16 / 19; background-color: rgb(91, 205, 9)'></div>
+<div class='gridItem' style='grid-area: 16 / 20; background-color: rgb(120, 65, 48)'></div>
+<div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
+<div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
+<div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
+<div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
+<div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
+<div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
+<div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
+<div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
+<div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
+<div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
+<div class='gridItem' style='grid-area: 17 / 11; background-color: rgb(155, 80, 239)'></div>
+<div class='gridItem' style='grid-area: 17 / 12; background-color: rgb(220, 206, 126)'></div>
+<div class='gridItem' style='grid-area: 17 / 13; background-color: rgb(202, 63, 13)'></div>
+<div class='gridItem' style='grid-area: 17 / 14; background-color: rgb(133, 250, 72)'></div>
+<div class='gridItem' style='grid-area: 17 / 15; background-color: rgb(26, 207, 104)'></div>
+<div class='gridItem' style='grid-area: 17 / 16; background-color: rgb(242, 23, 28)'></div>
+<div class='gridItem' style='grid-area: 17 / 17; background-color: rgb(219, 231, 38)'></div>
+<div class='gridItem' style='grid-area: 17 / 18; background-color: rgb(81, 198, 243)'></div>
+<div class='gridItem' style='grid-area: 17 / 19; background-color: rgb(2, 116, 115)'></div>
+<div class='gridItem' style='grid-area: 17 / 20; background-color: rgb(219, 90, 35)'></div>
+<div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
+<div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
+<div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
+<div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
+<div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
+<div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
+<div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
+<div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
+<div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
+<div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
+<div class='gridItem' style='grid-area: 18 / 11; background-color: rgb(191, 112, 25)'></div>
+<div class='gridItem' style='grid-area: 18 / 12; background-color: rgb(16, 101, 233)'></div>
+<div class='gridItem' style='grid-area: 18 / 13; background-color: rgb(166, 127, 165)'></div>
+<div class='gridItem' style='grid-area: 18 / 14; background-color: rgb(12, 140, 162)'></div>
+<div class='gridItem' style='grid-area: 18 / 15; background-color: rgb(25, 163, 131)'></div>
+<div class='gridItem' style='grid-area: 18 / 16; background-color: rgb(169, 70, 208)'></div>
+<div class='gridItem' style='grid-area: 18 / 17; background-color: rgb(236, 172, 129)'></div>
+<div class='gridItem' style='grid-area: 18 / 18; background-color: rgb(207, 130, 221)'></div>
+<div class='gridItem' style='grid-area: 18 / 19; background-color: rgb(27, 148, 87)'></div>
+<div class='gridItem' style='grid-area: 18 / 20; background-color: rgb(184, 170, 113)'></div>
+<div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
+<div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
+<div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
+<div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
+<div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
+<div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
+<div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
+<div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
+<div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
+<div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
+<div class='gridItem' style='grid-area: 19 / 11; background-color: rgb(40, 150, 78)'></div>
+<div class='gridItem' style='grid-area: 19 / 12; background-color: rgb(94, 136, 8)'></div>
+<div class='gridItem' style='grid-area: 19 / 13; background-color: rgb(194, 243, 110)'></div>
+<div class='gridItem' style='grid-area: 19 / 14; background-color: rgb(134, 98, 125)'></div>
+<div class='gridItem' style='grid-area: 19 / 15; background-color: rgb(96, 240, 175)'></div>
+<div class='gridItem' style='grid-area: 19 / 16; background-color: rgb(38, 90, 64)'></div>
+<div class='gridItem' style='grid-area: 19 / 17; background-color: rgb(91, 218, 145)'></div>
+<div class='gridItem' style='grid-area: 19 / 18; background-color: rgb(231, 191, 193)'></div>
+<div class='gridItem' style='grid-area: 19 / 19; background-color: rgb(246, 117, 106)'></div>
+<div class='gridItem' style='grid-area: 19 / 20; background-color: rgb(187, 19, 114)'></div>
+<div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
+<div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
+<div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
+<div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
+<div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
+<div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
+<div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
+<div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
+<div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
+<div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
+<div class='gridItem' style='grid-area: 20 / 11; background-color: rgb(138, 57, 139)'></div>
+<div class='gridItem' style='grid-area: 20 / 12; background-color: rgb(56, 58, 160)'></div>
+<div class='gridItem' style='grid-area: 20 / 13; background-color: rgb(132, 68, 175)'></div>
+<div class='gridItem' style='grid-area: 20 / 14; background-color: rgb(125, 57, 109)'></div>
+<div class='gridItem' style='grid-area: 20 / 15; background-color: rgb(197, 106, 91)'></div>
+<div class='gridItem' style='grid-area: 20 / 16; background-color: rgb(162, 215, 238)'></div>
+<div class='gridItem' style='grid-area: 20 / 17; background-color: rgb(70, 146, 115)'></div>
+<div class='gridItem' style='grid-area: 20 / 18; background-color: rgb(2, 149, 242)'></div>
+<div class='gridItem' style='grid-area: 20 / 19; background-color: rgb(219, 80, 6)'></div>
+<div class='gridItem' style='grid-area: 20 / 20; background-color: rgb(65, 57, 37)'></div>
+<div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
+<div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
+<div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
+<div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
+<div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
+<div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
+<div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
+<div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
+<div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
+<div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
+<div class='gridItem' style='grid-area: 21 / 11; background-color: rgb(250, 119, 194)'></div>
+<div class='gridItem' style='grid-area: 21 / 12; background-color: rgb(215, 170, 23)'></div>
+<div class='gridItem' style='grid-area: 21 / 13; background-color: rgb(141, 247, 13)'></div>
+<div class='gridItem' style='grid-area: 21 / 14; background-color: rgb(1, 220, 45)'></div>
+<div class='gridItem' style='grid-area: 21 / 15; background-color: rgb(189, 49, 5)'></div>
+<div class='gridItem' style='grid-area: 21 / 16; background-color: rgb(164, 252, 147)'></div>
+<div class='gridItem' style='grid-area: 21 / 17; background-color: rgb(10, 88, 80)'></div>
+<div class='gridItem' style='grid-area: 21 / 18; background-color: rgb(149, 210, 131)'></div>
+<div class='gridItem' style='grid-area: 21 / 19; background-color: rgb(215, 109, 238)'></div>
+<div class='gridItem' style='grid-area: 21 / 20; background-color: rgb(146, 166, 63)'></div>
+<div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
+<div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
+<div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
+<div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
+<div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
+<div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
+<div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
+<div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
+<div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
+<div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
+<div class='gridItem' style='grid-area: 22 / 11; background-color: rgb(193, 224, 254)'></div>
+<div class='gridItem' style='grid-area: 22 / 12; background-color: rgb(6, 145, 158)'></div>
+<div class='gridItem' style='grid-area: 22 / 13; background-color: rgb(57, 236, 223)'></div>
+<div class='gridItem' style='grid-area: 22 / 14; background-color: rgb(62, 125, 101)'></div>
+<div class='gridItem' style='grid-area: 22 / 15; background-color: rgb(66, 7, 128)'></div>
+<div class='gridItem' style='grid-area: 22 / 16; background-color: rgb(172, 65, 227)'></div>
+<div class='gridItem' style='grid-area: 22 / 17; background-color: rgb(52, 38, 226)'></div>
+<div class='gridItem' style='grid-area: 22 / 18; background-color: rgb(9, 80, 223)'></div>
+<div class='gridItem' style='grid-area: 22 / 19; background-color: rgb(34, 87, 239)'></div>
+<div class='gridItem' style='grid-area: 22 / 20; background-color: rgb(209, 175, 154)'></div>
+<div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
+<div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
+<div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
+<div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
+<div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
+<div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
+<div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
+<div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
+<div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
+<div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
+<div class='gridItem' style='grid-area: 23 / 11; background-color: rgb(253, 155, 163)'></div>
+<div class='gridItem' style='grid-area: 23 / 12; background-color: rgb(189, 249, 253)'></div>
+<div class='gridItem' style='grid-area: 23 / 13; background-color: rgb(158, 74, 194)'></div>
+<div class='gridItem' style='grid-area: 23 / 14; background-color: rgb(253, 176, 173)'></div>
+<div class='gridItem' style='grid-area: 23 / 15; background-color: rgb(44, 232, 41)'></div>
+<div class='gridItem' style='grid-area: 23 / 16; background-color: rgb(235, 108, 177)'></div>
+<div class='gridItem' style='grid-area: 23 / 17; background-color: rgb(99, 212, 203)'></div>
+<div class='gridItem' style='grid-area: 23 / 18; background-color: rgb(156, 238, 159)'></div>
+<div class='gridItem' style='grid-area: 23 / 19; background-color: rgb(143, 139, 76)'></div>
+<div class='gridItem' style='grid-area: 23 / 20; background-color: rgb(203, 38, 16)'></div>
+<div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
+<div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
+<div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
+<div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
+<div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
+<div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
+<div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
+<div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
+<div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
+<div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
+<div class='gridItem' style='grid-area: 24 / 11; background-color: rgb(219, 10, 173)'></div>
+<div class='gridItem' style='grid-area: 24 / 12; background-color: rgb(15, 94, 54)'></div>
+<div class='gridItem' style='grid-area: 24 / 13; background-color: rgb(23, 185, 211)'></div>
+<div class='gridItem' style='grid-area: 24 / 14; background-color: rgb(190, 202, 168)'></div>
+<div class='gridItem' style='grid-area: 24 / 15; background-color: rgb(210, 56, 27)'></div>
+<div class='gridItem' style='grid-area: 24 / 16; background-color: rgb(120, 227, 129)'></div>
+<div class='gridItem' style='grid-area: 24 / 17; background-color: rgb(198, 208, 114)'></div>
+<div class='gridItem' style='grid-area: 24 / 18; background-color: rgb(153, 172, 113)'></div>
+<div class='gridItem' style='grid-area: 24 / 19; background-color: rgb(209, 151, 46)'></div>
+<div class='gridItem' style='grid-area: 24 / 20; background-color: rgb(36, 3, 107)'></div>
+<div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
+<div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
+<div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
+<div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
+<div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
+<div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
+<div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
+<div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
+<div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
+<div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
+<div class='gridItem' style='grid-area: 25 / 11; background-color: rgb(165, 32, 76)'></div>
+<div class='gridItem' style='grid-area: 25 / 12; background-color: rgb(65, 20, 17)'></div>
+<div class='gridItem' style='grid-area: 25 / 13; background-color: rgb(126, 22, 25)'></div>
+<div class='gridItem' style='grid-area: 25 / 14; background-color: rgb(250, 39, 157)'></div>
+<div class='gridItem' style='grid-area: 25 / 15; background-color: rgb(94, 46, 28)'></div>
+<div class='gridItem' style='grid-area: 25 / 16; background-color: rgb(111, 58, 193)'></div>
+<div class='gridItem' style='grid-area: 25 / 17; background-color: rgb(206, 97, 152)'></div>
+<div class='gridItem' style='grid-area: 25 / 18; background-color: rgb(71, 51, 207)'></div>
+<div class='gridItem' style='grid-area: 25 / 19; background-color: rgb(237, 13, 80)'></div>
+<div class='gridItem' style='grid-area: 25 / 20; background-color: rgb(23, 188, 254)'></div>
+<div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
+<div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
+<div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
+<div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
+<div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
+<div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
+<div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
+<div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
+<div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
+<div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
+<div class='gridItem' style='grid-area: 26 / 11; background-color: rgb(219, 237, 78)'></div>
+<div class='gridItem' style='grid-area: 26 / 12; background-color: rgb(6, 46, 74)'></div>
+<div class='gridItem' style='grid-area: 26 / 13; background-color: rgb(152, 65, 91)'></div>
+<div class='gridItem' style='grid-area: 26 / 14; background-color: rgb(67, 172, 165)'></div>
+<div class='gridItem' style='grid-area: 26 / 15; background-color: rgb(101, 92, 18)'></div>
+<div class='gridItem' style='grid-area: 26 / 16; background-color: rgb(167, 128, 83)'></div>
+<div class='gridItem' style='grid-area: 26 / 17; background-color: rgb(18, 100, 201)'></div>
+<div class='gridItem' style='grid-area: 26 / 18; background-color: rgb(55, 94, 198)'></div>
+<div class='gridItem' style='grid-area: 26 / 19; background-color: rgb(23, 141, 34)'></div>
+<div class='gridItem' style='grid-area: 26 / 20; background-color: rgb(93, 91, 54)'></div>
+<div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
+<div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
+<div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
+<div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
+<div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
+<div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
+<div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
+<div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
+<div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
+<div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
+<div class='gridItem' style='grid-area: 27 / 11; background-color: rgb(207, 151, 203)'></div>
+<div class='gridItem' style='grid-area: 27 / 12; background-color: rgb(176, 23, 207)'></div>
+<div class='gridItem' style='grid-area: 27 / 13; background-color: rgb(96, 197, 234)'></div>
+<div class='gridItem' style='grid-area: 27 / 14; background-color: rgb(99, 23, 77)'></div>
+<div class='gridItem' style='grid-area: 27 / 15; background-color: rgb(231, 234, 107)'></div>
+<div class='gridItem' style='grid-area: 27 / 16; background-color: rgb(121, 228, 37)'></div>
+<div class='gridItem' style='grid-area: 27 / 17; background-color: rgb(223, 206, 209)'></div>
+<div class='gridItem' style='grid-area: 27 / 18; background-color: rgb(23, 89, 133)'></div>
+<div class='gridItem' style='grid-area: 27 / 19; background-color: rgb(174, 195, 125)'></div>
+<div class='gridItem' style='grid-area: 27 / 20; background-color: rgb(164, 120, 70)'></div>
+<div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
+<div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
+<div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
+<div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
+<div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
+<div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
+<div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
+<div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
+<div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
+<div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
+<div class='gridItem' style='grid-area: 28 / 11; background-color: rgb(219, 250, 66)'></div>
+<div class='gridItem' style='grid-area: 28 / 12; background-color: rgb(50, 148, 14)'></div>
+<div class='gridItem' style='grid-area: 28 / 13; background-color: rgb(22, 5, 112)'></div>
+<div class='gridItem' style='grid-area: 28 / 14; background-color: rgb(244, 168, 122)'></div>
+<div class='gridItem' style='grid-area: 28 / 15; background-color: rgb(78, 207, 104)'></div>
+<div class='gridItem' style='grid-area: 28 / 16; background-color: rgb(208, 50, 16)'></div>
+<div class='gridItem' style='grid-area: 28 / 17; background-color: rgb(104, 110, 96)'></div>
+<div class='gridItem' style='grid-area: 28 / 18; background-color: rgb(104, 240, 147)'></div>
+<div class='gridItem' style='grid-area: 28 / 19; background-color: rgb(155, 151, 168)'></div>
+<div class='gridItem' style='grid-area: 28 / 20; background-color: rgb(78, 119, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
+<div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
+<div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
+<div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
+<div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
+<div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
+<div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
+<div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
+<div class='gridItem' style='grid-area: 29 / 11; background-color: rgb(99, 22, 22)'></div>
+<div class='gridItem' style='grid-area: 29 / 12; background-color: rgb(20, 35, 133)'></div>
+<div class='gridItem' style='grid-area: 29 / 13; background-color: rgb(205, 17, 83)'></div>
+<div class='gridItem' style='grid-area: 29 / 14; background-color: rgb(145, 59, 192)'></div>
+<div class='gridItem' style='grid-area: 29 / 15; background-color: rgb(56, 40, 13)'></div>
+<div class='gridItem' style='grid-area: 29 / 16; background-color: rgb(53, 57, 177)'></div>
+<div class='gridItem' style='grid-area: 29 / 17; background-color: rgb(14, 73, 177)'></div>
+<div class='gridItem' style='grid-area: 29 / 18; background-color: rgb(145, 76, 36)'></div>
+<div class='gridItem' style='grid-area: 29 / 19; background-color: rgb(136, 14, 198)'></div>
+<div class='gridItem' style='grid-area: 29 / 20; background-color: rgb(254, 79, 202)'></div>
+<div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
+<div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
+<div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
+<div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
+<div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
+<div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
+<div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
+<div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
+<div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
+<div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
+<div class='gridItem' style='grid-area: 30 / 11; background-color: rgb(153, 207, 69)'></div>
+<div class='gridItem' style='grid-area: 30 / 12; background-color: rgb(215, 33, 69)'></div>
+<div class='gridItem' style='grid-area: 30 / 13; background-color: rgb(137, 237, 33)'></div>
+<div class='gridItem' style='grid-area: 30 / 14; background-color: rgb(183, 125, 138)'></div>
+<div class='gridItem' style='grid-area: 30 / 15; background-color: rgb(254, 131, 166)'></div>
+<div class='gridItem' style='grid-area: 30 / 16; background-color: rgb(17, 74, 151)'></div>
+<div class='gridItem' style='grid-area: 30 / 17; background-color: rgb(134, 15, 125)'></div>
+<div class='gridItem' style='grid-area: 30 / 18; background-color: rgb(231, 214, 142)'></div>
+<div class='gridItem' style='grid-area: 30 / 19; background-color: rgb(39, 221, 131)'></div>
+<div class='gridItem' style='grid-area: 30 / 20; background-color: rgb(132, 62, 165)'></div>
+<div class='gridItem' style='grid-area: 31 / 1; background-color: rgb(16, 110, 181)'></div>
+<div class='gridItem' style='grid-area: 31 / 2; background-color: rgb(9, 6, 29)'></div>
+<div class='gridItem' style='grid-area: 31 / 3; background-color: rgb(124, 59, 153)'></div>
+<div class='gridItem' style='grid-area: 31 / 4; background-color: rgb(190, 187, 5)'></div>
+<div class='gridItem' style='grid-area: 31 / 5; background-color: rgb(178, 90, 31)'></div>
+<div class='gridItem' style='grid-area: 31 / 6; background-color: rgb(205, 26, 244)'></div>
+<div class='gridItem' style='grid-area: 31 / 7; background-color: rgb(123, 148, 15)'></div>
+<div class='gridItem' style='grid-area: 31 / 8; background-color: rgb(205, 242, 180)'></div>
+<div class='gridItem' style='grid-area: 31 / 9; background-color: rgb(217, 238, 142)'></div>
+<div class='gridItem' style='grid-area: 31 / 10; background-color: rgb(149, 192, 142)'></div>
+<div class='gridItem' style='grid-area: 31 / 11; background-color: rgb(133, 234, 234)'></div>
+<div class='gridItem' style='grid-area: 31 / 12; background-color: rgb(99, 190, 138)'></div>
+<div class='gridItem' style='grid-area: 31 / 13; background-color: rgb(100, 228, 141)'></div>
+<div class='gridItem' style='grid-area: 31 / 14; background-color: rgb(59, 181, 159)'></div>
+<div class='gridItem' style='grid-area: 31 / 15; background-color: rgb(191, 100, 29)'></div>
+<div class='gridItem' style='grid-area: 31 / 16; background-color: rgb(55, 137, 68)'></div>
+<div class='gridItem' style='grid-area: 31 / 17; background-color: rgb(107, 5, 22)'></div>
+<div class='gridItem' style='grid-area: 31 / 18; background-color: rgb(192, 129, 22)'></div>
+<div class='gridItem' style='grid-area: 31 / 19; background-color: rgb(65, 14, 186)'></div>
+<div class='gridItem' style='grid-area: 31 / 20; background-color: rgb(226, 108, 82)'></div>
+<div class='gridItem' style='grid-area: 32 / 1; background-color: rgb(254, 123, 26)'></div>
+<div class='gridItem' style='grid-area: 32 / 2; background-color: rgb(215, 97, 217)'></div>
+<div class='gridItem' style='grid-area: 32 / 3; background-color: rgb(159, 164, 70)'></div>
+<div class='gridItem' style='grid-area: 32 / 4; background-color: rgb(163, 92, 130)'></div>
+<div class='gridItem' style='grid-area: 32 / 5; background-color: rgb(187, 62, 254)'></div>
+<div class='gridItem' style='grid-area: 32 / 6; background-color: rgb(202, 181, 162)'></div>
+<div class='gridItem' style='grid-area: 32 / 7; background-color: rgb(198, 225, 6)'></div>
+<div class='gridItem' style='grid-area: 32 / 8; background-color: rgb(84, 188, 48)'></div>
+<div class='gridItem' style='grid-area: 32 / 9; background-color: rgb(85, 245, 187)'></div>
+<div class='gridItem' style='grid-area: 32 / 10; background-color: rgb(137, 228, 147)'></div>
+<div class='gridItem' style='grid-area: 32 / 11; background-color: rgb(89, 77, 173)'></div>
+<div class='gridItem' style='grid-area: 32 / 12; background-color: rgb(111, 68, 186)'></div>
+<div class='gridItem' style='grid-area: 32 / 13; background-color: rgb(5, 155, 112)'></div>
+<div class='gridItem' style='grid-area: 32 / 14; background-color: rgb(39, 128, 197)'></div>
+<div class='gridItem' style='grid-area: 32 / 15; background-color: rgb(7, 233, 120)'></div>
+<div class='gridItem' style='grid-area: 32 / 16; background-color: rgb(195, 122, 109)'></div>
+<div class='gridItem' style='grid-area: 32 / 17; background-color: rgb(184, 166, 52)'></div>
+<div class='gridItem' style='grid-area: 32 / 18; background-color: rgb(14, 231, 222)'></div>
+<div class='gridItem' style='grid-area: 32 / 19; background-color: rgb(130, 78, 159)'></div>
+<div class='gridItem' style='grid-area: 32 / 20; background-color: rgb(77, 15, 229)'></div>
+<div class='gridItem' style='grid-area: 33 / 1; background-color: rgb(97, 16, 80)'></div>
+<div class='gridItem' style='grid-area: 33 / 2; background-color: rgb(146, 109, 173)'></div>
+<div class='gridItem' style='grid-area: 33 / 3; background-color: rgb(18, 46, 199)'></div>
+<div class='gridItem' style='grid-area: 33 / 4; background-color: rgb(229, 130, 96)'></div>
+<div class='gridItem' style='grid-area: 33 / 5; background-color: rgb(230, 232, 205)'></div>
+<div class='gridItem' style='grid-area: 33 / 6; background-color: rgb(144, 132, 58)'></div>
+<div class='gridItem' style='grid-area: 33 / 7; background-color: rgb(72, 220, 149)'></div>
+<div class='gridItem' style='grid-area: 33 / 8; background-color: rgb(96, 176, 39)'></div>
+<div class='gridItem' style='grid-area: 33 / 9; background-color: rgb(45, 109, 17)'></div>
+<div class='gridItem' style='grid-area: 33 / 10; background-color: rgb(48, 93, 189)'></div>
+<div class='gridItem' style='grid-area: 33 / 11; background-color: rgb(88, 15, 71)'></div>
+<div class='gridItem' style='grid-area: 33 / 12; background-color: rgb(174, 74, 18)'></div>
+<div class='gridItem' style='grid-area: 33 / 13; background-color: rgb(236, 106, 40)'></div>
+<div class='gridItem' style='grid-area: 33 / 14; background-color: rgb(132, 141, 152)'></div>
+<div class='gridItem' style='grid-area: 33 / 15; background-color: rgb(157, 34, 80)'></div>
+<div class='gridItem' style='grid-area: 33 / 16; background-color: rgb(124, 221, 92)'></div>
+<div class='gridItem' style='grid-area: 33 / 17; background-color: rgb(58, 40, 79)'></div>
+<div class='gridItem' style='grid-area: 33 / 18; background-color: rgb(102, 202, 92)'></div>
+<div class='gridItem' style='grid-area: 33 / 19; background-color: rgb(107, 39, 161)'></div>
+<div class='gridItem' style='grid-area: 33 / 20; background-color: rgb(214, 82, 170)'></div>
+<div class='gridItem' style='grid-area: 34 / 1; background-color: rgb(123, 121, 137)'></div>
+<div class='gridItem' style='grid-area: 34 / 2; background-color: rgb(155, 138, 115)'></div>
+<div class='gridItem' style='grid-area: 34 / 3; background-color: rgb(217, 245, 252)'></div>
+<div class='gridItem' style='grid-area: 34 / 4; background-color: rgb(128, 164, 69)'></div>
+<div class='gridItem' style='grid-area: 34 / 5; background-color: rgb(43, 78, 42)'></div>
+<div class='gridItem' style='grid-area: 34 / 6; background-color: rgb(31, 74, 247)'></div>
+<div class='gridItem' style='grid-area: 34 / 7; background-color: rgb(32, 93, 211)'></div>
+<div class='gridItem' style='grid-area: 34 / 8; background-color: rgb(118, 56, 89)'></div>
+<div class='gridItem' style='grid-area: 34 / 9; background-color: rgb(68, 204, 132)'></div>
+<div class='gridItem' style='grid-area: 34 / 10; background-color: rgb(183, 134, 146)'></div>
+<div class='gridItem' style='grid-area: 34 / 11; background-color: rgb(213, 189, 37)'></div>
+<div class='gridItem' style='grid-area: 34 / 12; background-color: rgb(212, 218, 38)'></div>
+<div class='gridItem' style='grid-area: 34 / 13; background-color: rgb(32, 72, 167)'></div>
+<div class='gridItem' style='grid-area: 34 / 14; background-color: rgb(216, 142, 224)'></div>
+<div class='gridItem' style='grid-area: 34 / 15; background-color: rgb(214, 84, 30)'></div>
+<div class='gridItem' style='grid-area: 34 / 16; background-color: rgb(47, 20, 159)'></div>
+<div class='gridItem' style='grid-area: 34 / 17; background-color: rgb(187, 167, 38)'></div>
+<div class='gridItem' style='grid-area: 34 / 18; background-color: rgb(115, 18, 6)'></div>
+<div class='gridItem' style='grid-area: 34 / 19; background-color: rgb(194, 189, 232)'></div>
+<div class='gridItem' style='grid-area: 34 / 20; background-color: rgb(59, 158, 16)'></div>
+<div class='gridItem' style='grid-area: 35 / 1; background-color: rgb(128, 28, 18)'></div>
+<div class='gridItem' style='grid-area: 35 / 2; background-color: rgb(153, 7, 88)'></div>
+<div class='gridItem' style='grid-area: 35 / 3; background-color: rgb(226, 89, 57)'></div>
+<div class='gridItem' style='grid-area: 35 / 4; background-color: rgb(5, 33, 45)'></div>
+<div class='gridItem' style='grid-area: 35 / 5; background-color: rgb(180, 248, 28)'></div>
+<div class='gridItem' style='grid-area: 35 / 6; background-color: rgb(205, 20, 14)'></div>
+<div class='gridItem' style='grid-area: 35 / 7; background-color: rgb(28, 200, 128)'></div>
+<div class='gridItem' style='grid-area: 35 / 8; background-color: rgb(127, 65, 131)'></div>
+<div class='gridItem' style='grid-area: 35 / 9; background-color: rgb(143, 219, 2)'></div>
+<div class='gridItem' style='grid-area: 35 / 10; background-color: rgb(4, 85, 162)'></div>
+<div class='gridItem' style='grid-area: 35 / 11; background-color: rgb(190, 113, 213)'></div>
+<div class='gridItem' style='grid-area: 35 / 12; background-color: rgb(172, 154, 67)'></div>
+<div class='gridItem' style='grid-area: 35 / 13; background-color: rgb(253, 238, 44)'></div>
+<div class='gridItem' style='grid-area: 35 / 14; background-color: rgb(141, 81, 197)'></div>
+<div class='gridItem' style='grid-area: 35 / 15; background-color: rgb(188, 206, 250)'></div>
+<div class='gridItem' style='grid-area: 35 / 16; background-color: rgb(149, 77, 148)'></div>
+<div class='gridItem' style='grid-area: 35 / 17; background-color: rgb(212, 124, 142)'></div>
+<div class='gridItem' style='grid-area: 35 / 18; background-color: rgb(134, 27, 125)'></div>
+<div class='gridItem' style='grid-area: 35 / 19; background-color: rgb(252, 114, 146)'></div>
+<div class='gridItem' style='grid-area: 35 / 20; background-color: rgb(240, 190, 74)'></div>
+<div class='gridItem' style='grid-area: 36 / 1; background-color: rgb(170, 108, 210)'></div>
+<div class='gridItem' style='grid-area: 36 / 2; background-color: rgb(170, 202, 216)'></div>
+<div class='gridItem' style='grid-area: 36 / 3; background-color: rgb(16, 58, 250)'></div>
+<div class='gridItem' style='grid-area: 36 / 4; background-color: rgb(124, 98, 13)'></div>
+<div class='gridItem' style='grid-area: 36 / 5; background-color: rgb(245, 105, 27)'></div>
+<div class='gridItem' style='grid-area: 36 / 6; background-color: rgb(252, 155, 98)'></div>
+<div class='gridItem' style='grid-area: 36 / 7; background-color: rgb(11, 39, 228)'></div>
+<div class='gridItem' style='grid-area: 36 / 8; background-color: rgb(175, 10, 176)'></div>
+<div class='gridItem' style='grid-area: 36 / 9; background-color: rgb(29, 83, 178)'></div>
+<div class='gridItem' style='grid-area: 36 / 10; background-color: rgb(207, 137, 12)'></div>
+<div class='gridItem' style='grid-area: 36 / 11; background-color: rgb(117, 208, 106)'></div>
+<div class='gridItem' style='grid-area: 36 / 12; background-color: rgb(164, 87, 212)'></div>
+<div class='gridItem' style='grid-area: 36 / 13; background-color: rgb(10, 148, 118)'></div>
+<div class='gridItem' style='grid-area: 36 / 14; background-color: rgb(66, 106, 126)'></div>
+<div class='gridItem' style='grid-area: 36 / 15; background-color: rgb(203, 80, 145)'></div>
+<div class='gridItem' style='grid-area: 36 / 16; background-color: rgb(141, 96, 38)'></div>
+<div class='gridItem' style='grid-area: 36 / 17; background-color: rgb(59, 121, 208)'></div>
+<div class='gridItem' style='grid-area: 36 / 18; background-color: rgb(79, 206, 112)'></div>
+<div class='gridItem' style='grid-area: 36 / 19; background-color: rgb(107, 66, 40)'></div>
+<div class='gridItem' style='grid-area: 36 / 20; background-color: rgb(162, 27, 43)'></div>
+<div class='gridItem' style='grid-area: 37 / 1; background-color: rgb(82, 148, 10)'></div>
+<div class='gridItem' style='grid-area: 37 / 2; background-color: rgb(41, 212, 93)'></div>
+<div class='gridItem' style='grid-area: 37 / 3; background-color: rgb(143, 37, 193)'></div>
+<div class='gridItem' style='grid-area: 37 / 4; background-color: rgb(193, 99, 30)'></div>
+<div class='gridItem' style='grid-area: 37 / 5; background-color: rgb(118, 116, 29)'></div>
+<div class='gridItem' style='grid-area: 37 / 6; background-color: rgb(82, 162, 49)'></div>
+<div class='gridItem' style='grid-area: 37 / 7; background-color: rgb(214, 215, 254)'></div>
+<div class='gridItem' style='grid-area: 37 / 8; background-color: rgb(96, 131, 80)'></div>
+<div class='gridItem' style='grid-area: 37 / 9; background-color: rgb(21, 136, 128)'></div>
+<div class='gridItem' style='grid-area: 37 / 10; background-color: rgb(187, 24, 202)'></div>
+<div class='gridItem' style='grid-area: 37 / 11; background-color: rgb(36, 232, 0)'></div>
+<div class='gridItem' style='grid-area: 37 / 12; background-color: rgb(26, 112, 24)'></div>
+<div class='gridItem' style='grid-area: 37 / 13; background-color: rgb(226, 56, 109)'></div>
+<div class='gridItem' style='grid-area: 37 / 14; background-color: rgb(232, 51, 38)'></div>
+<div class='gridItem' style='grid-area: 37 / 15; background-color: rgb(57, 151, 142)'></div>
+<div class='gridItem' style='grid-area: 37 / 16; background-color: rgb(124, 131, 208)'></div>
+<div class='gridItem' style='grid-area: 37 / 17; background-color: rgb(157, 134, 134)'></div>
+<div class='gridItem' style='grid-area: 37 / 18; background-color: rgb(21, 249, 95)'></div>
+<div class='gridItem' style='grid-area: 37 / 19; background-color: rgb(238, 23, 35)'></div>
+<div class='gridItem' style='grid-area: 37 / 20; background-color: rgb(69, 110, 13)'></div>
+<div class='gridItem' style='grid-area: 38 / 1; background-color: rgb(24, 45, 12)'></div>
+<div class='gridItem' style='grid-area: 38 / 2; background-color: rgb(63, 57, 139)'></div>
+<div class='gridItem' style='grid-area: 38 / 3; background-color: rgb(227, 24, 104)'></div>
+<div class='gridItem' style='grid-area: 38 / 4; background-color: rgb(63, 118, 40)'></div>
+<div class='gridItem' style='grid-area: 38 / 5; background-color: rgb(70, 32, 148)'></div>
+<div class='gridItem' style='grid-area: 38 / 6; background-color: rgb(225, 73, 205)'></div>
+<div class='gridItem' style='grid-area: 38 / 7; background-color: rgb(223, 30, 224)'></div>
+<div class='gridItem' style='grid-area: 38 / 8; background-color: rgb(193, 130, 135)'></div>
+<div class='gridItem' style='grid-area: 38 / 9; background-color: rgb(132, 16, 19)'></div>
+<div class='gridItem' style='grid-area: 38 / 10; background-color: rgb(95, 182, 8)'></div>
+<div class='gridItem' style='grid-area: 38 / 11; background-color: rgb(153, 14, 223)'></div>
+<div class='gridItem' style='grid-area: 38 / 12; background-color: rgb(199, 142, 70)'></div>
+<div class='gridItem' style='grid-area: 38 / 13; background-color: rgb(157, 197, 180)'></div>
+<div class='gridItem' style='grid-area: 38 / 14; background-color: rgb(55, 202, 70)'></div>
+<div class='gridItem' style='grid-area: 38 / 15; background-color: rgb(155, 126, 92)'></div>
+<div class='gridItem' style='grid-area: 38 / 16; background-color: rgb(85, 100, 205)'></div>
+<div class='gridItem' style='grid-area: 38 / 17; background-color: rgb(212, 249, 209)'></div>
+<div class='gridItem' style='grid-area: 38 / 18; background-color: rgb(61, 40, 75)'></div>
+<div class='gridItem' style='grid-area: 38 / 19; background-color: rgb(24, 67, 116)'></div>
+<div class='gridItem' style='grid-area: 38 / 20; background-color: rgb(157, 185, 186)'></div>
+<div class='gridItem' style='grid-area: 39 / 1; background-color: rgb(220, 220, 249)'></div>
+<div class='gridItem' style='grid-area: 39 / 2; background-color: rgb(11, 59, 72)'></div>
+<div class='gridItem' style='grid-area: 39 / 3; background-color: rgb(221, 75, 191)'></div>
+<div class='gridItem' style='grid-area: 39 / 4; background-color: rgb(71, 143, 185)'></div>
+<div class='gridItem' style='grid-area: 39 / 5; background-color: rgb(38, 158, 55)'></div>
+<div class='gridItem' style='grid-area: 39 / 6; background-color: rgb(20, 203, 200)'></div>
+<div class='gridItem' style='grid-area: 39 / 7; background-color: rgb(142, 209, 120)'></div>
+<div class='gridItem' style='grid-area: 39 / 8; background-color: rgb(17, 183, 217)'></div>
+<div class='gridItem' style='grid-area: 39 / 9; background-color: rgb(187, 239, 112)'></div>
+<div class='gridItem' style='grid-area: 39 / 10; background-color: rgb(17, 248, 175)'></div>
+<div class='gridItem' style='grid-area: 39 / 11; background-color: rgb(179, 234, 115)'></div>
+<div class='gridItem' style='grid-area: 39 / 12; background-color: rgb(176, 179, 138)'></div>
+<div class='gridItem' style='grid-area: 39 / 13; background-color: rgb(125, 145, 89)'></div>
+<div class='gridItem' style='grid-area: 39 / 14; background-color: rgb(99, 232, 61)'></div>
+<div class='gridItem' style='grid-area: 39 / 15; background-color: rgb(102, 2, 239)'></div>
+<div class='gridItem' style='grid-area: 39 / 16; background-color: rgb(59, 62, 252)'></div>
+<div class='gridItem' style='grid-area: 39 / 17; background-color: rgb(248, 210, 118)'></div>
+<div class='gridItem' style='grid-area: 39 / 18; background-color: rgb(186, 160, 222)'></div>
+<div class='gridItem' style='grid-area: 39 / 19; background-color: rgb(24, 32, 251)'></div>
+<div class='gridItem' style='grid-area: 39 / 20; background-color: rgb(38, 27, 51)'></div>
+<div class='gridItem' style='grid-area: 40 / 1; background-color: rgb(162, 41, 245)'></div>
+<div class='gridItem' style='grid-area: 40 / 2; background-color: rgb(100, 110, 113)'></div>
+<div class='gridItem' style='grid-area: 40 / 3; background-color: rgb(162, 102, 206)'></div>
+<div class='gridItem' style='grid-area: 40 / 4; background-color: rgb(160, 220, 209)'></div>
+<div class='gridItem' style='grid-area: 40 / 5; background-color: rgb(25, 81, 80)'></div>
+<div class='gridItem' style='grid-area: 40 / 6; background-color: rgb(112, 111, 240)'></div>
+<div class='gridItem' style='grid-area: 40 / 7; background-color: rgb(150, 252, 139)'></div>
+<div class='gridItem' style='grid-area: 40 / 8; background-color: rgb(214, 175, 117)'></div>
+<div class='gridItem' style='grid-area: 40 / 9; background-color: rgb(79, 74, 92)'></div>
+<div class='gridItem' style='grid-area: 40 / 10; background-color: rgb(47, 71, 82)'></div>
+<div class='gridItem' style='grid-area: 40 / 11; background-color: rgb(167, 150, 153)'></div>
+<div class='gridItem' style='grid-area: 40 / 12; background-color: rgb(58, 30, 11)'></div>
+<div class='gridItem' style='grid-area: 40 / 13; background-color: rgb(83, 89, 185)'></div>
+<div class='gridItem' style='grid-area: 40 / 14; background-color: rgb(206, 108, 48)'></div>
+<div class='gridItem' style='grid-area: 40 / 15; background-color: rgb(165, 85, 172)'></div>
+<div class='gridItem' style='grid-area: 40 / 16; background-color: rgb(116, 70, 169)'></div>
+<div class='gridItem' style='grid-area: 40 / 17; background-color: rgb(215, 168, 170)'></div>
+<div class='gridItem' style='grid-area: 40 / 18; background-color: rgb(114, 9, 18)'></div>
+<div class='gridItem' style='grid-area: 40 / 19; background-color: rgb(15, 181, 93)'></div>
+<div class='gridItem' style='grid-area: 40 / 20; background-color: rgb(79, 49, 249)'></div>
+<div class='gridItem' style='grid-area: 41 / 1; background-color: rgb(50, 42, 121)'></div>
+<div class='gridItem' style='grid-area: 41 / 2; background-color: rgb(128, 177, 128)'></div>
+<div class='gridItem' style='grid-area: 41 / 3; background-color: rgb(158, 166, 181)'></div>
+<div class='gridItem' style='grid-area: 41 / 4; background-color: rgb(43, 84, 220)'></div>
+<div class='gridItem' style='grid-area: 41 / 5; background-color: rgb(182, 156, 185)'></div>
+<div class='gridItem' style='grid-area: 41 / 6; background-color: rgb(154, 36, 127)'></div>
+<div class='gridItem' style='grid-area: 41 / 7; background-color: rgb(126, 172, 74)'></div>
+<div class='gridItem' style='grid-area: 41 / 8; background-color: rgb(183, 152, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 9; background-color: rgb(5, 169, 117)'></div>
+<div class='gridItem' style='grid-area: 41 / 10; background-color: rgb(46, 61, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 11; background-color: rgb(163, 175, 64)'></div>
+<div class='gridItem' style='grid-area: 41 / 12; background-color: rgb(145, 47, 22)'></div>
+<div class='gridItem' style='grid-area: 41 / 13; background-color: rgb(246, 183, 48)'></div>
+<div class='gridItem' style='grid-area: 41 / 14; background-color: rgb(193, 12, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 15; background-color: rgb(191, 250, 84)'></div>
+<div class='gridItem' style='grid-area: 41 / 16; background-color: rgb(231, 225, 233)'></div>
+<div class='gridItem' style='grid-area: 41 / 17; background-color: rgb(217, 46, 100)'></div>
+<div class='gridItem' style='grid-area: 41 / 18; background-color: rgb(224, 242, 78)'></div>
+<div class='gridItem' style='grid-area: 41 / 19; background-color: rgb(138, 33, 83)'></div>
+<div class='gridItem' style='grid-area: 41 / 20; background-color: rgb(58, 179, 78)'></div>
+<div class='gridItem' style='grid-area: 42 / 1; background-color: rgb(2, 153, 110)'></div>
+<div class='gridItem' style='grid-area: 42 / 2; background-color: rgb(96, 83, 158)'></div>
+<div class='gridItem' style='grid-area: 42 / 3; background-color: rgb(120, 155, 36)'></div>
+<div class='gridItem' style='grid-area: 42 / 4; background-color: rgb(231, 52, 7)'></div>
+<div class='gridItem' style='grid-area: 42 / 5; background-color: rgb(205, 248, 237)'></div>
+<div class='gridItem' style='grid-area: 42 / 6; background-color: rgb(39, 116, 114)'></div>
+<div class='gridItem' style='grid-area: 42 / 7; background-color: rgb(241, 23, 216)'></div>
+<div class='gridItem' style='grid-area: 42 / 8; background-color: rgb(249, 67, 12)'></div>
+<div class='gridItem' style='grid-area: 42 / 9; background-color: rgb(213, 132, 74)'></div>
+<div class='gridItem' style='grid-area: 42 / 10; background-color: rgb(187, 241, 11)'></div>
+<div class='gridItem' style='grid-area: 42 / 11; background-color: rgb(233, 111, 8)'></div>
+<div class='gridItem' style='grid-area: 42 / 12; background-color: rgb(25, 163, 165)'></div>
+<div class='gridItem' style='grid-area: 42 / 13; background-color: rgb(162, 51, 72)'></div>
+<div class='gridItem' style='grid-area: 42 / 14; background-color: rgb(65, 15, 161)'></div>
+<div class='gridItem' style='grid-area: 42 / 15; background-color: rgb(98, 251, 158)'></div>
+<div class='gridItem' style='grid-area: 42 / 16; background-color: rgb(124, 53, 67)'></div>
+<div class='gridItem' style='grid-area: 42 / 17; background-color: rgb(237, 179, 109)'></div>
+<div class='gridItem' style='grid-area: 42 / 18; background-color: rgb(20, 86, 128)'></div>
+<div class='gridItem' style='grid-area: 42 / 19; background-color: rgb(218, 104, 95)'></div>
+<div class='gridItem' style='grid-area: 42 / 20; background-color: rgb(62, 55, 121)'></div>
+<div class='gridItem' style='grid-area: 43 / 1; background-color: rgb(162, 207, 22)'></div>
+<div class='gridItem' style='grid-area: 43 / 2; background-color: rgb(82, 137, 132)'></div>
+<div class='gridItem' style='grid-area: 43 / 3; background-color: rgb(113, 15, 143)'></div>
+<div class='gridItem' style='grid-area: 43 / 4; background-color: rgb(27, 156, 232)'></div>
+<div class='gridItem' style='grid-area: 43 / 5; background-color: rgb(11, 186, 60)'></div>
+<div class='gridItem' style='grid-area: 43 / 6; background-color: rgb(213, 43, 55)'></div>
+<div class='gridItem' style='grid-area: 43 / 7; background-color: rgb(163, 26, 158)'></div>
+<div class='gridItem' style='grid-area: 43 / 8; background-color: rgb(122, 136, 51)'></div>
+<div class='gridItem' style='grid-area: 43 / 9; background-color: rgb(200, 78, 208)'></div>
+<div class='gridItem' style='grid-area: 43 / 10; background-color: rgb(81, 154, 188)'></div>
+<div class='gridItem' style='grid-area: 43 / 11; background-color: rgb(98, 83, 205)'></div>
+<div class='gridItem' style='grid-area: 43 / 12; background-color: rgb(227, 142, 113)'></div>
+<div class='gridItem' style='grid-area: 43 / 13; background-color: rgb(31, 186, 181)'></div>
+<div class='gridItem' style='grid-area: 43 / 14; background-color: rgb(166, 101, 92)'></div>
+<div class='gridItem' style='grid-area: 43 / 15; background-color: rgb(128, 25, 159)'></div>
+<div class='gridItem' style='grid-area: 43 / 16; background-color: rgb(119, 31, 8)'></div>
+<div class='gridItem' style='grid-area: 43 / 17; background-color: rgb(140, 76, 120)'></div>
+<div class='gridItem' style='grid-area: 43 / 18; background-color: rgb(72, 135, 49)'></div>
+<div class='gridItem' style='grid-area: 43 / 19; background-color: rgb(180, 252, 226)'></div>
+<div class='gridItem' style='grid-area: 43 / 20; background-color: rgb(171, 174, 244)'></div>
+<div class='gridItem' style='grid-area: 44 / 1; background-color: rgb(148, 54, 146)'></div>
+<div class='gridItem' style='grid-area: 44 / 2; background-color: rgb(49, 97, 44)'></div>
+<div class='gridItem' style='grid-area: 44 / 3; background-color: rgb(73, 64, 163)'></div>
+<div class='gridItem' style='grid-area: 44 / 4; background-color: rgb(8, 142, 94)'></div>
+<div class='gridItem' style='grid-area: 44 / 5; background-color: rgb(132, 207, 94)'></div>
+<div class='gridItem' style='grid-area: 44 / 6; background-color: rgb(171, 116, 252)'></div>
+<div class='gridItem' style='grid-area: 44 / 7; background-color: rgb(124, 237, 211)'></div>
+<div class='gridItem' style='grid-area: 44 / 8; background-color: rgb(118, 200, 238)'></div>
+<div class='gridItem' style='grid-area: 44 / 9; background-color: rgb(178, 215, 73)'></div>
+<div class='gridItem' style='grid-area: 44 / 10; background-color: rgb(201, 188, 160)'></div>
+<div class='gridItem' style='grid-area: 44 / 11; background-color: rgb(235, 9, 159)'></div>
+<div class='gridItem' style='grid-area: 44 / 12; background-color: rgb(230, 73, 145)'></div>
+<div class='gridItem' style='grid-area: 44 / 13; background-color: rgb(75, 151, 135)'></div>
+<div class='gridItem' style='grid-area: 44 / 14; background-color: rgb(56, 244, 38)'></div>
+<div class='gridItem' style='grid-area: 44 / 15; background-color: rgb(124, 120, 26)'></div>
+<div class='gridItem' style='grid-area: 44 / 16; background-color: rgb(102, 115, 162)'></div>
+<div class='gridItem' style='grid-area: 44 / 17; background-color: rgb(46, 199, 78)'></div>
+<div class='gridItem' style='grid-area: 44 / 18; background-color: rgb(169, 69, 248)'></div>
+<div class='gridItem' style='grid-area: 44 / 19; background-color: rgb(217, 188, 147)'></div>
+<div class='gridItem' style='grid-area: 44 / 20; background-color: rgb(224, 93, 113)'></div>
+<div class='gridItem' style='grid-area: 45 / 1; background-color: rgb(253, 217, 126)'></div>
+<div class='gridItem' style='grid-area: 45 / 2; background-color: rgb(31, 80, 213)'></div>
+<div class='gridItem' style='grid-area: 45 / 3; background-color: rgb(16, 239, 112)'></div>
+<div class='gridItem' style='grid-area: 45 / 4; background-color: rgb(7, 159, 87)'></div>
+<div class='gridItem' style='grid-area: 45 / 5; background-color: rgb(66, 217, 189)'></div>
+<div class='gridItem' style='grid-area: 45 / 6; background-color: rgb(54, 44, 150)'></div>
+<div class='gridItem' style='grid-area: 45 / 7; background-color: rgb(32, 45, 69)'></div>
+<div class='gridItem' style='grid-area: 45 / 8; background-color: rgb(81, 189, 45)'></div>
+<div class='gridItem' style='grid-area: 45 / 9; background-color: rgb(81, 75, 86)'></div>
+<div class='gridItem' style='grid-area: 45 / 10; background-color: rgb(63, 81, 61)'></div>
+<div class='gridItem' style='grid-area: 45 / 11; background-color: rgb(200, 97, 102)'></div>
+<div class='gridItem' style='grid-area: 45 / 12; background-color: rgb(222, 229, 82)'></div>
+<div class='gridItem' style='grid-area: 45 / 13; background-color: rgb(99, 113, 255)'></div>
+<div class='gridItem' style='grid-area: 45 / 14; background-color: rgb(138, 238, 11)'></div>
+<div class='gridItem' style='grid-area: 45 / 15; background-color: rgb(241, 221, 37)'></div>
+<div class='gridItem' style='grid-area: 45 / 16; background-color: rgb(46, 162, 140)'></div>
+<div class='gridItem' style='grid-area: 45 / 17; background-color: rgb(29, 63, 103)'></div>
+<div class='gridItem' style='grid-area: 45 / 18; background-color: rgb(127, 162, 135)'></div>
+<div class='gridItem' style='grid-area: 45 / 19; background-color: rgb(188, 89, 196)'></div>
+<div class='gridItem' style='grid-area: 45 / 20; background-color: rgb(103, 147, 139)'></div>
+<div class='gridItem' style='grid-area: 46 / 1; background-color: rgb(27, 155, 92)'></div>
+<div class='gridItem' style='grid-area: 46 / 2; background-color: rgb(181, 130, 123)'></div>
+<div class='gridItem' style='grid-area: 46 / 3; background-color: rgb(166, 223, 165)'></div>
+<div class='gridItem' style='grid-area: 46 / 4; background-color: rgb(221, 193, 28)'></div>
+<div class='gridItem' style='grid-area: 46 / 5; background-color: rgb(185, 92, 68)'></div>
+<div class='gridItem' style='grid-area: 46 / 6; background-color: rgb(180, 103, 243)'></div>
+<div class='gridItem' style='grid-area: 46 / 7; background-color: rgb(137, 30, 22)'></div>
+<div class='gridItem' style='grid-area: 46 / 8; background-color: rgb(131, 201, 86)'></div>
+<div class='gridItem' style='grid-area: 46 / 9; background-color: rgb(12, 119, 223)'></div>
+<div class='gridItem' style='grid-area: 46 / 10; background-color: rgb(26, 187, 90)'></div>
+<div class='gridItem' style='grid-area: 46 / 11; background-color: rgb(84, 52, 80)'></div>
+<div class='gridItem' style='grid-area: 46 / 12; background-color: rgb(158, 187, 194)'></div>
+<div class='gridItem' style='grid-area: 46 / 13; background-color: rgb(119, 158, 14)'></div>
+<div class='gridItem' style='grid-area: 46 / 14; background-color: rgb(83, 56, 96)'></div>
+<div class='gridItem' style='grid-area: 46 / 15; background-color: rgb(166, 123, 145)'></div>
+<div class='gridItem' style='grid-area: 46 / 16; background-color: rgb(77, 176, 36)'></div>
+<div class='gridItem' style='grid-area: 46 / 17; background-color: rgb(156, 141, 210)'></div>
+<div class='gridItem' style='grid-area: 46 / 18; background-color: rgb(240, 123, 132)'></div>
+<div class='gridItem' style='grid-area: 46 / 19; background-color: rgb(67, 43, 161)'></div>
+<div class='gridItem' style='grid-area: 46 / 20; background-color: rgb(37, 24, 31)'></div>
+<div class='gridItem' style='grid-area: 47 / 1; background-color: rgb(54, 189, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 2; background-color: rgb(191, 182, 183)'></div>
+<div class='gridItem' style='grid-area: 47 / 3; background-color: rgb(228, 58, 53)'></div>
+<div class='gridItem' style='grid-area: 47 / 4; background-color: rgb(250, 45, 113)'></div>
+<div class='gridItem' style='grid-area: 47 / 5; background-color: rgb(109, 117, 192)'></div>
+<div class='gridItem' style='grid-area: 47 / 6; background-color: rgb(135, 20, 198)'></div>
+<div class='gridItem' style='grid-area: 47 / 7; background-color: rgb(109, 113, 194)'></div>
+<div class='gridItem' style='grid-area: 47 / 8; background-color: rgb(57, 180, 69)'></div>
+<div class='gridItem' style='grid-area: 47 / 9; background-color: rgb(168, 176, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 10; background-color: rgb(182, 146, 119)'></div>
+<div class='gridItem' style='grid-area: 47 / 11; background-color: rgb(239, 2, 41)'></div>
+<div class='gridItem' style='grid-area: 47 / 12; background-color: rgb(51, 104, 215)'></div>
+<div class='gridItem' style='grid-area: 47 / 13; background-color: rgb(50, 6, 94)'></div>
+<div class='gridItem' style='grid-area: 47 / 14; background-color: rgb(69, 186, 205)'></div>
+<div class='gridItem' style='grid-area: 47 / 15; background-color: rgb(119, 80, 151)'></div>
+<div class='gridItem' style='grid-area: 47 / 16; background-color: rgb(214, 54, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 17; background-color: rgb(175, 199, 197)'></div>
+<div class='gridItem' style='grid-area: 47 / 18; background-color: rgb(242, 228, 176)'></div>
+<div class='gridItem' style='grid-area: 47 / 19; background-color: rgb(195, 33, 62)'></div>
+<div class='gridItem' style='grid-area: 47 / 20; background-color: rgb(41, 248, 194)'></div>
+<div class='gridItem' style='grid-area: 48 / 1; background-color: rgb(208, 57, 140)'></div>
+<div class='gridItem' style='grid-area: 48 / 2; background-color: rgb(142, 99, 95)'></div>
+<div class='gridItem' style='grid-area: 48 / 3; background-color: rgb(98, 120, 20)'></div>
+<div class='gridItem' style='grid-area: 48 / 4; background-color: rgb(49, 195, 95)'></div>
+<div class='gridItem' style='grid-area: 48 / 5; background-color: rgb(24, 103, 173)'></div>
+<div class='gridItem' style='grid-area: 48 / 6; background-color: rgb(178, 55, 170)'></div>
+<div class='gridItem' style='grid-area: 48 / 7; background-color: rgb(35, 244, 202)'></div>
+<div class='gridItem' style='grid-area: 48 / 8; background-color: rgb(186, 161, 131)'></div>
+<div class='gridItem' style='grid-area: 48 / 9; background-color: rgb(35, 41, 65)'></div>
+<div class='gridItem' style='grid-area: 48 / 10; background-color: rgb(82, 102, 233)'></div>
+<div class='gridItem' style='grid-area: 48 / 11; background-color: rgb(24, 245, 43)'></div>
+<div class='gridItem' style='grid-area: 48 / 12; background-color: rgb(8, 76, 44)'></div>
+<div class='gridItem' style='grid-area: 48 / 13; background-color: rgb(43, 81, 205)'></div>
+<div class='gridItem' style='grid-area: 48 / 14; background-color: rgb(18, 26, 118)'></div>
+<div class='gridItem' style='grid-area: 48 / 15; background-color: rgb(156, 186, 34)'></div>
+<div class='gridItem' style='grid-area: 48 / 16; background-color: rgb(178, 201, 110)'></div>
+<div class='gridItem' style='grid-area: 48 / 17; background-color: rgb(114, 186, 101)'></div>
+<div class='gridItem' style='grid-area: 48 / 18; background-color: rgb(223, 5, 82)'></div>
+<div class='gridItem' style='grid-area: 48 / 19; background-color: rgb(107, 128, 200)'></div>
+<div class='gridItem' style='grid-area: 48 / 20; background-color: rgb(90, 233, 157)'></div>
+<div class='gridItem' style='grid-area: 49 / 1; background-color: rgb(96, 147, 12)'></div>
+<div class='gridItem' style='grid-area: 49 / 2; background-color: rgb(104, 85, 35)'></div>
+<div class='gridItem' style='grid-area: 49 / 3; background-color: rgb(35, 86, 169)'></div>
+<div class='gridItem' style='grid-area: 49 / 4; background-color: rgb(182, 235, 21)'></div>
+<div class='gridItem' style='grid-area: 49 / 5; background-color: rgb(71, 64, 147)'></div>
+<div class='gridItem' style='grid-area: 49 / 6; background-color: rgb(145, 195, 184)'></div>
+<div class='gridItem' style='grid-area: 49 / 7; background-color: rgb(168, 229, 190)'></div>
+<div class='gridItem' style='grid-area: 49 / 8; background-color: rgb(181, 148, 73)'></div>
+<div class='gridItem' style='grid-area: 49 / 9; background-color: rgb(133, 234, 183)'></div>
+<div class='gridItem' style='grid-area: 49 / 10; background-color: rgb(159, 122, 111)'></div>
+<div class='gridItem' style='grid-area: 49 / 11; background-color: rgb(84, 156, 95)'></div>
+<div class='gridItem' style='grid-area: 49 / 12; background-color: rgb(165, 123, 75)'></div>
+<div class='gridItem' style='grid-area: 49 / 13; background-color: rgb(210, 70, 241)'></div>
+<div class='gridItem' style='grid-area: 49 / 14; background-color: rgb(183, 129, 16)'></div>
+<div class='gridItem' style='grid-area: 49 / 15; background-color: rgb(146, 48, 132)'></div>
+<div class='gridItem' style='grid-area: 49 / 16; background-color: rgb(206, 131, 165)'></div>
+<div class='gridItem' style='grid-area: 49 / 17; background-color: rgb(105, 97, 177)'></div>
+<div class='gridItem' style='grid-area: 49 / 18; background-color: rgb(144, 180, 22)'></div>
+<div class='gridItem' style='grid-area: 49 / 19; background-color: rgb(130, 218, 183)'></div>
+<div class='gridItem' style='grid-area: 49 / 20; background-color: rgb(25, 212, 91)'></div>
+<div class='gridItem' style='grid-area: 50 / 1; background-color: rgb(191, 68, 16)'></div>
+<div class='gridItem' style='grid-area: 50 / 2; background-color: rgb(120, 216, 177)'></div>
+<div class='gridItem' style='grid-area: 50 / 3; background-color: rgb(35, 148, 6)'></div>
+<div class='gridItem' style='grid-area: 50 / 4; background-color: rgb(237, 77, 92)'></div>
+<div class='gridItem' style='grid-area: 50 / 5; background-color: rgb(232, 51, 248)'></div>
+<div class='gridItem' style='grid-area: 50 / 6; background-color: rgb(235, 225, 151)'></div>
+<div class='gridItem' style='grid-area: 50 / 7; background-color: rgb(231, 108, 137)'></div>
+<div class='gridItem' style='grid-area: 50 / 8; background-color: rgb(226, 182, 66)'></div>
+<div class='gridItem' style='grid-area: 50 / 9; background-color: rgb(187, 69, 17)'></div>
+<div class='gridItem' style='grid-area: 50 / 10; background-color: rgb(27, 199, 62)'></div>
+<div class='gridItem' style='grid-area: 50 / 11; background-color: rgb(75, 24, 153)'></div>
+<div class='gridItem' style='grid-area: 50 / 12; background-color: rgb(160, 219, 79)'></div>
+<div class='gridItem' style='grid-area: 50 / 13; background-color: rgb(148, 140, 127)'></div>
+<div class='gridItem' style='grid-area: 50 / 14; background-color: rgb(250, 0, 28)'></div>
+<div class='gridItem' style='grid-area: 50 / 15; background-color: rgb(227, 5, 235)'></div>
+<div class='gridItem' style='grid-area: 50 / 16; background-color: rgb(98, 167, 200)'></div>
+<div class='gridItem' style='grid-area: 50 / 17; background-color: rgb(132, 24, 126)'></div>
+<div class='gridItem' style='grid-area: 50 / 18; background-color: rgb(140, 152, 192)'></div>
+<div class='gridItem' style='grid-area: 50 / 19; background-color: rgb(100, 220, 88)'></div>
+<div class='gridItem' style='grid-area: 50 / 20; background-color: rgb(100, 70, 217)'></div>
+<div class='gridItem' style='grid-area: 51 / 1; background-color: rgb(205, 47, 63)'></div>
+<div class='gridItem' style='grid-area: 51 / 2; background-color: rgb(32, 175, 106)'></div>
+<div class='gridItem' style='grid-area: 51 / 3; background-color: rgb(177, 144, 12)'></div>
+<div class='gridItem' style='grid-area: 51 / 4; background-color: rgb(6, 132, 198)'></div>
+<div class='gridItem' style='grid-area: 51 / 5; background-color: rgb(92, 210, 121)'></div>
+<div class='gridItem' style='grid-area: 51 / 6; background-color: rgb(213, 216, 101)'></div>
+<div class='gridItem' style='grid-area: 51 / 7; background-color: rgb(19, 47, 143)'></div>
+<div class='gridItem' style='grid-area: 51 / 8; background-color: rgb(188, 48, 167)'></div>
+<div class='gridItem' style='grid-area: 51 / 9; background-color: rgb(91, 79, 8)'></div>
+<div class='gridItem' style='grid-area: 51 / 10; background-color: rgb(97, 61, 137)'></div>
+<div class='gridItem' style='grid-area: 51 / 11; background-color: rgb(44, 143, 124)'></div>
+<div class='gridItem' style='grid-area: 51 / 12; background-color: rgb(49, 4, 64)'></div>
+<div class='gridItem' style='grid-area: 51 / 13; background-color: rgb(238, 99, 177)'></div>
+<div class='gridItem' style='grid-area: 51 / 14; background-color: rgb(117, 211, 124)'></div>
+<div class='gridItem' style='grid-area: 51 / 15; background-color: rgb(51, 38, 63)'></div>
+<div class='gridItem' style='grid-area: 51 / 16; background-color: rgb(26, 46, 132)'></div>
+<div class='gridItem' style='grid-area: 51 / 17; background-color: rgb(164, 39, 197)'></div>
+<div class='gridItem' style='grid-area: 51 / 18; background-color: rgb(243, 167, 48)'></div>
+<div class='gridItem' style='grid-area: 51 / 19; background-color: rgb(23, 97, 17)'></div>
+<div class='gridItem' style='grid-area: 51 / 20; background-color: rgb(35, 250, 20)'></div>
+<div class='gridItem' style='grid-area: 52 / 1; background-color: rgb(251, 231, 188)'></div>
+<div class='gridItem' style='grid-area: 52 / 2; background-color: rgb(246, 2, 188)'></div>
+<div class='gridItem' style='grid-area: 52 / 3; background-color: rgb(193, 111, 103)'></div>
+<div class='gridItem' style='grid-area: 52 / 4; background-color: rgb(23, 159, 70)'></div>
+<div class='gridItem' style='grid-area: 52 / 5; background-color: rgb(194, 20, 241)'></div>
+<div class='gridItem' style='grid-area: 52 / 6; background-color: rgb(101, 130, 107)'></div>
+<div class='gridItem' style='grid-area: 52 / 7; background-color: rgb(53, 120, 66)'></div>
+<div class='gridItem' style='grid-area: 52 / 8; background-color: rgb(138, 250, 94)'></div>
+<div class='gridItem' style='grid-area: 52 / 9; background-color: rgb(18, 20, 102)'></div>
+<div class='gridItem' style='grid-area: 52 / 10; background-color: rgb(233, 230, 103)'></div>
+<div class='gridItem' style='grid-area: 52 / 11; background-color: rgb(46, 155, 150)'></div>
+<div class='gridItem' style='grid-area: 52 / 12; background-color: rgb(102, 199, 185)'></div>
+<div class='gridItem' style='grid-area: 52 / 13; background-color: rgb(9, 114, 142)'></div>
+<div class='gridItem' style='grid-area: 52 / 14; background-color: rgb(254, 126, 164)'></div>
+<div class='gridItem' style='grid-area: 52 / 15; background-color: rgb(231, 100, 63)'></div>
+<div class='gridItem' style='grid-area: 52 / 16; background-color: rgb(206, 170, 36)'></div>
+<div class='gridItem' style='grid-area: 52 / 17; background-color: rgb(25, 83, 121)'></div>
+<div class='gridItem' style='grid-area: 52 / 18; background-color: rgb(167, 220, 75)'></div>
+<div class='gridItem' style='grid-area: 52 / 19; background-color: rgb(217, 133, 253)'></div>
+<div class='gridItem' style='grid-area: 52 / 20; background-color: rgb(48, 191, 11)'></div>
+<div class='gridItem' style='grid-area: 53 / 1; background-color: rgb(187, 161, 128)'></div>
+<div class='gridItem' style='grid-area: 53 / 2; background-color: rgb(211, 24, 26)'></div>
+<div class='gridItem' style='grid-area: 53 / 3; background-color: rgb(254, 103, 74)'></div>
+<div class='gridItem' style='grid-area: 53 / 4; background-color: rgb(252, 227, 91)'></div>
+<div class='gridItem' style='grid-area: 53 / 5; background-color: rgb(239, 219, 228)'></div>
+<div class='gridItem' style='grid-area: 53 / 6; background-color: rgb(184, 25, 107)'></div>
+<div class='gridItem' style='grid-area: 53 / 7; background-color: rgb(120, 230, 93)'></div>
+<div class='gridItem' style='grid-area: 53 / 8; background-color: rgb(0, 12, 67)'></div>
+<div class='gridItem' style='grid-area: 53 / 9; background-color: rgb(17, 106, 3)'></div>
+<div class='gridItem' style='grid-area: 53 / 10; background-color: rgb(232, 137, 249)'></div>
+<div class='gridItem' style='grid-area: 53 / 11; background-color: rgb(7, 118, 175)'></div>
+<div class='gridItem' style='grid-area: 53 / 12; background-color: rgb(221, 35, 154)'></div>
+<div class='gridItem' style='grid-area: 53 / 13; background-color: rgb(126, 149, 36)'></div>
+<div class='gridItem' style='grid-area: 53 / 14; background-color: rgb(11, 98, 202)'></div>
+<div class='gridItem' style='grid-area: 53 / 15; background-color: rgb(188, 102, 226)'></div>
+<div class='gridItem' style='grid-area: 53 / 16; background-color: rgb(2, 83, 177)'></div>
+<div class='gridItem' style='grid-area: 53 / 17; background-color: rgb(243, 58, 187)'></div>
+<div class='gridItem' style='grid-area: 53 / 18; background-color: rgb(154, 114, 36)'></div>
+<div class='gridItem' style='grid-area: 53 / 19; background-color: rgb(232, 230, 92)'></div>
+<div class='gridItem' style='grid-area: 53 / 20; background-color: rgb(206, 71, 1)'></div>
+<div class='gridItem' style='grid-area: 54 / 1; background-color: rgb(200, 230, 49)'></div>
+<div class='gridItem' style='grid-area: 54 / 2; background-color: rgb(94, 74, 213)'></div>
+<div class='gridItem' style='grid-area: 54 / 3; background-color: rgb(250, 16, 79)'></div>
+<div class='gridItem' style='grid-area: 54 / 4; background-color: rgb(157, 109, 253)'></div>
+<div class='gridItem' style='grid-area: 54 / 5; background-color: rgb(194, 106, 57)'></div>
+<div class='gridItem' style='grid-area: 54 / 6; background-color: rgb(145, 14, 91)'></div>
+<div class='gridItem' style='grid-area: 54 / 7; background-color: rgb(5, 23, 92)'></div>
+<div class='gridItem' style='grid-area: 54 / 8; background-color: rgb(152, 243, 216)'></div>
+<div class='gridItem' style='grid-area: 54 / 9; background-color: rgb(225, 84, 118)'></div>
+<div class='gridItem' style='grid-area: 54 / 10; background-color: rgb(27, 156, 228)'></div>
+<div class='gridItem' style='grid-area: 54 / 11; background-color: rgb(229, 173, 223)'></div>
+<div class='gridItem' style='grid-area: 54 / 12; background-color: rgb(201, 84, 37)'></div>
+<div class='gridItem' style='grid-area: 54 / 13; background-color: rgb(107, 34, 150)'></div>
+<div class='gridItem' style='grid-area: 54 / 14; background-color: rgb(44, 4, 124)'></div>
+<div class='gridItem' style='grid-area: 54 / 15; background-color: rgb(139, 150, 227)'></div>
+<div class='gridItem' style='grid-area: 54 / 16; background-color: rgb(230, 175, 210)'></div>
+<div class='gridItem' style='grid-area: 54 / 17; background-color: rgb(130, 98, 39)'></div>
+<div class='gridItem' style='grid-area: 54 / 18; background-color: rgb(185, 24, 146)'></div>
+<div class='gridItem' style='grid-area: 54 / 19; background-color: rgb(204, 205, 234)'></div>
+<div class='gridItem' style='grid-area: 54 / 20; background-color: rgb(224, 205, 82)'></div>
+<div class='gridItem' style='grid-area: 55 / 1; background-color: rgb(218, 236, 8)'></div>
+<div class='gridItem' style='grid-area: 55 / 2; background-color: rgb(118, 11, 82)'></div>
+<div class='gridItem' style='grid-area: 55 / 3; background-color: rgb(189, 121, 126)'></div>
+<div class='gridItem' style='grid-area: 55 / 4; background-color: rgb(107, 200, 40)'></div>
+<div class='gridItem' style='grid-area: 55 / 5; background-color: rgb(8, 194, 243)'></div>
+<div class='gridItem' style='grid-area: 55 / 6; background-color: rgb(114, 195, 232)'></div>
+<div class='gridItem' style='grid-area: 55 / 7; background-color: rgb(90, 52, 208)'></div>
+<div class='gridItem' style='grid-area: 55 / 8; background-color: rgb(115, 68, 56)'></div>
+<div class='gridItem' style='grid-area: 55 / 9; background-color: rgb(11, 242, 178)'></div>
+<div class='gridItem' style='grid-area: 55 / 10; background-color: rgb(58, 138, 161)'></div>
+<div class='gridItem' style='grid-area: 55 / 11; background-color: rgb(169, 22, 222)'></div>
+<div class='gridItem' style='grid-area: 55 / 12; background-color: rgb(62, 92, 77)'></div>
+<div class='gridItem' style='grid-area: 55 / 13; background-color: rgb(33, 43, 137)'></div>
+<div class='gridItem' style='grid-area: 55 / 14; background-color: rgb(126, 202, 48)'></div>
+<div class='gridItem' style='grid-area: 55 / 15; background-color: rgb(151, 5, 94)'></div>
+<div class='gridItem' style='grid-area: 55 / 16; background-color: rgb(49, 130, 189)'></div>
+<div class='gridItem' style='grid-area: 55 / 17; background-color: rgb(22, 110, 8)'></div>
+<div class='gridItem' style='grid-area: 55 / 18; background-color: rgb(168, 221, 227)'></div>
+<div class='gridItem' style='grid-area: 55 / 19; background-color: rgb(30, 36, 51)'></div>
+<div class='gridItem' style='grid-area: 55 / 20; background-color: rgb(63, 102, 98)'></div>
+<div class='gridItem' style='grid-area: 56 / 1; background-color: rgb(204, 98, 45)'></div>
+<div class='gridItem' style='grid-area: 56 / 2; background-color: rgb(89, 49, 170)'></div>
+<div class='gridItem' style='grid-area: 56 / 3; background-color: rgb(169, 169, 108)'></div>
+<div class='gridItem' style='grid-area: 56 / 4; background-color: rgb(212, 124, 243)'></div>
+<div class='gridItem' style='grid-area: 56 / 5; background-color: rgb(245, 118, 141)'></div>
+<div class='gridItem' style='grid-area: 56 / 6; background-color: rgb(69, 136, 3)'></div>
+<div class='gridItem' style='grid-area: 56 / 7; background-color: rgb(250, 99, 43)'></div>
+<div class='gridItem' style='grid-area: 56 / 8; background-color: rgb(154, 142, 55)'></div>
+<div class='gridItem' style='grid-area: 56 / 9; background-color: rgb(32, 23, 84)'></div>
+<div class='gridItem' style='grid-area: 56 / 10; background-color: rgb(87, 21, 233)'></div>
+<div class='gridItem' style='grid-area: 56 / 11; background-color: rgb(174, 145, 66)'></div>
+<div class='gridItem' style='grid-area: 56 / 12; background-color: rgb(153, 90, 179)'></div>
+<div class='gridItem' style='grid-area: 56 / 13; background-color: rgb(80, 11, 95)'></div>
+<div class='gridItem' style='grid-area: 56 / 14; background-color: rgb(33, 21, 47)'></div>
+<div class='gridItem' style='grid-area: 56 / 15; background-color: rgb(139, 233, 162)'></div>
+<div class='gridItem' style='grid-area: 56 / 16; background-color: rgb(150, 207, 84)'></div>
+<div class='gridItem' style='grid-area: 56 / 17; background-color: rgb(52, 170, 169)'></div>
+<div class='gridItem' style='grid-area: 56 / 18; background-color: rgb(90, 172, 97)'></div>
+<div class='gridItem' style='grid-area: 56 / 19; background-color: rgb(229, 18, 52)'></div>
+<div class='gridItem' style='grid-area: 56 / 20; background-color: rgb(155, 83, 69)'></div>
+<div class='gridItem' style='grid-area: 57 / 1; background-color: rgb(94, 235, 43)'></div>
+<div class='gridItem' style='grid-area: 57 / 2; background-color: rgb(0, 160, 157)'></div>
+<div class='gridItem' style='grid-area: 57 / 3; background-color: rgb(200, 98, 105)'></div>
+<div class='gridItem' style='grid-area: 57 / 4; background-color: rgb(47, 244, 58)'></div>
+<div class='gridItem' style='grid-area: 57 / 5; background-color: rgb(184, 229, 139)'></div>
+<div class='gridItem' style='grid-area: 57 / 6; background-color: rgb(28, 15, 138)'></div>
+<div class='gridItem' style='grid-area: 57 / 7; background-color: rgb(54, 243, 4)'></div>
+<div class='gridItem' style='grid-area: 57 / 8; background-color: rgb(105, 225, 236)'></div>
+<div class='gridItem' style='grid-area: 57 / 9; background-color: rgb(46, 168, 209)'></div>
+<div class='gridItem' style='grid-area: 57 / 10; background-color: rgb(78, 131, 196)'></div>
+<div class='gridItem' style='grid-area: 57 / 11; background-color: rgb(246, 200, 170)'></div>
+<div class='gridItem' style='grid-area: 57 / 12; background-color: rgb(252, 184, 111)'></div>
+<div class='gridItem' style='grid-area: 57 / 13; background-color: rgb(254, 95, 134)'></div>
+<div class='gridItem' style='grid-area: 57 / 14; background-color: rgb(81, 198, 197)'></div>
+<div class='gridItem' style='grid-area: 57 / 15; background-color: rgb(41, 37, 4)'></div>
+<div class='gridItem' style='grid-area: 57 / 16; background-color: rgb(205, 172, 176)'></div>
+<div class='gridItem' style='grid-area: 57 / 17; background-color: rgb(50, 120, 128)'></div>
+<div class='gridItem' style='grid-area: 57 / 18; background-color: rgb(145, 79, 91)'></div>
+<div class='gridItem' style='grid-area: 57 / 19; background-color: rgb(121, 90, 21)'></div>
+<div class='gridItem' style='grid-area: 57 / 20; background-color: rgb(155, 59, 69)'></div>
+<div class='gridItem' style='grid-area: 58 / 1; background-color: rgb(57, 53, 234)'></div>
+<div class='gridItem' style='grid-area: 58 / 2; background-color: rgb(61, 189, 135)'></div>
+<div class='gridItem' style='grid-area: 58 / 3; background-color: rgb(113, 254, 133)'></div>
+<div class='gridItem' style='grid-area: 58 / 4; background-color: rgb(133, 114, 84)'></div>
+<div class='gridItem' style='grid-area: 58 / 5; background-color: rgb(184, 94, 222)'></div>
+<div class='gridItem' style='grid-area: 58 / 6; background-color: rgb(96, 61, 187)'></div>
+<div class='gridItem' style='grid-area: 58 / 7; background-color: rgb(40, 231, 134)'></div>
+<div class='gridItem' style='grid-area: 58 / 8; background-color: rgb(193, 252, 213)'></div>
+<div class='gridItem' style='grid-area: 58 / 9; background-color: rgb(189, 248, 187)'></div>
+<div class='gridItem' style='grid-area: 58 / 10; background-color: rgb(37, 77, 172)'></div>
+<div class='gridItem' style='grid-area: 58 / 11; background-color: rgb(62, 129, 66)'></div>
+<div class='gridItem' style='grid-area: 58 / 12; background-color: rgb(120, 212, 6)'></div>
+<div class='gridItem' style='grid-area: 58 / 13; background-color: rgb(10, 7, 94)'></div>
+<div class='gridItem' style='grid-area: 58 / 14; background-color: rgb(254, 73, 170)'></div>
+<div class='gridItem' style='grid-area: 58 / 15; background-color: rgb(5, 87, 24)'></div>
+<div class='gridItem' style='grid-area: 58 / 16; background-color: rgb(235, 77, 233)'></div>
+<div class='gridItem' style='grid-area: 58 / 17; background-color: rgb(144, 55, 126)'></div>
+<div class='gridItem' style='grid-area: 58 / 18; background-color: rgb(100, 111, 62)'></div>
+<div class='gridItem' style='grid-area: 58 / 19; background-color: rgb(20, 77, 199)'></div>
+<div class='gridItem' style='grid-area: 58 / 20; background-color: rgb(91, 99, 171)'></div>
+<div class='gridItem' style='grid-area: 59 / 1; background-color: rgb(121, 36, 2)'></div>
+<div class='gridItem' style='grid-area: 59 / 2; background-color: rgb(175, 14, 211)'></div>
+<div class='gridItem' style='grid-area: 59 / 3; background-color: rgb(107, 149, 115)'></div>
+<div class='gridItem' style='grid-area: 59 / 4; background-color: rgb(247, 21, 185)'></div>
+<div class='gridItem' style='grid-area: 59 / 5; background-color: rgb(239, 122, 46)'></div>
+<div class='gridItem' style='grid-area: 59 / 6; background-color: rgb(73, 78, 120)'></div>
+<div class='gridItem' style='grid-area: 59 / 7; background-color: rgb(82, 7, 20)'></div>
+<div class='gridItem' style='grid-area: 59 / 8; background-color: rgb(242, 83, 135)'></div>
+<div class='gridItem' style='grid-area: 59 / 9; background-color: rgb(172, 190, 155)'></div>
+<div class='gridItem' style='grid-area: 59 / 10; background-color: rgb(73, 114, 223)'></div>
+<div class='gridItem' style='grid-area: 59 / 11; background-color: rgb(202, 181, 63)'></div>
+<div class='gridItem' style='grid-area: 59 / 12; background-color: rgb(199, 82, 8)'></div>
+<div class='gridItem' style='grid-area: 59 / 13; background-color: rgb(234, 39, 219)'></div>
+<div class='gridItem' style='grid-area: 59 / 14; background-color: rgb(113, 182, 225)'></div>
+<div class='gridItem' style='grid-area: 59 / 15; background-color: rgb(169, 201, 182)'></div>
+<div class='gridItem' style='grid-area: 59 / 16; background-color: rgb(236, 191, 32)'></div>
+<div class='gridItem' style='grid-area: 59 / 17; background-color: rgb(241, 69, 229)'></div>
+<div class='gridItem' style='grid-area: 59 / 18; background-color: rgb(179, 178, 242)'></div>
+<div class='gridItem' style='grid-area: 59 / 19; background-color: rgb(108, 239, 230)'></div>
+<div class='gridItem' style='grid-area: 59 / 20; background-color: rgb(204, 23, 190)'></div>
+<div class='gridItem' style='grid-area: 60 / 1; background-color: rgb(178, 157, 102)'></div>
+<div class='gridItem' style='grid-area: 60 / 2; background-color: rgb(7, 184, 214)'></div>
+<div class='gridItem' style='grid-area: 60 / 3; background-color: rgb(95, 151, 252)'></div>
+<div class='gridItem' style='grid-area: 60 / 4; background-color: rgb(46, 36, 57)'></div>
+<div class='gridItem' style='grid-area: 60 / 5; background-color: rgb(189, 190, 95)'></div>
+<div class='gridItem' style='grid-area: 60 / 6; background-color: rgb(69, 204, 143)'></div>
+<div class='gridItem' style='grid-area: 60 / 7; background-color: rgb(177, 126, 135)'></div>
+<div class='gridItem' style='grid-area: 60 / 8; background-color: rgb(18, 232, 235)'></div>
+<div class='gridItem' style='grid-area: 60 / 9; background-color: rgb(202, 138, 145)'></div>
+<div class='gridItem' style='grid-area: 60 / 10; background-color: rgb(72, 159, 139)'></div>
+<div class='gridItem' style='grid-area: 60 / 11; background-color: rgb(43, 76, 219)'></div>
+<div class='gridItem' style='grid-area: 60 / 12; background-color: rgb(99, 164, 4)'></div>
+<div class='gridItem' style='grid-area: 60 / 13; background-color: rgb(249, 71, 28)'></div>
+<div class='gridItem' style='grid-area: 60 / 14; background-color: rgb(102, 148, 196)'></div>
+<div class='gridItem' style='grid-area: 60 / 15; background-color: rgb(225, 209, 51)'></div>
+<div class='gridItem' style='grid-area: 60 / 16; background-color: rgb(43, 53, 20)'></div>
+<div class='gridItem' style='grid-area: 60 / 17; background-color: rgb(66, 53, 107)'></div>
+<div class='gridItem' style='grid-area: 60 / 18; background-color: rgb(4, 190, 236)'></div>
+<div class='gridItem' style='grid-area: 60 / 19; background-color: rgb(174, 176, 192)'></div>
+<div class='gridItem' style='grid-area: 60 / 20; background-color: rgb(103, 233, 146)'></div>
+<div class='gridItem' style='grid-area: 61 / 1; background-color: rgb(97, 140, 46)'></div>
+<div class='gridItem' style='grid-area: 61 / 2; background-color: rgb(165, 145, 62)'></div>
+<div class='gridItem' style='grid-area: 61 / 3; background-color: rgb(3, 60, 185)'></div>
+<div class='gridItem' style='grid-area: 61 / 4; background-color: rgb(236, 95, 80)'></div>
+<div class='gridItem' style='grid-area: 61 / 5; background-color: rgb(215, 184, 76)'></div>
+<div class='gridItem' style='grid-area: 61 / 6; background-color: rgb(190, 225, 196)'></div>
+<div class='gridItem' style='grid-area: 61 / 7; background-color: rgb(141, 128, 228)'></div>
+<div class='gridItem' style='grid-area: 61 / 8; background-color: rgb(137, 26, 106)'></div>
+<div class='gridItem' style='grid-area: 61 / 9; background-color: rgb(171, 64, 61)'></div>
+<div class='gridItem' style='grid-area: 61 / 10; background-color: rgb(219, 153, 220)'></div>
+<div class='gridItem' style='grid-area: 61 / 11; background-color: rgb(174, 144, 165)'></div>
+<div class='gridItem' style='grid-area: 61 / 12; background-color: rgb(123, 222, 21)'></div>
+<div class='gridItem' style='grid-area: 61 / 13; background-color: rgb(120, 251, 64)'></div>
+<div class='gridItem' style='grid-area: 61 / 14; background-color: rgb(62, 135, 242)'></div>
+<div class='gridItem' style='grid-area: 61 / 15; background-color: rgb(138, 208, 122)'></div>
+<div class='gridItem' style='grid-area: 61 / 16; background-color: rgb(186, 199, 215)'></div>
+<div class='gridItem' style='grid-area: 61 / 17; background-color: rgb(127, 95, 122)'></div>
+<div class='gridItem' style='grid-area: 61 / 18; background-color: rgb(222, 193, 176)'></div>
+<div class='gridItem' style='grid-area: 61 / 19; background-color: rgb(47, 63, 177)'></div>
+<div class='gridItem' style='grid-area: 61 / 20; background-color: rgb(221, 237, 51)'></div>
+<div class='gridItem' style='grid-area: 62 / 1; background-color: rgb(148, 12, 94)'></div>
+<div class='gridItem' style='grid-area: 62 / 2; background-color: rgb(173, 147, 40)'></div>
+<div class='gridItem' style='grid-area: 62 / 3; background-color: rgb(222, 135, 218)'></div>
+<div class='gridItem' style='grid-area: 62 / 4; background-color: rgb(73, 91, 119)'></div>
+<div class='gridItem' style='grid-area: 62 / 5; background-color: rgb(14, 86, 12)'></div>
+<div class='gridItem' style='grid-area: 62 / 6; background-color: rgb(46, 35, 58)'></div>
+<div class='gridItem' style='grid-area: 62 / 7; background-color: rgb(52, 109, 55)'></div>
+<div class='gridItem' style='grid-area: 62 / 8; background-color: rgb(92, 88, 11)'></div>
+<div class='gridItem' style='grid-area: 62 / 9; background-color: rgb(152, 94, 234)'></div>
+<div class='gridItem' style='grid-area: 62 / 10; background-color: rgb(148, 148, 245)'></div>
+<div class='gridItem' style='grid-area: 62 / 11; background-color: rgb(3, 166, 119)'></div>
+<div class='gridItem' style='grid-area: 62 / 12; background-color: rgb(215, 54, 181)'></div>
+<div class='gridItem' style='grid-area: 62 / 13; background-color: rgb(231, 90, 112)'></div>
+<div class='gridItem' style='grid-area: 62 / 14; background-color: rgb(54, 87, 128)'></div>
+<div class='gridItem' style='grid-area: 62 / 15; background-color: rgb(113, 129, 190)'></div>
+<div class='gridItem' style='grid-area: 62 / 16; background-color: rgb(165, 195, 79)'></div>
+<div class='gridItem' style='grid-area: 62 / 17; background-color: rgb(223, 84, 225)'></div>
+<div class='gridItem' style='grid-area: 62 / 18; background-color: rgb(205, 190, 220)'></div>
+<div class='gridItem' style='grid-area: 62 / 19; background-color: rgb(164, 178, 228)'></div>
+<div class='gridItem' style='grid-area: 62 / 20; background-color: rgb(243, 39, 48)'></div>
+<div class='gridItem' style='grid-area: 63 / 1; background-color: rgb(6, 11, 59)'></div>
+<div class='gridItem' style='grid-area: 63 / 2; background-color: rgb(48, 226, 215)'></div>
+<div class='gridItem' style='grid-area: 63 / 3; background-color: rgb(19, 34, 152)'></div>
+<div class='gridItem' style='grid-area: 63 / 4; background-color: rgb(179, 216, 20)'></div>
+<div class='gridItem' style='grid-area: 63 / 5; background-color: rgb(83, 239, 234)'></div>
+<div class='gridItem' style='grid-area: 63 / 6; background-color: rgb(1, 75, 128)'></div>
+<div class='gridItem' style='grid-area: 63 / 7; background-color: rgb(214, 215, 11)'></div>
+<div class='gridItem' style='grid-area: 63 / 8; background-color: rgb(178, 239, 240)'></div>
+<div class='gridItem' style='grid-area: 63 / 9; background-color: rgb(177, 156, 6)'></div>
+<div class='gridItem' style='grid-area: 63 / 10; background-color: rgb(114, 4, 159)'></div>
+<div class='gridItem' style='grid-area: 63 / 11; background-color: rgb(235, 5, 133)'></div>
+<div class='gridItem' style='grid-area: 63 / 12; background-color: rgb(127, 62, 9)'></div>
+<div class='gridItem' style='grid-area: 63 / 13; background-color: rgb(78, 126, 30)'></div>
+<div class='gridItem' style='grid-area: 63 / 14; background-color: rgb(239, 141, 47)'></div>
+<div class='gridItem' style='grid-area: 63 / 15; background-color: rgb(13, 73, 190)'></div>
+<div class='gridItem' style='grid-area: 63 / 16; background-color: rgb(197, 148, 213)'></div>
+<div class='gridItem' style='grid-area: 63 / 17; background-color: rgb(135, 90, 206)'></div>
+<div class='gridItem' style='grid-area: 63 / 18; background-color: rgb(100, 80, 217)'></div>
+<div class='gridItem' style='grid-area: 63 / 19; background-color: rgb(4, 202, 170)'></div>
+<div class='gridItem' style='grid-area: 63 / 20; background-color: rgb(239, 249, 110)'></div>
+<div class='gridItem' style='grid-area: 64 / 1; background-color: rgb(75, 11, 145)'></div>
+<div class='gridItem' style='grid-area: 64 / 2; background-color: rgb(75, 140, 214)'></div>
+<div class='gridItem' style='grid-area: 64 / 3; background-color: rgb(116, 238, 169)'></div>
+<div class='gridItem' style='grid-area: 64 / 4; background-color: rgb(106, 48, 76)'></div>
+<div class='gridItem' style='grid-area: 64 / 5; background-color: rgb(10, 178, 124)'></div>
+<div class='gridItem' style='grid-area: 64 / 6; background-color: rgb(76, 251, 54)'></div>
+<div class='gridItem' style='grid-area: 64 / 7; background-color: rgb(222, 188, 185)'></div>
+<div class='gridItem' style='grid-area: 64 / 8; background-color: rgb(81, 125, 224)'></div>
+<div class='gridItem' style='grid-area: 64 / 9; background-color: rgb(142, 82, 181)'></div>
+<div class='gridItem' style='grid-area: 64 / 10; background-color: rgb(74, 56, 26)'></div>
+<div class='gridItem' style='grid-area: 64 / 11; background-color: rgb(119, 56, 71)'></div>
+<div class='gridItem' style='grid-area: 64 / 12; background-color: rgb(97, 210, 197)'></div>
+<div class='gridItem' style='grid-area: 64 / 13; background-color: rgb(130, 168, 223)'></div>
+<div class='gridItem' style='grid-area: 64 / 14; background-color: rgb(183, 150, 45)'></div>
+<div class='gridItem' style='grid-area: 64 / 15; background-color: rgb(54, 253, 5)'></div>
+<div class='gridItem' style='grid-area: 64 / 16; background-color: rgb(1, 190, 170)'></div>
+<div class='gridItem' style='grid-area: 64 / 17; background-color: rgb(190, 3, 100)'></div>
+<div class='gridItem' style='grid-area: 64 / 18; background-color: rgb(92, 6, 74)'></div>
+<div class='gridItem' style='grid-area: 64 / 19; background-color: rgb(250, 132, 239)'></div>
+<div class='gridItem' style='grid-area: 64 / 20; background-color: rgb(17, 14, 106)'></div>
+<div class='gridItem' style='grid-area: 65 / 1; background-color: rgb(31, 89, 114)'></div>
+<div class='gridItem' style='grid-area: 65 / 2; background-color: rgb(69, 12, 16)'></div>
+<div class='gridItem' style='grid-area: 65 / 3; background-color: rgb(39, 21, 105)'></div>
+<div class='gridItem' style='grid-area: 65 / 4; background-color: rgb(81, 230, 200)'></div>
+<div class='gridItem' style='grid-area: 65 / 5; background-color: rgb(168, 156, 174)'></div>
+<div class='gridItem' style='grid-area: 65 / 6; background-color: rgb(161, 248, 1)'></div>
+<div class='gridItem' style='grid-area: 65 / 7; background-color: rgb(54, 110, 128)'></div>
+<div class='gridItem' style='grid-area: 65 / 8; background-color: rgb(231, 14, 75)'></div>
+<div class='gridItem' style='grid-area: 65 / 9; background-color: rgb(16, 77, 44)'></div>
+<div class='gridItem' style='grid-area: 65 / 10; background-color: rgb(88, 74, 125)'></div>
+<div class='gridItem' style='grid-area: 65 / 11; background-color: rgb(136, 33, 156)'></div>
+<div class='gridItem' style='grid-area: 65 / 12; background-color: rgb(46, 36, 0)'></div>
+<div class='gridItem' style='grid-area: 65 / 13; background-color: rgb(239, 77, 254)'></div>
+<div class='gridItem' style='grid-area: 65 / 14; background-color: rgb(183, 94, 246)'></div>
+<div class='gridItem' style='grid-area: 65 / 15; background-color: rgb(67, 122, 7)'></div>
+<div class='gridItem' style='grid-area: 65 / 16; background-color: rgb(182, 28, 14)'></div>
+<div class='gridItem' style='grid-area: 65 / 17; background-color: rgb(12, 119, 69)'></div>
+<div class='gridItem' style='grid-area: 65 / 18; background-color: rgb(108, 143, 20)'></div>
+<div class='gridItem' style='grid-area: 65 / 19; background-color: rgb(68, 141, 250)'></div>
+<div class='gridItem' style='grid-area: 65 / 20; background-color: rgb(188, 204, 215)'></div>
+<div class='gridItem' style='grid-area: 66 / 1; background-color: rgb(227, 104, 53)'></div>
+<div class='gridItem' style='grid-area: 66 / 2; background-color: rgb(235, 248, 115)'></div>
+<div class='gridItem' style='grid-area: 66 / 3; background-color: rgb(200, 178, 232)'></div>
+<div class='gridItem' style='grid-area: 66 / 4; background-color: rgb(177, 177, 145)'></div>
+<div class='gridItem' style='grid-area: 66 / 5; background-color: rgb(115, 23, 243)'></div>
+<div class='gridItem' style='grid-area: 66 / 6; background-color: rgb(175, 226, 91)'></div>
+<div class='gridItem' style='grid-area: 66 / 7; background-color: rgb(185, 207, 170)'></div>
+<div class='gridItem' style='grid-area: 66 / 8; background-color: rgb(205, 101, 12)'></div>
+<div class='gridItem' style='grid-area: 66 / 9; background-color: rgb(58, 212, 177)'></div>
+<div class='gridItem' style='grid-area: 66 / 10; background-color: rgb(207, 145, 201)'></div>
+<div class='gridItem' style='grid-area: 66 / 11; background-color: rgb(243, 236, 89)'></div>
+<div class='gridItem' style='grid-area: 66 / 12; background-color: rgb(146, 13, 151)'></div>
+<div class='gridItem' style='grid-area: 66 / 13; background-color: rgb(63, 248, 0)'></div>
+<div class='gridItem' style='grid-area: 66 / 14; background-color: rgb(199, 141, 8)'></div>
+<div class='gridItem' style='grid-area: 66 / 15; background-color: rgb(89, 22, 183)'></div>
+<div class='gridItem' style='grid-area: 66 / 16; background-color: rgb(135, 156, 110)'></div>
+<div class='gridItem' style='grid-area: 66 / 17; background-color: rgb(250, 243, 234)'></div>
+<div class='gridItem' style='grid-area: 66 / 18; background-color: rgb(20, 94, 181)'></div>
+<div class='gridItem' style='grid-area: 66 / 19; background-color: rgb(55, 172, 58)'></div>
+<div class='gridItem' style='grid-area: 66 / 20; background-color: rgb(234, 30, 214)'></div>
+<div class='gridItem' style='grid-area: 67 / 1; background-color: rgb(201, 210, 184)'></div>
+<div class='gridItem' style='grid-area: 67 / 2; background-color: rgb(208, 72, 24)'></div>
+<div class='gridItem' style='grid-area: 67 / 3; background-color: rgb(172, 116, 182)'></div>
+<div class='gridItem' style='grid-area: 67 / 4; background-color: rgb(19, 197, 57)'></div>
+<div class='gridItem' style='grid-area: 67 / 5; background-color: rgb(73, 208, 145)'></div>
+<div class='gridItem' style='grid-area: 67 / 6; background-color: rgb(165, 244, 186)'></div>
+<div class='gridItem' style='grid-area: 67 / 7; background-color: rgb(215, 66, 110)'></div>
+<div class='gridItem' style='grid-area: 67 / 8; background-color: rgb(178, 194, 64)'></div>
+<div class='gridItem' style='grid-area: 67 / 9; background-color: rgb(6, 195, 71)'></div>
+<div class='gridItem' style='grid-area: 67 / 10; background-color: rgb(3, 76, 189)'></div>
+<div class='gridItem' style='grid-area: 67 / 11; background-color: rgb(71, 92, 85)'></div>
+<div class='gridItem' style='grid-area: 67 / 12; background-color: rgb(209, 230, 204)'></div>
+<div class='gridItem' style='grid-area: 67 / 13; background-color: rgb(105, 103, 207)'></div>
+<div class='gridItem' style='grid-area: 67 / 14; background-color: rgb(160, 200, 109)'></div>
+<div class='gridItem' style='grid-area: 67 / 15; background-color: rgb(178, 92, 209)'></div>
+<div class='gridItem' style='grid-area: 67 / 16; background-color: rgb(232, 151, 147)'></div>
+<div class='gridItem' style='grid-area: 67 / 17; background-color: rgb(124, 35, 11)'></div>
+<div class='gridItem' style='grid-area: 67 / 18; background-color: rgb(118, 227, 213)'></div>
+<div class='gridItem' style='grid-area: 67 / 19; background-color: rgb(219, 224, 250)'></div>
+<div class='gridItem' style='grid-area: 67 / 20; background-color: rgb(211, 168, 245)'></div>
+<div class='gridItem' style='grid-area: 68 / 1; background-color: rgb(1, 41, 196)'></div>
+<div class='gridItem' style='grid-area: 68 / 2; background-color: rgb(45, 184, 46)'></div>
+<div class='gridItem' style='grid-area: 68 / 3; background-color: rgb(67, 228, 128)'></div>
+<div class='gridItem' style='grid-area: 68 / 4; background-color: rgb(100, 78, 147)'></div>
+<div class='gridItem' style='grid-area: 68 / 5; background-color: rgb(148, 170, 218)'></div>
+<div class='gridItem' style='grid-area: 68 / 6; background-color: rgb(31, 25, 35)'></div>
+<div class='gridItem' style='grid-area: 68 / 7; background-color: rgb(68, 240, 171)'></div>
+<div class='gridItem' style='grid-area: 68 / 8; background-color: rgb(19, 42, 57)'></div>
+<div class='gridItem' style='grid-area: 68 / 9; background-color: rgb(60, 100, 75)'></div>
+<div class='gridItem' style='grid-area: 68 / 10; background-color: rgb(22, 149, 7)'></div>
+<div class='gridItem' style='grid-area: 68 / 11; background-color: rgb(100, 14, 5)'></div>
+<div class='gridItem' style='grid-area: 68 / 12; background-color: rgb(51, 24, 159)'></div>
+<div class='gridItem' style='grid-area: 68 / 13; background-color: rgb(180, 146, 15)'></div>
+<div class='gridItem' style='grid-area: 68 / 14; background-color: rgb(55, 243, 197)'></div>
+<div class='gridItem' style='grid-area: 68 / 15; background-color: rgb(239, 239, 27)'></div>
+<div class='gridItem' style='grid-area: 68 / 16; background-color: rgb(115, 201, 151)'></div>
+<div class='gridItem' style='grid-area: 68 / 17; background-color: rgb(240, 221, 142)'></div>
+<div class='gridItem' style='grid-area: 68 / 18; background-color: rgb(179, 162, 43)'></div>
+<div class='gridItem' style='grid-area: 68 / 19; background-color: rgb(123, 253, 149)'></div>
+<div class='gridItem' style='grid-area: 68 / 20; background-color: rgb(223, 149, 194)'></div>
+<div class='gridItem' style='grid-area: 69 / 1; background-color: rgb(164, 167, 170)'></div>
+<div class='gridItem' style='grid-area: 69 / 2; background-color: rgb(6, 65, 15)'></div>
+<div class='gridItem' style='grid-area: 69 / 3; background-color: rgb(188, 174, 131)'></div>
+<div class='gridItem' style='grid-area: 69 / 4; background-color: rgb(168, 84, 74)'></div>
+<div class='gridItem' style='grid-area: 69 / 5; background-color: rgb(239, 20, 176)'></div>
+<div class='gridItem' style='grid-area: 69 / 6; background-color: rgb(199, 19, 244)'></div>
+<div class='gridItem' style='grid-area: 69 / 7; background-color: rgb(206, 51, 134)'></div>
+<div class='gridItem' style='grid-area: 69 / 8; background-color: rgb(109, 184, 150)'></div>
+<div class='gridItem' style='grid-area: 69 / 9; background-color: rgb(217, 59, 253)'></div>
+<div class='gridItem' style='grid-area: 69 / 10; background-color: rgb(172, 225, 16)'></div>
+<div class='gridItem' style='grid-area: 69 / 11; background-color: rgb(142, 89, 186)'></div>
+<div class='gridItem' style='grid-area: 69 / 12; background-color: rgb(135, 195, 104)'></div>
+<div class='gridItem' style='grid-area: 69 / 13; background-color: rgb(239, 128, 183)'></div>
+<div class='gridItem' style='grid-area: 69 / 14; background-color: rgb(191, 180, 145)'></div>
+<div class='gridItem' style='grid-area: 69 / 15; background-color: rgb(18, 130, 16)'></div>
+<div class='gridItem' style='grid-area: 69 / 16; background-color: rgb(83, 131, 251)'></div>
+<div class='gridItem' style='grid-area: 69 / 17; background-color: rgb(142, 176, 239)'></div>
+<div class='gridItem' style='grid-area: 69 / 18; background-color: rgb(26, 228, 229)'></div>
+<div class='gridItem' style='grid-area: 69 / 19; background-color: rgb(138, 250, 181)'></div>
+<div class='gridItem' style='grid-area: 69 / 20; background-color: rgb(51, 227, 238)'></div>
+<div class='gridItem' style='grid-area: 70 / 1; background-color: rgb(61, 155, 246)'></div>
+<div class='gridItem' style='grid-area: 70 / 2; background-color: rgb(123, 95, 242)'></div>
+<div class='gridItem' style='grid-area: 70 / 3; background-color: rgb(41, 198, 214)'></div>
+<div class='gridItem' style='grid-area: 70 / 4; background-color: rgb(210, 63, 108)'></div>
+<div class='gridItem' style='grid-area: 70 / 5; background-color: rgb(129, 191, 198)'></div>
+<div class='gridItem' style='grid-area: 70 / 6; background-color: rgb(26, 198, 188)'></div>
+<div class='gridItem' style='grid-area: 70 / 7; background-color: rgb(222, 210, 237)'></div>
+<div class='gridItem' style='grid-area: 70 / 8; background-color: rgb(94, 245, 228)'></div>
+<div class='gridItem' style='grid-area: 70 / 9; background-color: rgb(52, 208, 167)'></div>
+<div class='gridItem' style='grid-area: 70 / 10; background-color: rgb(197, 143, 52)'></div>
+<div class='gridItem' style='grid-area: 70 / 11; background-color: rgb(199, 66, 212)'></div>
+<div class='gridItem' style='grid-area: 70 / 12; background-color: rgb(137, 44, 72)'></div>
+<div class='gridItem' style='grid-area: 70 / 13; background-color: rgb(209, 148, 200)'></div>
+<div class='gridItem' style='grid-area: 70 / 14; background-color: rgb(109, 87, 175)'></div>
+<div class='gridItem' style='grid-area: 70 / 15; background-color: rgb(177, 150, 137)'></div>
+<div class='gridItem' style='grid-area: 70 / 16; background-color: rgb(27, 127, 243)'></div>
+<div class='gridItem' style='grid-area: 70 / 17; background-color: rgb(27, 70, 42)'></div>
+<div class='gridItem' style='grid-area: 70 / 18; background-color: rgb(6, 163, 26)'></div>
+<div class='gridItem' style='grid-area: 70 / 19; background-color: rgb(212, 217, 131)'></div>
+<div class='gridItem' style='grid-area: 70 / 20; background-color: rgb(227, 68, 193)'></div>
+<div class='gridItem' style='grid-area: 71 / 1; background-color: rgb(194, 1, 87)'></div>
+<div class='gridItem' style='grid-area: 71 / 2; background-color: rgb(27, 144, 35)'></div>
+<div class='gridItem' style='grid-area: 71 / 3; background-color: rgb(138, 104, 120)'></div>
+<div class='gridItem' style='grid-area: 71 / 4; background-color: rgb(32, 64, 162)'></div>
+<div class='gridItem' style='grid-area: 71 / 5; background-color: rgb(110, 96, 21)'></div>
+<div class='gridItem' style='grid-area: 71 / 6; background-color: rgb(25, 69, 62)'></div>
+<div class='gridItem' style='grid-area: 71 / 7; background-color: rgb(242, 223, 119)'></div>
+<div class='gridItem' style='grid-area: 71 / 8; background-color: rgb(67, 114, 173)'></div>
+<div class='gridItem' style='grid-area: 71 / 9; background-color: rgb(198, 147, 242)'></div>
+<div class='gridItem' style='grid-area: 71 / 10; background-color: rgb(52, 35, 238)'></div>
+<div class='gridItem' style='grid-area: 71 / 11; background-color: rgb(9, 169, 244)'></div>
+<div class='gridItem' style='grid-area: 71 / 12; background-color: rgb(250, 98, 169)'></div>
+<div class='gridItem' style='grid-area: 71 / 13; background-color: rgb(112, 57, 70)'></div>
+<div class='gridItem' style='grid-area: 71 / 14; background-color: rgb(248, 181, 56)'></div>
+<div class='gridItem' style='grid-area: 71 / 15; background-color: rgb(233, 167, 200)'></div>
+<div class='gridItem' style='grid-area: 71 / 16; background-color: rgb(113, 70, 116)'></div>
+<div class='gridItem' style='grid-area: 71 / 17; background-color: rgb(154, 52, 168)'></div>
+<div class='gridItem' style='grid-area: 71 / 18; background-color: rgb(8, 224, 48)'></div>
+<div class='gridItem' style='grid-area: 71 / 19; background-color: rgb(93, 32, 91)'></div>
+<div class='gridItem' style='grid-area: 71 / 20; background-color: rgb(120, 233, 252)'></div>
+<div class='gridItem' style='grid-area: 72 / 1; background-color: rgb(57, 201, 57)'></div>
+<div class='gridItem' style='grid-area: 72 / 2; background-color: rgb(16, 248, 84)'></div>
+<div class='gridItem' style='grid-area: 72 / 3; background-color: rgb(91, 123, 129)'></div>
+<div class='gridItem' style='grid-area: 72 / 4; background-color: rgb(22, 60, 122)'></div>
+<div class='gridItem' style='grid-area: 72 / 5; background-color: rgb(55, 121, 206)'></div>
+<div class='gridItem' style='grid-area: 72 / 6; background-color: rgb(87, 190, 70)'></div>
+<div class='gridItem' style='grid-area: 72 / 7; background-color: rgb(52, 15, 86)'></div>
+<div class='gridItem' style='grid-area: 72 / 8; background-color: rgb(94, 45, 27)'></div>
+<div class='gridItem' style='grid-area: 72 / 9; background-color: rgb(135, 212, 254)'></div>
+<div class='gridItem' style='grid-area: 72 / 10; background-color: rgb(106, 247, 94)'></div>
+<div class='gridItem' style='grid-area: 72 / 11; background-color: rgb(71, 173, 2)'></div>
+<div class='gridItem' style='grid-area: 72 / 12; background-color: rgb(175, 33, 66)'></div>
+<div class='gridItem' style='grid-area: 72 / 13; background-color: rgb(96, 62, 166)'></div>
+<div class='gridItem' style='grid-area: 72 / 14; background-color: rgb(134, 122, 254)'></div>
+<div class='gridItem' style='grid-area: 72 / 15; background-color: rgb(58, 145, 198)'></div>
+<div class='gridItem' style='grid-area: 72 / 16; background-color: rgb(109, 247, 248)'></div>
+<div class='gridItem' style='grid-area: 72 / 17; background-color: rgb(9, 105, 166)'></div>
+<div class='gridItem' style='grid-area: 72 / 18; background-color: rgb(24, 144, 114)'></div>
+<div class='gridItem' style='grid-area: 72 / 19; background-color: rgb(146, 195, 118)'></div>
+<div class='gridItem' style='grid-area: 72 / 20; background-color: rgb(155, 128, 166)'></div>
+<div class='gridItem' style='grid-area: 73 / 1; background-color: rgb(88, 9, 248)'></div>
+<div class='gridItem' style='grid-area: 73 / 2; background-color: rgb(171, 6, 203)'></div>
+<div class='gridItem' style='grid-area: 73 / 3; background-color: rgb(249, 203, 214)'></div>
+<div class='gridItem' style='grid-area: 73 / 4; background-color: rgb(79, 218, 70)'></div>
+<div class='gridItem' style='grid-area: 73 / 5; background-color: rgb(79, 15, 42)'></div>
+<div class='gridItem' style='grid-area: 73 / 6; background-color: rgb(191, 127, 6)'></div>
+<div class='gridItem' style='grid-area: 73 / 7; background-color: rgb(39, 104, 189)'></div>
+<div class='gridItem' style='grid-area: 73 / 8; background-color: rgb(119, 104, 20)'></div>
+<div class='gridItem' style='grid-area: 73 / 9; background-color: rgb(190, 60, 54)'></div>
+<div class='gridItem' style='grid-area: 73 / 10; background-color: rgb(169, 104, 143)'></div>
+<div class='gridItem' style='grid-area: 73 / 11; background-color: rgb(223, 253, 132)'></div>
+<div class='gridItem' style='grid-area: 73 / 12; background-color: rgb(90, 232, 145)'></div>
+<div class='gridItem' style='grid-area: 73 / 13; background-color: rgb(225, 155, 195)'></div>
+<div class='gridItem' style='grid-area: 73 / 14; background-color: rgb(207, 107, 69)'></div>
+<div class='gridItem' style='grid-area: 73 / 15; background-color: rgb(3, 117, 181)'></div>
+<div class='gridItem' style='grid-area: 73 / 16; background-color: rgb(254, 78, 155)'></div>
+<div class='gridItem' style='grid-area: 73 / 17; background-color: rgb(120, 127, 135)'></div>
+<div class='gridItem' style='grid-area: 73 / 18; background-color: rgb(21, 73, 93)'></div>
+<div class='gridItem' style='grid-area: 73 / 19; background-color: rgb(11, 18, 187)'></div>
+<div class='gridItem' style='grid-area: 73 / 20; background-color: rgb(193, 87, 106)'></div>
+<div class='gridItem' style='grid-area: 74 / 1; background-color: rgb(44, 250, 1)'></div>
+<div class='gridItem' style='grid-area: 74 / 2; background-color: rgb(95, 62, 41)'></div>
+<div class='gridItem' style='grid-area: 74 / 3; background-color: rgb(179, 123, 94)'></div>
+<div class='gridItem' style='grid-area: 74 / 4; background-color: rgb(101, 159, 51)'></div>
+<div class='gridItem' style='grid-area: 74 / 5; background-color: rgb(219, 189, 177)'></div>
+<div class='gridItem' style='grid-area: 74 / 6; background-color: rgb(57, 188, 62)'></div>
+<div class='gridItem' style='grid-area: 74 / 7; background-color: rgb(4, 74, 111)'></div>
+<div class='gridItem' style='grid-area: 74 / 8; background-color: rgb(203, 51, 123)'></div>
+<div class='gridItem' style='grid-area: 74 / 9; background-color: rgb(165, 116, 117)'></div>
+<div class='gridItem' style='grid-area: 74 / 10; background-color: rgb(121, 163, 157)'></div>
+<div class='gridItem' style='grid-area: 74 / 11; background-color: rgb(223, 35, 49)'></div>
+<div class='gridItem' style='grid-area: 74 / 12; background-color: rgb(151, 47, 162)'></div>
+<div class='gridItem' style='grid-area: 74 / 13; background-color: rgb(117, 21, 246)'></div>
+<div class='gridItem' style='grid-area: 74 / 14; background-color: rgb(165, 36, 249)'></div>
+<div class='gridItem' style='grid-area: 74 / 15; background-color: rgb(243, 249, 243)'></div>
+<div class='gridItem' style='grid-area: 74 / 16; background-color: rgb(159, 155, 172)'></div>
+<div class='gridItem' style='grid-area: 74 / 17; background-color: rgb(146, 233, 143)'></div>
+<div class='gridItem' style='grid-area: 74 / 18; background-color: rgb(250, 179, 95)'></div>
+<div class='gridItem' style='grid-area: 74 / 19; background-color: rgb(29, 53, 16)'></div>
+<div class='gridItem' style='grid-area: 74 / 20; background-color: rgb(167, 225, 2)'></div>
+<div class='gridItem' style='grid-area: 75 / 1; background-color: rgb(236, 142, 247)'></div>
+<div class='gridItem' style='grid-area: 75 / 2; background-color: rgb(176, 122, 49)'></div>
+<div class='gridItem' style='grid-area: 75 / 3; background-color: rgb(123, 200, 217)'></div>
+<div class='gridItem' style='grid-area: 75 / 4; background-color: rgb(65, 26, 165)'></div>
+<div class='gridItem' style='grid-area: 75 / 5; background-color: rgb(238, 150, 192)'></div>
+<div class='gridItem' style='grid-area: 75 / 6; background-color: rgb(41, 188, 114)'></div>
+<div class='gridItem' style='grid-area: 75 / 7; background-color: rgb(229, 86, 237)'></div>
+<div class='gridItem' style='grid-area: 75 / 8; background-color: rgb(39, 23, 234)'></div>
+<div class='gridItem' style='grid-area: 75 / 9; background-color: rgb(206, 19, 186)'></div>
+<div class='gridItem' style='grid-area: 75 / 10; background-color: rgb(246, 251, 116)'></div>
+<div class='gridItem' style='grid-area: 75 / 11; background-color: rgb(219, 89, 92)'></div>
+<div class='gridItem' style='grid-area: 75 / 12; background-color: rgb(150, 166, 250)'></div>
+<div class='gridItem' style='grid-area: 75 / 13; background-color: rgb(87, 201, 199)'></div>
+<div class='gridItem' style='grid-area: 75 / 14; background-color: rgb(158, 43, 155)'></div>
+<div class='gridItem' style='grid-area: 75 / 15; background-color: rgb(178, 214, 84)'></div>
+<div class='gridItem' style='grid-area: 75 / 16; background-color: rgb(159, 46, 154)'></div>
+<div class='gridItem' style='grid-area: 75 / 17; background-color: rgb(174, 142, 99)'></div>
+<div class='gridItem' style='grid-area: 75 / 18; background-color: rgb(69, 77, 55)'></div>
+<div class='gridItem' style='grid-area: 75 / 19; background-color: rgb(100, 164, 115)'></div>
+<div class='gridItem' style='grid-area: 75 / 20; background-color: rgb(211, 1, 249)'></div>
+<div class='gridItem' style='grid-area: 76 / 1; background-color: rgb(72, 242, 176)'></div>
+<div class='gridItem' style='grid-area: 76 / 2; background-color: rgb(2, 246, 36)'></div>
+<div class='gridItem' style='grid-area: 76 / 3; background-color: rgb(151, 118, 139)'></div>
+<div class='gridItem' style='grid-area: 76 / 4; background-color: rgb(216, 161, 250)'></div>
+<div class='gridItem' style='grid-area: 76 / 5; background-color: rgb(173, 240, 90)'></div>
+<div class='gridItem' style='grid-area: 76 / 6; background-color: rgb(59, 124, 223)'></div>
+<div class='gridItem' style='grid-area: 76 / 7; background-color: rgb(187, 44, 196)'></div>
+<div class='gridItem' style='grid-area: 76 / 8; background-color: rgb(172, 59, 49)'></div>
+<div class='gridItem' style='grid-area: 76 / 9; background-color: rgb(125, 20, 104)'></div>
+<div class='gridItem' style='grid-area: 76 / 10; background-color: rgb(130, 251, 143)'></div>
+<div class='gridItem' style='grid-area: 76 / 11; background-color: rgb(60, 9, 13)'></div>
+<div class='gridItem' style='grid-area: 76 / 12; background-color: rgb(29, 157, 107)'></div>
+<div class='gridItem' style='grid-area: 76 / 13; background-color: rgb(109, 66, 148)'></div>
+<div class='gridItem' style='grid-area: 76 / 14; background-color: rgb(157, 62, 81)'></div>
+<div class='gridItem' style='grid-area: 76 / 15; background-color: rgb(9, 177, 121)'></div>
+<div class='gridItem' style='grid-area: 76 / 16; background-color: rgb(67, 75, 130)'></div>
+<div class='gridItem' style='grid-area: 76 / 17; background-color: rgb(114, 49, 11)'></div>
+<div class='gridItem' style='grid-area: 76 / 18; background-color: rgb(24, 118, 105)'></div>
+<div class='gridItem' style='grid-area: 76 / 19; background-color: rgb(243, 66, 233)'></div>
+<div class='gridItem' style='grid-area: 76 / 20; background-color: rgb(100, 81, 223)'></div>
+<div class='gridItem' style='grid-area: 77 / 1; background-color: rgb(226, 179, 197)'></div>
+<div class='gridItem' style='grid-area: 77 / 2; background-color: rgb(11, 200, 236)'></div>
+<div class='gridItem' style='grid-area: 77 / 3; background-color: rgb(223, 96, 10)'></div>
+<div class='gridItem' style='grid-area: 77 / 4; background-color: rgb(140, 168, 109)'></div>
+<div class='gridItem' style='grid-area: 77 / 5; background-color: rgb(228, 58, 118)'></div>
+<div class='gridItem' style='grid-area: 77 / 6; background-color: rgb(66, 196, 194)'></div>
+<div class='gridItem' style='grid-area: 77 / 7; background-color: rgb(118, 185, 240)'></div>
+<div class='gridItem' style='grid-area: 77 / 8; background-color: rgb(25, 224, 218)'></div>
+<div class='gridItem' style='grid-area: 77 / 9; background-color: rgb(187, 170, 178)'></div>
+<div class='gridItem' style='grid-area: 77 / 10; background-color: rgb(80, 211, 29)'></div>
+<div class='gridItem' style='grid-area: 77 / 11; background-color: rgb(78, 94, 125)'></div>
+<div class='gridItem' style='grid-area: 77 / 12; background-color: rgb(24, 36, 133)'></div>
+<div class='gridItem' style='grid-area: 77 / 13; background-color: rgb(241, 73, 140)'></div>
+<div class='gridItem' style='grid-area: 77 / 14; background-color: rgb(126, 59, 171)'></div>
+<div class='gridItem' style='grid-area: 77 / 15; background-color: rgb(46, 101, 143)'></div>
+<div class='gridItem' style='grid-area: 77 / 16; background-color: rgb(59, 111, 123)'></div>
+<div class='gridItem' style='grid-area: 77 / 17; background-color: rgb(58, 29, 249)'></div>
+<div class='gridItem' style='grid-area: 77 / 18; background-color: rgb(144, 79, 87)'></div>
+<div class='gridItem' style='grid-area: 77 / 19; background-color: rgb(65, 233, 121)'></div>
+<div class='gridItem' style='grid-area: 77 / 20; background-color: rgb(208, 28, 248)'></div>
+<div class='gridItem' style='grid-area: 78 / 1; background-color: rgb(221, 165, 174)'></div>
+<div class='gridItem' style='grid-area: 78 / 2; background-color: rgb(6, 244, 214)'></div>
+<div class='gridItem' style='grid-area: 78 / 3; background-color: rgb(95, 122, 14)'></div>
+<div class='gridItem' style='grid-area: 78 / 4; background-color: rgb(82, 36, 91)'></div>
+<div class='gridItem' style='grid-area: 78 / 5; background-color: rgb(139, 111, 123)'></div>
+<div class='gridItem' style='grid-area: 78 / 6; background-color: rgb(140, 189, 210)'></div>
+<div class='gridItem' style='grid-area: 78 / 7; background-color: rgb(159, 225, 194)'></div>
+<div class='gridItem' style='grid-area: 78 / 8; background-color: rgb(216, 90, 168)'></div>
+<div class='gridItem' style='grid-area: 78 / 9; background-color: rgb(117, 248, 6)'></div>
+<div class='gridItem' style='grid-area: 78 / 10; background-color: rgb(19, 168, 167)'></div>
+<div class='gridItem' style='grid-area: 78 / 11; background-color: rgb(11, 56, 198)'></div>
+<div class='gridItem' style='grid-area: 78 / 12; background-color: rgb(21, 176, 5)'></div>
+<div class='gridItem' style='grid-area: 78 / 13; background-color: rgb(159, 240, 24)'></div>
+<div class='gridItem' style='grid-area: 78 / 14; background-color: rgb(112, 16, 190)'></div>
+<div class='gridItem' style='grid-area: 78 / 15; background-color: rgb(229, 65, 101)'></div>
+<div class='gridItem' style='grid-area: 78 / 16; background-color: rgb(13, 58, 145)'></div>
+<div class='gridItem' style='grid-area: 78 / 17; background-color: rgb(56, 99, 38)'></div>
+<div class='gridItem' style='grid-area: 78 / 18; background-color: rgb(97, 197, 123)'></div>
+<div class='gridItem' style='grid-area: 78 / 19; background-color: rgb(93, 116, 244)'></div>
+<div class='gridItem' style='grid-area: 78 / 20; background-color: rgb(199, 47, 249)'></div>
+<div class='gridItem' style='grid-area: 79 / 1; background-color: rgb(105, 25, 92)'></div>
+<div class='gridItem' style='grid-area: 79 / 2; background-color: rgb(164, 141, 147)'></div>
+<div class='gridItem' style='grid-area: 79 / 3; background-color: rgb(224, 18, 251)'></div>
+<div class='gridItem' style='grid-area: 79 / 4; background-color: rgb(212, 19, 138)'></div>
+<div class='gridItem' style='grid-area: 79 / 5; background-color: rgb(106, 164, 93)'></div>
+<div class='gridItem' style='grid-area: 79 / 6; background-color: rgb(221, 7, 172)'></div>
+<div class='gridItem' style='grid-area: 79 / 7; background-color: rgb(52, 96, 198)'></div>
+<div class='gridItem' style='grid-area: 79 / 8; background-color: rgb(219, 96, 72)'></div>
+<div class='gridItem' style='grid-area: 79 / 9; background-color: rgb(253, 20, 162)'></div>
+<div class='gridItem' style='grid-area: 79 / 10; background-color: rgb(49, 237, 191)'></div>
+<div class='gridItem' style='grid-area: 79 / 11; background-color: rgb(208, 23, 172)'></div>
+<div class='gridItem' style='grid-area: 79 / 12; background-color: rgb(242, 231, 223)'></div>
+<div class='gridItem' style='grid-area: 79 / 13; background-color: rgb(13, 221, 117)'></div>
+<div class='gridItem' style='grid-area: 79 / 14; background-color: rgb(188, 87, 134)'></div>
+<div class='gridItem' style='grid-area: 79 / 15; background-color: rgb(134, 224, 202)'></div>
+<div class='gridItem' style='grid-area: 79 / 16; background-color: rgb(181, 80, 52)'></div>
+<div class='gridItem' style='grid-area: 79 / 17; background-color: rgb(34, 59, 58)'></div>
+<div class='gridItem' style='grid-area: 79 / 18; background-color: rgb(162, 223, 52)'></div>
+<div class='gridItem' style='grid-area: 79 / 19; background-color: rgb(151, 65, 41)'></div>
+<div class='gridItem' style='grid-area: 79 / 20; background-color: rgb(145, 65, 38)'></div>
+<div class='gridItem' style='grid-area: 80 / 1; background-color: rgb(122, 230, 236)'></div>
+<div class='gridItem' style='grid-area: 80 / 2; background-color: rgb(215, 205, 171)'></div>
+<div class='gridItem' style='grid-area: 80 / 3; background-color: rgb(124, 165, 34)'></div>
+<div class='gridItem' style='grid-area: 80 / 4; background-color: rgb(238, 14, 118)'></div>
+<div class='gridItem' style='grid-area: 80 / 5; background-color: rgb(217, 143, 77)'></div>
+<div class='gridItem' style='grid-area: 80 / 6; background-color: rgb(137, 53, 68)'></div>
+<div class='gridItem' style='grid-area: 80 / 7; background-color: rgb(161, 5, 106)'></div>
+<div class='gridItem' style='grid-area: 80 / 8; background-color: rgb(26, 143, 254)'></div>
+<div class='gridItem' style='grid-area: 80 / 9; background-color: rgb(208, 132, 183)'></div>
+<div class='gridItem' style='grid-area: 80 / 10; background-color: rgb(143, 184, 236)'></div>
+<div class='gridItem' style='grid-area: 80 / 11; background-color: rgb(159, 155, 158)'></div>
+<div class='gridItem' style='grid-area: 80 / 12; background-color: rgb(60, 149, 64)'></div>
+<div class='gridItem' style='grid-area: 80 / 13; background-color: rgb(164, 63, 86)'></div>
+<div class='gridItem' style='grid-area: 80 / 14; background-color: rgb(133, 41, 153)'></div>
+<div class='gridItem' style='grid-area: 80 / 15; background-color: rgb(28, 6, 73)'></div>
+<div class='gridItem' style='grid-area: 80 / 16; background-color: rgb(159, 122, 70)'></div>
+<div class='gridItem' style='grid-area: 80 / 17; background-color: rgb(156, 13, 46)'></div>
+<div class='gridItem' style='grid-area: 80 / 18; background-color: rgb(109, 241, 239)'></div>
+<div class='gridItem' style='grid-area: 80 / 19; background-color: rgb(43, 160, 116)'></div>
+<div class='gridItem' style='grid-area: 80 / 20; background-color: rgb(6, 253, 131)'></div>
+<div class='gridItem' style='grid-area: 81 / 1; background-color: rgb(214, 100, 53)'></div>
+<div class='gridItem' style='grid-area: 81 / 2; background-color: rgb(41, 29, 88)'></div>
+<div class='gridItem' style='grid-area: 81 / 3; background-color: rgb(166, 79, 39)'></div>
+<div class='gridItem' style='grid-area: 81 / 4; background-color: rgb(217, 180, 40)'></div>
+<div class='gridItem' style='grid-area: 81 / 5; background-color: rgb(189, 242, 133)'></div>
+<div class='gridItem' style='grid-area: 81 / 6; background-color: rgb(4, 79, 199)'></div>
+<div class='gridItem' style='grid-area: 81 / 7; background-color: rgb(58, 171, 127)'></div>
+<div class='gridItem' style='grid-area: 81 / 8; background-color: rgb(110, 210, 23)'></div>
+<div class='gridItem' style='grid-area: 81 / 9; background-color: rgb(177, 78, 163)'></div>
+<div class='gridItem' style='grid-area: 81 / 10; background-color: rgb(72, 249, 202)'></div>
+<div class='gridItem' style='grid-area: 81 / 11; background-color: rgb(64, 169, 21)'></div>
+<div class='gridItem' style='grid-area: 81 / 12; background-color: rgb(60, 253, 92)'></div>
+<div class='gridItem' style='grid-area: 81 / 13; background-color: rgb(155, 49, 201)'></div>
+<div class='gridItem' style='grid-area: 81 / 14; background-color: rgb(97, 56, 166)'></div>
+<div class='gridItem' style='grid-area: 81 / 15; background-color: rgb(219, 189, 17)'></div>
+<div class='gridItem' style='grid-area: 81 / 16; background-color: rgb(70, 247, 245)'></div>
+<div class='gridItem' style='grid-area: 81 / 17; background-color: rgb(221, 64, 126)'></div>
+<div class='gridItem' style='grid-area: 81 / 18; background-color: rgb(50, 46, 226)'></div>
+<div class='gridItem' style='grid-area: 81 / 19; background-color: rgb(246, 109, 119)'></div>
+<div class='gridItem' style='grid-area: 81 / 20; background-color: rgb(37, 254, 160)'></div>
+<div class='gridItem' style='grid-area: 82 / 1; background-color: rgb(168, 205, 140)'></div>
+<div class='gridItem' style='grid-area: 82 / 2; background-color: rgb(180, 43, 198)'></div>
+<div class='gridItem' style='grid-area: 82 / 3; background-color: rgb(212, 203, 234)'></div>
+<div class='gridItem' style='grid-area: 82 / 4; background-color: rgb(45, 53, 164)'></div>
+<div class='gridItem' style='grid-area: 82 / 5; background-color: rgb(187, 16, 195)'></div>
+<div class='gridItem' style='grid-area: 82 / 6; background-color: rgb(242, 33, 199)'></div>
+<div class='gridItem' style='grid-area: 82 / 7; background-color: rgb(48, 254, 25)'></div>
+<div class='gridItem' style='grid-area: 82 / 8; background-color: rgb(129, 180, 5)'></div>
+<div class='gridItem' style='grid-area: 82 / 9; background-color: rgb(70, 64, 182)'></div>
+<div class='gridItem' style='grid-area: 82 / 10; background-color: rgb(67, 142, 35)'></div>
+<div class='gridItem' style='grid-area: 82 / 11; background-color: rgb(225, 57, 26)'></div>
+<div class='gridItem' style='grid-area: 82 / 12; background-color: rgb(225, 30, 222)'></div>
+<div class='gridItem' style='grid-area: 82 / 13; background-color: rgb(118, 47, 173)'></div>
+<div class='gridItem' style='grid-area: 82 / 14; background-color: rgb(203, 203, 202)'></div>
+<div class='gridItem' style='grid-area: 82 / 15; background-color: rgb(76, 187, 43)'></div>
+<div class='gridItem' style='grid-area: 82 / 16; background-color: rgb(231, 243, 243)'></div>
+<div class='gridItem' style='grid-area: 82 / 17; background-color: rgb(236, 74, 14)'></div>
+<div class='gridItem' style='grid-area: 82 / 18; background-color: rgb(196, 176, 75)'></div>
+<div class='gridItem' style='grid-area: 82 / 19; background-color: rgb(59, 223, 50)'></div>
+<div class='gridItem' style='grid-area: 82 / 20; background-color: rgb(247, 175, 158)'></div>
+<div class='gridItem' style='grid-area: 83 / 1; background-color: rgb(54, 7, 18)'></div>
+<div class='gridItem' style='grid-area: 83 / 2; background-color: rgb(166, 99, 62)'></div>
+<div class='gridItem' style='grid-area: 83 / 3; background-color: rgb(62, 200, 40)'></div>
+<div class='gridItem' style='grid-area: 83 / 4; background-color: rgb(128, 13, 248)'></div>
+<div class='gridItem' style='grid-area: 83 / 5; background-color: rgb(99, 43, 73)'></div>
+<div class='gridItem' style='grid-area: 83 / 6; background-color: rgb(226, 213, 27)'></div>
+<div class='gridItem' style='grid-area: 83 / 7; background-color: rgb(221, 157, 109)'></div>
+<div class='gridItem' style='grid-area: 83 / 8; background-color: rgb(179, 156, 130)'></div>
+<div class='gridItem' style='grid-area: 83 / 9; background-color: rgb(23, 38, 26)'></div>
+<div class='gridItem' style='grid-area: 83 / 10; background-color: rgb(76, 231, 235)'></div>
+<div class='gridItem' style='grid-area: 83 / 11; background-color: rgb(68, 94, 39)'></div>
+<div class='gridItem' style='grid-area: 83 / 12; background-color: rgb(219, 3, 91)'></div>
+<div class='gridItem' style='grid-area: 83 / 13; background-color: rgb(168, 69, 224)'></div>
+<div class='gridItem' style='grid-area: 83 / 14; background-color: rgb(93, 63, 176)'></div>
+<div class='gridItem' style='grid-area: 83 / 15; background-color: rgb(106, 0, 69)'></div>
+<div class='gridItem' style='grid-area: 83 / 16; background-color: rgb(102, 178, 174)'></div>
+<div class='gridItem' style='grid-area: 83 / 17; background-color: rgb(94, 138, 72)'></div>
+<div class='gridItem' style='grid-area: 83 / 18; background-color: rgb(75, 76, 147)'></div>
+<div class='gridItem' style='grid-area: 83 / 19; background-color: rgb(162, 81, 245)'></div>
+<div class='gridItem' style='grid-area: 83 / 20; background-color: rgb(104, 98, 21)'></div>
+<div class='gridItem' style='grid-area: 84 / 1; background-color: rgb(180, 68, 209)'></div>
+<div class='gridItem' style='grid-area: 84 / 2; background-color: rgb(201, 242, 243)'></div>
+<div class='gridItem' style='grid-area: 84 / 3; background-color: rgb(185, 236, 114)'></div>
+<div class='gridItem' style='grid-area: 84 / 4; background-color: rgb(215, 8, 76)'></div>
+<div class='gridItem' style='grid-area: 84 / 5; background-color: rgb(248, 148, 144)'></div>
+<div class='gridItem' style='grid-area: 84 / 6; background-color: rgb(148, 140, 45)'></div>
+<div class='gridItem' style='grid-area: 84 / 7; background-color: rgb(210, 26, 158)'></div>
+<div class='gridItem' style='grid-area: 84 / 8; background-color: rgb(189, 127, 85)'></div>
+<div class='gridItem' style='grid-area: 84 / 9; background-color: rgb(105, 145, 44)'></div>
+<div class='gridItem' style='grid-area: 84 / 10; background-color: rgb(163, 251, 154)'></div>
+<div class='gridItem' style='grid-area: 84 / 11; background-color: rgb(78, 107, 160)'></div>
+<div class='gridItem' style='grid-area: 84 / 12; background-color: rgb(52, 40, 34)'></div>
+<div class='gridItem' style='grid-area: 84 / 13; background-color: rgb(255, 233, 108)'></div>
+<div class='gridItem' style='grid-area: 84 / 14; background-color: rgb(217, 202, 122)'></div>
+<div class='gridItem' style='grid-area: 84 / 15; background-color: rgb(12, 24, 169)'></div>
+<div class='gridItem' style='grid-area: 84 / 16; background-color: rgb(191, 7, 134)'></div>
+<div class='gridItem' style='grid-area: 84 / 17; background-color: rgb(208, 108, 7)'></div>
+<div class='gridItem' style='grid-area: 84 / 18; background-color: rgb(172, 195, 12)'></div>
+<div class='gridItem' style='grid-area: 84 / 19; background-color: rgb(244, 82, 88)'></div>
+<div class='gridItem' style='grid-area: 84 / 20; background-color: rgb(163, 211, 167)'></div>
+<div class='gridItem' style='grid-area: 85 / 1; background-color: rgb(146, 37, 221)'></div>
+<div class='gridItem' style='grid-area: 85 / 2; background-color: rgb(103, 13, 171)'></div>
+<div class='gridItem' style='grid-area: 85 / 3; background-color: rgb(43, 226, 192)'></div>
+<div class='gridItem' style='grid-area: 85 / 4; background-color: rgb(252, 32, 8)'></div>
+<div class='gridItem' style='grid-area: 85 / 5; background-color: rgb(170, 84, 181)'></div>
+<div class='gridItem' style='grid-area: 85 / 6; background-color: rgb(74, 7, 79)'></div>
+<div class='gridItem' style='grid-area: 85 / 7; background-color: rgb(62, 78, 69)'></div>
+<div class='gridItem' style='grid-area: 85 / 8; background-color: rgb(163, 161, 64)'></div>
+<div class='gridItem' style='grid-area: 85 / 9; background-color: rgb(127, 112, 95)'></div>
+<div class='gridItem' style='grid-area: 85 / 10; background-color: rgb(157, 76, 92)'></div>
+<div class='gridItem' style='grid-area: 85 / 11; background-color: rgb(208, 43, 106)'></div>
+<div class='gridItem' style='grid-area: 85 / 12; background-color: rgb(255, 186, 134)'></div>
+<div class='gridItem' style='grid-area: 85 / 13; background-color: rgb(121, 43, 246)'></div>
+<div class='gridItem' style='grid-area: 85 / 14; background-color: rgb(167, 125, 209)'></div>
+<div class='gridItem' style='grid-area: 85 / 15; background-color: rgb(8, 28, 122)'></div>
+<div class='gridItem' style='grid-area: 85 / 16; background-color: rgb(149, 36, 47)'></div>
+<div class='gridItem' style='grid-area: 85 / 17; background-color: rgb(190, 222, 212)'></div>
+<div class='gridItem' style='grid-area: 85 / 18; background-color: rgb(82, 110, 16)'></div>
+<div class='gridItem' style='grid-area: 85 / 19; background-color: rgb(245, 236, 163)'></div>
+<div class='gridItem' style='grid-area: 85 / 20; background-color: rgb(108, 168, 88)'></div>
+<div class='gridItem' style='grid-area: 86 / 1; background-color: rgb(65, 195, 118)'></div>
+<div class='gridItem' style='grid-area: 86 / 2; background-color: rgb(177, 225, 208)'></div>
+<div class='gridItem' style='grid-area: 86 / 3; background-color: rgb(84, 179, 249)'></div>
+<div class='gridItem' style='grid-area: 86 / 4; background-color: rgb(244, 107, 191)'></div>
+<div class='gridItem' style='grid-area: 86 / 5; background-color: rgb(145, 241, 158)'></div>
+<div class='gridItem' style='grid-area: 86 / 6; background-color: rgb(184, 94, 12)'></div>
+<div class='gridItem' style='grid-area: 86 / 7; background-color: rgb(167, 104, 204)'></div>
+<div class='gridItem' style='grid-area: 86 / 8; background-color: rgb(8, 42, 73)'></div>
+<div class='gridItem' style='grid-area: 86 / 9; background-color: rgb(207, 32, 180)'></div>
+<div class='gridItem' style='grid-area: 86 / 10; background-color: rgb(54, 212, 119)'></div>
+<div class='gridItem' style='grid-area: 86 / 11; background-color: rgb(95, 32, 116)'></div>
+<div class='gridItem' style='grid-area: 86 / 12; background-color: rgb(157, 207, 169)'></div>
+<div class='gridItem' style='grid-area: 86 / 13; background-color: rgb(62, 107, 200)'></div>
+<div class='gridItem' style='grid-area: 86 / 14; background-color: rgb(35, 71, 179)'></div>
+<div class='gridItem' style='grid-area: 86 / 15; background-color: rgb(55, 173, 81)'></div>
+<div class='gridItem' style='grid-area: 86 / 16; background-color: rgb(162, 130, 245)'></div>
+<div class='gridItem' style='grid-area: 86 / 17; background-color: rgb(43, 182, 4)'></div>
+<div class='gridItem' style='grid-area: 86 / 18; background-color: rgb(57, 159, 121)'></div>
+<div class='gridItem' style='grid-area: 86 / 19; background-color: rgb(101, 70, 225)'></div>
+<div class='gridItem' style='grid-area: 86 / 20; background-color: rgb(58, 160, 142)'></div>
+<div class='gridItem' style='grid-area: 87 / 1; background-color: rgb(233, 136, 184)'></div>
+<div class='gridItem' style='grid-area: 87 / 2; background-color: rgb(248, 22, 65)'></div>
+<div class='gridItem' style='grid-area: 87 / 3; background-color: rgb(92, 251, 149)'></div>
+<div class='gridItem' style='grid-area: 87 / 4; background-color: rgb(156, 142, 96)'></div>
+<div class='gridItem' style='grid-area: 87 / 5; background-color: rgb(113, 145, 20)'></div>
+<div class='gridItem' style='grid-area: 87 / 6; background-color: rgb(249, 183, 94)'></div>
+<div class='gridItem' style='grid-area: 87 / 7; background-color: rgb(12, 213, 22)'></div>
+<div class='gridItem' style='grid-area: 87 / 8; background-color: rgb(83, 133, 152)'></div>
+<div class='gridItem' style='grid-area: 87 / 9; background-color: rgb(34, 19, 169)'></div>
+<div class='gridItem' style='grid-area: 87 / 10; background-color: rgb(126, 133, 97)'></div>
+<div class='gridItem' style='grid-area: 87 / 11; background-color: rgb(39, 5, 61)'></div>
+<div class='gridItem' style='grid-area: 87 / 12; background-color: rgb(115, 149, 91)'></div>
+<div class='gridItem' style='grid-area: 87 / 13; background-color: rgb(95, 204, 251)'></div>
+<div class='gridItem' style='grid-area: 87 / 14; background-color: rgb(157, 143, 99)'></div>
+<div class='gridItem' style='grid-area: 87 / 15; background-color: rgb(2, 117, 170)'></div>
+<div class='gridItem' style='grid-area: 87 / 16; background-color: rgb(108, 60, 90)'></div>
+<div class='gridItem' style='grid-area: 87 / 17; background-color: rgb(166, 178, 165)'></div>
+<div class='gridItem' style='grid-area: 87 / 18; background-color: rgb(86, 208, 13)'></div>
+<div class='gridItem' style='grid-area: 87 / 19; background-color: rgb(9, 149, 54)'></div>
+<div class='gridItem' style='grid-area: 87 / 20; background-color: rgb(41, 223, 131)'></div>
+<div class='gridItem' style='grid-area: 88 / 1; background-color: rgb(217, 32, 77)'></div>
+<div class='gridItem' style='grid-area: 88 / 2; background-color: rgb(231, 165, 131)'></div>
+<div class='gridItem' style='grid-area: 88 / 3; background-color: rgb(249, 87, 107)'></div>
+<div class='gridItem' style='grid-area: 88 / 4; background-color: rgb(226, 185, 248)'></div>
+<div class='gridItem' style='grid-area: 88 / 5; background-color: rgb(70, 124, 34)'></div>
+<div class='gridItem' style='grid-area: 88 / 6; background-color: rgb(230, 104, 152)'></div>
+<div class='gridItem' style='grid-area: 88 / 7; background-color: rgb(75, 68, 90)'></div>
+<div class='gridItem' style='grid-area: 88 / 8; background-color: rgb(246, 16, 110)'></div>
+<div class='gridItem' style='grid-area: 88 / 9; background-color: rgb(16, 226, 97)'></div>
+<div class='gridItem' style='grid-area: 88 / 10; background-color: rgb(216, 89, 70)'></div>
+<div class='gridItem' style='grid-area: 88 / 11; background-color: rgb(178, 127, 169)'></div>
+<div class='gridItem' style='grid-area: 88 / 12; background-color: rgb(225, 217, 82)'></div>
+<div class='gridItem' style='grid-area: 88 / 13; background-color: rgb(74, 135, 174)'></div>
+<div class='gridItem' style='grid-area: 88 / 14; background-color: rgb(163, 189, 24)'></div>
+<div class='gridItem' style='grid-area: 88 / 15; background-color: rgb(54, 78, 232)'></div>
+<div class='gridItem' style='grid-area: 88 / 16; background-color: rgb(136, 93, 152)'></div>
+<div class='gridItem' style='grid-area: 88 / 17; background-color: rgb(100, 25, 169)'></div>
+<div class='gridItem' style='grid-area: 88 / 18; background-color: rgb(196, 166, 157)'></div>
+<div class='gridItem' style='grid-area: 88 / 19; background-color: rgb(150, 104, 155)'></div>
+<div class='gridItem' style='grid-area: 88 / 20; background-color: rgb(170, 67, 152)'></div>
+<div class='gridItem' style='grid-area: 89 / 1; background-color: rgb(244, 76, 54)'></div>
+<div class='gridItem' style='grid-area: 89 / 2; background-color: rgb(110, 78, 165)'></div>
+<div class='gridItem' style='grid-area: 89 / 3; background-color: rgb(185, 12, 202)'></div>
+<div class='gridItem' style='grid-area: 89 / 4; background-color: rgb(96, 199, 134)'></div>
+<div class='gridItem' style='grid-area: 89 / 5; background-color: rgb(180, 34, 138)'></div>
+<div class='gridItem' style='grid-area: 89 / 6; background-color: rgb(143, 196, 58)'></div>
+<div class='gridItem' style='grid-area: 89 / 7; background-color: rgb(236, 187, 180)'></div>
+<div class='gridItem' style='grid-area: 89 / 8; background-color: rgb(35, 51, 37)'></div>
+<div class='gridItem' style='grid-area: 89 / 9; background-color: rgb(54, 157, 251)'></div>
+<div class='gridItem' style='grid-area: 89 / 10; background-color: rgb(3, 253, 253)'></div>
+<div class='gridItem' style='grid-area: 89 / 11; background-color: rgb(209, 31, 91)'></div>
+<div class='gridItem' style='grid-area: 89 / 12; background-color: rgb(114, 62, 194)'></div>
+<div class='gridItem' style='grid-area: 89 / 13; background-color: rgb(7, 209, 235)'></div>
+<div class='gridItem' style='grid-area: 89 / 14; background-color: rgb(18, 59, 2)'></div>
+<div class='gridItem' style='grid-area: 89 / 15; background-color: rgb(248, 140, 217)'></div>
+<div class='gridItem' style='grid-area: 89 / 16; background-color: rgb(118, 65, 206)'></div>
+<div class='gridItem' style='grid-area: 89 / 17; background-color: rgb(142, 123, 106)'></div>
+<div class='gridItem' style='grid-area: 89 / 18; background-color: rgb(178, 234, 159)'></div>
+<div class='gridItem' style='grid-area: 89 / 19; background-color: rgb(65, 133, 25)'></div>
+<div class='gridItem' style='grid-area: 89 / 20; background-color: rgb(10, 55, 148)'></div>
+<div class='gridItem' style='grid-area: 90 / 1; background-color: rgb(63, 55, 29)'></div>
+<div class='gridItem' style='grid-area: 90 / 2; background-color: rgb(115, 177, 187)'></div>
+<div class='gridItem' style='grid-area: 90 / 3; background-color: rgb(67, 96, 122)'></div>
+<div class='gridItem' style='grid-area: 90 / 4; background-color: rgb(221, 20, 106)'></div>
+<div class='gridItem' style='grid-area: 90 / 5; background-color: rgb(218, 64, 80)'></div>
+<div class='gridItem' style='grid-area: 90 / 6; background-color: rgb(87, 157, 112)'></div>
+<div class='gridItem' style='grid-area: 90 / 7; background-color: rgb(213, 182, 247)'></div>
+<div class='gridItem' style='grid-area: 90 / 8; background-color: rgb(86, 145, 114)'></div>
+<div class='gridItem' style='grid-area: 90 / 9; background-color: rgb(175, 107, 144)'></div>
+<div class='gridItem' style='grid-area: 90 / 10; background-color: rgb(149, 152, 171)'></div>
+<div class='gridItem' style='grid-area: 90 / 11; background-color: rgb(2, 148, 13)'></div>
+<div class='gridItem' style='grid-area: 90 / 12; background-color: rgb(131, 120, 220)'></div>
+<div class='gridItem' style='grid-area: 90 / 13; background-color: rgb(106, 202, 56)'></div>
+<div class='gridItem' style='grid-area: 90 / 14; background-color: rgb(167, 242, 72)'></div>
+<div class='gridItem' style='grid-area: 90 / 15; background-color: rgb(0, 97, 123)'></div>
+<div class='gridItem' style='grid-area: 90 / 16; background-color: rgb(97, 125, 202)'></div>
+<div class='gridItem' style='grid-area: 90 / 17; background-color: rgb(91, 116, 187)'></div>
+<div class='gridItem' style='grid-area: 90 / 18; background-color: rgb(205, 33, 6)'></div>
+<div class='gridItem' style='grid-area: 90 / 19; background-color: rgb(117, 144, 214)'></div>
+<div class='gridItem' style='grid-area: 90 / 20; background-color: rgb(149, 23, 222)'></div>
+<div class='gridItem' style='grid-area: 91 / 1; background-color: rgb(223, 94, 207)'></div>
+<div class='gridItem' style='grid-area: 91 / 2; background-color: rgb(143, 178, 166)'></div>
+<div class='gridItem' style='grid-area: 91 / 3; background-color: rgb(163, 49, 90)'></div>
+<div class='gridItem' style='grid-area: 91 / 4; background-color: rgb(11, 98, 247)'></div>
+<div class='gridItem' style='grid-area: 91 / 5; background-color: rgb(93, 206, 214)'></div>
+<div class='gridItem' style='grid-area: 91 / 6; background-color: rgb(38, 198, 136)'></div>
+<div class='gridItem' style='grid-area: 91 / 7; background-color: rgb(20, 109, 155)'></div>
+<div class='gridItem' style='grid-area: 91 / 8; background-color: rgb(104, 69, 61)'></div>
+<div class='gridItem' style='grid-area: 91 / 9; background-color: rgb(207, 254, 108)'></div>
+<div class='gridItem' style='grid-area: 91 / 10; background-color: rgb(3, 104, 199)'></div>
+<div class='gridItem' style='grid-area: 91 / 11; background-color: rgb(133, 91, 129)'></div>
+<div class='gridItem' style='grid-area: 91 / 12; background-color: rgb(243, 195, 111)'></div>
+<div class='gridItem' style='grid-area: 91 / 13; background-color: rgb(33, 66, 70)'></div>
+<div class='gridItem' style='grid-area: 91 / 14; background-color: rgb(67, 75, 118)'></div>
+<div class='gridItem' style='grid-area: 91 / 15; background-color: rgb(224, 171, 131)'></div>
+<div class='gridItem' style='grid-area: 91 / 16; background-color: rgb(94, 244, 196)'></div>
+<div class='gridItem' style='grid-area: 91 / 17; background-color: rgb(100, 51, 30)'></div>
+<div class='gridItem' style='grid-area: 91 / 18; background-color: rgb(70, 243, 46)'></div>
+<div class='gridItem' style='grid-area: 91 / 19; background-color: rgb(156, 21, 170)'></div>
+<div class='gridItem' style='grid-area: 91 / 20; background-color: rgb(76, 97, 153)'></div>
+<div class='gridItem' style='grid-area: 92 / 1; background-color: rgb(225, 95, 129)'></div>
+<div class='gridItem' style='grid-area: 92 / 2; background-color: rgb(191, 14, 181)'></div>
+<div class='gridItem' style='grid-area: 92 / 3; background-color: rgb(119, 75, 174)'></div>
+<div class='gridItem' style='grid-area: 92 / 4; background-color: rgb(91, 58, 180)'></div>
+<div class='gridItem' style='grid-area: 92 / 5; background-color: rgb(232, 78, 4)'></div>
+<div class='gridItem' style='grid-area: 92 / 6; background-color: rgb(54, 137, 47)'></div>
+<div class='gridItem' style='grid-area: 92 / 7; background-color: rgb(107, 170, 9)'></div>
+<div class='gridItem' style='grid-area: 92 / 8; background-color: rgb(170, 121, 48)'></div>
+<div class='gridItem' style='grid-area: 92 / 9; background-color: rgb(14, 122, 17)'></div>
+<div class='gridItem' style='grid-area: 92 / 10; background-color: rgb(91, 123, 149)'></div>
+<div class='gridItem' style='grid-area: 92 / 11; background-color: rgb(196, 226, 60)'></div>
+<div class='gridItem' style='grid-area: 92 / 12; background-color: rgb(6, 98, 192)'></div>
+<div class='gridItem' style='grid-area: 92 / 13; background-color: rgb(31, 46, 84)'></div>
+<div class='gridItem' style='grid-area: 92 / 14; background-color: rgb(6, 200, 136)'></div>
+<div class='gridItem' style='grid-area: 92 / 15; background-color: rgb(5, 136, 251)'></div>
+<div class='gridItem' style='grid-area: 92 / 16; background-color: rgb(3, 64, 223)'></div>
+<div class='gridItem' style='grid-area: 92 / 17; background-color: rgb(130, 32, 211)'></div>
+<div class='gridItem' style='grid-area: 92 / 18; background-color: rgb(144, 14, 1)'></div>
+<div class='gridItem' style='grid-area: 92 / 19; background-color: rgb(91, 231, 187)'></div>
+<div class='gridItem' style='grid-area: 92 / 20; background-color: rgb(167, 175, 3)'></div>
+<div class='gridItem' style='grid-area: 93 / 1; background-color: rgb(182, 75, 231)'></div>
+<div class='gridItem' style='grid-area: 93 / 2; background-color: rgb(175, 35, 3)'></div>
+<div class='gridItem' style='grid-area: 93 / 3; background-color: rgb(72, 72, 44)'></div>
+<div class='gridItem' style='grid-area: 93 / 4; background-color: rgb(74, 159, 85)'></div>
+<div class='gridItem' style='grid-area: 93 / 5; background-color: rgb(108, 21, 196)'></div>
+<div class='gridItem' style='grid-area: 93 / 6; background-color: rgb(130, 21, 73)'></div>
+<div class='gridItem' style='grid-area: 93 / 7; background-color: rgb(98, 152, 53)'></div>
+<div class='gridItem' style='grid-area: 93 / 8; background-color: rgb(247, 175, 23)'></div>
+<div class='gridItem' style='grid-area: 93 / 9; background-color: rgb(140, 170, 9)'></div>
+<div class='gridItem' style='grid-area: 93 / 10; background-color: rgb(50, 178, 81)'></div>
+<div class='gridItem' style='grid-area: 93 / 11; background-color: rgb(22, 162, 229)'></div>
+<div class='gridItem' style='grid-area: 93 / 12; background-color: rgb(235, 238, 67)'></div>
+<div class='gridItem' style='grid-area: 93 / 13; background-color: rgb(81, 205, 100)'></div>
+<div class='gridItem' style='grid-area: 93 / 14; background-color: rgb(170, 101, 67)'></div>
+<div class='gridItem' style='grid-area: 93 / 15; background-color: rgb(197, 4, 242)'></div>
+<div class='gridItem' style='grid-area: 93 / 16; background-color: rgb(221, 248, 147)'></div>
+<div class='gridItem' style='grid-area: 93 / 17; background-color: rgb(133, 99, 147)'></div>
+<div class='gridItem' style='grid-area: 93 / 18; background-color: rgb(194, 144, 174)'></div>
+<div class='gridItem' style='grid-area: 93 / 19; background-color: rgb(159, 104, 115)'></div>
+<div class='gridItem' style='grid-area: 93 / 20; background-color: rgb(94, 166, 60)'></div>
+<div class='gridItem' style='grid-area: 94 / 1; background-color: rgb(54, 15, 214)'></div>
+<div class='gridItem' style='grid-area: 94 / 2; background-color: rgb(46, 199, 63)'></div>
+<div class='gridItem' style='grid-area: 94 / 3; background-color: rgb(182, 99, 121)'></div>
+<div class='gridItem' style='grid-area: 94 / 4; background-color: rgb(239, 53, 202)'></div>
+<div class='gridItem' style='grid-area: 94 / 5; background-color: rgb(172, 17, 64)'></div>
+<div class='gridItem' style='grid-area: 94 / 6; background-color: rgb(89, 85, 8)'></div>
+<div class='gridItem' style='grid-area: 94 / 7; background-color: rgb(38, 75, 144)'></div>
+<div class='gridItem' style='grid-area: 94 / 8; background-color: rgb(188, 242, 60)'></div>
+<div class='gridItem' style='grid-area: 94 / 9; background-color: rgb(249, 108, 203)'></div>
+<div class='gridItem' style='grid-area: 94 / 10; background-color: rgb(12, 27, 14)'></div>
+<div class='gridItem' style='grid-area: 94 / 11; background-color: rgb(225, 199, 149)'></div>
+<div class='gridItem' style='grid-area: 94 / 12; background-color: rgb(13, 55, 140)'></div>
+<div class='gridItem' style='grid-area: 94 / 13; background-color: rgb(13, 81, 159)'></div>
+<div class='gridItem' style='grid-area: 94 / 14; background-color: rgb(119, 227, 227)'></div>
+<div class='gridItem' style='grid-area: 94 / 15; background-color: rgb(110, 131, 236)'></div>
+<div class='gridItem' style='grid-area: 94 / 16; background-color: rgb(138, 158, 179)'></div>
+<div class='gridItem' style='grid-area: 94 / 17; background-color: rgb(97, 66, 46)'></div>
+<div class='gridItem' style='grid-area: 94 / 18; background-color: rgb(2, 246, 224)'></div>
+<div class='gridItem' style='grid-area: 94 / 19; background-color: rgb(176, 67, 142)'></div>
+<div class='gridItem' style='grid-area: 94 / 20; background-color: rgb(174, 0, 106)'></div>
+<div class='gridItem' style='grid-area: 95 / 1; background-color: rgb(244, 53, 43)'></div>
+<div class='gridItem' style='grid-area: 95 / 2; background-color: rgb(244, 193, 215)'></div>
+<div class='gridItem' style='grid-area: 95 / 3; background-color: rgb(200, 21, 50)'></div>
+<div class='gridItem' style='grid-area: 95 / 4; background-color: rgb(118, 10, 12)'></div>
+<div class='gridItem' style='grid-area: 95 / 5; background-color: rgb(140, 10, 36)'></div>
+<div class='gridItem' style='grid-area: 95 / 6; background-color: rgb(40, 123, 83)'></div>
+<div class='gridItem' style='grid-area: 95 / 7; background-color: rgb(204, 136, 58)'></div>
+<div class='gridItem' style='grid-area: 95 / 8; background-color: rgb(238, 8, 159)'></div>
+<div class='gridItem' style='grid-area: 95 / 9; background-color: rgb(234, 210, 188)'></div>
+<div class='gridItem' style='grid-area: 95 / 10; background-color: rgb(2, 245, 22)'></div>
+<div class='gridItem' style='grid-area: 95 / 11; background-color: rgb(28, 105, 183)'></div>
+<div class='gridItem' style='grid-area: 95 / 12; background-color: rgb(69, 117, 53)'></div>
+<div class='gridItem' style='grid-area: 95 / 13; background-color: rgb(86, 155, 203)'></div>
+<div class='gridItem' style='grid-area: 95 / 14; background-color: rgb(121, 90, 40)'></div>
+<div class='gridItem' style='grid-area: 95 / 15; background-color: rgb(40, 75, 26)'></div>
+<div class='gridItem' style='grid-area: 95 / 16; background-color: rgb(189, 191, 71)'></div>
+<div class='gridItem' style='grid-area: 95 / 17; background-color: rgb(124, 90, 158)'></div>
+<div class='gridItem' style='grid-area: 95 / 18; background-color: rgb(108, 253, 40)'></div>
+<div class='gridItem' style='grid-area: 95 / 19; background-color: rgb(79, 218, 35)'></div>
+<div class='gridItem' style='grid-area: 95 / 20; background-color: rgb(44, 163, 235)'></div>
+<div class='gridItem' style='grid-area: 96 / 1; background-color: rgb(95, 104, 3)'></div>
+<div class='gridItem' style='grid-area: 96 / 2; background-color: rgb(17, 175, 206)'></div>
+<div class='gridItem' style='grid-area: 96 / 3; background-color: rgb(86, 115, 217)'></div>
+<div class='gridItem' style='grid-area: 96 / 4; background-color: rgb(163, 136, 132)'></div>
+<div class='gridItem' style='grid-area: 96 / 5; background-color: rgb(67, 84, 81)'></div>
+<div class='gridItem' style='grid-area: 96 / 6; background-color: rgb(15, 185, 7)'></div>
+<div class='gridItem' style='grid-area: 96 / 7; background-color: rgb(100, 64, 79)'></div>
+<div class='gridItem' style='grid-area: 96 / 8; background-color: rgb(4, 173, 172)'></div>
+<div class='gridItem' style='grid-area: 96 / 9; background-color: rgb(236, 245, 79)'></div>
+<div class='gridItem' style='grid-area: 96 / 10; background-color: rgb(55, 250, 29)'></div>
+<div class='gridItem' style='grid-area: 96 / 11; background-color: rgb(18, 188, 11)'></div>
+<div class='gridItem' style='grid-area: 96 / 12; background-color: rgb(26, 35, 112)'></div>
+<div class='gridItem' style='grid-area: 96 / 13; background-color: rgb(106, 80, 118)'></div>
+<div class='gridItem' style='grid-area: 96 / 14; background-color: rgb(63, 41, 247)'></div>
+<div class='gridItem' style='grid-area: 96 / 15; background-color: rgb(25, 26, 217)'></div>
+<div class='gridItem' style='grid-area: 96 / 16; background-color: rgb(76, 57, 243)'></div>
+<div class='gridItem' style='grid-area: 96 / 17; background-color: rgb(97, 105, 139)'></div>
+<div class='gridItem' style='grid-area: 96 / 18; background-color: rgb(229, 87, 234)'></div>
+<div class='gridItem' style='grid-area: 96 / 19; background-color: rgb(77, 41, 5)'></div>
+<div class='gridItem' style='grid-area: 96 / 20; background-color: rgb(5, 89, 84)'></div>
+<div class='gridItem' style='grid-area: 97 / 1; background-color: rgb(53, 56, 83)'></div>
+<div class='gridItem' style='grid-area: 97 / 2; background-color: rgb(253, 210, 29)'></div>
+<div class='gridItem' style='grid-area: 97 / 3; background-color: rgb(30, 189, 98)'></div>
+<div class='gridItem' style='grid-area: 97 / 4; background-color: rgb(197, 57, 114)'></div>
+<div class='gridItem' style='grid-area: 97 / 5; background-color: rgb(150, 93, 0)'></div>
+<div class='gridItem' style='grid-area: 97 / 6; background-color: rgb(179, 210, 204)'></div>
+<div class='gridItem' style='grid-area: 97 / 7; background-color: rgb(113, 129, 242)'></div>
+<div class='gridItem' style='grid-area: 97 / 8; background-color: rgb(181, 240, 62)'></div>
+<div class='gridItem' style='grid-area: 97 / 9; background-color: rgb(158, 156, 137)'></div>
+<div class='gridItem' style='grid-area: 97 / 10; background-color: rgb(102, 60, 78)'></div>
+<div class='gridItem' style='grid-area: 97 / 11; background-color: rgb(106, 109, 25)'></div>
+<div class='gridItem' style='grid-area: 97 / 12; background-color: rgb(69, 140, 45)'></div>
+<div class='gridItem' style='grid-area: 97 / 13; background-color: rgb(26, 105, 232)'></div>
+<div class='gridItem' style='grid-area: 97 / 14; background-color: rgb(130, 120, 16)'></div>
+<div class='gridItem' style='grid-area: 97 / 15; background-color: rgb(213, 46, 136)'></div>
+<div class='gridItem' style='grid-area: 97 / 16; background-color: rgb(88, 183, 18)'></div>
+<div class='gridItem' style='grid-area: 97 / 17; background-color: rgb(57, 111, 181)'></div>
+<div class='gridItem' style='grid-area: 97 / 18; background-color: rgb(43, 73, 255)'></div>
+<div class='gridItem' style='grid-area: 97 / 19; background-color: rgb(80, 86, 250)'></div>
+<div class='gridItem' style='grid-area: 97 / 20; background-color: rgb(27, 230, 167)'></div>
+<div class='gridItem' style='grid-area: 98 / 1; background-color: rgb(241, 61, 150)'></div>
+<div class='gridItem' style='grid-area: 98 / 2; background-color: rgb(217, 102, 96)'></div>
+<div class='gridItem' style='grid-area: 98 / 3; background-color: rgb(224, 54, 93)'></div>
+<div class='gridItem' style='grid-area: 98 / 4; background-color: rgb(56, 67, 246)'></div>
+<div class='gridItem' style='grid-area: 98 / 5; background-color: rgb(132, 146, 176)'></div>
+<div class='gridItem' style='grid-area: 98 / 6; background-color: rgb(132, 48, 214)'></div>
+<div class='gridItem' style='grid-area: 98 / 7; background-color: rgb(116, 222, 16)'></div>
+<div class='gridItem' style='grid-area: 98 / 8; background-color: rgb(208, 76, 62)'></div>
+<div class='gridItem' style='grid-area: 98 / 9; background-color: rgb(170, 254, 61)'></div>
+<div class='gridItem' style='grid-area: 98 / 10; background-color: rgb(141, 48, 244)'></div>
+<div class='gridItem' style='grid-area: 98 / 11; background-color: rgb(75, 215, 241)'></div>
+<div class='gridItem' style='grid-area: 98 / 12; background-color: rgb(58, 139, 64)'></div>
+<div class='gridItem' style='grid-area: 98 / 13; background-color: rgb(146, 190, 29)'></div>
+<div class='gridItem' style='grid-area: 98 / 14; background-color: rgb(236, 169, 6)'></div>
+<div class='gridItem' style='grid-area: 98 / 15; background-color: rgb(79, 148, 38)'></div>
+<div class='gridItem' style='grid-area: 98 / 16; background-color: rgb(2, 243, 100)'></div>
+<div class='gridItem' style='grid-area: 98 / 17; background-color: rgb(154, 246, 145)'></div>
+<div class='gridItem' style='grid-area: 98 / 18; background-color: rgb(134, 181, 223)'></div>
+<div class='gridItem' style='grid-area: 98 / 19; background-color: rgb(58, 61, 83)'></div>
+<div class='gridItem' style='grid-area: 98 / 20; background-color: rgb(47, 44, 204)'></div>
+<div class='gridItem' style='grid-area: 99 / 1; background-color: rgb(144, 120, 53)'></div>
+<div class='gridItem' style='grid-area: 99 / 2; background-color: rgb(242, 55, 117)'></div>
+<div class='gridItem' style='grid-area: 99 / 3; background-color: rgb(160, 17, 202)'></div>
+<div class='gridItem' style='grid-area: 99 / 4; background-color: rgb(41, 140, 194)'></div>
+<div class='gridItem' style='grid-area: 99 / 5; background-color: rgb(74, 121, 186)'></div>
+<div class='gridItem' style='grid-area: 99 / 6; background-color: rgb(73, 82, 200)'></div>
+<div class='gridItem' style='grid-area: 99 / 7; background-color: rgb(191, 7, 173)'></div>
+<div class='gridItem' style='grid-area: 99 / 8; background-color: rgb(82, 84, 157)'></div>
+<div class='gridItem' style='grid-area: 99 / 9; background-color: rgb(29, 8, 201)'></div>
+<div class='gridItem' style='grid-area: 99 / 10; background-color: rgb(156, 100, 151)'></div>
+<div class='gridItem' style='grid-area: 99 / 11; background-color: rgb(188, 226, 106)'></div>
+<div class='gridItem' style='grid-area: 99 / 12; background-color: rgb(78, 37, 230)'></div>
+<div class='gridItem' style='grid-area: 99 / 13; background-color: rgb(39, 73, 164)'></div>
+<div class='gridItem' style='grid-area: 99 / 14; background-color: rgb(151, 94, 234)'></div>
+<div class='gridItem' style='grid-area: 99 / 15; background-color: rgb(21, 252, 64)'></div>
+<div class='gridItem' style='grid-area: 99 / 16; background-color: rgb(130, 166, 70)'></div>
+<div class='gridItem' style='grid-area: 99 / 17; background-color: rgb(8, 18, 158)'></div>
+<div class='gridItem' style='grid-area: 99 / 18; background-color: rgb(229, 140, 188)'></div>
+<div class='gridItem' style='grid-area: 99 / 19; background-color: rgb(189, 233, 39)'></div>
+<div class='gridItem' style='grid-area: 99 / 20; background-color: rgb(122, 67, 71)'></div>
+<div class='gridItem' style='grid-area: 100 / 1; background-color: rgb(255, 226, 5)'></div>
+<div class='gridItem' style='grid-area: 100 / 2; background-color: rgb(209, 174, 187)'></div>
+<div class='gridItem' style='grid-area: 100 / 3; background-color: rgb(192, 103, 87)'></div>
+<div class='gridItem' style='grid-area: 100 / 4; background-color: rgb(181, 167, 167)'></div>
+<div class='gridItem' style='grid-area: 100 / 5; background-color: rgb(61, 132, 250)'></div>
+<div class='gridItem' style='grid-area: 100 / 6; background-color: rgb(182, 125, 88)'></div>
+<div class='gridItem' style='grid-area: 100 / 7; background-color: rgb(20, 147, 234)'></div>
+<div class='gridItem' style='grid-area: 100 / 8; background-color: rgb(68, 233, 40)'></div>
+<div class='gridItem' style='grid-area: 100 / 9; background-color: rgb(216, 234, 128)'></div>
+<div class='gridItem' style='grid-area: 100 / 10; background-color: rgb(43, 10, 17)'></div>
+<div class='gridItem' style='grid-area: 100 / 11; background-color: rgb(206, 102, 156)'></div>
+<div class='gridItem' style='grid-area: 100 / 12; background-color: rgb(184, 210, 49)'></div>
+<div class='gridItem' style='grid-area: 100 / 13; background-color: rgb(214, 203, 53)'></div>
+<div class='gridItem' style='grid-area: 100 / 14; background-color: rgb(239, 54, 215)'></div>
+<div class='gridItem' style='grid-area: 100 / 15; background-color: rgb(86, 163, 33)'></div>
+<div class='gridItem' style='grid-area: 100 / 16; background-color: rgb(154, 6, 174)'></div>
+<div class='gridItem' style='grid-area: 100 / 17; background-color: rgb(191, 232, 100)'></div>
+<div class='gridItem' style='grid-area: 100 / 18; background-color: rgb(127, 179, 214)'></div>
+<div class='gridItem' style='grid-area: 100 / 19; background-color: rgb(45, 43, 72)'></div>
+<div class='gridItem' style='grid-area: 100 / 20; background-color: rgb(178, 180, 196)'></div>
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutfixedgridlotsofdatahtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/fixed-grid-lots-of-data.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/fixed-grid-lots-of-data.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/PerformanceTests/Layout/fixed-grid-lots-of-data.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,9 +8,9 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body {
</span><del>- display: -webkit-grid;
- -webkit-grid-template-rows: repeat(100, 200px);
- -webkit-grid-template-columns: repeat(20, 200px);
</del><ins>+ display: grid;
+ grid-template-rows: repeat(100, 200px);
+ grid-template-columns: repeat(20, 200px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItem {
</span><span class="lines">@@ -32,2005 +32,2005 @@
</span><span class="cx"> </script>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="startTest()">
</span><del>-<div class='gridItem' style='-webkit-grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 11; background-color: rgb(154, 120, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 12; background-color: rgb(57, 247, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 13; background-color: rgb(61, 121, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 14; background-color: rgb(226, 240, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 15; background-color: rgb(21, 125, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 16; background-color: rgb(236, 97, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 17; background-color: rgb(228, 209, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 18; background-color: rgb(189, 142, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 19; background-color: rgb(34, 147, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 1 / 20; background-color: rgb(206, 11, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 11; background-color: rgb(43, 188, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 12; background-color: rgb(220, 17, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 13; background-color: rgb(12, 247, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 14; background-color: rgb(41, 52, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 15; background-color: rgb(225, 235, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 16; background-color: rgb(125, 53, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 17; background-color: rgb(144, 206, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 18; background-color: rgb(18, 147, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 19; background-color: rgb(62, 214, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 2 / 20; background-color: rgb(188, 127, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 11; background-color: rgb(68, 96, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 12; background-color: rgb(59, 60, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 13; background-color: rgb(180, 204, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 14; background-color: rgb(7, 165, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 15; background-color: rgb(29, 91, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 16; background-color: rgb(59, 66, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 17; background-color: rgb(106, 41, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 18; background-color: rgb(174, 116, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 19; background-color: rgb(132, 94, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 3 / 20; background-color: rgb(238, 82, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 11; background-color: rgb(215, 247, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 12; background-color: rgb(138, 81, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 13; background-color: rgb(185, 107, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 14; background-color: rgb(246, 29, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 15; background-color: rgb(190, 100, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 16; background-color: rgb(26, 171, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 17; background-color: rgb(249, 143, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 18; background-color: rgb(71, 245, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 19; background-color: rgb(89, 231, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 4 / 20; background-color: rgb(233, 114, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 11; background-color: rgb(233, 77, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 12; background-color: rgb(94, 103, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 13; background-color: rgb(247, 92, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 14; background-color: rgb(144, 165, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 15; background-color: rgb(104, 195, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 16; background-color: rgb(6, 15, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 17; background-color: rgb(94, 238, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 18; background-color: rgb(150, 23, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 19; background-color: rgb(160, 34, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 5 / 20; background-color: rgb(254, 111, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 11; background-color: rgb(140, 57, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 12; background-color: rgb(150, 161, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 13; background-color: rgb(140, 25, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 14; background-color: rgb(208, 224, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 15; background-color: rgb(85, 46, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 16; background-color: rgb(105, 215, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 17; background-color: rgb(204, 21, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 18; background-color: rgb(181, 88, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 19; background-color: rgb(252, 135, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 6 / 20; background-color: rgb(235, 50, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 11; background-color: rgb(172, 83, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 12; background-color: rgb(36, 152, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 13; background-color: rgb(188, 94, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 14; background-color: rgb(42, 14, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 15; background-color: rgb(195, 162, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 16; background-color: rgb(17, 4, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 17; background-color: rgb(241, 160, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 18; background-color: rgb(29, 70, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 19; background-color: rgb(248, 179, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 7 / 20; background-color: rgb(195, 141, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 11; background-color: rgb(88, 188, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 12; background-color: rgb(23, 37, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 13; background-color: rgb(17, 100, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 14; background-color: rgb(84, 136, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 15; background-color: rgb(170, 7, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 16; background-color: rgb(176, 78, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 17; background-color: rgb(21, 98, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 18; background-color: rgb(79, 112, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 19; background-color: rgb(196, 57, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 8 / 20; background-color: rgb(225, 81, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 11; background-color: rgb(121, 67, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 12; background-color: rgb(211, 222, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 13; background-color: rgb(49, 244, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 14; background-color: rgb(60, 220, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 15; background-color: rgb(42, 46, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 16; background-color: rgb(251, 160, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 17; background-color: rgb(22, 35, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 18; background-color: rgb(147, 63, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 19; background-color: rgb(134, 238, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 9 / 20; background-color: rgb(157, 53, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 11; background-color: rgb(124, 251, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 12; background-color: rgb(150, 253, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 13; background-color: rgb(23, 100, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 14; background-color: rgb(116, 14, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 15; background-color: rgb(201, 159, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 16; background-color: rgb(66, 96, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 17; background-color: rgb(153, 219, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 18; background-color: rgb(86, 222, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 19; background-color: rgb(145, 71, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 10 / 20; background-color: rgb(250, 91, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 11; background-color: rgb(190, 81, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 12; background-color: rgb(121, 9, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 13; background-color: rgb(222, 23, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 14; background-color: rgb(8, 208, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 15; background-color: rgb(177, 111, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 16; background-color: rgb(186, 172, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 17; background-color: rgb(151, 27, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 18; background-color: rgb(198, 115, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 19; background-color: rgb(97, 208, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 11 / 20; background-color: rgb(219, 22, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 11; background-color: rgb(228, 130, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 12; background-color: rgb(129, 232, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 13; background-color: rgb(156, 142, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 14; background-color: rgb(218, 242, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 15; background-color: rgb(136, 133, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 16; background-color: rgb(27, 102, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 17; background-color: rgb(73, 60, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 18; background-color: rgb(117, 161, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 19; background-color: rgb(183, 150, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 12 / 20; background-color: rgb(223, 210, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 11; background-color: rgb(105, 21, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 12; background-color: rgb(41, 125, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 13; background-color: rgb(138, 198, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 14; background-color: rgb(245, 153, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 15; background-color: rgb(239, 42, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 16; background-color: rgb(162, 54, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 17; background-color: rgb(230, 54, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 18; background-color: rgb(68, 16, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 19; background-color: rgb(45, 159, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 13 / 20; background-color: rgb(33, 97, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 11; background-color: rgb(220, 19, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 12; background-color: rgb(77, 165, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 13; background-color: rgb(213, 63, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 14; background-color: rgb(144, 7, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 15; background-color: rgb(22, 190, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 16; background-color: rgb(124, 111, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 17; background-color: rgb(0, 41, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 18; background-color: rgb(25, 25, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 19; background-color: rgb(39, 119, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 14 / 20; background-color: rgb(66, 138, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 11; background-color: rgb(175, 139, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 12; background-color: rgb(176, 195, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 13; background-color: rgb(44, 101, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 14; background-color: rgb(31, 213, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 15; background-color: rgb(157, 97, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 16; background-color: rgb(227, 14, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 17; background-color: rgb(133, 37, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 18; background-color: rgb(129, 140, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 19; background-color: rgb(50, 151, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 15 / 20; background-color: rgb(174, 90, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 11; background-color: rgb(205, 63, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 12; background-color: rgb(17, 145, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 13; background-color: rgb(197, 117, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 14; background-color: rgb(137, 60, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 15; background-color: rgb(167, 23, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 16; background-color: rgb(137, 61, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 17; background-color: rgb(59, 0, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 18; background-color: rgb(74, 174, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 19; background-color: rgb(91, 205, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 16 / 20; background-color: rgb(120, 65, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 11; background-color: rgb(155, 80, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 12; background-color: rgb(220, 206, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 13; background-color: rgb(202, 63, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 14; background-color: rgb(133, 250, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 15; background-color: rgb(26, 207, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 16; background-color: rgb(242, 23, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 17; background-color: rgb(219, 231, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 18; background-color: rgb(81, 198, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 19; background-color: rgb(2, 116, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 17 / 20; background-color: rgb(219, 90, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 11; background-color: rgb(191, 112, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 12; background-color: rgb(16, 101, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 13; background-color: rgb(166, 127, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 14; background-color: rgb(12, 140, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 15; background-color: rgb(25, 163, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 16; background-color: rgb(169, 70, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 17; background-color: rgb(236, 172, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 18; background-color: rgb(207, 130, 221)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 19; background-color: rgb(27, 148, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 18 / 20; background-color: rgb(184, 170, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 11; background-color: rgb(40, 150, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 12; background-color: rgb(94, 136, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 13; background-color: rgb(194, 243, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 14; background-color: rgb(134, 98, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 15; background-color: rgb(96, 240, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 16; background-color: rgb(38, 90, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 17; background-color: rgb(91, 218, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 18; background-color: rgb(231, 191, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 19; background-color: rgb(246, 117, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 19 / 20; background-color: rgb(187, 19, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 11; background-color: rgb(138, 57, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 12; background-color: rgb(56, 58, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 13; background-color: rgb(132, 68, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 14; background-color: rgb(125, 57, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 15; background-color: rgb(197, 106, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 16; background-color: rgb(162, 215, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 17; background-color: rgb(70, 146, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 18; background-color: rgb(2, 149, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 19; background-color: rgb(219, 80, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 20 / 20; background-color: rgb(65, 57, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 11; background-color: rgb(250, 119, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 12; background-color: rgb(215, 170, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 13; background-color: rgb(141, 247, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 14; background-color: rgb(1, 220, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 15; background-color: rgb(189, 49, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 16; background-color: rgb(164, 252, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 17; background-color: rgb(10, 88, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 18; background-color: rgb(149, 210, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 19; background-color: rgb(215, 109, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 21 / 20; background-color: rgb(146, 166, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 11; background-color: rgb(193, 224, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 12; background-color: rgb(6, 145, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 13; background-color: rgb(57, 236, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 14; background-color: rgb(62, 125, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 15; background-color: rgb(66, 7, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 16; background-color: rgb(172, 65, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 17; background-color: rgb(52, 38, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 18; background-color: rgb(9, 80, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 19; background-color: rgb(34, 87, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 22 / 20; background-color: rgb(209, 175, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 11; background-color: rgb(253, 155, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 12; background-color: rgb(189, 249, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 13; background-color: rgb(158, 74, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 14; background-color: rgb(253, 176, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 15; background-color: rgb(44, 232, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 16; background-color: rgb(235, 108, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 17; background-color: rgb(99, 212, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 18; background-color: rgb(156, 238, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 19; background-color: rgb(143, 139, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 23 / 20; background-color: rgb(203, 38, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 11; background-color: rgb(219, 10, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 12; background-color: rgb(15, 94, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 13; background-color: rgb(23, 185, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 14; background-color: rgb(190, 202, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 15; background-color: rgb(210, 56, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 16; background-color: rgb(120, 227, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 17; background-color: rgb(198, 208, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 18; background-color: rgb(153, 172, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 19; background-color: rgb(209, 151, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 24 / 20; background-color: rgb(36, 3, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 11; background-color: rgb(165, 32, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 12; background-color: rgb(65, 20, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 13; background-color: rgb(126, 22, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 14; background-color: rgb(250, 39, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 15; background-color: rgb(94, 46, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 16; background-color: rgb(111, 58, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 17; background-color: rgb(206, 97, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 18; background-color: rgb(71, 51, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 19; background-color: rgb(237, 13, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 25 / 20; background-color: rgb(23, 188, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 11; background-color: rgb(219, 237, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 12; background-color: rgb(6, 46, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 13; background-color: rgb(152, 65, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 14; background-color: rgb(67, 172, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 15; background-color: rgb(101, 92, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 16; background-color: rgb(167, 128, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 17; background-color: rgb(18, 100, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 18; background-color: rgb(55, 94, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 19; background-color: rgb(23, 141, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 26 / 20; background-color: rgb(93, 91, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 11; background-color: rgb(207, 151, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 12; background-color: rgb(176, 23, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 13; background-color: rgb(96, 197, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 14; background-color: rgb(99, 23, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 15; background-color: rgb(231, 234, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 16; background-color: rgb(121, 228, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 17; background-color: rgb(223, 206, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 18; background-color: rgb(23, 89, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 19; background-color: rgb(174, 195, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 27 / 20; background-color: rgb(164, 120, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 11; background-color: rgb(219, 250, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 12; background-color: rgb(50, 148, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 13; background-color: rgb(22, 5, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 14; background-color: rgb(244, 168, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 15; background-color: rgb(78, 207, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 16; background-color: rgb(208, 50, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 17; background-color: rgb(104, 110, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 18; background-color: rgb(104, 240, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 19; background-color: rgb(155, 151, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 28 / 20; background-color: rgb(78, 119, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 11; background-color: rgb(99, 22, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 12; background-color: rgb(20, 35, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 13; background-color: rgb(205, 17, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 14; background-color: rgb(145, 59, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 15; background-color: rgb(56, 40, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 16; background-color: rgb(53, 57, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 17; background-color: rgb(14, 73, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 18; background-color: rgb(145, 76, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 19; background-color: rgb(136, 14, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 29 / 20; background-color: rgb(254, 79, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 11; background-color: rgb(153, 207, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 12; background-color: rgb(215, 33, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 13; background-color: rgb(137, 237, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 14; background-color: rgb(183, 125, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 15; background-color: rgb(254, 131, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 16; background-color: rgb(17, 74, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 17; background-color: rgb(134, 15, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 18; background-color: rgb(231, 214, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 19; background-color: rgb(39, 221, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 30 / 20; background-color: rgb(132, 62, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 1; background-color: rgb(16, 110, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 2; background-color: rgb(9, 6, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 3; background-color: rgb(124, 59, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 4; background-color: rgb(190, 187, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 5; background-color: rgb(178, 90, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 6; background-color: rgb(205, 26, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 7; background-color: rgb(123, 148, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 8; background-color: rgb(205, 242, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 9; background-color: rgb(217, 238, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 10; background-color: rgb(149, 192, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 11; background-color: rgb(133, 234, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 12; background-color: rgb(99, 190, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 13; background-color: rgb(100, 228, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 14; background-color: rgb(59, 181, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 15; background-color: rgb(191, 100, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 16; background-color: rgb(55, 137, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 17; background-color: rgb(107, 5, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 18; background-color: rgb(192, 129, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 19; background-color: rgb(65, 14, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 31 / 20; background-color: rgb(226, 108, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 1; background-color: rgb(254, 123, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 2; background-color: rgb(215, 97, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 3; background-color: rgb(159, 164, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 4; background-color: rgb(163, 92, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 5; background-color: rgb(187, 62, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 6; background-color: rgb(202, 181, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 7; background-color: rgb(198, 225, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 8; background-color: rgb(84, 188, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 9; background-color: rgb(85, 245, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 10; background-color: rgb(137, 228, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 11; background-color: rgb(89, 77, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 12; background-color: rgb(111, 68, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 13; background-color: rgb(5, 155, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 14; background-color: rgb(39, 128, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 15; background-color: rgb(7, 233, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 16; background-color: rgb(195, 122, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 17; background-color: rgb(184, 166, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 18; background-color: rgb(14, 231, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 19; background-color: rgb(130, 78, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 32 / 20; background-color: rgb(77, 15, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 1; background-color: rgb(97, 16, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 2; background-color: rgb(146, 109, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 3; background-color: rgb(18, 46, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 4; background-color: rgb(229, 130, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 5; background-color: rgb(230, 232, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 6; background-color: rgb(144, 132, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 7; background-color: rgb(72, 220, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 8; background-color: rgb(96, 176, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 9; background-color: rgb(45, 109, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 10; background-color: rgb(48, 93, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 11; background-color: rgb(88, 15, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 12; background-color: rgb(174, 74, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 13; background-color: rgb(236, 106, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 14; background-color: rgb(132, 141, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 15; background-color: rgb(157, 34, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 16; background-color: rgb(124, 221, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 17; background-color: rgb(58, 40, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 18; background-color: rgb(102, 202, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 19; background-color: rgb(107, 39, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 33 / 20; background-color: rgb(214, 82, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 1; background-color: rgb(123, 121, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 2; background-color: rgb(155, 138, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 3; background-color: rgb(217, 245, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 4; background-color: rgb(128, 164, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 5; background-color: rgb(43, 78, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 6; background-color: rgb(31, 74, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 7; background-color: rgb(32, 93, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 8; background-color: rgb(118, 56, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 9; background-color: rgb(68, 204, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 10; background-color: rgb(183, 134, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 11; background-color: rgb(213, 189, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 12; background-color: rgb(212, 218, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 13; background-color: rgb(32, 72, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 14; background-color: rgb(216, 142, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 15; background-color: rgb(214, 84, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 16; background-color: rgb(47, 20, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 17; background-color: rgb(187, 167, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 18; background-color: rgb(115, 18, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 19; background-color: rgb(194, 189, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 34 / 20; background-color: rgb(59, 158, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 1; background-color: rgb(128, 28, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 2; background-color: rgb(153, 7, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 3; background-color: rgb(226, 89, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 4; background-color: rgb(5, 33, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 5; background-color: rgb(180, 248, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 6; background-color: rgb(205, 20, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 7; background-color: rgb(28, 200, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 8; background-color: rgb(127, 65, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 9; background-color: rgb(143, 219, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 10; background-color: rgb(4, 85, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 11; background-color: rgb(190, 113, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 12; background-color: rgb(172, 154, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 13; background-color: rgb(253, 238, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 14; background-color: rgb(141, 81, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 15; background-color: rgb(188, 206, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 16; background-color: rgb(149, 77, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 17; background-color: rgb(212, 124, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 18; background-color: rgb(134, 27, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 19; background-color: rgb(252, 114, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 35 / 20; background-color: rgb(240, 190, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 1; background-color: rgb(170, 108, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 2; background-color: rgb(170, 202, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 3; background-color: rgb(16, 58, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 4; background-color: rgb(124, 98, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 5; background-color: rgb(245, 105, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 6; background-color: rgb(252, 155, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 7; background-color: rgb(11, 39, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 8; background-color: rgb(175, 10, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 9; background-color: rgb(29, 83, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 10; background-color: rgb(207, 137, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 11; background-color: rgb(117, 208, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 12; background-color: rgb(164, 87, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 13; background-color: rgb(10, 148, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 14; background-color: rgb(66, 106, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 15; background-color: rgb(203, 80, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 16; background-color: rgb(141, 96, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 17; background-color: rgb(59, 121, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 18; background-color: rgb(79, 206, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 19; background-color: rgb(107, 66, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 36 / 20; background-color: rgb(162, 27, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 1; background-color: rgb(82, 148, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 2; background-color: rgb(41, 212, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 3; background-color: rgb(143, 37, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 4; background-color: rgb(193, 99, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 5; background-color: rgb(118, 116, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 6; background-color: rgb(82, 162, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 7; background-color: rgb(214, 215, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 8; background-color: rgb(96, 131, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 9; background-color: rgb(21, 136, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 10; background-color: rgb(187, 24, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 11; background-color: rgb(36, 232, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 12; background-color: rgb(26, 112, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 13; background-color: rgb(226, 56, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 14; background-color: rgb(232, 51, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 15; background-color: rgb(57, 151, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 16; background-color: rgb(124, 131, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 17; background-color: rgb(157, 134, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 18; background-color: rgb(21, 249, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 19; background-color: rgb(238, 23, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 37 / 20; background-color: rgb(69, 110, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 1; background-color: rgb(24, 45, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 2; background-color: rgb(63, 57, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 3; background-color: rgb(227, 24, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 4; background-color: rgb(63, 118, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 5; background-color: rgb(70, 32, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 6; background-color: rgb(225, 73, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 7; background-color: rgb(223, 30, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 8; background-color: rgb(193, 130, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 9; background-color: rgb(132, 16, 19)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 10; background-color: rgb(95, 182, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 11; background-color: rgb(153, 14, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 12; background-color: rgb(199, 142, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 13; background-color: rgb(157, 197, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 14; background-color: rgb(55, 202, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 15; background-color: rgb(155, 126, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 16; background-color: rgb(85, 100, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 17; background-color: rgb(212, 249, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 18; background-color: rgb(61, 40, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 19; background-color: rgb(24, 67, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 38 / 20; background-color: rgb(157, 185, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 1; background-color: rgb(220, 220, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 2; background-color: rgb(11, 59, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 3; background-color: rgb(221, 75, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 4; background-color: rgb(71, 143, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 5; background-color: rgb(38, 158, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 6; background-color: rgb(20, 203, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 7; background-color: rgb(142, 209, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 8; background-color: rgb(17, 183, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 9; background-color: rgb(187, 239, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 10; background-color: rgb(17, 248, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 11; background-color: rgb(179, 234, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 12; background-color: rgb(176, 179, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 13; background-color: rgb(125, 145, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 14; background-color: rgb(99, 232, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 15; background-color: rgb(102, 2, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 16; background-color: rgb(59, 62, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 17; background-color: rgb(248, 210, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 18; background-color: rgb(186, 160, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 19; background-color: rgb(24, 32, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 39 / 20; background-color: rgb(38, 27, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 1; background-color: rgb(162, 41, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 2; background-color: rgb(100, 110, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 3; background-color: rgb(162, 102, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 4; background-color: rgb(160, 220, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 5; background-color: rgb(25, 81, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 6; background-color: rgb(112, 111, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 7; background-color: rgb(150, 252, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 8; background-color: rgb(214, 175, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 9; background-color: rgb(79, 74, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 10; background-color: rgb(47, 71, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 11; background-color: rgb(167, 150, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 12; background-color: rgb(58, 30, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 13; background-color: rgb(83, 89, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 14; background-color: rgb(206, 108, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 15; background-color: rgb(165, 85, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 16; background-color: rgb(116, 70, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 17; background-color: rgb(215, 168, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 18; background-color: rgb(114, 9, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 19; background-color: rgb(15, 181, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 40 / 20; background-color: rgb(79, 49, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 1; background-color: rgb(50, 42, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 2; background-color: rgb(128, 177, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 3; background-color: rgb(158, 166, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 4; background-color: rgb(43, 84, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 5; background-color: rgb(182, 156, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 6; background-color: rgb(154, 36, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 7; background-color: rgb(126, 172, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 8; background-color: rgb(183, 152, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 9; background-color: rgb(5, 169, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 10; background-color: rgb(46, 61, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 11; background-color: rgb(163, 175, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 12; background-color: rgb(145, 47, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 13; background-color: rgb(246, 183, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 14; background-color: rgb(193, 12, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 15; background-color: rgb(191, 250, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 16; background-color: rgb(231, 225, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 17; background-color: rgb(217, 46, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 18; background-color: rgb(224, 242, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 19; background-color: rgb(138, 33, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 41 / 20; background-color: rgb(58, 179, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 1; background-color: rgb(2, 153, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 2; background-color: rgb(96, 83, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 3; background-color: rgb(120, 155, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 4; background-color: rgb(231, 52, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 5; background-color: rgb(205, 248, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 6; background-color: rgb(39, 116, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 7; background-color: rgb(241, 23, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 8; background-color: rgb(249, 67, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 9; background-color: rgb(213, 132, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 10; background-color: rgb(187, 241, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 11; background-color: rgb(233, 111, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 12; background-color: rgb(25, 163, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 13; background-color: rgb(162, 51, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 14; background-color: rgb(65, 15, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 15; background-color: rgb(98, 251, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 16; background-color: rgb(124, 53, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 17; background-color: rgb(237, 179, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 18; background-color: rgb(20, 86, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 19; background-color: rgb(218, 104, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 42 / 20; background-color: rgb(62, 55, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 1; background-color: rgb(162, 207, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 2; background-color: rgb(82, 137, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 3; background-color: rgb(113, 15, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 4; background-color: rgb(27, 156, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 5; background-color: rgb(11, 186, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 6; background-color: rgb(213, 43, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 7; background-color: rgb(163, 26, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 8; background-color: rgb(122, 136, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 9; background-color: rgb(200, 78, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 10; background-color: rgb(81, 154, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 11; background-color: rgb(98, 83, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 12; background-color: rgb(227, 142, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 13; background-color: rgb(31, 186, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 14; background-color: rgb(166, 101, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 15; background-color: rgb(128, 25, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 16; background-color: rgb(119, 31, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 17; background-color: rgb(140, 76, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 18; background-color: rgb(72, 135, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 19; background-color: rgb(180, 252, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 43 / 20; background-color: rgb(171, 174, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 1; background-color: rgb(148, 54, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 2; background-color: rgb(49, 97, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 3; background-color: rgb(73, 64, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 4; background-color: rgb(8, 142, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 5; background-color: rgb(132, 207, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 6; background-color: rgb(171, 116, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 7; background-color: rgb(124, 237, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 8; background-color: rgb(118, 200, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 9; background-color: rgb(178, 215, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 10; background-color: rgb(201, 188, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 11; background-color: rgb(235, 9, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 12; background-color: rgb(230, 73, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 13; background-color: rgb(75, 151, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 14; background-color: rgb(56, 244, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 15; background-color: rgb(124, 120, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 16; background-color: rgb(102, 115, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 17; background-color: rgb(46, 199, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 18; background-color: rgb(169, 69, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 19; background-color: rgb(217, 188, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 44 / 20; background-color: rgb(224, 93, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 1; background-color: rgb(253, 217, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 2; background-color: rgb(31, 80, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 3; background-color: rgb(16, 239, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 4; background-color: rgb(7, 159, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 5; background-color: rgb(66, 217, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 6; background-color: rgb(54, 44, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 7; background-color: rgb(32, 45, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 8; background-color: rgb(81, 189, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 9; background-color: rgb(81, 75, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 10; background-color: rgb(63, 81, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 11; background-color: rgb(200, 97, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 12; background-color: rgb(222, 229, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 13; background-color: rgb(99, 113, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 14; background-color: rgb(138, 238, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 15; background-color: rgb(241, 221, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 16; background-color: rgb(46, 162, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 17; background-color: rgb(29, 63, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 18; background-color: rgb(127, 162, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 19; background-color: rgb(188, 89, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 45 / 20; background-color: rgb(103, 147, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 1; background-color: rgb(27, 155, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 2; background-color: rgb(181, 130, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 3; background-color: rgb(166, 223, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 4; background-color: rgb(221, 193, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 5; background-color: rgb(185, 92, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 6; background-color: rgb(180, 103, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 7; background-color: rgb(137, 30, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 8; background-color: rgb(131, 201, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 9; background-color: rgb(12, 119, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 10; background-color: rgb(26, 187, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 11; background-color: rgb(84, 52, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 12; background-color: rgb(158, 187, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 13; background-color: rgb(119, 158, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 14; background-color: rgb(83, 56, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 15; background-color: rgb(166, 123, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 16; background-color: rgb(77, 176, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 17; background-color: rgb(156, 141, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 18; background-color: rgb(240, 123, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 19; background-color: rgb(67, 43, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 46 / 20; background-color: rgb(37, 24, 31)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 1; background-color: rgb(54, 189, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 2; background-color: rgb(191, 182, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 3; background-color: rgb(228, 58, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 4; background-color: rgb(250, 45, 113)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 5; background-color: rgb(109, 117, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 6; background-color: rgb(135, 20, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 7; background-color: rgb(109, 113, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 8; background-color: rgb(57, 180, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 9; background-color: rgb(168, 176, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 10; background-color: rgb(182, 146, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 11; background-color: rgb(239, 2, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 12; background-color: rgb(51, 104, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 13; background-color: rgb(50, 6, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 14; background-color: rgb(69, 186, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 15; background-color: rgb(119, 80, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 16; background-color: rgb(214, 54, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 17; background-color: rgb(175, 199, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 18; background-color: rgb(242, 228, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 19; background-color: rgb(195, 33, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 47 / 20; background-color: rgb(41, 248, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 1; background-color: rgb(208, 57, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 2; background-color: rgb(142, 99, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 3; background-color: rgb(98, 120, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 4; background-color: rgb(49, 195, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 5; background-color: rgb(24, 103, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 6; background-color: rgb(178, 55, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 7; background-color: rgb(35, 244, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 8; background-color: rgb(186, 161, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 9; background-color: rgb(35, 41, 65)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 10; background-color: rgb(82, 102, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 11; background-color: rgb(24, 245, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 12; background-color: rgb(8, 76, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 13; background-color: rgb(43, 81, 205)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 14; background-color: rgb(18, 26, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 15; background-color: rgb(156, 186, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 16; background-color: rgb(178, 201, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 17; background-color: rgb(114, 186, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 18; background-color: rgb(223, 5, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 19; background-color: rgb(107, 128, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 48 / 20; background-color: rgb(90, 233, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 1; background-color: rgb(96, 147, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 2; background-color: rgb(104, 85, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 3; background-color: rgb(35, 86, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 4; background-color: rgb(182, 235, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 5; background-color: rgb(71, 64, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 6; background-color: rgb(145, 195, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 7; background-color: rgb(168, 229, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 8; background-color: rgb(181, 148, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 9; background-color: rgb(133, 234, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 10; background-color: rgb(159, 122, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 11; background-color: rgb(84, 156, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 12; background-color: rgb(165, 123, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 13; background-color: rgb(210, 70, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 14; background-color: rgb(183, 129, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 15; background-color: rgb(146, 48, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 16; background-color: rgb(206, 131, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 17; background-color: rgb(105, 97, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 18; background-color: rgb(144, 180, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 19; background-color: rgb(130, 218, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 49 / 20; background-color: rgb(25, 212, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 1; background-color: rgb(191, 68, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 2; background-color: rgb(120, 216, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 3; background-color: rgb(35, 148, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 4; background-color: rgb(237, 77, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 5; background-color: rgb(232, 51, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 6; background-color: rgb(235, 225, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 7; background-color: rgb(231, 108, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 8; background-color: rgb(226, 182, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 9; background-color: rgb(187, 69, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 10; background-color: rgb(27, 199, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 11; background-color: rgb(75, 24, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 12; background-color: rgb(160, 219, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 13; background-color: rgb(148, 140, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 14; background-color: rgb(250, 0, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 15; background-color: rgb(227, 5, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 16; background-color: rgb(98, 167, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 17; background-color: rgb(132, 24, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 18; background-color: rgb(140, 152, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 19; background-color: rgb(100, 220, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 50 / 20; background-color: rgb(100, 70, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 1; background-color: rgb(205, 47, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 2; background-color: rgb(32, 175, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 3; background-color: rgb(177, 144, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 4; background-color: rgb(6, 132, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 5; background-color: rgb(92, 210, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 6; background-color: rgb(213, 216, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 7; background-color: rgb(19, 47, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 8; background-color: rgb(188, 48, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 9; background-color: rgb(91, 79, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 10; background-color: rgb(97, 61, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 11; background-color: rgb(44, 143, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 12; background-color: rgb(49, 4, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 13; background-color: rgb(238, 99, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 14; background-color: rgb(117, 211, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 15; background-color: rgb(51, 38, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 16; background-color: rgb(26, 46, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 17; background-color: rgb(164, 39, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 18; background-color: rgb(243, 167, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 19; background-color: rgb(23, 97, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 51 / 20; background-color: rgb(35, 250, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 1; background-color: rgb(251, 231, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 2; background-color: rgb(246, 2, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 3; background-color: rgb(193, 111, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 4; background-color: rgb(23, 159, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 5; background-color: rgb(194, 20, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 6; background-color: rgb(101, 130, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 7; background-color: rgb(53, 120, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 8; background-color: rgb(138, 250, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 9; background-color: rgb(18, 20, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 10; background-color: rgb(233, 230, 103)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 11; background-color: rgb(46, 155, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 12; background-color: rgb(102, 199, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 13; background-color: rgb(9, 114, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 14; background-color: rgb(254, 126, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 15; background-color: rgb(231, 100, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 16; background-color: rgb(206, 170, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 17; background-color: rgb(25, 83, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 18; background-color: rgb(167, 220, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 19; background-color: rgb(217, 133, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 52 / 20; background-color: rgb(48, 191, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 1; background-color: rgb(187, 161, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 2; background-color: rgb(211, 24, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 3; background-color: rgb(254, 103, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 4; background-color: rgb(252, 227, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 5; background-color: rgb(239, 219, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 6; background-color: rgb(184, 25, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 7; background-color: rgb(120, 230, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 8; background-color: rgb(0, 12, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 9; background-color: rgb(17, 106, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 10; background-color: rgb(232, 137, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 11; background-color: rgb(7, 118, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 12; background-color: rgb(221, 35, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 13; background-color: rgb(126, 149, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 14; background-color: rgb(11, 98, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 15; background-color: rgb(188, 102, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 16; background-color: rgb(2, 83, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 17; background-color: rgb(243, 58, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 18; background-color: rgb(154, 114, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 19; background-color: rgb(232, 230, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 53 / 20; background-color: rgb(206, 71, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 1; background-color: rgb(200, 230, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 2; background-color: rgb(94, 74, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 3; background-color: rgb(250, 16, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 4; background-color: rgb(157, 109, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 5; background-color: rgb(194, 106, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 6; background-color: rgb(145, 14, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 7; background-color: rgb(5, 23, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 8; background-color: rgb(152, 243, 216)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 9; background-color: rgb(225, 84, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 10; background-color: rgb(27, 156, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 11; background-color: rgb(229, 173, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 12; background-color: rgb(201, 84, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 13; background-color: rgb(107, 34, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 14; background-color: rgb(44, 4, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 15; background-color: rgb(139, 150, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 16; background-color: rgb(230, 175, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 17; background-color: rgb(130, 98, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 18; background-color: rgb(185, 24, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 19; background-color: rgb(204, 205, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 54 / 20; background-color: rgb(224, 205, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 1; background-color: rgb(218, 236, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 2; background-color: rgb(118, 11, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 3; background-color: rgb(189, 121, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 4; background-color: rgb(107, 200, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 5; background-color: rgb(8, 194, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 6; background-color: rgb(114, 195, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 7; background-color: rgb(90, 52, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 8; background-color: rgb(115, 68, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 9; background-color: rgb(11, 242, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 10; background-color: rgb(58, 138, 161)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 11; background-color: rgb(169, 22, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 12; background-color: rgb(62, 92, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 13; background-color: rgb(33, 43, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 14; background-color: rgb(126, 202, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 15; background-color: rgb(151, 5, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 16; background-color: rgb(49, 130, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 17; background-color: rgb(22, 110, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 18; background-color: rgb(168, 221, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 19; background-color: rgb(30, 36, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 55 / 20; background-color: rgb(63, 102, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 1; background-color: rgb(204, 98, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 2; background-color: rgb(89, 49, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 3; background-color: rgb(169, 169, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 4; background-color: rgb(212, 124, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 5; background-color: rgb(245, 118, 141)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 6; background-color: rgb(69, 136, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 7; background-color: rgb(250, 99, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 8; background-color: rgb(154, 142, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 9; background-color: rgb(32, 23, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 10; background-color: rgb(87, 21, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 11; background-color: rgb(174, 145, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 12; background-color: rgb(153, 90, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 13; background-color: rgb(80, 11, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 14; background-color: rgb(33, 21, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 15; background-color: rgb(139, 233, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 16; background-color: rgb(150, 207, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 17; background-color: rgb(52, 170, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 18; background-color: rgb(90, 172, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 19; background-color: rgb(229, 18, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 56 / 20; background-color: rgb(155, 83, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 1; background-color: rgb(94, 235, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 2; background-color: rgb(0, 160, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 3; background-color: rgb(200, 98, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 4; background-color: rgb(47, 244, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 5; background-color: rgb(184, 229, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 6; background-color: rgb(28, 15, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 7; background-color: rgb(54, 243, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 8; background-color: rgb(105, 225, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 9; background-color: rgb(46, 168, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 10; background-color: rgb(78, 131, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 11; background-color: rgb(246, 200, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 12; background-color: rgb(252, 184, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 13; background-color: rgb(254, 95, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 14; background-color: rgb(81, 198, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 15; background-color: rgb(41, 37, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 16; background-color: rgb(205, 172, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 17; background-color: rgb(50, 120, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 18; background-color: rgb(145, 79, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 19; background-color: rgb(121, 90, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 57 / 20; background-color: rgb(155, 59, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 1; background-color: rgb(57, 53, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 2; background-color: rgb(61, 189, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 3; background-color: rgb(113, 254, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 4; background-color: rgb(133, 114, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 5; background-color: rgb(184, 94, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 6; background-color: rgb(96, 61, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 7; background-color: rgb(40, 231, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 8; background-color: rgb(193, 252, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 9; background-color: rgb(189, 248, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 10; background-color: rgb(37, 77, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 11; background-color: rgb(62, 129, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 12; background-color: rgb(120, 212, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 13; background-color: rgb(10, 7, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 14; background-color: rgb(254, 73, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 15; background-color: rgb(5, 87, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 16; background-color: rgb(235, 77, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 17; background-color: rgb(144, 55, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 18; background-color: rgb(100, 111, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 19; background-color: rgb(20, 77, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 58 / 20; background-color: rgb(91, 99, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 1; background-color: rgb(121, 36, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 2; background-color: rgb(175, 14, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 3; background-color: rgb(107, 149, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 4; background-color: rgb(247, 21, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 5; background-color: rgb(239, 122, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 6; background-color: rgb(73, 78, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 7; background-color: rgb(82, 7, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 8; background-color: rgb(242, 83, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 9; background-color: rgb(172, 190, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 10; background-color: rgb(73, 114, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 11; background-color: rgb(202, 181, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 12; background-color: rgb(199, 82, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 13; background-color: rgb(234, 39, 219)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 14; background-color: rgb(113, 182, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 15; background-color: rgb(169, 201, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 16; background-color: rgb(236, 191, 32)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 17; background-color: rgb(241, 69, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 18; background-color: rgb(179, 178, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 19; background-color: rgb(108, 239, 230)'></div>
-<div class='gridItem' style='-webkit-grid-area: 59 / 20; background-color: rgb(204, 23, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 1; background-color: rgb(178, 157, 102)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 2; background-color: rgb(7, 184, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 3; background-color: rgb(95, 151, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 4; background-color: rgb(46, 36, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 5; background-color: rgb(189, 190, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 6; background-color: rgb(69, 204, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 7; background-color: rgb(177, 126, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 8; background-color: rgb(18, 232, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 9; background-color: rgb(202, 138, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 10; background-color: rgb(72, 159, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 11; background-color: rgb(43, 76, 219)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 12; background-color: rgb(99, 164, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 13; background-color: rgb(249, 71, 28)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 14; background-color: rgb(102, 148, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 15; background-color: rgb(225, 209, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 16; background-color: rgb(43, 53, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 17; background-color: rgb(66, 53, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 18; background-color: rgb(4, 190, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 19; background-color: rgb(174, 176, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 60 / 20; background-color: rgb(103, 233, 146)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 1; background-color: rgb(97, 140, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 2; background-color: rgb(165, 145, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 3; background-color: rgb(3, 60, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 4; background-color: rgb(236, 95, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 5; background-color: rgb(215, 184, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 6; background-color: rgb(190, 225, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 7; background-color: rgb(141, 128, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 8; background-color: rgb(137, 26, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 9; background-color: rgb(171, 64, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 10; background-color: rgb(219, 153, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 11; background-color: rgb(174, 144, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 12; background-color: rgb(123, 222, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 13; background-color: rgb(120, 251, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 14; background-color: rgb(62, 135, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 15; background-color: rgb(138, 208, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 16; background-color: rgb(186, 199, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 17; background-color: rgb(127, 95, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 18; background-color: rgb(222, 193, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 19; background-color: rgb(47, 63, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 61 / 20; background-color: rgb(221, 237, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 1; background-color: rgb(148, 12, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 2; background-color: rgb(173, 147, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 3; background-color: rgb(222, 135, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 4; background-color: rgb(73, 91, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 5; background-color: rgb(14, 86, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 6; background-color: rgb(46, 35, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 7; background-color: rgb(52, 109, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 8; background-color: rgb(92, 88, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 9; background-color: rgb(152, 94, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 10; background-color: rgb(148, 148, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 11; background-color: rgb(3, 166, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 12; background-color: rgb(215, 54, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 13; background-color: rgb(231, 90, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 14; background-color: rgb(54, 87, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 15; background-color: rgb(113, 129, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 16; background-color: rgb(165, 195, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 17; background-color: rgb(223, 84, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 18; background-color: rgb(205, 190, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 19; background-color: rgb(164, 178, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 62 / 20; background-color: rgb(243, 39, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 1; background-color: rgb(6, 11, 59)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 2; background-color: rgb(48, 226, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 3; background-color: rgb(19, 34, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 4; background-color: rgb(179, 216, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 5; background-color: rgb(83, 239, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 6; background-color: rgb(1, 75, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 7; background-color: rgb(214, 215, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 8; background-color: rgb(178, 239, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 9; background-color: rgb(177, 156, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 10; background-color: rgb(114, 4, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 11; background-color: rgb(235, 5, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 12; background-color: rgb(127, 62, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 13; background-color: rgb(78, 126, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 14; background-color: rgb(239, 141, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 15; background-color: rgb(13, 73, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 16; background-color: rgb(197, 148, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 17; background-color: rgb(135, 90, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 18; background-color: rgb(100, 80, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 19; background-color: rgb(4, 202, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 63 / 20; background-color: rgb(239, 249, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 1; background-color: rgb(75, 11, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 2; background-color: rgb(75, 140, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 3; background-color: rgb(116, 238, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 4; background-color: rgb(106, 48, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 5; background-color: rgb(10, 178, 124)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 6; background-color: rgb(76, 251, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 7; background-color: rgb(222, 188, 185)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 8; background-color: rgb(81, 125, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 9; background-color: rgb(142, 82, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 10; background-color: rgb(74, 56, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 11; background-color: rgb(119, 56, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 12; background-color: rgb(97, 210, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 13; background-color: rgb(130, 168, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 14; background-color: rgb(183, 150, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 15; background-color: rgb(54, 253, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 16; background-color: rgb(1, 190, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 17; background-color: rgb(190, 3, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 18; background-color: rgb(92, 6, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 19; background-color: rgb(250, 132, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 64 / 20; background-color: rgb(17, 14, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 1; background-color: rgb(31, 89, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 2; background-color: rgb(69, 12, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 3; background-color: rgb(39, 21, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 4; background-color: rgb(81, 230, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 5; background-color: rgb(168, 156, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 6; background-color: rgb(161, 248, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 7; background-color: rgb(54, 110, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 8; background-color: rgb(231, 14, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 9; background-color: rgb(16, 77, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 10; background-color: rgb(88, 74, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 11; background-color: rgb(136, 33, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 12; background-color: rgb(46, 36, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 13; background-color: rgb(239, 77, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 14; background-color: rgb(183, 94, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 15; background-color: rgb(67, 122, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 16; background-color: rgb(182, 28, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 17; background-color: rgb(12, 119, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 18; background-color: rgb(108, 143, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 19; background-color: rgb(68, 141, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 65 / 20; background-color: rgb(188, 204, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 1; background-color: rgb(227, 104, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 2; background-color: rgb(235, 248, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 3; background-color: rgb(200, 178, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 4; background-color: rgb(177, 177, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 5; background-color: rgb(115, 23, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 6; background-color: rgb(175, 226, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 7; background-color: rgb(185, 207, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 8; background-color: rgb(205, 101, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 9; background-color: rgb(58, 212, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 10; background-color: rgb(207, 145, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 11; background-color: rgb(243, 236, 89)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 12; background-color: rgb(146, 13, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 13; background-color: rgb(63, 248, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 14; background-color: rgb(199, 141, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 15; background-color: rgb(89, 22, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 16; background-color: rgb(135, 156, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 17; background-color: rgb(250, 243, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 18; background-color: rgb(20, 94, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 19; background-color: rgb(55, 172, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 66 / 20; background-color: rgb(234, 30, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 1; background-color: rgb(201, 210, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 2; background-color: rgb(208, 72, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 3; background-color: rgb(172, 116, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 4; background-color: rgb(19, 197, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 5; background-color: rgb(73, 208, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 6; background-color: rgb(165, 244, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 7; background-color: rgb(215, 66, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 8; background-color: rgb(178, 194, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 9; background-color: rgb(6, 195, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 10; background-color: rgb(3, 76, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 11; background-color: rgb(71, 92, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 12; background-color: rgb(209, 230, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 13; background-color: rgb(105, 103, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 14; background-color: rgb(160, 200, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 15; background-color: rgb(178, 92, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 16; background-color: rgb(232, 151, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 17; background-color: rgb(124, 35, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 18; background-color: rgb(118, 227, 213)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 19; background-color: rgb(219, 224, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 67 / 20; background-color: rgb(211, 168, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 1; background-color: rgb(1, 41, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 2; background-color: rgb(45, 184, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 3; background-color: rgb(67, 228, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 4; background-color: rgb(100, 78, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 5; background-color: rgb(148, 170, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 6; background-color: rgb(31, 25, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 7; background-color: rgb(68, 240, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 8; background-color: rgb(19, 42, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 9; background-color: rgb(60, 100, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 10; background-color: rgb(22, 149, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 11; background-color: rgb(100, 14, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 12; background-color: rgb(51, 24, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 13; background-color: rgb(180, 146, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 14; background-color: rgb(55, 243, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 15; background-color: rgb(239, 239, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 16; background-color: rgb(115, 201, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 17; background-color: rgb(240, 221, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 18; background-color: rgb(179, 162, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 19; background-color: rgb(123, 253, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 68 / 20; background-color: rgb(223, 149, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 1; background-color: rgb(164, 167, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 2; background-color: rgb(6, 65, 15)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 3; background-color: rgb(188, 174, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 4; background-color: rgb(168, 84, 74)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 5; background-color: rgb(239, 20, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 6; background-color: rgb(199, 19, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 7; background-color: rgb(206, 51, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 8; background-color: rgb(109, 184, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 9; background-color: rgb(217, 59, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 10; background-color: rgb(172, 225, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 11; background-color: rgb(142, 89, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 12; background-color: rgb(135, 195, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 13; background-color: rgb(239, 128, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 14; background-color: rgb(191, 180, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 15; background-color: rgb(18, 130, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 16; background-color: rgb(83, 131, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 17; background-color: rgb(142, 176, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 18; background-color: rgb(26, 228, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 19; background-color: rgb(138, 250, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 69 / 20; background-color: rgb(51, 227, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 1; background-color: rgb(61, 155, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 2; background-color: rgb(123, 95, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 3; background-color: rgb(41, 198, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 4; background-color: rgb(210, 63, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 5; background-color: rgb(129, 191, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 6; background-color: rgb(26, 198, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 7; background-color: rgb(222, 210, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 8; background-color: rgb(94, 245, 228)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 9; background-color: rgb(52, 208, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 10; background-color: rgb(197, 143, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 11; background-color: rgb(199, 66, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 12; background-color: rgb(137, 44, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 13; background-color: rgb(209, 148, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 14; background-color: rgb(109, 87, 175)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 15; background-color: rgb(177, 150, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 16; background-color: rgb(27, 127, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 17; background-color: rgb(27, 70, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 18; background-color: rgb(6, 163, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 19; background-color: rgb(212, 217, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 70 / 20; background-color: rgb(227, 68, 193)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 1; background-color: rgb(194, 1, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 2; background-color: rgb(27, 144, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 3; background-color: rgb(138, 104, 120)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 4; background-color: rgb(32, 64, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 5; background-color: rgb(110, 96, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 6; background-color: rgb(25, 69, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 7; background-color: rgb(242, 223, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 8; background-color: rgb(67, 114, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 9; background-color: rgb(198, 147, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 10; background-color: rgb(52, 35, 238)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 11; background-color: rgb(9, 169, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 12; background-color: rgb(250, 98, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 13; background-color: rgb(112, 57, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 14; background-color: rgb(248, 181, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 15; background-color: rgb(233, 167, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 16; background-color: rgb(113, 70, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 17; background-color: rgb(154, 52, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 18; background-color: rgb(8, 224, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 19; background-color: rgb(93, 32, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 71 / 20; background-color: rgb(120, 233, 252)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 1; background-color: rgb(57, 201, 57)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 2; background-color: rgb(16, 248, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 3; background-color: rgb(91, 123, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 4; background-color: rgb(22, 60, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 5; background-color: rgb(55, 121, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 6; background-color: rgb(87, 190, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 7; background-color: rgb(52, 15, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 8; background-color: rgb(94, 45, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 9; background-color: rgb(135, 212, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 10; background-color: rgb(106, 247, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 11; background-color: rgb(71, 173, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 12; background-color: rgb(175, 33, 66)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 13; background-color: rgb(96, 62, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 14; background-color: rgb(134, 122, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 15; background-color: rgb(58, 145, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 16; background-color: rgb(109, 247, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 17; background-color: rgb(9, 105, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 18; background-color: rgb(24, 144, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 19; background-color: rgb(146, 195, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 72 / 20; background-color: rgb(155, 128, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 1; background-color: rgb(88, 9, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 2; background-color: rgb(171, 6, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 3; background-color: rgb(249, 203, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 4; background-color: rgb(79, 218, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 5; background-color: rgb(79, 15, 42)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 6; background-color: rgb(191, 127, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 7; background-color: rgb(39, 104, 189)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 8; background-color: rgb(119, 104, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 9; background-color: rgb(190, 60, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 10; background-color: rgb(169, 104, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 11; background-color: rgb(223, 253, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 12; background-color: rgb(90, 232, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 13; background-color: rgb(225, 155, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 14; background-color: rgb(207, 107, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 15; background-color: rgb(3, 117, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 16; background-color: rgb(254, 78, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 17; background-color: rgb(120, 127, 135)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 18; background-color: rgb(21, 73, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 19; background-color: rgb(11, 18, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 73 / 20; background-color: rgb(193, 87, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 1; background-color: rgb(44, 250, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 2; background-color: rgb(95, 62, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 3; background-color: rgb(179, 123, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 4; background-color: rgb(101, 159, 51)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 5; background-color: rgb(219, 189, 177)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 6; background-color: rgb(57, 188, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 7; background-color: rgb(4, 74, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 8; background-color: rgb(203, 51, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 9; background-color: rgb(165, 116, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 10; background-color: rgb(121, 163, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 11; background-color: rgb(223, 35, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 12; background-color: rgb(151, 47, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 13; background-color: rgb(117, 21, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 14; background-color: rgb(165, 36, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 15; background-color: rgb(243, 249, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 16; background-color: rgb(159, 155, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 17; background-color: rgb(146, 233, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 18; background-color: rgb(250, 179, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 19; background-color: rgb(29, 53, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 74 / 20; background-color: rgb(167, 225, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 1; background-color: rgb(236, 142, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 2; background-color: rgb(176, 122, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 3; background-color: rgb(123, 200, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 4; background-color: rgb(65, 26, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 5; background-color: rgb(238, 150, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 6; background-color: rgb(41, 188, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 7; background-color: rgb(229, 86, 237)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 8; background-color: rgb(39, 23, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 9; background-color: rgb(206, 19, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 10; background-color: rgb(246, 251, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 11; background-color: rgb(219, 89, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 12; background-color: rgb(150, 166, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 13; background-color: rgb(87, 201, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 14; background-color: rgb(158, 43, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 15; background-color: rgb(178, 214, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 16; background-color: rgb(159, 46, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 17; background-color: rgb(174, 142, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 18; background-color: rgb(69, 77, 55)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 19; background-color: rgb(100, 164, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 75 / 20; background-color: rgb(211, 1, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 1; background-color: rgb(72, 242, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 2; background-color: rgb(2, 246, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 3; background-color: rgb(151, 118, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 4; background-color: rgb(216, 161, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 5; background-color: rgb(173, 240, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 6; background-color: rgb(59, 124, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 7; background-color: rgb(187, 44, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 8; background-color: rgb(172, 59, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 9; background-color: rgb(125, 20, 104)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 10; background-color: rgb(130, 251, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 11; background-color: rgb(60, 9, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 12; background-color: rgb(29, 157, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 13; background-color: rgb(109, 66, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 14; background-color: rgb(157, 62, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 15; background-color: rgb(9, 177, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 16; background-color: rgb(67, 75, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 17; background-color: rgb(114, 49, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 18; background-color: rgb(24, 118, 105)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 19; background-color: rgb(243, 66, 233)'></div>
-<div class='gridItem' style='-webkit-grid-area: 76 / 20; background-color: rgb(100, 81, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 1; background-color: rgb(226, 179, 197)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 2; background-color: rgb(11, 200, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 3; background-color: rgb(223, 96, 10)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 4; background-color: rgb(140, 168, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 5; background-color: rgb(228, 58, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 6; background-color: rgb(66, 196, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 7; background-color: rgb(118, 185, 240)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 8; background-color: rgb(25, 224, 218)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 9; background-color: rgb(187, 170, 178)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 10; background-color: rgb(80, 211, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 11; background-color: rgb(78, 94, 125)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 12; background-color: rgb(24, 36, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 13; background-color: rgb(241, 73, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 14; background-color: rgb(126, 59, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 15; background-color: rgb(46, 101, 143)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 16; background-color: rgb(59, 111, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 17; background-color: rgb(58, 29, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 18; background-color: rgb(144, 79, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 19; background-color: rgb(65, 233, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 77 / 20; background-color: rgb(208, 28, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 1; background-color: rgb(221, 165, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 2; background-color: rgb(6, 244, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 3; background-color: rgb(95, 122, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 4; background-color: rgb(82, 36, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 5; background-color: rgb(139, 111, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 6; background-color: rgb(140, 189, 210)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 7; background-color: rgb(159, 225, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 8; background-color: rgb(216, 90, 168)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 9; background-color: rgb(117, 248, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 10; background-color: rgb(19, 168, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 11; background-color: rgb(11, 56, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 12; background-color: rgb(21, 176, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 13; background-color: rgb(159, 240, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 14; background-color: rgb(112, 16, 190)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 15; background-color: rgb(229, 65, 101)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 16; background-color: rgb(13, 58, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 17; background-color: rgb(56, 99, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 18; background-color: rgb(97, 197, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 19; background-color: rgb(93, 116, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 78 / 20; background-color: rgb(199, 47, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 1; background-color: rgb(105, 25, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 2; background-color: rgb(164, 141, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 3; background-color: rgb(224, 18, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 4; background-color: rgb(212, 19, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 5; background-color: rgb(106, 164, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 6; background-color: rgb(221, 7, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 7; background-color: rgb(52, 96, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 8; background-color: rgb(219, 96, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 9; background-color: rgb(253, 20, 162)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 10; background-color: rgb(49, 237, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 11; background-color: rgb(208, 23, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 12; background-color: rgb(242, 231, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 13; background-color: rgb(13, 221, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 14; background-color: rgb(188, 87, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 15; background-color: rgb(134, 224, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 16; background-color: rgb(181, 80, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 17; background-color: rgb(34, 59, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 18; background-color: rgb(162, 223, 52)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 19; background-color: rgb(151, 65, 41)'></div>
-<div class='gridItem' style='-webkit-grid-area: 79 / 20; background-color: rgb(145, 65, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 1; background-color: rgb(122, 230, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 2; background-color: rgb(215, 205, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 3; background-color: rgb(124, 165, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 4; background-color: rgb(238, 14, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 5; background-color: rgb(217, 143, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 6; background-color: rgb(137, 53, 68)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 7; background-color: rgb(161, 5, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 8; background-color: rgb(26, 143, 254)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 9; background-color: rgb(208, 132, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 10; background-color: rgb(143, 184, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 11; background-color: rgb(159, 155, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 12; background-color: rgb(60, 149, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 13; background-color: rgb(164, 63, 86)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 14; background-color: rgb(133, 41, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 15; background-color: rgb(28, 6, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 16; background-color: rgb(159, 122, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 17; background-color: rgb(156, 13, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 18; background-color: rgb(109, 241, 239)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 19; background-color: rgb(43, 160, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 80 / 20; background-color: rgb(6, 253, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 1; background-color: rgb(214, 100, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 2; background-color: rgb(41, 29, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 3; background-color: rgb(166, 79, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 4; background-color: rgb(217, 180, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 5; background-color: rgb(189, 242, 133)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 6; background-color: rgb(4, 79, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 7; background-color: rgb(58, 171, 127)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 8; background-color: rgb(110, 210, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 9; background-color: rgb(177, 78, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 10; background-color: rgb(72, 249, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 11; background-color: rgb(64, 169, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 12; background-color: rgb(60, 253, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 13; background-color: rgb(155, 49, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 14; background-color: rgb(97, 56, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 15; background-color: rgb(219, 189, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 16; background-color: rgb(70, 247, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 17; background-color: rgb(221, 64, 126)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 18; background-color: rgb(50, 46, 226)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 19; background-color: rgb(246, 109, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 81 / 20; background-color: rgb(37, 254, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 1; background-color: rgb(168, 205, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 2; background-color: rgb(180, 43, 198)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 3; background-color: rgb(212, 203, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 4; background-color: rgb(45, 53, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 5; background-color: rgb(187, 16, 195)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 6; background-color: rgb(242, 33, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 7; background-color: rgb(48, 254, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 8; background-color: rgb(129, 180, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 9; background-color: rgb(70, 64, 182)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 10; background-color: rgb(67, 142, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 11; background-color: rgb(225, 57, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 12; background-color: rgb(225, 30, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 13; background-color: rgb(118, 47, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 14; background-color: rgb(203, 203, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 15; background-color: rgb(76, 187, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 16; background-color: rgb(231, 243, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 17; background-color: rgb(236, 74, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 18; background-color: rgb(196, 176, 75)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 19; background-color: rgb(59, 223, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 82 / 20; background-color: rgb(247, 175, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 1; background-color: rgb(54, 7, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 2; background-color: rgb(166, 99, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 3; background-color: rgb(62, 200, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 4; background-color: rgb(128, 13, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 5; background-color: rgb(99, 43, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 6; background-color: rgb(226, 213, 27)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 7; background-color: rgb(221, 157, 109)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 8; background-color: rgb(179, 156, 130)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 9; background-color: rgb(23, 38, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 10; background-color: rgb(76, 231, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 11; background-color: rgb(68, 94, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 12; background-color: rgb(219, 3, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 13; background-color: rgb(168, 69, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 14; background-color: rgb(93, 63, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 15; background-color: rgb(106, 0, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 16; background-color: rgb(102, 178, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 17; background-color: rgb(94, 138, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 18; background-color: rgb(75, 76, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 19; background-color: rgb(162, 81, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 83 / 20; background-color: rgb(104, 98, 21)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 1; background-color: rgb(180, 68, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 2; background-color: rgb(201, 242, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 3; background-color: rgb(185, 236, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 4; background-color: rgb(215, 8, 76)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 5; background-color: rgb(248, 148, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 6; background-color: rgb(148, 140, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 7; background-color: rgb(210, 26, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 8; background-color: rgb(189, 127, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 9; background-color: rgb(105, 145, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 10; background-color: rgb(163, 251, 154)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 11; background-color: rgb(78, 107, 160)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 12; background-color: rgb(52, 40, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 13; background-color: rgb(255, 233, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 14; background-color: rgb(217, 202, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 15; background-color: rgb(12, 24, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 16; background-color: rgb(191, 7, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 17; background-color: rgb(208, 108, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 18; background-color: rgb(172, 195, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 19; background-color: rgb(244, 82, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 84 / 20; background-color: rgb(163, 211, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 1; background-color: rgb(146, 37, 221)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 2; background-color: rgb(103, 13, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 3; background-color: rgb(43, 226, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 4; background-color: rgb(252, 32, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 5; background-color: rgb(170, 84, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 6; background-color: rgb(74, 7, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 7; background-color: rgb(62, 78, 69)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 8; background-color: rgb(163, 161, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 9; background-color: rgb(127, 112, 95)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 10; background-color: rgb(157, 76, 92)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 11; background-color: rgb(208, 43, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 12; background-color: rgb(255, 186, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 13; background-color: rgb(121, 43, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 14; background-color: rgb(167, 125, 209)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 15; background-color: rgb(8, 28, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 16; background-color: rgb(149, 36, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 17; background-color: rgb(190, 222, 212)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 18; background-color: rgb(82, 110, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 19; background-color: rgb(245, 236, 163)'></div>
-<div class='gridItem' style='-webkit-grid-area: 85 / 20; background-color: rgb(108, 168, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 1; background-color: rgb(65, 195, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 2; background-color: rgb(177, 225, 208)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 3; background-color: rgb(84, 179, 249)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 4; background-color: rgb(244, 107, 191)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 5; background-color: rgb(145, 241, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 6; background-color: rgb(184, 94, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 7; background-color: rgb(167, 104, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 8; background-color: rgb(8, 42, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 9; background-color: rgb(207, 32, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 10; background-color: rgb(54, 212, 119)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 11; background-color: rgb(95, 32, 116)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 12; background-color: rgb(157, 207, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 13; background-color: rgb(62, 107, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 14; background-color: rgb(35, 71, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 15; background-color: rgb(55, 173, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 16; background-color: rgb(162, 130, 245)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 17; background-color: rgb(43, 182, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 18; background-color: rgb(57, 159, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 19; background-color: rgb(101, 70, 225)'></div>
-<div class='gridItem' style='-webkit-grid-area: 86 / 20; background-color: rgb(58, 160, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 1; background-color: rgb(233, 136, 184)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 2; background-color: rgb(248, 22, 65)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 3; background-color: rgb(92, 251, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 4; background-color: rgb(156, 142, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 5; background-color: rgb(113, 145, 20)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 6; background-color: rgb(249, 183, 94)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 7; background-color: rgb(12, 213, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 8; background-color: rgb(83, 133, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 9; background-color: rgb(34, 19, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 10; background-color: rgb(126, 133, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 11; background-color: rgb(39, 5, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 12; background-color: rgb(115, 149, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 13; background-color: rgb(95, 204, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 14; background-color: rgb(157, 143, 99)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 15; background-color: rgb(2, 117, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 16; background-color: rgb(108, 60, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 17; background-color: rgb(166, 178, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 18; background-color: rgb(86, 208, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 19; background-color: rgb(9, 149, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 87 / 20; background-color: rgb(41, 223, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 1; background-color: rgb(217, 32, 77)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 2; background-color: rgb(231, 165, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 3; background-color: rgb(249, 87, 107)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 4; background-color: rgb(226, 185, 248)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 5; background-color: rgb(70, 124, 34)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 6; background-color: rgb(230, 104, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 7; background-color: rgb(75, 68, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 8; background-color: rgb(246, 16, 110)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 9; background-color: rgb(16, 226, 97)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 10; background-color: rgb(216, 89, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 11; background-color: rgb(178, 127, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 12; background-color: rgb(225, 217, 82)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 13; background-color: rgb(74, 135, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 14; background-color: rgb(163, 189, 24)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 15; background-color: rgb(54, 78, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 16; background-color: rgb(136, 93, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 17; background-color: rgb(100, 25, 169)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 18; background-color: rgb(196, 166, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 19; background-color: rgb(150, 104, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 88 / 20; background-color: rgb(170, 67, 152)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 1; background-color: rgb(244, 76, 54)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 2; background-color: rgb(110, 78, 165)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 3; background-color: rgb(185, 12, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 4; background-color: rgb(96, 199, 134)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 5; background-color: rgb(180, 34, 138)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 6; background-color: rgb(143, 196, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 7; background-color: rgb(236, 187, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 8; background-color: rgb(35, 51, 37)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 9; background-color: rgb(54, 157, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 10; background-color: rgb(3, 253, 253)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 11; background-color: rgb(209, 31, 91)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 12; background-color: rgb(114, 62, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 13; background-color: rgb(7, 209, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 14; background-color: rgb(18, 59, 2)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 15; background-color: rgb(248, 140, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 16; background-color: rgb(118, 65, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 17; background-color: rgb(142, 123, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 18; background-color: rgb(178, 234, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 19; background-color: rgb(65, 133, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 89 / 20; background-color: rgb(10, 55, 148)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 1; background-color: rgb(63, 55, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 2; background-color: rgb(115, 177, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 3; background-color: rgb(67, 96, 122)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 4; background-color: rgb(221, 20, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 5; background-color: rgb(218, 64, 80)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 6; background-color: rgb(87, 157, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 7; background-color: rgb(213, 182, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 8; background-color: rgb(86, 145, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 9; background-color: rgb(175, 107, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 10; background-color: rgb(149, 152, 171)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 11; background-color: rgb(2, 148, 13)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 12; background-color: rgb(131, 120, 220)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 13; background-color: rgb(106, 202, 56)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 14; background-color: rgb(167, 242, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 15; background-color: rgb(0, 97, 123)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 16; background-color: rgb(97, 125, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 17; background-color: rgb(91, 116, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 18; background-color: rgb(205, 33, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 19; background-color: rgb(117, 144, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 90 / 20; background-color: rgb(149, 23, 222)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 1; background-color: rgb(223, 94, 207)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 2; background-color: rgb(143, 178, 166)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 3; background-color: rgb(163, 49, 90)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 4; background-color: rgb(11, 98, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 5; background-color: rgb(93, 206, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 6; background-color: rgb(38, 198, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 7; background-color: rgb(20, 109, 155)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 8; background-color: rgb(104, 69, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 9; background-color: rgb(207, 254, 108)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 10; background-color: rgb(3, 104, 199)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 11; background-color: rgb(133, 91, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 12; background-color: rgb(243, 195, 111)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 13; background-color: rgb(33, 66, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 14; background-color: rgb(67, 75, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 15; background-color: rgb(224, 171, 131)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 16; background-color: rgb(94, 244, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 17; background-color: rgb(100, 51, 30)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 18; background-color: rgb(70, 243, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 19; background-color: rgb(156, 21, 170)'></div>
-<div class='gridItem' style='-webkit-grid-area: 91 / 20; background-color: rgb(76, 97, 153)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 1; background-color: rgb(225, 95, 129)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 2; background-color: rgb(191, 14, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 3; background-color: rgb(119, 75, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 4; background-color: rgb(91, 58, 180)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 5; background-color: rgb(232, 78, 4)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 6; background-color: rgb(54, 137, 47)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 7; background-color: rgb(107, 170, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 8; background-color: rgb(170, 121, 48)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 9; background-color: rgb(14, 122, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 10; background-color: rgb(91, 123, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 11; background-color: rgb(196, 226, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 12; background-color: rgb(6, 98, 192)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 13; background-color: rgb(31, 46, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 14; background-color: rgb(6, 200, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 15; background-color: rgb(5, 136, 251)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 16; background-color: rgb(3, 64, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 17; background-color: rgb(130, 32, 211)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 18; background-color: rgb(144, 14, 1)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 19; background-color: rgb(91, 231, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 92 / 20; background-color: rgb(167, 175, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 1; background-color: rgb(182, 75, 231)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 2; background-color: rgb(175, 35, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 3; background-color: rgb(72, 72, 44)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 4; background-color: rgb(74, 159, 85)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 5; background-color: rgb(108, 21, 196)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 6; background-color: rgb(130, 21, 73)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 7; background-color: rgb(98, 152, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 8; background-color: rgb(247, 175, 23)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 9; background-color: rgb(140, 170, 9)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 10; background-color: rgb(50, 178, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 11; background-color: rgb(22, 162, 229)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 12; background-color: rgb(235, 238, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 13; background-color: rgb(81, 205, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 14; background-color: rgb(170, 101, 67)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 15; background-color: rgb(197, 4, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 16; background-color: rgb(221, 248, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 17; background-color: rgb(133, 99, 147)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 18; background-color: rgb(194, 144, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 19; background-color: rgb(159, 104, 115)'></div>
-<div class='gridItem' style='-webkit-grid-area: 93 / 20; background-color: rgb(94, 166, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 1; background-color: rgb(54, 15, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 2; background-color: rgb(46, 199, 63)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 3; background-color: rgb(182, 99, 121)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 4; background-color: rgb(239, 53, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 5; background-color: rgb(172, 17, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 6; background-color: rgb(89, 85, 8)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 7; background-color: rgb(38, 75, 144)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 8; background-color: rgb(188, 242, 60)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 9; background-color: rgb(249, 108, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 10; background-color: rgb(12, 27, 14)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 11; background-color: rgb(225, 199, 149)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 12; background-color: rgb(13, 55, 140)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 13; background-color: rgb(13, 81, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 14; background-color: rgb(119, 227, 227)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 15; background-color: rgb(110, 131, 236)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 16; background-color: rgb(138, 158, 179)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 17; background-color: rgb(97, 66, 46)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 18; background-color: rgb(2, 246, 224)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 19; background-color: rgb(176, 67, 142)'></div>
-<div class='gridItem' style='-webkit-grid-area: 94 / 20; background-color: rgb(174, 0, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 1; background-color: rgb(244, 53, 43)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 2; background-color: rgb(244, 193, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 3; background-color: rgb(200, 21, 50)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 4; background-color: rgb(118, 10, 12)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 5; background-color: rgb(140, 10, 36)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 6; background-color: rgb(40, 123, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 7; background-color: rgb(204, 136, 58)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 8; background-color: rgb(238, 8, 159)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 9; background-color: rgb(234, 210, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 10; background-color: rgb(2, 245, 22)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 11; background-color: rgb(28, 105, 183)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 12; background-color: rgb(69, 117, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 13; background-color: rgb(86, 155, 203)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 14; background-color: rgb(121, 90, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 15; background-color: rgb(40, 75, 26)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 16; background-color: rgb(189, 191, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 17; background-color: rgb(124, 90, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 18; background-color: rgb(108, 253, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 19; background-color: rgb(79, 218, 35)'></div>
-<div class='gridItem' style='-webkit-grid-area: 95 / 20; background-color: rgb(44, 163, 235)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 1; background-color: rgb(95, 104, 3)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 2; background-color: rgb(17, 175, 206)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 3; background-color: rgb(86, 115, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 4; background-color: rgb(163, 136, 132)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 5; background-color: rgb(67, 84, 81)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 6; background-color: rgb(15, 185, 7)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 7; background-color: rgb(100, 64, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 8; background-color: rgb(4, 173, 172)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 9; background-color: rgb(236, 245, 79)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 10; background-color: rgb(55, 250, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 11; background-color: rgb(18, 188, 11)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 12; background-color: rgb(26, 35, 112)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 13; background-color: rgb(106, 80, 118)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 14; background-color: rgb(63, 41, 247)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 15; background-color: rgb(25, 26, 217)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 16; background-color: rgb(76, 57, 243)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 17; background-color: rgb(97, 105, 139)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 18; background-color: rgb(229, 87, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 19; background-color: rgb(77, 41, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 96 / 20; background-color: rgb(5, 89, 84)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 1; background-color: rgb(53, 56, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 2; background-color: rgb(253, 210, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 3; background-color: rgb(30, 189, 98)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 4; background-color: rgb(197, 57, 114)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 5; background-color: rgb(150, 93, 0)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 6; background-color: rgb(179, 210, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 7; background-color: rgb(113, 129, 242)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 8; background-color: rgb(181, 240, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 9; background-color: rgb(158, 156, 137)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 10; background-color: rgb(102, 60, 78)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 11; background-color: rgb(106, 109, 25)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 12; background-color: rgb(69, 140, 45)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 13; background-color: rgb(26, 105, 232)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 14; background-color: rgb(130, 120, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 15; background-color: rgb(213, 46, 136)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 16; background-color: rgb(88, 183, 18)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 17; background-color: rgb(57, 111, 181)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 18; background-color: rgb(43, 73, 255)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 19; background-color: rgb(80, 86, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 97 / 20; background-color: rgb(27, 230, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 1; background-color: rgb(241, 61, 150)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 2; background-color: rgb(217, 102, 96)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 3; background-color: rgb(224, 54, 93)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 4; background-color: rgb(56, 67, 246)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 5; background-color: rgb(132, 146, 176)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 6; background-color: rgb(132, 48, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 7; background-color: rgb(116, 222, 16)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 8; background-color: rgb(208, 76, 62)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 9; background-color: rgb(170, 254, 61)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 10; background-color: rgb(141, 48, 244)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 11; background-color: rgb(75, 215, 241)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 12; background-color: rgb(58, 139, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 13; background-color: rgb(146, 190, 29)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 14; background-color: rgb(236, 169, 6)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 15; background-color: rgb(79, 148, 38)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 16; background-color: rgb(2, 243, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 17; background-color: rgb(154, 246, 145)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 18; background-color: rgb(134, 181, 223)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 19; background-color: rgb(58, 61, 83)'></div>
-<div class='gridItem' style='-webkit-grid-area: 98 / 20; background-color: rgb(47, 44, 204)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 1; background-color: rgb(144, 120, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 2; background-color: rgb(242, 55, 117)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 3; background-color: rgb(160, 17, 202)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 4; background-color: rgb(41, 140, 194)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 5; background-color: rgb(74, 121, 186)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 6; background-color: rgb(73, 82, 200)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 7; background-color: rgb(191, 7, 173)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 8; background-color: rgb(82, 84, 157)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 9; background-color: rgb(29, 8, 201)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 10; background-color: rgb(156, 100, 151)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 11; background-color: rgb(188, 226, 106)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 12; background-color: rgb(78, 37, 230)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 13; background-color: rgb(39, 73, 164)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 14; background-color: rgb(151, 94, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 15; background-color: rgb(21, 252, 64)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 16; background-color: rgb(130, 166, 70)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 17; background-color: rgb(8, 18, 158)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 18; background-color: rgb(229, 140, 188)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 19; background-color: rgb(189, 233, 39)'></div>
-<div class='gridItem' style='-webkit-grid-area: 99 / 20; background-color: rgb(122, 67, 71)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 1; background-color: rgb(255, 226, 5)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 2; background-color: rgb(209, 174, 187)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 3; background-color: rgb(192, 103, 87)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 4; background-color: rgb(181, 167, 167)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 5; background-color: rgb(61, 132, 250)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 6; background-color: rgb(182, 125, 88)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 7; background-color: rgb(20, 147, 234)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 8; background-color: rgb(68, 233, 40)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 9; background-color: rgb(216, 234, 128)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 10; background-color: rgb(43, 10, 17)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 11; background-color: rgb(206, 102, 156)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 12; background-color: rgb(184, 210, 49)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 13; background-color: rgb(214, 203, 53)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 14; background-color: rgb(239, 54, 215)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 15; background-color: rgb(86, 163, 33)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 16; background-color: rgb(154, 6, 174)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 17; background-color: rgb(191, 232, 100)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 18; background-color: rgb(127, 179, 214)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 19; background-color: rgb(45, 43, 72)'></div>
-<div class='gridItem' style='-webkit-grid-area: 100 / 20; background-color: rgb(178, 180, 196)'></div>
</del><ins>+<div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
+<div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
+<div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
+<div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
+<div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
+<div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
+<div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
+<div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
+<div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
+<div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
+<div class='gridItem' style='grid-area: 1 / 11; background-color: rgb(154, 120, 173)'></div>
+<div class='gridItem' style='grid-area: 1 / 12; background-color: rgb(57, 247, 18)'></div>
+<div class='gridItem' style='grid-area: 1 / 13; background-color: rgb(61, 121, 26)'></div>
+<div class='gridItem' style='grid-area: 1 / 14; background-color: rgb(226, 240, 208)'></div>
+<div class='gridItem' style='grid-area: 1 / 15; background-color: rgb(21, 125, 254)'></div>
+<div class='gridItem' style='grid-area: 1 / 16; background-color: rgb(236, 97, 255)'></div>
+<div class='gridItem' style='grid-area: 1 / 17; background-color: rgb(228, 209, 187)'></div>
+<div class='gridItem' style='grid-area: 1 / 18; background-color: rgb(189, 142, 103)'></div>
+<div class='gridItem' style='grid-area: 1 / 19; background-color: rgb(34, 147, 180)'></div>
+<div class='gridItem' style='grid-area: 1 / 20; background-color: rgb(206, 11, 249)'></div>
+<div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
+<div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
+<div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
+<div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
+<div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
+<div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
+<div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
+<div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
+<div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
+<div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
+<div class='gridItem' style='grid-area: 2 / 11; background-color: rgb(43, 188, 145)'></div>
+<div class='gridItem' style='grid-area: 2 / 12; background-color: rgb(220, 17, 198)'></div>
+<div class='gridItem' style='grid-area: 2 / 13; background-color: rgb(12, 247, 112)'></div>
+<div class='gridItem' style='grid-area: 2 / 14; background-color: rgb(41, 52, 80)'></div>
+<div class='gridItem' style='grid-area: 2 / 15; background-color: rgb(225, 235, 184)'></div>
+<div class='gridItem' style='grid-area: 2 / 16; background-color: rgb(125, 53, 129)'></div>
+<div class='gridItem' style='grid-area: 2 / 17; background-color: rgb(144, 206, 84)'></div>
+<div class='gridItem' style='grid-area: 2 / 18; background-color: rgb(18, 147, 251)'></div>
+<div class='gridItem' style='grid-area: 2 / 19; background-color: rgb(62, 214, 193)'></div>
+<div class='gridItem' style='grid-area: 2 / 20; background-color: rgb(188, 127, 226)'></div>
+<div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
+<div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
+<div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
+<div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
+<div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
+<div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
+<div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
+<div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
+<div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
+<div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
+<div class='gridItem' style='grid-area: 3 / 11; background-color: rgb(68, 96, 14)'></div>
+<div class='gridItem' style='grid-area: 3 / 12; background-color: rgb(59, 60, 71)'></div>
+<div class='gridItem' style='grid-area: 3 / 13; background-color: rgb(180, 204, 137)'></div>
+<div class='gridItem' style='grid-area: 3 / 14; background-color: rgb(7, 165, 186)'></div>
+<div class='gridItem' style='grid-area: 3 / 15; background-color: rgb(29, 91, 113)'></div>
+<div class='gridItem' style='grid-area: 3 / 16; background-color: rgb(59, 66, 16)'></div>
+<div class='gridItem' style='grid-area: 3 / 17; background-color: rgb(106, 41, 144)'></div>
+<div class='gridItem' style='grid-area: 3 / 18; background-color: rgb(174, 116, 85)'></div>
+<div class='gridItem' style='grid-area: 3 / 19; background-color: rgb(132, 94, 166)'></div>
+<div class='gridItem' style='grid-area: 3 / 20; background-color: rgb(238, 82, 67)'></div>
+<div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
+<div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
+<div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
+<div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
+<div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
+<div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
+<div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
+<div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
+<div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
+<div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
+<div class='gridItem' style='grid-area: 4 / 11; background-color: rgb(215, 247, 53)'></div>
+<div class='gridItem' style='grid-area: 4 / 12; background-color: rgb(138, 81, 38)'></div>
+<div class='gridItem' style='grid-area: 4 / 13; background-color: rgb(185, 107, 33)'></div>
+<div class='gridItem' style='grid-area: 4 / 14; background-color: rgb(246, 29, 34)'></div>
+<div class='gridItem' style='grid-area: 4 / 15; background-color: rgb(190, 100, 182)'></div>
+<div class='gridItem' style='grid-area: 4 / 16; background-color: rgb(26, 171, 237)'></div>
+<div class='gridItem' style='grid-area: 4 / 17; background-color: rgb(249, 143, 96)'></div>
+<div class='gridItem' style='grid-area: 4 / 18; background-color: rgb(71, 245, 26)'></div>
+<div class='gridItem' style='grid-area: 4 / 19; background-color: rgb(89, 231, 158)'></div>
+<div class='gridItem' style='grid-area: 4 / 20; background-color: rgb(233, 114, 20)'></div>
+<div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
+<div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
+<div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
+<div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
+<div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
+<div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
+<div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
+<div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
+<div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
+<div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
+<div class='gridItem' style='grid-area: 5 / 11; background-color: rgb(233, 77, 35)'></div>
+<div class='gridItem' style='grid-area: 5 / 12; background-color: rgb(94, 103, 229)'></div>
+<div class='gridItem' style='grid-area: 5 / 13; background-color: rgb(247, 92, 231)'></div>
+<div class='gridItem' style='grid-area: 5 / 14; background-color: rgb(144, 165, 196)'></div>
+<div class='gridItem' style='grid-area: 5 / 15; background-color: rgb(104, 195, 130)'></div>
+<div class='gridItem' style='grid-area: 5 / 16; background-color: rgb(6, 15, 17)'></div>
+<div class='gridItem' style='grid-area: 5 / 17; background-color: rgb(94, 238, 63)'></div>
+<div class='gridItem' style='grid-area: 5 / 18; background-color: rgb(150, 23, 68)'></div>
+<div class='gridItem' style='grid-area: 5 / 19; background-color: rgb(160, 34, 119)'></div>
+<div class='gridItem' style='grid-area: 5 / 20; background-color: rgb(254, 111, 83)'></div>
+<div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
+<div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
+<div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
+<div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
+<div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
+<div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
+<div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
+<div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
+<div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
+<div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
+<div class='gridItem' style='grid-area: 6 / 11; background-color: rgb(140, 57, 187)'></div>
+<div class='gridItem' style='grid-area: 6 / 12; background-color: rgb(150, 161, 189)'></div>
+<div class='gridItem' style='grid-area: 6 / 13; background-color: rgb(140, 25, 168)'></div>
+<div class='gridItem' style='grid-area: 6 / 14; background-color: rgb(208, 224, 186)'></div>
+<div class='gridItem' style='grid-area: 6 / 15; background-color: rgb(85, 46, 240)'></div>
+<div class='gridItem' style='grid-area: 6 / 16; background-color: rgb(105, 215, 87)'></div>
+<div class='gridItem' style='grid-area: 6 / 17; background-color: rgb(204, 21, 106)'></div>
+<div class='gridItem' style='grid-area: 6 / 18; background-color: rgb(181, 88, 64)'></div>
+<div class='gridItem' style='grid-area: 6 / 19; background-color: rgb(252, 135, 115)'></div>
+<div class='gridItem' style='grid-area: 6 / 20; background-color: rgb(235, 50, 139)'></div>
+<div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
+<div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
+<div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
+<div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
+<div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
+<div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
+<div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
+<div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
+<div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
+<div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
+<div class='gridItem' style='grid-area: 7 / 11; background-color: rgb(172, 83, 30)'></div>
+<div class='gridItem' style='grid-area: 7 / 12; background-color: rgb(36, 152, 31)'></div>
+<div class='gridItem' style='grid-area: 7 / 13; background-color: rgb(188, 94, 121)'></div>
+<div class='gridItem' style='grid-area: 7 / 14; background-color: rgb(42, 14, 162)'></div>
+<div class='gridItem' style='grid-area: 7 / 15; background-color: rgb(195, 162, 180)'></div>
+<div class='gridItem' style='grid-area: 7 / 16; background-color: rgb(17, 4, 205)'></div>
+<div class='gridItem' style='grid-area: 7 / 17; background-color: rgb(241, 160, 89)'></div>
+<div class='gridItem' style='grid-area: 7 / 18; background-color: rgb(29, 70, 93)'></div>
+<div class='gridItem' style='grid-area: 7 / 19; background-color: rgb(248, 179, 147)'></div>
+<div class='gridItem' style='grid-area: 7 / 20; background-color: rgb(195, 141, 116)'></div>
+<div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
+<div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
+<div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
+<div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
+<div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
+<div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
+<div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
+<div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
+<div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
+<div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
+<div class='gridItem' style='grid-area: 8 / 11; background-color: rgb(88, 188, 130)'></div>
+<div class='gridItem' style='grid-area: 8 / 12; background-color: rgb(23, 37, 121)'></div>
+<div class='gridItem' style='grid-area: 8 / 13; background-color: rgb(17, 100, 106)'></div>
+<div class='gridItem' style='grid-area: 8 / 14; background-color: rgb(84, 136, 96)'></div>
+<div class='gridItem' style='grid-area: 8 / 15; background-color: rgb(170, 7, 128)'></div>
+<div class='gridItem' style='grid-area: 8 / 16; background-color: rgb(176, 78, 105)'></div>
+<div class='gridItem' style='grid-area: 8 / 17; background-color: rgb(21, 98, 217)'></div>
+<div class='gridItem' style='grid-area: 8 / 18; background-color: rgb(79, 112, 114)'></div>
+<div class='gridItem' style='grid-area: 8 / 19; background-color: rgb(196, 57, 133)'></div>
+<div class='gridItem' style='grid-area: 8 / 20; background-color: rgb(225, 81, 36)'></div>
+<div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
+<div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
+<div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
+<div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
+<div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
+<div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
+<div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
+<div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
+<div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
+<div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
+<div class='gridItem' style='grid-area: 9 / 11; background-color: rgb(121, 67, 143)'></div>
+<div class='gridItem' style='grid-area: 9 / 12; background-color: rgb(211, 222, 225)'></div>
+<div class='gridItem' style='grid-area: 9 / 13; background-color: rgb(49, 244, 4)'></div>
+<div class='gridItem' style='grid-area: 9 / 14; background-color: rgb(60, 220, 166)'></div>
+<div class='gridItem' style='grid-area: 9 / 15; background-color: rgb(42, 46, 236)'></div>
+<div class='gridItem' style='grid-area: 9 / 16; background-color: rgb(251, 160, 195)'></div>
+<div class='gridItem' style='grid-area: 9 / 17; background-color: rgb(22, 35, 27)'></div>
+<div class='gridItem' style='grid-area: 9 / 18; background-color: rgb(147, 63, 30)'></div>
+<div class='gridItem' style='grid-area: 9 / 19; background-color: rgb(134, 238, 42)'></div>
+<div class='gridItem' style='grid-area: 9 / 20; background-color: rgb(157, 53, 160)'></div>
+<div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
+<div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
+<div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
+<div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
+<div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
+<div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
+<div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
+<div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
+<div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
+<div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
+<div class='gridItem' style='grid-area: 10 / 11; background-color: rgb(124, 251, 141)'></div>
+<div class='gridItem' style='grid-area: 10 / 12; background-color: rgb(150, 253, 236)'></div>
+<div class='gridItem' style='grid-area: 10 / 13; background-color: rgb(23, 100, 146)'></div>
+<div class='gridItem' style='grid-area: 10 / 14; background-color: rgb(116, 14, 224)'></div>
+<div class='gridItem' style='grid-area: 10 / 15; background-color: rgb(201, 159, 118)'></div>
+<div class='gridItem' style='grid-area: 10 / 16; background-color: rgb(66, 96, 209)'></div>
+<div class='gridItem' style='grid-area: 10 / 17; background-color: rgb(153, 219, 172)'></div>
+<div class='gridItem' style='grid-area: 10 / 18; background-color: rgb(86, 222, 14)'></div>
+<div class='gridItem' style='grid-area: 10 / 19; background-color: rgb(145, 71, 211)'></div>
+<div class='gridItem' style='grid-area: 10 / 20; background-color: rgb(250, 91, 111)'></div>
+<div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
+<div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
+<div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
+<div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
+<div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
+<div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
+<div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
+<div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
+<div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
+<div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
+<div class='gridItem' style='grid-area: 11 / 11; background-color: rgb(190, 81, 147)'></div>
+<div class='gridItem' style='grid-area: 11 / 12; background-color: rgb(121, 9, 185)'></div>
+<div class='gridItem' style='grid-area: 11 / 13; background-color: rgb(222, 23, 135)'></div>
+<div class='gridItem' style='grid-area: 11 / 14; background-color: rgb(8, 208, 47)'></div>
+<div class='gridItem' style='grid-area: 11 / 15; background-color: rgb(177, 111, 139)'></div>
+<div class='gridItem' style='grid-area: 11 / 16; background-color: rgb(186, 172, 175)'></div>
+<div class='gridItem' style='grid-area: 11 / 17; background-color: rgb(151, 27, 224)'></div>
+<div class='gridItem' style='grid-area: 11 / 18; background-color: rgb(198, 115, 182)'></div>
+<div class='gridItem' style='grid-area: 11 / 19; background-color: rgb(97, 208, 141)'></div>
+<div class='gridItem' style='grid-area: 11 / 20; background-color: rgb(219, 22, 242)'></div>
+<div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
+<div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
+<div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
+<div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
+<div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
+<div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
+<div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
+<div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
+<div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
+<div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
+<div class='gridItem' style='grid-area: 12 / 11; background-color: rgb(228, 130, 248)'></div>
+<div class='gridItem' style='grid-area: 12 / 12; background-color: rgb(129, 232, 250)'></div>
+<div class='gridItem' style='grid-area: 12 / 13; background-color: rgb(156, 142, 10)'></div>
+<div class='gridItem' style='grid-area: 12 / 14; background-color: rgb(218, 242, 53)'></div>
+<div class='gridItem' style='grid-area: 12 / 15; background-color: rgb(136, 133, 150)'></div>
+<div class='gridItem' style='grid-area: 12 / 16; background-color: rgb(27, 102, 130)'></div>
+<div class='gridItem' style='grid-area: 12 / 17; background-color: rgb(73, 60, 131)'></div>
+<div class='gridItem' style='grid-area: 12 / 18; background-color: rgb(117, 161, 183)'></div>
+<div class='gridItem' style='grid-area: 12 / 19; background-color: rgb(183, 150, 89)'></div>
+<div class='gridItem' style='grid-area: 12 / 20; background-color: rgb(223, 210, 34)'></div>
+<div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
+<div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
+<div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
+<div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
+<div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
+<div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
+<div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
+<div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
+<div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
+<div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
+<div class='gridItem' style='grid-area: 13 / 11; background-color: rgb(105, 21, 202)'></div>
+<div class='gridItem' style='grid-area: 13 / 12; background-color: rgb(41, 125, 199)'></div>
+<div class='gridItem' style='grid-area: 13 / 13; background-color: rgb(138, 198, 125)'></div>
+<div class='gridItem' style='grid-area: 13 / 14; background-color: rgb(245, 153, 248)'></div>
+<div class='gridItem' style='grid-area: 13 / 15; background-color: rgb(239, 42, 121)'></div>
+<div class='gridItem' style='grid-area: 13 / 16; background-color: rgb(162, 54, 47)'></div>
+<div class='gridItem' style='grid-area: 13 / 17; background-color: rgb(230, 54, 235)'></div>
+<div class='gridItem' style='grid-area: 13 / 18; background-color: rgb(68, 16, 24)'></div>
+<div class='gridItem' style='grid-area: 13 / 19; background-color: rgb(45, 159, 40)'></div>
+<div class='gridItem' style='grid-area: 13 / 20; background-color: rgb(33, 97, 110)'></div>
+<div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
+<div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
+<div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
+<div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
+<div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
+<div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
+<div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
+<div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
+<div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
+<div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
+<div class='gridItem' style='grid-area: 14 / 11; background-color: rgb(220, 19, 109)'></div>
+<div class='gridItem' style='grid-area: 14 / 12; background-color: rgb(77, 165, 75)'></div>
+<div class='gridItem' style='grid-area: 14 / 13; background-color: rgb(213, 63, 96)'></div>
+<div class='gridItem' style='grid-area: 14 / 14; background-color: rgb(144, 7, 87)'></div>
+<div class='gridItem' style='grid-area: 14 / 15; background-color: rgb(22, 190, 21)'></div>
+<div class='gridItem' style='grid-area: 14 / 16; background-color: rgb(124, 111, 227)'></div>
+<div class='gridItem' style='grid-area: 14 / 17; background-color: rgb(0, 41, 172)'></div>
+<div class='gridItem' style='grid-area: 14 / 18; background-color: rgb(25, 25, 164)'></div>
+<div class='gridItem' style='grid-area: 14 / 19; background-color: rgb(39, 119, 44)'></div>
+<div class='gridItem' style='grid-area: 14 / 20; background-color: rgb(66, 138, 238)'></div>
+<div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
+<div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
+<div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
+<div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
+<div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
+<div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
+<div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
+<div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
+<div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
+<div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
+<div class='gridItem' style='grid-area: 15 / 11; background-color: rgb(175, 139, 192)'></div>
+<div class='gridItem' style='grid-area: 15 / 12; background-color: rgb(176, 195, 29)'></div>
+<div class='gridItem' style='grid-area: 15 / 13; background-color: rgb(44, 101, 107)'></div>
+<div class='gridItem' style='grid-area: 15 / 14; background-color: rgb(31, 213, 63)'></div>
+<div class='gridItem' style='grid-area: 15 / 15; background-color: rgb(157, 97, 231)'></div>
+<div class='gridItem' style='grid-area: 15 / 16; background-color: rgb(227, 14, 12)'></div>
+<div class='gridItem' style='grid-area: 15 / 17; background-color: rgb(133, 37, 37)'></div>
+<div class='gridItem' style='grid-area: 15 / 18; background-color: rgb(129, 140, 88)'></div>
+<div class='gridItem' style='grid-area: 15 / 19; background-color: rgb(50, 151, 18)'></div>
+<div class='gridItem' style='grid-area: 15 / 20; background-color: rgb(174, 90, 85)'></div>
+<div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
+<div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
+<div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
+<div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
+<div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
+<div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
+<div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
+<div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
+<div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
+<div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
+<div class='gridItem' style='grid-area: 16 / 11; background-color: rgb(205, 63, 60)'></div>
+<div class='gridItem' style='grid-area: 16 / 12; background-color: rgb(17, 145, 157)'></div>
+<div class='gridItem' style='grid-area: 16 / 13; background-color: rgb(197, 117, 57)'></div>
+<div class='gridItem' style='grid-area: 16 / 14; background-color: rgb(137, 60, 232)'></div>
+<div class='gridItem' style='grid-area: 16 / 15; background-color: rgb(167, 23, 60)'></div>
+<div class='gridItem' style='grid-area: 16 / 16; background-color: rgb(137, 61, 78)'></div>
+<div class='gridItem' style='grid-area: 16 / 17; background-color: rgb(59, 0, 74)'></div>
+<div class='gridItem' style='grid-area: 16 / 18; background-color: rgb(74, 174, 217)'></div>
+<div class='gridItem' style='grid-area: 16 / 19; background-color: rgb(91, 205, 9)'></div>
+<div class='gridItem' style='grid-area: 16 / 20; background-color: rgb(120, 65, 48)'></div>
+<div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
+<div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
+<div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
+<div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
+<div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
+<div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
+<div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
+<div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
+<div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
+<div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
+<div class='gridItem' style='grid-area: 17 / 11; background-color: rgb(155, 80, 239)'></div>
+<div class='gridItem' style='grid-area: 17 / 12; background-color: rgb(220, 206, 126)'></div>
+<div class='gridItem' style='grid-area: 17 / 13; background-color: rgb(202, 63, 13)'></div>
+<div class='gridItem' style='grid-area: 17 / 14; background-color: rgb(133, 250, 72)'></div>
+<div class='gridItem' style='grid-area: 17 / 15; background-color: rgb(26, 207, 104)'></div>
+<div class='gridItem' style='grid-area: 17 / 16; background-color: rgb(242, 23, 28)'></div>
+<div class='gridItem' style='grid-area: 17 / 17; background-color: rgb(219, 231, 38)'></div>
+<div class='gridItem' style='grid-area: 17 / 18; background-color: rgb(81, 198, 243)'></div>
+<div class='gridItem' style='grid-area: 17 / 19; background-color: rgb(2, 116, 115)'></div>
+<div class='gridItem' style='grid-area: 17 / 20; background-color: rgb(219, 90, 35)'></div>
+<div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
+<div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
+<div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
+<div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
+<div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
+<div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
+<div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
+<div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
+<div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
+<div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
+<div class='gridItem' style='grid-area: 18 / 11; background-color: rgb(191, 112, 25)'></div>
+<div class='gridItem' style='grid-area: 18 / 12; background-color: rgb(16, 101, 233)'></div>
+<div class='gridItem' style='grid-area: 18 / 13; background-color: rgb(166, 127, 165)'></div>
+<div class='gridItem' style='grid-area: 18 / 14; background-color: rgb(12, 140, 162)'></div>
+<div class='gridItem' style='grid-area: 18 / 15; background-color: rgb(25, 163, 131)'></div>
+<div class='gridItem' style='grid-area: 18 / 16; background-color: rgb(169, 70, 208)'></div>
+<div class='gridItem' style='grid-area: 18 / 17; background-color: rgb(236, 172, 129)'></div>
+<div class='gridItem' style='grid-area: 18 / 18; background-color: rgb(207, 130, 221)'></div>
+<div class='gridItem' style='grid-area: 18 / 19; background-color: rgb(27, 148, 87)'></div>
+<div class='gridItem' style='grid-area: 18 / 20; background-color: rgb(184, 170, 113)'></div>
+<div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
+<div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
+<div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
+<div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
+<div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
+<div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
+<div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
+<div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
+<div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
+<div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
+<div class='gridItem' style='grid-area: 19 / 11; background-color: rgb(40, 150, 78)'></div>
+<div class='gridItem' style='grid-area: 19 / 12; background-color: rgb(94, 136, 8)'></div>
+<div class='gridItem' style='grid-area: 19 / 13; background-color: rgb(194, 243, 110)'></div>
+<div class='gridItem' style='grid-area: 19 / 14; background-color: rgb(134, 98, 125)'></div>
+<div class='gridItem' style='grid-area: 19 / 15; background-color: rgb(96, 240, 175)'></div>
+<div class='gridItem' style='grid-area: 19 / 16; background-color: rgb(38, 90, 64)'></div>
+<div class='gridItem' style='grid-area: 19 / 17; background-color: rgb(91, 218, 145)'></div>
+<div class='gridItem' style='grid-area: 19 / 18; background-color: rgb(231, 191, 193)'></div>
+<div class='gridItem' style='grid-area: 19 / 19; background-color: rgb(246, 117, 106)'></div>
+<div class='gridItem' style='grid-area: 19 / 20; background-color: rgb(187, 19, 114)'></div>
+<div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
+<div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
+<div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
+<div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
+<div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
+<div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
+<div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
+<div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
+<div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
+<div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
+<div class='gridItem' style='grid-area: 20 / 11; background-color: rgb(138, 57, 139)'></div>
+<div class='gridItem' style='grid-area: 20 / 12; background-color: rgb(56, 58, 160)'></div>
+<div class='gridItem' style='grid-area: 20 / 13; background-color: rgb(132, 68, 175)'></div>
+<div class='gridItem' style='grid-area: 20 / 14; background-color: rgb(125, 57, 109)'></div>
+<div class='gridItem' style='grid-area: 20 / 15; background-color: rgb(197, 106, 91)'></div>
+<div class='gridItem' style='grid-area: 20 / 16; background-color: rgb(162, 215, 238)'></div>
+<div class='gridItem' style='grid-area: 20 / 17; background-color: rgb(70, 146, 115)'></div>
+<div class='gridItem' style='grid-area: 20 / 18; background-color: rgb(2, 149, 242)'></div>
+<div class='gridItem' style='grid-area: 20 / 19; background-color: rgb(219, 80, 6)'></div>
+<div class='gridItem' style='grid-area: 20 / 20; background-color: rgb(65, 57, 37)'></div>
+<div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
+<div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
+<div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
+<div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
+<div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
+<div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
+<div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
+<div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
+<div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
+<div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
+<div class='gridItem' style='grid-area: 21 / 11; background-color: rgb(250, 119, 194)'></div>
+<div class='gridItem' style='grid-area: 21 / 12; background-color: rgb(215, 170, 23)'></div>
+<div class='gridItem' style='grid-area: 21 / 13; background-color: rgb(141, 247, 13)'></div>
+<div class='gridItem' style='grid-area: 21 / 14; background-color: rgb(1, 220, 45)'></div>
+<div class='gridItem' style='grid-area: 21 / 15; background-color: rgb(189, 49, 5)'></div>
+<div class='gridItem' style='grid-area: 21 / 16; background-color: rgb(164, 252, 147)'></div>
+<div class='gridItem' style='grid-area: 21 / 17; background-color: rgb(10, 88, 80)'></div>
+<div class='gridItem' style='grid-area: 21 / 18; background-color: rgb(149, 210, 131)'></div>
+<div class='gridItem' style='grid-area: 21 / 19; background-color: rgb(215, 109, 238)'></div>
+<div class='gridItem' style='grid-area: 21 / 20; background-color: rgb(146, 166, 63)'></div>
+<div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
+<div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
+<div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
+<div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
+<div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
+<div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
+<div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
+<div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
+<div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
+<div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
+<div class='gridItem' style='grid-area: 22 / 11; background-color: rgb(193, 224, 254)'></div>
+<div class='gridItem' style='grid-area: 22 / 12; background-color: rgb(6, 145, 158)'></div>
+<div class='gridItem' style='grid-area: 22 / 13; background-color: rgb(57, 236, 223)'></div>
+<div class='gridItem' style='grid-area: 22 / 14; background-color: rgb(62, 125, 101)'></div>
+<div class='gridItem' style='grid-area: 22 / 15; background-color: rgb(66, 7, 128)'></div>
+<div class='gridItem' style='grid-area: 22 / 16; background-color: rgb(172, 65, 227)'></div>
+<div class='gridItem' style='grid-area: 22 / 17; background-color: rgb(52, 38, 226)'></div>
+<div class='gridItem' style='grid-area: 22 / 18; background-color: rgb(9, 80, 223)'></div>
+<div class='gridItem' style='grid-area: 22 / 19; background-color: rgb(34, 87, 239)'></div>
+<div class='gridItem' style='grid-area: 22 / 20; background-color: rgb(209, 175, 154)'></div>
+<div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
+<div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
+<div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
+<div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
+<div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
+<div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
+<div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
+<div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
+<div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
+<div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
+<div class='gridItem' style='grid-area: 23 / 11; background-color: rgb(253, 155, 163)'></div>
+<div class='gridItem' style='grid-area: 23 / 12; background-color: rgb(189, 249, 253)'></div>
+<div class='gridItem' style='grid-area: 23 / 13; background-color: rgb(158, 74, 194)'></div>
+<div class='gridItem' style='grid-area: 23 / 14; background-color: rgb(253, 176, 173)'></div>
+<div class='gridItem' style='grid-area: 23 / 15; background-color: rgb(44, 232, 41)'></div>
+<div class='gridItem' style='grid-area: 23 / 16; background-color: rgb(235, 108, 177)'></div>
+<div class='gridItem' style='grid-area: 23 / 17; background-color: rgb(99, 212, 203)'></div>
+<div class='gridItem' style='grid-area: 23 / 18; background-color: rgb(156, 238, 159)'></div>
+<div class='gridItem' style='grid-area: 23 / 19; background-color: rgb(143, 139, 76)'></div>
+<div class='gridItem' style='grid-area: 23 / 20; background-color: rgb(203, 38, 16)'></div>
+<div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
+<div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
+<div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
+<div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
+<div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
+<div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
+<div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
+<div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
+<div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
+<div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
+<div class='gridItem' style='grid-area: 24 / 11; background-color: rgb(219, 10, 173)'></div>
+<div class='gridItem' style='grid-area: 24 / 12; background-color: rgb(15, 94, 54)'></div>
+<div class='gridItem' style='grid-area: 24 / 13; background-color: rgb(23, 185, 211)'></div>
+<div class='gridItem' style='grid-area: 24 / 14; background-color: rgb(190, 202, 168)'></div>
+<div class='gridItem' style='grid-area: 24 / 15; background-color: rgb(210, 56, 27)'></div>
+<div class='gridItem' style='grid-area: 24 / 16; background-color: rgb(120, 227, 129)'></div>
+<div class='gridItem' style='grid-area: 24 / 17; background-color: rgb(198, 208, 114)'></div>
+<div class='gridItem' style='grid-area: 24 / 18; background-color: rgb(153, 172, 113)'></div>
+<div class='gridItem' style='grid-area: 24 / 19; background-color: rgb(209, 151, 46)'></div>
+<div class='gridItem' style='grid-area: 24 / 20; background-color: rgb(36, 3, 107)'></div>
+<div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
+<div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
+<div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
+<div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
+<div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
+<div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
+<div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
+<div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
+<div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
+<div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
+<div class='gridItem' style='grid-area: 25 / 11; background-color: rgb(165, 32, 76)'></div>
+<div class='gridItem' style='grid-area: 25 / 12; background-color: rgb(65, 20, 17)'></div>
+<div class='gridItem' style='grid-area: 25 / 13; background-color: rgb(126, 22, 25)'></div>
+<div class='gridItem' style='grid-area: 25 / 14; background-color: rgb(250, 39, 157)'></div>
+<div class='gridItem' style='grid-area: 25 / 15; background-color: rgb(94, 46, 28)'></div>
+<div class='gridItem' style='grid-area: 25 / 16; background-color: rgb(111, 58, 193)'></div>
+<div class='gridItem' style='grid-area: 25 / 17; background-color: rgb(206, 97, 152)'></div>
+<div class='gridItem' style='grid-area: 25 / 18; background-color: rgb(71, 51, 207)'></div>
+<div class='gridItem' style='grid-area: 25 / 19; background-color: rgb(237, 13, 80)'></div>
+<div class='gridItem' style='grid-area: 25 / 20; background-color: rgb(23, 188, 254)'></div>
+<div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
+<div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
+<div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
+<div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
+<div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
+<div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
+<div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
+<div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
+<div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
+<div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
+<div class='gridItem' style='grid-area: 26 / 11; background-color: rgb(219, 237, 78)'></div>
+<div class='gridItem' style='grid-area: 26 / 12; background-color: rgb(6, 46, 74)'></div>
+<div class='gridItem' style='grid-area: 26 / 13; background-color: rgb(152, 65, 91)'></div>
+<div class='gridItem' style='grid-area: 26 / 14; background-color: rgb(67, 172, 165)'></div>
+<div class='gridItem' style='grid-area: 26 / 15; background-color: rgb(101, 92, 18)'></div>
+<div class='gridItem' style='grid-area: 26 / 16; background-color: rgb(167, 128, 83)'></div>
+<div class='gridItem' style='grid-area: 26 / 17; background-color: rgb(18, 100, 201)'></div>
+<div class='gridItem' style='grid-area: 26 / 18; background-color: rgb(55, 94, 198)'></div>
+<div class='gridItem' style='grid-area: 26 / 19; background-color: rgb(23, 141, 34)'></div>
+<div class='gridItem' style='grid-area: 26 / 20; background-color: rgb(93, 91, 54)'></div>
+<div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
+<div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
+<div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
+<div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
+<div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
+<div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
+<div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
+<div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
+<div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
+<div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
+<div class='gridItem' style='grid-area: 27 / 11; background-color: rgb(207, 151, 203)'></div>
+<div class='gridItem' style='grid-area: 27 / 12; background-color: rgb(176, 23, 207)'></div>
+<div class='gridItem' style='grid-area: 27 / 13; background-color: rgb(96, 197, 234)'></div>
+<div class='gridItem' style='grid-area: 27 / 14; background-color: rgb(99, 23, 77)'></div>
+<div class='gridItem' style='grid-area: 27 / 15; background-color: rgb(231, 234, 107)'></div>
+<div class='gridItem' style='grid-area: 27 / 16; background-color: rgb(121, 228, 37)'></div>
+<div class='gridItem' style='grid-area: 27 / 17; background-color: rgb(223, 206, 209)'></div>
+<div class='gridItem' style='grid-area: 27 / 18; background-color: rgb(23, 89, 133)'></div>
+<div class='gridItem' style='grid-area: 27 / 19; background-color: rgb(174, 195, 125)'></div>
+<div class='gridItem' style='grid-area: 27 / 20; background-color: rgb(164, 120, 70)'></div>
+<div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
+<div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
+<div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
+<div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
+<div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
+<div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
+<div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
+<div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
+<div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
+<div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
+<div class='gridItem' style='grid-area: 28 / 11; background-color: rgb(219, 250, 66)'></div>
+<div class='gridItem' style='grid-area: 28 / 12; background-color: rgb(50, 148, 14)'></div>
+<div class='gridItem' style='grid-area: 28 / 13; background-color: rgb(22, 5, 112)'></div>
+<div class='gridItem' style='grid-area: 28 / 14; background-color: rgb(244, 168, 122)'></div>
+<div class='gridItem' style='grid-area: 28 / 15; background-color: rgb(78, 207, 104)'></div>
+<div class='gridItem' style='grid-area: 28 / 16; background-color: rgb(208, 50, 16)'></div>
+<div class='gridItem' style='grid-area: 28 / 17; background-color: rgb(104, 110, 96)'></div>
+<div class='gridItem' style='grid-area: 28 / 18; background-color: rgb(104, 240, 147)'></div>
+<div class='gridItem' style='grid-area: 28 / 19; background-color: rgb(155, 151, 168)'></div>
+<div class='gridItem' style='grid-area: 28 / 20; background-color: rgb(78, 119, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
+<div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
+<div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
+<div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
+<div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
+<div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
+<div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
+<div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
+<div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
+<div class='gridItem' style='grid-area: 29 / 11; background-color: rgb(99, 22, 22)'></div>
+<div class='gridItem' style='grid-area: 29 / 12; background-color: rgb(20, 35, 133)'></div>
+<div class='gridItem' style='grid-area: 29 / 13; background-color: rgb(205, 17, 83)'></div>
+<div class='gridItem' style='grid-area: 29 / 14; background-color: rgb(145, 59, 192)'></div>
+<div class='gridItem' style='grid-area: 29 / 15; background-color: rgb(56, 40, 13)'></div>
+<div class='gridItem' style='grid-area: 29 / 16; background-color: rgb(53, 57, 177)'></div>
+<div class='gridItem' style='grid-area: 29 / 17; background-color: rgb(14, 73, 177)'></div>
+<div class='gridItem' style='grid-area: 29 / 18; background-color: rgb(145, 76, 36)'></div>
+<div class='gridItem' style='grid-area: 29 / 19; background-color: rgb(136, 14, 198)'></div>
+<div class='gridItem' style='grid-area: 29 / 20; background-color: rgb(254, 79, 202)'></div>
+<div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
+<div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
+<div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
+<div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
+<div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
+<div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
+<div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
+<div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
+<div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
+<div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
+<div class='gridItem' style='grid-area: 30 / 11; background-color: rgb(153, 207, 69)'></div>
+<div class='gridItem' style='grid-area: 30 / 12; background-color: rgb(215, 33, 69)'></div>
+<div class='gridItem' style='grid-area: 30 / 13; background-color: rgb(137, 237, 33)'></div>
+<div class='gridItem' style='grid-area: 30 / 14; background-color: rgb(183, 125, 138)'></div>
+<div class='gridItem' style='grid-area: 30 / 15; background-color: rgb(254, 131, 166)'></div>
+<div class='gridItem' style='grid-area: 30 / 16; background-color: rgb(17, 74, 151)'></div>
+<div class='gridItem' style='grid-area: 30 / 17; background-color: rgb(134, 15, 125)'></div>
+<div class='gridItem' style='grid-area: 30 / 18; background-color: rgb(231, 214, 142)'></div>
+<div class='gridItem' style='grid-area: 30 / 19; background-color: rgb(39, 221, 131)'></div>
+<div class='gridItem' style='grid-area: 30 / 20; background-color: rgb(132, 62, 165)'></div>
+<div class='gridItem' style='grid-area: 31 / 1; background-color: rgb(16, 110, 181)'></div>
+<div class='gridItem' style='grid-area: 31 / 2; background-color: rgb(9, 6, 29)'></div>
+<div class='gridItem' style='grid-area: 31 / 3; background-color: rgb(124, 59, 153)'></div>
+<div class='gridItem' style='grid-area: 31 / 4; background-color: rgb(190, 187, 5)'></div>
+<div class='gridItem' style='grid-area: 31 / 5; background-color: rgb(178, 90, 31)'></div>
+<div class='gridItem' style='grid-area: 31 / 6; background-color: rgb(205, 26, 244)'></div>
+<div class='gridItem' style='grid-area: 31 / 7; background-color: rgb(123, 148, 15)'></div>
+<div class='gridItem' style='grid-area: 31 / 8; background-color: rgb(205, 242, 180)'></div>
+<div class='gridItem' style='grid-area: 31 / 9; background-color: rgb(217, 238, 142)'></div>
+<div class='gridItem' style='grid-area: 31 / 10; background-color: rgb(149, 192, 142)'></div>
+<div class='gridItem' style='grid-area: 31 / 11; background-color: rgb(133, 234, 234)'></div>
+<div class='gridItem' style='grid-area: 31 / 12; background-color: rgb(99, 190, 138)'></div>
+<div class='gridItem' style='grid-area: 31 / 13; background-color: rgb(100, 228, 141)'></div>
+<div class='gridItem' style='grid-area: 31 / 14; background-color: rgb(59, 181, 159)'></div>
+<div class='gridItem' style='grid-area: 31 / 15; background-color: rgb(191, 100, 29)'></div>
+<div class='gridItem' style='grid-area: 31 / 16; background-color: rgb(55, 137, 68)'></div>
+<div class='gridItem' style='grid-area: 31 / 17; background-color: rgb(107, 5, 22)'></div>
+<div class='gridItem' style='grid-area: 31 / 18; background-color: rgb(192, 129, 22)'></div>
+<div class='gridItem' style='grid-area: 31 / 19; background-color: rgb(65, 14, 186)'></div>
+<div class='gridItem' style='grid-area: 31 / 20; background-color: rgb(226, 108, 82)'></div>
+<div class='gridItem' style='grid-area: 32 / 1; background-color: rgb(254, 123, 26)'></div>
+<div class='gridItem' style='grid-area: 32 / 2; background-color: rgb(215, 97, 217)'></div>
+<div class='gridItem' style='grid-area: 32 / 3; background-color: rgb(159, 164, 70)'></div>
+<div class='gridItem' style='grid-area: 32 / 4; background-color: rgb(163, 92, 130)'></div>
+<div class='gridItem' style='grid-area: 32 / 5; background-color: rgb(187, 62, 254)'></div>
+<div class='gridItem' style='grid-area: 32 / 6; background-color: rgb(202, 181, 162)'></div>
+<div class='gridItem' style='grid-area: 32 / 7; background-color: rgb(198, 225, 6)'></div>
+<div class='gridItem' style='grid-area: 32 / 8; background-color: rgb(84, 188, 48)'></div>
+<div class='gridItem' style='grid-area: 32 / 9; background-color: rgb(85, 245, 187)'></div>
+<div class='gridItem' style='grid-area: 32 / 10; background-color: rgb(137, 228, 147)'></div>
+<div class='gridItem' style='grid-area: 32 / 11; background-color: rgb(89, 77, 173)'></div>
+<div class='gridItem' style='grid-area: 32 / 12; background-color: rgb(111, 68, 186)'></div>
+<div class='gridItem' style='grid-area: 32 / 13; background-color: rgb(5, 155, 112)'></div>
+<div class='gridItem' style='grid-area: 32 / 14; background-color: rgb(39, 128, 197)'></div>
+<div class='gridItem' style='grid-area: 32 / 15; background-color: rgb(7, 233, 120)'></div>
+<div class='gridItem' style='grid-area: 32 / 16; background-color: rgb(195, 122, 109)'></div>
+<div class='gridItem' style='grid-area: 32 / 17; background-color: rgb(184, 166, 52)'></div>
+<div class='gridItem' style='grid-area: 32 / 18; background-color: rgb(14, 231, 222)'></div>
+<div class='gridItem' style='grid-area: 32 / 19; background-color: rgb(130, 78, 159)'></div>
+<div class='gridItem' style='grid-area: 32 / 20; background-color: rgb(77, 15, 229)'></div>
+<div class='gridItem' style='grid-area: 33 / 1; background-color: rgb(97, 16, 80)'></div>
+<div class='gridItem' style='grid-area: 33 / 2; background-color: rgb(146, 109, 173)'></div>
+<div class='gridItem' style='grid-area: 33 / 3; background-color: rgb(18, 46, 199)'></div>
+<div class='gridItem' style='grid-area: 33 / 4; background-color: rgb(229, 130, 96)'></div>
+<div class='gridItem' style='grid-area: 33 / 5; background-color: rgb(230, 232, 205)'></div>
+<div class='gridItem' style='grid-area: 33 / 6; background-color: rgb(144, 132, 58)'></div>
+<div class='gridItem' style='grid-area: 33 / 7; background-color: rgb(72, 220, 149)'></div>
+<div class='gridItem' style='grid-area: 33 / 8; background-color: rgb(96, 176, 39)'></div>
+<div class='gridItem' style='grid-area: 33 / 9; background-color: rgb(45, 109, 17)'></div>
+<div class='gridItem' style='grid-area: 33 / 10; background-color: rgb(48, 93, 189)'></div>
+<div class='gridItem' style='grid-area: 33 / 11; background-color: rgb(88, 15, 71)'></div>
+<div class='gridItem' style='grid-area: 33 / 12; background-color: rgb(174, 74, 18)'></div>
+<div class='gridItem' style='grid-area: 33 / 13; background-color: rgb(236, 106, 40)'></div>
+<div class='gridItem' style='grid-area: 33 / 14; background-color: rgb(132, 141, 152)'></div>
+<div class='gridItem' style='grid-area: 33 / 15; background-color: rgb(157, 34, 80)'></div>
+<div class='gridItem' style='grid-area: 33 / 16; background-color: rgb(124, 221, 92)'></div>
+<div class='gridItem' style='grid-area: 33 / 17; background-color: rgb(58, 40, 79)'></div>
+<div class='gridItem' style='grid-area: 33 / 18; background-color: rgb(102, 202, 92)'></div>
+<div class='gridItem' style='grid-area: 33 / 19; background-color: rgb(107, 39, 161)'></div>
+<div class='gridItem' style='grid-area: 33 / 20; background-color: rgb(214, 82, 170)'></div>
+<div class='gridItem' style='grid-area: 34 / 1; background-color: rgb(123, 121, 137)'></div>
+<div class='gridItem' style='grid-area: 34 / 2; background-color: rgb(155, 138, 115)'></div>
+<div class='gridItem' style='grid-area: 34 / 3; background-color: rgb(217, 245, 252)'></div>
+<div class='gridItem' style='grid-area: 34 / 4; background-color: rgb(128, 164, 69)'></div>
+<div class='gridItem' style='grid-area: 34 / 5; background-color: rgb(43, 78, 42)'></div>
+<div class='gridItem' style='grid-area: 34 / 6; background-color: rgb(31, 74, 247)'></div>
+<div class='gridItem' style='grid-area: 34 / 7; background-color: rgb(32, 93, 211)'></div>
+<div class='gridItem' style='grid-area: 34 / 8; background-color: rgb(118, 56, 89)'></div>
+<div class='gridItem' style='grid-area: 34 / 9; background-color: rgb(68, 204, 132)'></div>
+<div class='gridItem' style='grid-area: 34 / 10; background-color: rgb(183, 134, 146)'></div>
+<div class='gridItem' style='grid-area: 34 / 11; background-color: rgb(213, 189, 37)'></div>
+<div class='gridItem' style='grid-area: 34 / 12; background-color: rgb(212, 218, 38)'></div>
+<div class='gridItem' style='grid-area: 34 / 13; background-color: rgb(32, 72, 167)'></div>
+<div class='gridItem' style='grid-area: 34 / 14; background-color: rgb(216, 142, 224)'></div>
+<div class='gridItem' style='grid-area: 34 / 15; background-color: rgb(214, 84, 30)'></div>
+<div class='gridItem' style='grid-area: 34 / 16; background-color: rgb(47, 20, 159)'></div>
+<div class='gridItem' style='grid-area: 34 / 17; background-color: rgb(187, 167, 38)'></div>
+<div class='gridItem' style='grid-area: 34 / 18; background-color: rgb(115, 18, 6)'></div>
+<div class='gridItem' style='grid-area: 34 / 19; background-color: rgb(194, 189, 232)'></div>
+<div class='gridItem' style='grid-area: 34 / 20; background-color: rgb(59, 158, 16)'></div>
+<div class='gridItem' style='grid-area: 35 / 1; background-color: rgb(128, 28, 18)'></div>
+<div class='gridItem' style='grid-area: 35 / 2; background-color: rgb(153, 7, 88)'></div>
+<div class='gridItem' style='grid-area: 35 / 3; background-color: rgb(226, 89, 57)'></div>
+<div class='gridItem' style='grid-area: 35 / 4; background-color: rgb(5, 33, 45)'></div>
+<div class='gridItem' style='grid-area: 35 / 5; background-color: rgb(180, 248, 28)'></div>
+<div class='gridItem' style='grid-area: 35 / 6; background-color: rgb(205, 20, 14)'></div>
+<div class='gridItem' style='grid-area: 35 / 7; background-color: rgb(28, 200, 128)'></div>
+<div class='gridItem' style='grid-area: 35 / 8; background-color: rgb(127, 65, 131)'></div>
+<div class='gridItem' style='grid-area: 35 / 9; background-color: rgb(143, 219, 2)'></div>
+<div class='gridItem' style='grid-area: 35 / 10; background-color: rgb(4, 85, 162)'></div>
+<div class='gridItem' style='grid-area: 35 / 11; background-color: rgb(190, 113, 213)'></div>
+<div class='gridItem' style='grid-area: 35 / 12; background-color: rgb(172, 154, 67)'></div>
+<div class='gridItem' style='grid-area: 35 / 13; background-color: rgb(253, 238, 44)'></div>
+<div class='gridItem' style='grid-area: 35 / 14; background-color: rgb(141, 81, 197)'></div>
+<div class='gridItem' style='grid-area: 35 / 15; background-color: rgb(188, 206, 250)'></div>
+<div class='gridItem' style='grid-area: 35 / 16; background-color: rgb(149, 77, 148)'></div>
+<div class='gridItem' style='grid-area: 35 / 17; background-color: rgb(212, 124, 142)'></div>
+<div class='gridItem' style='grid-area: 35 / 18; background-color: rgb(134, 27, 125)'></div>
+<div class='gridItem' style='grid-area: 35 / 19; background-color: rgb(252, 114, 146)'></div>
+<div class='gridItem' style='grid-area: 35 / 20; background-color: rgb(240, 190, 74)'></div>
+<div class='gridItem' style='grid-area: 36 / 1; background-color: rgb(170, 108, 210)'></div>
+<div class='gridItem' style='grid-area: 36 / 2; background-color: rgb(170, 202, 216)'></div>
+<div class='gridItem' style='grid-area: 36 / 3; background-color: rgb(16, 58, 250)'></div>
+<div class='gridItem' style='grid-area: 36 / 4; background-color: rgb(124, 98, 13)'></div>
+<div class='gridItem' style='grid-area: 36 / 5; background-color: rgb(245, 105, 27)'></div>
+<div class='gridItem' style='grid-area: 36 / 6; background-color: rgb(252, 155, 98)'></div>
+<div class='gridItem' style='grid-area: 36 / 7; background-color: rgb(11, 39, 228)'></div>
+<div class='gridItem' style='grid-area: 36 / 8; background-color: rgb(175, 10, 176)'></div>
+<div class='gridItem' style='grid-area: 36 / 9; background-color: rgb(29, 83, 178)'></div>
+<div class='gridItem' style='grid-area: 36 / 10; background-color: rgb(207, 137, 12)'></div>
+<div class='gridItem' style='grid-area: 36 / 11; background-color: rgb(117, 208, 106)'></div>
+<div class='gridItem' style='grid-area: 36 / 12; background-color: rgb(164, 87, 212)'></div>
+<div class='gridItem' style='grid-area: 36 / 13; background-color: rgb(10, 148, 118)'></div>
+<div class='gridItem' style='grid-area: 36 / 14; background-color: rgb(66, 106, 126)'></div>
+<div class='gridItem' style='grid-area: 36 / 15; background-color: rgb(203, 80, 145)'></div>
+<div class='gridItem' style='grid-area: 36 / 16; background-color: rgb(141, 96, 38)'></div>
+<div class='gridItem' style='grid-area: 36 / 17; background-color: rgb(59, 121, 208)'></div>
+<div class='gridItem' style='grid-area: 36 / 18; background-color: rgb(79, 206, 112)'></div>
+<div class='gridItem' style='grid-area: 36 / 19; background-color: rgb(107, 66, 40)'></div>
+<div class='gridItem' style='grid-area: 36 / 20; background-color: rgb(162, 27, 43)'></div>
+<div class='gridItem' style='grid-area: 37 / 1; background-color: rgb(82, 148, 10)'></div>
+<div class='gridItem' style='grid-area: 37 / 2; background-color: rgb(41, 212, 93)'></div>
+<div class='gridItem' style='grid-area: 37 / 3; background-color: rgb(143, 37, 193)'></div>
+<div class='gridItem' style='grid-area: 37 / 4; background-color: rgb(193, 99, 30)'></div>
+<div class='gridItem' style='grid-area: 37 / 5; background-color: rgb(118, 116, 29)'></div>
+<div class='gridItem' style='grid-area: 37 / 6; background-color: rgb(82, 162, 49)'></div>
+<div class='gridItem' style='grid-area: 37 / 7; background-color: rgb(214, 215, 254)'></div>
+<div class='gridItem' style='grid-area: 37 / 8; background-color: rgb(96, 131, 80)'></div>
+<div class='gridItem' style='grid-area: 37 / 9; background-color: rgb(21, 136, 128)'></div>
+<div class='gridItem' style='grid-area: 37 / 10; background-color: rgb(187, 24, 202)'></div>
+<div class='gridItem' style='grid-area: 37 / 11; background-color: rgb(36, 232, 0)'></div>
+<div class='gridItem' style='grid-area: 37 / 12; background-color: rgb(26, 112, 24)'></div>
+<div class='gridItem' style='grid-area: 37 / 13; background-color: rgb(226, 56, 109)'></div>
+<div class='gridItem' style='grid-area: 37 / 14; background-color: rgb(232, 51, 38)'></div>
+<div class='gridItem' style='grid-area: 37 / 15; background-color: rgb(57, 151, 142)'></div>
+<div class='gridItem' style='grid-area: 37 / 16; background-color: rgb(124, 131, 208)'></div>
+<div class='gridItem' style='grid-area: 37 / 17; background-color: rgb(157, 134, 134)'></div>
+<div class='gridItem' style='grid-area: 37 / 18; background-color: rgb(21, 249, 95)'></div>
+<div class='gridItem' style='grid-area: 37 / 19; background-color: rgb(238, 23, 35)'></div>
+<div class='gridItem' style='grid-area: 37 / 20; background-color: rgb(69, 110, 13)'></div>
+<div class='gridItem' style='grid-area: 38 / 1; background-color: rgb(24, 45, 12)'></div>
+<div class='gridItem' style='grid-area: 38 / 2; background-color: rgb(63, 57, 139)'></div>
+<div class='gridItem' style='grid-area: 38 / 3; background-color: rgb(227, 24, 104)'></div>
+<div class='gridItem' style='grid-area: 38 / 4; background-color: rgb(63, 118, 40)'></div>
+<div class='gridItem' style='grid-area: 38 / 5; background-color: rgb(70, 32, 148)'></div>
+<div class='gridItem' style='grid-area: 38 / 6; background-color: rgb(225, 73, 205)'></div>
+<div class='gridItem' style='grid-area: 38 / 7; background-color: rgb(223, 30, 224)'></div>
+<div class='gridItem' style='grid-area: 38 / 8; background-color: rgb(193, 130, 135)'></div>
+<div class='gridItem' style='grid-area: 38 / 9; background-color: rgb(132, 16, 19)'></div>
+<div class='gridItem' style='grid-area: 38 / 10; background-color: rgb(95, 182, 8)'></div>
+<div class='gridItem' style='grid-area: 38 / 11; background-color: rgb(153, 14, 223)'></div>
+<div class='gridItem' style='grid-area: 38 / 12; background-color: rgb(199, 142, 70)'></div>
+<div class='gridItem' style='grid-area: 38 / 13; background-color: rgb(157, 197, 180)'></div>
+<div class='gridItem' style='grid-area: 38 / 14; background-color: rgb(55, 202, 70)'></div>
+<div class='gridItem' style='grid-area: 38 / 15; background-color: rgb(155, 126, 92)'></div>
+<div class='gridItem' style='grid-area: 38 / 16; background-color: rgb(85, 100, 205)'></div>
+<div class='gridItem' style='grid-area: 38 / 17; background-color: rgb(212, 249, 209)'></div>
+<div class='gridItem' style='grid-area: 38 / 18; background-color: rgb(61, 40, 75)'></div>
+<div class='gridItem' style='grid-area: 38 / 19; background-color: rgb(24, 67, 116)'></div>
+<div class='gridItem' style='grid-area: 38 / 20; background-color: rgb(157, 185, 186)'></div>
+<div class='gridItem' style='grid-area: 39 / 1; background-color: rgb(220, 220, 249)'></div>
+<div class='gridItem' style='grid-area: 39 / 2; background-color: rgb(11, 59, 72)'></div>
+<div class='gridItem' style='grid-area: 39 / 3; background-color: rgb(221, 75, 191)'></div>
+<div class='gridItem' style='grid-area: 39 / 4; background-color: rgb(71, 143, 185)'></div>
+<div class='gridItem' style='grid-area: 39 / 5; background-color: rgb(38, 158, 55)'></div>
+<div class='gridItem' style='grid-area: 39 / 6; background-color: rgb(20, 203, 200)'></div>
+<div class='gridItem' style='grid-area: 39 / 7; background-color: rgb(142, 209, 120)'></div>
+<div class='gridItem' style='grid-area: 39 / 8; background-color: rgb(17, 183, 217)'></div>
+<div class='gridItem' style='grid-area: 39 / 9; background-color: rgb(187, 239, 112)'></div>
+<div class='gridItem' style='grid-area: 39 / 10; background-color: rgb(17, 248, 175)'></div>
+<div class='gridItem' style='grid-area: 39 / 11; background-color: rgb(179, 234, 115)'></div>
+<div class='gridItem' style='grid-area: 39 / 12; background-color: rgb(176, 179, 138)'></div>
+<div class='gridItem' style='grid-area: 39 / 13; background-color: rgb(125, 145, 89)'></div>
+<div class='gridItem' style='grid-area: 39 / 14; background-color: rgb(99, 232, 61)'></div>
+<div class='gridItem' style='grid-area: 39 / 15; background-color: rgb(102, 2, 239)'></div>
+<div class='gridItem' style='grid-area: 39 / 16; background-color: rgb(59, 62, 252)'></div>
+<div class='gridItem' style='grid-area: 39 / 17; background-color: rgb(248, 210, 118)'></div>
+<div class='gridItem' style='grid-area: 39 / 18; background-color: rgb(186, 160, 222)'></div>
+<div class='gridItem' style='grid-area: 39 / 19; background-color: rgb(24, 32, 251)'></div>
+<div class='gridItem' style='grid-area: 39 / 20; background-color: rgb(38, 27, 51)'></div>
+<div class='gridItem' style='grid-area: 40 / 1; background-color: rgb(162, 41, 245)'></div>
+<div class='gridItem' style='grid-area: 40 / 2; background-color: rgb(100, 110, 113)'></div>
+<div class='gridItem' style='grid-area: 40 / 3; background-color: rgb(162, 102, 206)'></div>
+<div class='gridItem' style='grid-area: 40 / 4; background-color: rgb(160, 220, 209)'></div>
+<div class='gridItem' style='grid-area: 40 / 5; background-color: rgb(25, 81, 80)'></div>
+<div class='gridItem' style='grid-area: 40 / 6; background-color: rgb(112, 111, 240)'></div>
+<div class='gridItem' style='grid-area: 40 / 7; background-color: rgb(150, 252, 139)'></div>
+<div class='gridItem' style='grid-area: 40 / 8; background-color: rgb(214, 175, 117)'></div>
+<div class='gridItem' style='grid-area: 40 / 9; background-color: rgb(79, 74, 92)'></div>
+<div class='gridItem' style='grid-area: 40 / 10; background-color: rgb(47, 71, 82)'></div>
+<div class='gridItem' style='grid-area: 40 / 11; background-color: rgb(167, 150, 153)'></div>
+<div class='gridItem' style='grid-area: 40 / 12; background-color: rgb(58, 30, 11)'></div>
+<div class='gridItem' style='grid-area: 40 / 13; background-color: rgb(83, 89, 185)'></div>
+<div class='gridItem' style='grid-area: 40 / 14; background-color: rgb(206, 108, 48)'></div>
+<div class='gridItem' style='grid-area: 40 / 15; background-color: rgb(165, 85, 172)'></div>
+<div class='gridItem' style='grid-area: 40 / 16; background-color: rgb(116, 70, 169)'></div>
+<div class='gridItem' style='grid-area: 40 / 17; background-color: rgb(215, 168, 170)'></div>
+<div class='gridItem' style='grid-area: 40 / 18; background-color: rgb(114, 9, 18)'></div>
+<div class='gridItem' style='grid-area: 40 / 19; background-color: rgb(15, 181, 93)'></div>
+<div class='gridItem' style='grid-area: 40 / 20; background-color: rgb(79, 49, 249)'></div>
+<div class='gridItem' style='grid-area: 41 / 1; background-color: rgb(50, 42, 121)'></div>
+<div class='gridItem' style='grid-area: 41 / 2; background-color: rgb(128, 177, 128)'></div>
+<div class='gridItem' style='grid-area: 41 / 3; background-color: rgb(158, 166, 181)'></div>
+<div class='gridItem' style='grid-area: 41 / 4; background-color: rgb(43, 84, 220)'></div>
+<div class='gridItem' style='grid-area: 41 / 5; background-color: rgb(182, 156, 185)'></div>
+<div class='gridItem' style='grid-area: 41 / 6; background-color: rgb(154, 36, 127)'></div>
+<div class='gridItem' style='grid-area: 41 / 7; background-color: rgb(126, 172, 74)'></div>
+<div class='gridItem' style='grid-area: 41 / 8; background-color: rgb(183, 152, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 9; background-color: rgb(5, 169, 117)'></div>
+<div class='gridItem' style='grid-area: 41 / 10; background-color: rgb(46, 61, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 11; background-color: rgb(163, 175, 64)'></div>
+<div class='gridItem' style='grid-area: 41 / 12; background-color: rgb(145, 47, 22)'></div>
+<div class='gridItem' style='grid-area: 41 / 13; background-color: rgb(246, 183, 48)'></div>
+<div class='gridItem' style='grid-area: 41 / 14; background-color: rgb(193, 12, 80)'></div>
+<div class='gridItem' style='grid-area: 41 / 15; background-color: rgb(191, 250, 84)'></div>
+<div class='gridItem' style='grid-area: 41 / 16; background-color: rgb(231, 225, 233)'></div>
+<div class='gridItem' style='grid-area: 41 / 17; background-color: rgb(217, 46, 100)'></div>
+<div class='gridItem' style='grid-area: 41 / 18; background-color: rgb(224, 242, 78)'></div>
+<div class='gridItem' style='grid-area: 41 / 19; background-color: rgb(138, 33, 83)'></div>
+<div class='gridItem' style='grid-area: 41 / 20; background-color: rgb(58, 179, 78)'></div>
+<div class='gridItem' style='grid-area: 42 / 1; background-color: rgb(2, 153, 110)'></div>
+<div class='gridItem' style='grid-area: 42 / 2; background-color: rgb(96, 83, 158)'></div>
+<div class='gridItem' style='grid-area: 42 / 3; background-color: rgb(120, 155, 36)'></div>
+<div class='gridItem' style='grid-area: 42 / 4; background-color: rgb(231, 52, 7)'></div>
+<div class='gridItem' style='grid-area: 42 / 5; background-color: rgb(205, 248, 237)'></div>
+<div class='gridItem' style='grid-area: 42 / 6; background-color: rgb(39, 116, 114)'></div>
+<div class='gridItem' style='grid-area: 42 / 7; background-color: rgb(241, 23, 216)'></div>
+<div class='gridItem' style='grid-area: 42 / 8; background-color: rgb(249, 67, 12)'></div>
+<div class='gridItem' style='grid-area: 42 / 9; background-color: rgb(213, 132, 74)'></div>
+<div class='gridItem' style='grid-area: 42 / 10; background-color: rgb(187, 241, 11)'></div>
+<div class='gridItem' style='grid-area: 42 / 11; background-color: rgb(233, 111, 8)'></div>
+<div class='gridItem' style='grid-area: 42 / 12; background-color: rgb(25, 163, 165)'></div>
+<div class='gridItem' style='grid-area: 42 / 13; background-color: rgb(162, 51, 72)'></div>
+<div class='gridItem' style='grid-area: 42 / 14; background-color: rgb(65, 15, 161)'></div>
+<div class='gridItem' style='grid-area: 42 / 15; background-color: rgb(98, 251, 158)'></div>
+<div class='gridItem' style='grid-area: 42 / 16; background-color: rgb(124, 53, 67)'></div>
+<div class='gridItem' style='grid-area: 42 / 17; background-color: rgb(237, 179, 109)'></div>
+<div class='gridItem' style='grid-area: 42 / 18; background-color: rgb(20, 86, 128)'></div>
+<div class='gridItem' style='grid-area: 42 / 19; background-color: rgb(218, 104, 95)'></div>
+<div class='gridItem' style='grid-area: 42 / 20; background-color: rgb(62, 55, 121)'></div>
+<div class='gridItem' style='grid-area: 43 / 1; background-color: rgb(162, 207, 22)'></div>
+<div class='gridItem' style='grid-area: 43 / 2; background-color: rgb(82, 137, 132)'></div>
+<div class='gridItem' style='grid-area: 43 / 3; background-color: rgb(113, 15, 143)'></div>
+<div class='gridItem' style='grid-area: 43 / 4; background-color: rgb(27, 156, 232)'></div>
+<div class='gridItem' style='grid-area: 43 / 5; background-color: rgb(11, 186, 60)'></div>
+<div class='gridItem' style='grid-area: 43 / 6; background-color: rgb(213, 43, 55)'></div>
+<div class='gridItem' style='grid-area: 43 / 7; background-color: rgb(163, 26, 158)'></div>
+<div class='gridItem' style='grid-area: 43 / 8; background-color: rgb(122, 136, 51)'></div>
+<div class='gridItem' style='grid-area: 43 / 9; background-color: rgb(200, 78, 208)'></div>
+<div class='gridItem' style='grid-area: 43 / 10; background-color: rgb(81, 154, 188)'></div>
+<div class='gridItem' style='grid-area: 43 / 11; background-color: rgb(98, 83, 205)'></div>
+<div class='gridItem' style='grid-area: 43 / 12; background-color: rgb(227, 142, 113)'></div>
+<div class='gridItem' style='grid-area: 43 / 13; background-color: rgb(31, 186, 181)'></div>
+<div class='gridItem' style='grid-area: 43 / 14; background-color: rgb(166, 101, 92)'></div>
+<div class='gridItem' style='grid-area: 43 / 15; background-color: rgb(128, 25, 159)'></div>
+<div class='gridItem' style='grid-area: 43 / 16; background-color: rgb(119, 31, 8)'></div>
+<div class='gridItem' style='grid-area: 43 / 17; background-color: rgb(140, 76, 120)'></div>
+<div class='gridItem' style='grid-area: 43 / 18; background-color: rgb(72, 135, 49)'></div>
+<div class='gridItem' style='grid-area: 43 / 19; background-color: rgb(180, 252, 226)'></div>
+<div class='gridItem' style='grid-area: 43 / 20; background-color: rgb(171, 174, 244)'></div>
+<div class='gridItem' style='grid-area: 44 / 1; background-color: rgb(148, 54, 146)'></div>
+<div class='gridItem' style='grid-area: 44 / 2; background-color: rgb(49, 97, 44)'></div>
+<div class='gridItem' style='grid-area: 44 / 3; background-color: rgb(73, 64, 163)'></div>
+<div class='gridItem' style='grid-area: 44 / 4; background-color: rgb(8, 142, 94)'></div>
+<div class='gridItem' style='grid-area: 44 / 5; background-color: rgb(132, 207, 94)'></div>
+<div class='gridItem' style='grid-area: 44 / 6; background-color: rgb(171, 116, 252)'></div>
+<div class='gridItem' style='grid-area: 44 / 7; background-color: rgb(124, 237, 211)'></div>
+<div class='gridItem' style='grid-area: 44 / 8; background-color: rgb(118, 200, 238)'></div>
+<div class='gridItem' style='grid-area: 44 / 9; background-color: rgb(178, 215, 73)'></div>
+<div class='gridItem' style='grid-area: 44 / 10; background-color: rgb(201, 188, 160)'></div>
+<div class='gridItem' style='grid-area: 44 / 11; background-color: rgb(235, 9, 159)'></div>
+<div class='gridItem' style='grid-area: 44 / 12; background-color: rgb(230, 73, 145)'></div>
+<div class='gridItem' style='grid-area: 44 / 13; background-color: rgb(75, 151, 135)'></div>
+<div class='gridItem' style='grid-area: 44 / 14; background-color: rgb(56, 244, 38)'></div>
+<div class='gridItem' style='grid-area: 44 / 15; background-color: rgb(124, 120, 26)'></div>
+<div class='gridItem' style='grid-area: 44 / 16; background-color: rgb(102, 115, 162)'></div>
+<div class='gridItem' style='grid-area: 44 / 17; background-color: rgb(46, 199, 78)'></div>
+<div class='gridItem' style='grid-area: 44 / 18; background-color: rgb(169, 69, 248)'></div>
+<div class='gridItem' style='grid-area: 44 / 19; background-color: rgb(217, 188, 147)'></div>
+<div class='gridItem' style='grid-area: 44 / 20; background-color: rgb(224, 93, 113)'></div>
+<div class='gridItem' style='grid-area: 45 / 1; background-color: rgb(253, 217, 126)'></div>
+<div class='gridItem' style='grid-area: 45 / 2; background-color: rgb(31, 80, 213)'></div>
+<div class='gridItem' style='grid-area: 45 / 3; background-color: rgb(16, 239, 112)'></div>
+<div class='gridItem' style='grid-area: 45 / 4; background-color: rgb(7, 159, 87)'></div>
+<div class='gridItem' style='grid-area: 45 / 5; background-color: rgb(66, 217, 189)'></div>
+<div class='gridItem' style='grid-area: 45 / 6; background-color: rgb(54, 44, 150)'></div>
+<div class='gridItem' style='grid-area: 45 / 7; background-color: rgb(32, 45, 69)'></div>
+<div class='gridItem' style='grid-area: 45 / 8; background-color: rgb(81, 189, 45)'></div>
+<div class='gridItem' style='grid-area: 45 / 9; background-color: rgb(81, 75, 86)'></div>
+<div class='gridItem' style='grid-area: 45 / 10; background-color: rgb(63, 81, 61)'></div>
+<div class='gridItem' style='grid-area: 45 / 11; background-color: rgb(200, 97, 102)'></div>
+<div class='gridItem' style='grid-area: 45 / 12; background-color: rgb(222, 229, 82)'></div>
+<div class='gridItem' style='grid-area: 45 / 13; background-color: rgb(99, 113, 255)'></div>
+<div class='gridItem' style='grid-area: 45 / 14; background-color: rgb(138, 238, 11)'></div>
+<div class='gridItem' style='grid-area: 45 / 15; background-color: rgb(241, 221, 37)'></div>
+<div class='gridItem' style='grid-area: 45 / 16; background-color: rgb(46, 162, 140)'></div>
+<div class='gridItem' style='grid-area: 45 / 17; background-color: rgb(29, 63, 103)'></div>
+<div class='gridItem' style='grid-area: 45 / 18; background-color: rgb(127, 162, 135)'></div>
+<div class='gridItem' style='grid-area: 45 / 19; background-color: rgb(188, 89, 196)'></div>
+<div class='gridItem' style='grid-area: 45 / 20; background-color: rgb(103, 147, 139)'></div>
+<div class='gridItem' style='grid-area: 46 / 1; background-color: rgb(27, 155, 92)'></div>
+<div class='gridItem' style='grid-area: 46 / 2; background-color: rgb(181, 130, 123)'></div>
+<div class='gridItem' style='grid-area: 46 / 3; background-color: rgb(166, 223, 165)'></div>
+<div class='gridItem' style='grid-area: 46 / 4; background-color: rgb(221, 193, 28)'></div>
+<div class='gridItem' style='grid-area: 46 / 5; background-color: rgb(185, 92, 68)'></div>
+<div class='gridItem' style='grid-area: 46 / 6; background-color: rgb(180, 103, 243)'></div>
+<div class='gridItem' style='grid-area: 46 / 7; background-color: rgb(137, 30, 22)'></div>
+<div class='gridItem' style='grid-area: 46 / 8; background-color: rgb(131, 201, 86)'></div>
+<div class='gridItem' style='grid-area: 46 / 9; background-color: rgb(12, 119, 223)'></div>
+<div class='gridItem' style='grid-area: 46 / 10; background-color: rgb(26, 187, 90)'></div>
+<div class='gridItem' style='grid-area: 46 / 11; background-color: rgb(84, 52, 80)'></div>
+<div class='gridItem' style='grid-area: 46 / 12; background-color: rgb(158, 187, 194)'></div>
+<div class='gridItem' style='grid-area: 46 / 13; background-color: rgb(119, 158, 14)'></div>
+<div class='gridItem' style='grid-area: 46 / 14; background-color: rgb(83, 56, 96)'></div>
+<div class='gridItem' style='grid-area: 46 / 15; background-color: rgb(166, 123, 145)'></div>
+<div class='gridItem' style='grid-area: 46 / 16; background-color: rgb(77, 176, 36)'></div>
+<div class='gridItem' style='grid-area: 46 / 17; background-color: rgb(156, 141, 210)'></div>
+<div class='gridItem' style='grid-area: 46 / 18; background-color: rgb(240, 123, 132)'></div>
+<div class='gridItem' style='grid-area: 46 / 19; background-color: rgb(67, 43, 161)'></div>
+<div class='gridItem' style='grid-area: 46 / 20; background-color: rgb(37, 24, 31)'></div>
+<div class='gridItem' style='grid-area: 47 / 1; background-color: rgb(54, 189, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 2; background-color: rgb(191, 182, 183)'></div>
+<div class='gridItem' style='grid-area: 47 / 3; background-color: rgb(228, 58, 53)'></div>
+<div class='gridItem' style='grid-area: 47 / 4; background-color: rgb(250, 45, 113)'></div>
+<div class='gridItem' style='grid-area: 47 / 5; background-color: rgb(109, 117, 192)'></div>
+<div class='gridItem' style='grid-area: 47 / 6; background-color: rgb(135, 20, 198)'></div>
+<div class='gridItem' style='grid-area: 47 / 7; background-color: rgb(109, 113, 194)'></div>
+<div class='gridItem' style='grid-area: 47 / 8; background-color: rgb(57, 180, 69)'></div>
+<div class='gridItem' style='grid-area: 47 / 9; background-color: rgb(168, 176, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 10; background-color: rgb(182, 146, 119)'></div>
+<div class='gridItem' style='grid-area: 47 / 11; background-color: rgb(239, 2, 41)'></div>
+<div class='gridItem' style='grid-area: 47 / 12; background-color: rgb(51, 104, 215)'></div>
+<div class='gridItem' style='grid-area: 47 / 13; background-color: rgb(50, 6, 94)'></div>
+<div class='gridItem' style='grid-area: 47 / 14; background-color: rgb(69, 186, 205)'></div>
+<div class='gridItem' style='grid-area: 47 / 15; background-color: rgb(119, 80, 151)'></div>
+<div class='gridItem' style='grid-area: 47 / 16; background-color: rgb(214, 54, 208)'></div>
+<div class='gridItem' style='grid-area: 47 / 17; background-color: rgb(175, 199, 197)'></div>
+<div class='gridItem' style='grid-area: 47 / 18; background-color: rgb(242, 228, 176)'></div>
+<div class='gridItem' style='grid-area: 47 / 19; background-color: rgb(195, 33, 62)'></div>
+<div class='gridItem' style='grid-area: 47 / 20; background-color: rgb(41, 248, 194)'></div>
+<div class='gridItem' style='grid-area: 48 / 1; background-color: rgb(208, 57, 140)'></div>
+<div class='gridItem' style='grid-area: 48 / 2; background-color: rgb(142, 99, 95)'></div>
+<div class='gridItem' style='grid-area: 48 / 3; background-color: rgb(98, 120, 20)'></div>
+<div class='gridItem' style='grid-area: 48 / 4; background-color: rgb(49, 195, 95)'></div>
+<div class='gridItem' style='grid-area: 48 / 5; background-color: rgb(24, 103, 173)'></div>
+<div class='gridItem' style='grid-area: 48 / 6; background-color: rgb(178, 55, 170)'></div>
+<div class='gridItem' style='grid-area: 48 / 7; background-color: rgb(35, 244, 202)'></div>
+<div class='gridItem' style='grid-area: 48 / 8; background-color: rgb(186, 161, 131)'></div>
+<div class='gridItem' style='grid-area: 48 / 9; background-color: rgb(35, 41, 65)'></div>
+<div class='gridItem' style='grid-area: 48 / 10; background-color: rgb(82, 102, 233)'></div>
+<div class='gridItem' style='grid-area: 48 / 11; background-color: rgb(24, 245, 43)'></div>
+<div class='gridItem' style='grid-area: 48 / 12; background-color: rgb(8, 76, 44)'></div>
+<div class='gridItem' style='grid-area: 48 / 13; background-color: rgb(43, 81, 205)'></div>
+<div class='gridItem' style='grid-area: 48 / 14; background-color: rgb(18, 26, 118)'></div>
+<div class='gridItem' style='grid-area: 48 / 15; background-color: rgb(156, 186, 34)'></div>
+<div class='gridItem' style='grid-area: 48 / 16; background-color: rgb(178, 201, 110)'></div>
+<div class='gridItem' style='grid-area: 48 / 17; background-color: rgb(114, 186, 101)'></div>
+<div class='gridItem' style='grid-area: 48 / 18; background-color: rgb(223, 5, 82)'></div>
+<div class='gridItem' style='grid-area: 48 / 19; background-color: rgb(107, 128, 200)'></div>
+<div class='gridItem' style='grid-area: 48 / 20; background-color: rgb(90, 233, 157)'></div>
+<div class='gridItem' style='grid-area: 49 / 1; background-color: rgb(96, 147, 12)'></div>
+<div class='gridItem' style='grid-area: 49 / 2; background-color: rgb(104, 85, 35)'></div>
+<div class='gridItem' style='grid-area: 49 / 3; background-color: rgb(35, 86, 169)'></div>
+<div class='gridItem' style='grid-area: 49 / 4; background-color: rgb(182, 235, 21)'></div>
+<div class='gridItem' style='grid-area: 49 / 5; background-color: rgb(71, 64, 147)'></div>
+<div class='gridItem' style='grid-area: 49 / 6; background-color: rgb(145, 195, 184)'></div>
+<div class='gridItem' style='grid-area: 49 / 7; background-color: rgb(168, 229, 190)'></div>
+<div class='gridItem' style='grid-area: 49 / 8; background-color: rgb(181, 148, 73)'></div>
+<div class='gridItem' style='grid-area: 49 / 9; background-color: rgb(133, 234, 183)'></div>
+<div class='gridItem' style='grid-area: 49 / 10; background-color: rgb(159, 122, 111)'></div>
+<div class='gridItem' style='grid-area: 49 / 11; background-color: rgb(84, 156, 95)'></div>
+<div class='gridItem' style='grid-area: 49 / 12; background-color: rgb(165, 123, 75)'></div>
+<div class='gridItem' style='grid-area: 49 / 13; background-color: rgb(210, 70, 241)'></div>
+<div class='gridItem' style='grid-area: 49 / 14; background-color: rgb(183, 129, 16)'></div>
+<div class='gridItem' style='grid-area: 49 / 15; background-color: rgb(146, 48, 132)'></div>
+<div class='gridItem' style='grid-area: 49 / 16; background-color: rgb(206, 131, 165)'></div>
+<div class='gridItem' style='grid-area: 49 / 17; background-color: rgb(105, 97, 177)'></div>
+<div class='gridItem' style='grid-area: 49 / 18; background-color: rgb(144, 180, 22)'></div>
+<div class='gridItem' style='grid-area: 49 / 19; background-color: rgb(130, 218, 183)'></div>
+<div class='gridItem' style='grid-area: 49 / 20; background-color: rgb(25, 212, 91)'></div>
+<div class='gridItem' style='grid-area: 50 / 1; background-color: rgb(191, 68, 16)'></div>
+<div class='gridItem' style='grid-area: 50 / 2; background-color: rgb(120, 216, 177)'></div>
+<div class='gridItem' style='grid-area: 50 / 3; background-color: rgb(35, 148, 6)'></div>
+<div class='gridItem' style='grid-area: 50 / 4; background-color: rgb(237, 77, 92)'></div>
+<div class='gridItem' style='grid-area: 50 / 5; background-color: rgb(232, 51, 248)'></div>
+<div class='gridItem' style='grid-area: 50 / 6; background-color: rgb(235, 225, 151)'></div>
+<div class='gridItem' style='grid-area: 50 / 7; background-color: rgb(231, 108, 137)'></div>
+<div class='gridItem' style='grid-area: 50 / 8; background-color: rgb(226, 182, 66)'></div>
+<div class='gridItem' style='grid-area: 50 / 9; background-color: rgb(187, 69, 17)'></div>
+<div class='gridItem' style='grid-area: 50 / 10; background-color: rgb(27, 199, 62)'></div>
+<div class='gridItem' style='grid-area: 50 / 11; background-color: rgb(75, 24, 153)'></div>
+<div class='gridItem' style='grid-area: 50 / 12; background-color: rgb(160, 219, 79)'></div>
+<div class='gridItem' style='grid-area: 50 / 13; background-color: rgb(148, 140, 127)'></div>
+<div class='gridItem' style='grid-area: 50 / 14; background-color: rgb(250, 0, 28)'></div>
+<div class='gridItem' style='grid-area: 50 / 15; background-color: rgb(227, 5, 235)'></div>
+<div class='gridItem' style='grid-area: 50 / 16; background-color: rgb(98, 167, 200)'></div>
+<div class='gridItem' style='grid-area: 50 / 17; background-color: rgb(132, 24, 126)'></div>
+<div class='gridItem' style='grid-area: 50 / 18; background-color: rgb(140, 152, 192)'></div>
+<div class='gridItem' style='grid-area: 50 / 19; background-color: rgb(100, 220, 88)'></div>
+<div class='gridItem' style='grid-area: 50 / 20; background-color: rgb(100, 70, 217)'></div>
+<div class='gridItem' style='grid-area: 51 / 1; background-color: rgb(205, 47, 63)'></div>
+<div class='gridItem' style='grid-area: 51 / 2; background-color: rgb(32, 175, 106)'></div>
+<div class='gridItem' style='grid-area: 51 / 3; background-color: rgb(177, 144, 12)'></div>
+<div class='gridItem' style='grid-area: 51 / 4; background-color: rgb(6, 132, 198)'></div>
+<div class='gridItem' style='grid-area: 51 / 5; background-color: rgb(92, 210, 121)'></div>
+<div class='gridItem' style='grid-area: 51 / 6; background-color: rgb(213, 216, 101)'></div>
+<div class='gridItem' style='grid-area: 51 / 7; background-color: rgb(19, 47, 143)'></div>
+<div class='gridItem' style='grid-area: 51 / 8; background-color: rgb(188, 48, 167)'></div>
+<div class='gridItem' style='grid-area: 51 / 9; background-color: rgb(91, 79, 8)'></div>
+<div class='gridItem' style='grid-area: 51 / 10; background-color: rgb(97, 61, 137)'></div>
+<div class='gridItem' style='grid-area: 51 / 11; background-color: rgb(44, 143, 124)'></div>
+<div class='gridItem' style='grid-area: 51 / 12; background-color: rgb(49, 4, 64)'></div>
+<div class='gridItem' style='grid-area: 51 / 13; background-color: rgb(238, 99, 177)'></div>
+<div class='gridItem' style='grid-area: 51 / 14; background-color: rgb(117, 211, 124)'></div>
+<div class='gridItem' style='grid-area: 51 / 15; background-color: rgb(51, 38, 63)'></div>
+<div class='gridItem' style='grid-area: 51 / 16; background-color: rgb(26, 46, 132)'></div>
+<div class='gridItem' style='grid-area: 51 / 17; background-color: rgb(164, 39, 197)'></div>
+<div class='gridItem' style='grid-area: 51 / 18; background-color: rgb(243, 167, 48)'></div>
+<div class='gridItem' style='grid-area: 51 / 19; background-color: rgb(23, 97, 17)'></div>
+<div class='gridItem' style='grid-area: 51 / 20; background-color: rgb(35, 250, 20)'></div>
+<div class='gridItem' style='grid-area: 52 / 1; background-color: rgb(251, 231, 188)'></div>
+<div class='gridItem' style='grid-area: 52 / 2; background-color: rgb(246, 2, 188)'></div>
+<div class='gridItem' style='grid-area: 52 / 3; background-color: rgb(193, 111, 103)'></div>
+<div class='gridItem' style='grid-area: 52 / 4; background-color: rgb(23, 159, 70)'></div>
+<div class='gridItem' style='grid-area: 52 / 5; background-color: rgb(194, 20, 241)'></div>
+<div class='gridItem' style='grid-area: 52 / 6; background-color: rgb(101, 130, 107)'></div>
+<div class='gridItem' style='grid-area: 52 / 7; background-color: rgb(53, 120, 66)'></div>
+<div class='gridItem' style='grid-area: 52 / 8; background-color: rgb(138, 250, 94)'></div>
+<div class='gridItem' style='grid-area: 52 / 9; background-color: rgb(18, 20, 102)'></div>
+<div class='gridItem' style='grid-area: 52 / 10; background-color: rgb(233, 230, 103)'></div>
+<div class='gridItem' style='grid-area: 52 / 11; background-color: rgb(46, 155, 150)'></div>
+<div class='gridItem' style='grid-area: 52 / 12; background-color: rgb(102, 199, 185)'></div>
+<div class='gridItem' style='grid-area: 52 / 13; background-color: rgb(9, 114, 142)'></div>
+<div class='gridItem' style='grid-area: 52 / 14; background-color: rgb(254, 126, 164)'></div>
+<div class='gridItem' style='grid-area: 52 / 15; background-color: rgb(231, 100, 63)'></div>
+<div class='gridItem' style='grid-area: 52 / 16; background-color: rgb(206, 170, 36)'></div>
+<div class='gridItem' style='grid-area: 52 / 17; background-color: rgb(25, 83, 121)'></div>
+<div class='gridItem' style='grid-area: 52 / 18; background-color: rgb(167, 220, 75)'></div>
+<div class='gridItem' style='grid-area: 52 / 19; background-color: rgb(217, 133, 253)'></div>
+<div class='gridItem' style='grid-area: 52 / 20; background-color: rgb(48, 191, 11)'></div>
+<div class='gridItem' style='grid-area: 53 / 1; background-color: rgb(187, 161, 128)'></div>
+<div class='gridItem' style='grid-area: 53 / 2; background-color: rgb(211, 24, 26)'></div>
+<div class='gridItem' style='grid-area: 53 / 3; background-color: rgb(254, 103, 74)'></div>
+<div class='gridItem' style='grid-area: 53 / 4; background-color: rgb(252, 227, 91)'></div>
+<div class='gridItem' style='grid-area: 53 / 5; background-color: rgb(239, 219, 228)'></div>
+<div class='gridItem' style='grid-area: 53 / 6; background-color: rgb(184, 25, 107)'></div>
+<div class='gridItem' style='grid-area: 53 / 7; background-color: rgb(120, 230, 93)'></div>
+<div class='gridItem' style='grid-area: 53 / 8; background-color: rgb(0, 12, 67)'></div>
+<div class='gridItem' style='grid-area: 53 / 9; background-color: rgb(17, 106, 3)'></div>
+<div class='gridItem' style='grid-area: 53 / 10; background-color: rgb(232, 137, 249)'></div>
+<div class='gridItem' style='grid-area: 53 / 11; background-color: rgb(7, 118, 175)'></div>
+<div class='gridItem' style='grid-area: 53 / 12; background-color: rgb(221, 35, 154)'></div>
+<div class='gridItem' style='grid-area: 53 / 13; background-color: rgb(126, 149, 36)'></div>
+<div class='gridItem' style='grid-area: 53 / 14; background-color: rgb(11, 98, 202)'></div>
+<div class='gridItem' style='grid-area: 53 / 15; background-color: rgb(188, 102, 226)'></div>
+<div class='gridItem' style='grid-area: 53 / 16; background-color: rgb(2, 83, 177)'></div>
+<div class='gridItem' style='grid-area: 53 / 17; background-color: rgb(243, 58, 187)'></div>
+<div class='gridItem' style='grid-area: 53 / 18; background-color: rgb(154, 114, 36)'></div>
+<div class='gridItem' style='grid-area: 53 / 19; background-color: rgb(232, 230, 92)'></div>
+<div class='gridItem' style='grid-area: 53 / 20; background-color: rgb(206, 71, 1)'></div>
+<div class='gridItem' style='grid-area: 54 / 1; background-color: rgb(200, 230, 49)'></div>
+<div class='gridItem' style='grid-area: 54 / 2; background-color: rgb(94, 74, 213)'></div>
+<div class='gridItem' style='grid-area: 54 / 3; background-color: rgb(250, 16, 79)'></div>
+<div class='gridItem' style='grid-area: 54 / 4; background-color: rgb(157, 109, 253)'></div>
+<div class='gridItem' style='grid-area: 54 / 5; background-color: rgb(194, 106, 57)'></div>
+<div class='gridItem' style='grid-area: 54 / 6; background-color: rgb(145, 14, 91)'></div>
+<div class='gridItem' style='grid-area: 54 / 7; background-color: rgb(5, 23, 92)'></div>
+<div class='gridItem' style='grid-area: 54 / 8; background-color: rgb(152, 243, 216)'></div>
+<div class='gridItem' style='grid-area: 54 / 9; background-color: rgb(225, 84, 118)'></div>
+<div class='gridItem' style='grid-area: 54 / 10; background-color: rgb(27, 156, 228)'></div>
+<div class='gridItem' style='grid-area: 54 / 11; background-color: rgb(229, 173, 223)'></div>
+<div class='gridItem' style='grid-area: 54 / 12; background-color: rgb(201, 84, 37)'></div>
+<div class='gridItem' style='grid-area: 54 / 13; background-color: rgb(107, 34, 150)'></div>
+<div class='gridItem' style='grid-area: 54 / 14; background-color: rgb(44, 4, 124)'></div>
+<div class='gridItem' style='grid-area: 54 / 15; background-color: rgb(139, 150, 227)'></div>
+<div class='gridItem' style='grid-area: 54 / 16; background-color: rgb(230, 175, 210)'></div>
+<div class='gridItem' style='grid-area: 54 / 17; background-color: rgb(130, 98, 39)'></div>
+<div class='gridItem' style='grid-area: 54 / 18; background-color: rgb(185, 24, 146)'></div>
+<div class='gridItem' style='grid-area: 54 / 19; background-color: rgb(204, 205, 234)'></div>
+<div class='gridItem' style='grid-area: 54 / 20; background-color: rgb(224, 205, 82)'></div>
+<div class='gridItem' style='grid-area: 55 / 1; background-color: rgb(218, 236, 8)'></div>
+<div class='gridItem' style='grid-area: 55 / 2; background-color: rgb(118, 11, 82)'></div>
+<div class='gridItem' style='grid-area: 55 / 3; background-color: rgb(189, 121, 126)'></div>
+<div class='gridItem' style='grid-area: 55 / 4; background-color: rgb(107, 200, 40)'></div>
+<div class='gridItem' style='grid-area: 55 / 5; background-color: rgb(8, 194, 243)'></div>
+<div class='gridItem' style='grid-area: 55 / 6; background-color: rgb(114, 195, 232)'></div>
+<div class='gridItem' style='grid-area: 55 / 7; background-color: rgb(90, 52, 208)'></div>
+<div class='gridItem' style='grid-area: 55 / 8; background-color: rgb(115, 68, 56)'></div>
+<div class='gridItem' style='grid-area: 55 / 9; background-color: rgb(11, 242, 178)'></div>
+<div class='gridItem' style='grid-area: 55 / 10; background-color: rgb(58, 138, 161)'></div>
+<div class='gridItem' style='grid-area: 55 / 11; background-color: rgb(169, 22, 222)'></div>
+<div class='gridItem' style='grid-area: 55 / 12; background-color: rgb(62, 92, 77)'></div>
+<div class='gridItem' style='grid-area: 55 / 13; background-color: rgb(33, 43, 137)'></div>
+<div class='gridItem' style='grid-area: 55 / 14; background-color: rgb(126, 202, 48)'></div>
+<div class='gridItem' style='grid-area: 55 / 15; background-color: rgb(151, 5, 94)'></div>
+<div class='gridItem' style='grid-area: 55 / 16; background-color: rgb(49, 130, 189)'></div>
+<div class='gridItem' style='grid-area: 55 / 17; background-color: rgb(22, 110, 8)'></div>
+<div class='gridItem' style='grid-area: 55 / 18; background-color: rgb(168, 221, 227)'></div>
+<div class='gridItem' style='grid-area: 55 / 19; background-color: rgb(30, 36, 51)'></div>
+<div class='gridItem' style='grid-area: 55 / 20; background-color: rgb(63, 102, 98)'></div>
+<div class='gridItem' style='grid-area: 56 / 1; background-color: rgb(204, 98, 45)'></div>
+<div class='gridItem' style='grid-area: 56 / 2; background-color: rgb(89, 49, 170)'></div>
+<div class='gridItem' style='grid-area: 56 / 3; background-color: rgb(169, 169, 108)'></div>
+<div class='gridItem' style='grid-area: 56 / 4; background-color: rgb(212, 124, 243)'></div>
+<div class='gridItem' style='grid-area: 56 / 5; background-color: rgb(245, 118, 141)'></div>
+<div class='gridItem' style='grid-area: 56 / 6; background-color: rgb(69, 136, 3)'></div>
+<div class='gridItem' style='grid-area: 56 / 7; background-color: rgb(250, 99, 43)'></div>
+<div class='gridItem' style='grid-area: 56 / 8; background-color: rgb(154, 142, 55)'></div>
+<div class='gridItem' style='grid-area: 56 / 9; background-color: rgb(32, 23, 84)'></div>
+<div class='gridItem' style='grid-area: 56 / 10; background-color: rgb(87, 21, 233)'></div>
+<div class='gridItem' style='grid-area: 56 / 11; background-color: rgb(174, 145, 66)'></div>
+<div class='gridItem' style='grid-area: 56 / 12; background-color: rgb(153, 90, 179)'></div>
+<div class='gridItem' style='grid-area: 56 / 13; background-color: rgb(80, 11, 95)'></div>
+<div class='gridItem' style='grid-area: 56 / 14; background-color: rgb(33, 21, 47)'></div>
+<div class='gridItem' style='grid-area: 56 / 15; background-color: rgb(139, 233, 162)'></div>
+<div class='gridItem' style='grid-area: 56 / 16; background-color: rgb(150, 207, 84)'></div>
+<div class='gridItem' style='grid-area: 56 / 17; background-color: rgb(52, 170, 169)'></div>
+<div class='gridItem' style='grid-area: 56 / 18; background-color: rgb(90, 172, 97)'></div>
+<div class='gridItem' style='grid-area: 56 / 19; background-color: rgb(229, 18, 52)'></div>
+<div class='gridItem' style='grid-area: 56 / 20; background-color: rgb(155, 83, 69)'></div>
+<div class='gridItem' style='grid-area: 57 / 1; background-color: rgb(94, 235, 43)'></div>
+<div class='gridItem' style='grid-area: 57 / 2; background-color: rgb(0, 160, 157)'></div>
+<div class='gridItem' style='grid-area: 57 / 3; background-color: rgb(200, 98, 105)'></div>
+<div class='gridItem' style='grid-area: 57 / 4; background-color: rgb(47, 244, 58)'></div>
+<div class='gridItem' style='grid-area: 57 / 5; background-color: rgb(184, 229, 139)'></div>
+<div class='gridItem' style='grid-area: 57 / 6; background-color: rgb(28, 15, 138)'></div>
+<div class='gridItem' style='grid-area: 57 / 7; background-color: rgb(54, 243, 4)'></div>
+<div class='gridItem' style='grid-area: 57 / 8; background-color: rgb(105, 225, 236)'></div>
+<div class='gridItem' style='grid-area: 57 / 9; background-color: rgb(46, 168, 209)'></div>
+<div class='gridItem' style='grid-area: 57 / 10; background-color: rgb(78, 131, 196)'></div>
+<div class='gridItem' style='grid-area: 57 / 11; background-color: rgb(246, 200, 170)'></div>
+<div class='gridItem' style='grid-area: 57 / 12; background-color: rgb(252, 184, 111)'></div>
+<div class='gridItem' style='grid-area: 57 / 13; background-color: rgb(254, 95, 134)'></div>
+<div class='gridItem' style='grid-area: 57 / 14; background-color: rgb(81, 198, 197)'></div>
+<div class='gridItem' style='grid-area: 57 / 15; background-color: rgb(41, 37, 4)'></div>
+<div class='gridItem' style='grid-area: 57 / 16; background-color: rgb(205, 172, 176)'></div>
+<div class='gridItem' style='grid-area: 57 / 17; background-color: rgb(50, 120, 128)'></div>
+<div class='gridItem' style='grid-area: 57 / 18; background-color: rgb(145, 79, 91)'></div>
+<div class='gridItem' style='grid-area: 57 / 19; background-color: rgb(121, 90, 21)'></div>
+<div class='gridItem' style='grid-area: 57 / 20; background-color: rgb(155, 59, 69)'></div>
+<div class='gridItem' style='grid-area: 58 / 1; background-color: rgb(57, 53, 234)'></div>
+<div class='gridItem' style='grid-area: 58 / 2; background-color: rgb(61, 189, 135)'></div>
+<div class='gridItem' style='grid-area: 58 / 3; background-color: rgb(113, 254, 133)'></div>
+<div class='gridItem' style='grid-area: 58 / 4; background-color: rgb(133, 114, 84)'></div>
+<div class='gridItem' style='grid-area: 58 / 5; background-color: rgb(184, 94, 222)'></div>
+<div class='gridItem' style='grid-area: 58 / 6; background-color: rgb(96, 61, 187)'></div>
+<div class='gridItem' style='grid-area: 58 / 7; background-color: rgb(40, 231, 134)'></div>
+<div class='gridItem' style='grid-area: 58 / 8; background-color: rgb(193, 252, 213)'></div>
+<div class='gridItem' style='grid-area: 58 / 9; background-color: rgb(189, 248, 187)'></div>
+<div class='gridItem' style='grid-area: 58 / 10; background-color: rgb(37, 77, 172)'></div>
+<div class='gridItem' style='grid-area: 58 / 11; background-color: rgb(62, 129, 66)'></div>
+<div class='gridItem' style='grid-area: 58 / 12; background-color: rgb(120, 212, 6)'></div>
+<div class='gridItem' style='grid-area: 58 / 13; background-color: rgb(10, 7, 94)'></div>
+<div class='gridItem' style='grid-area: 58 / 14; background-color: rgb(254, 73, 170)'></div>
+<div class='gridItem' style='grid-area: 58 / 15; background-color: rgb(5, 87, 24)'></div>
+<div class='gridItem' style='grid-area: 58 / 16; background-color: rgb(235, 77, 233)'></div>
+<div class='gridItem' style='grid-area: 58 / 17; background-color: rgb(144, 55, 126)'></div>
+<div class='gridItem' style='grid-area: 58 / 18; background-color: rgb(100, 111, 62)'></div>
+<div class='gridItem' style='grid-area: 58 / 19; background-color: rgb(20, 77, 199)'></div>
+<div class='gridItem' style='grid-area: 58 / 20; background-color: rgb(91, 99, 171)'></div>
+<div class='gridItem' style='grid-area: 59 / 1; background-color: rgb(121, 36, 2)'></div>
+<div class='gridItem' style='grid-area: 59 / 2; background-color: rgb(175, 14, 211)'></div>
+<div class='gridItem' style='grid-area: 59 / 3; background-color: rgb(107, 149, 115)'></div>
+<div class='gridItem' style='grid-area: 59 / 4; background-color: rgb(247, 21, 185)'></div>
+<div class='gridItem' style='grid-area: 59 / 5; background-color: rgb(239, 122, 46)'></div>
+<div class='gridItem' style='grid-area: 59 / 6; background-color: rgb(73, 78, 120)'></div>
+<div class='gridItem' style='grid-area: 59 / 7; background-color: rgb(82, 7, 20)'></div>
+<div class='gridItem' style='grid-area: 59 / 8; background-color: rgb(242, 83, 135)'></div>
+<div class='gridItem' style='grid-area: 59 / 9; background-color: rgb(172, 190, 155)'></div>
+<div class='gridItem' style='grid-area: 59 / 10; background-color: rgb(73, 114, 223)'></div>
+<div class='gridItem' style='grid-area: 59 / 11; background-color: rgb(202, 181, 63)'></div>
+<div class='gridItem' style='grid-area: 59 / 12; background-color: rgb(199, 82, 8)'></div>
+<div class='gridItem' style='grid-area: 59 / 13; background-color: rgb(234, 39, 219)'></div>
+<div class='gridItem' style='grid-area: 59 / 14; background-color: rgb(113, 182, 225)'></div>
+<div class='gridItem' style='grid-area: 59 / 15; background-color: rgb(169, 201, 182)'></div>
+<div class='gridItem' style='grid-area: 59 / 16; background-color: rgb(236, 191, 32)'></div>
+<div class='gridItem' style='grid-area: 59 / 17; background-color: rgb(241, 69, 229)'></div>
+<div class='gridItem' style='grid-area: 59 / 18; background-color: rgb(179, 178, 242)'></div>
+<div class='gridItem' style='grid-area: 59 / 19; background-color: rgb(108, 239, 230)'></div>
+<div class='gridItem' style='grid-area: 59 / 20; background-color: rgb(204, 23, 190)'></div>
+<div class='gridItem' style='grid-area: 60 / 1; background-color: rgb(178, 157, 102)'></div>
+<div class='gridItem' style='grid-area: 60 / 2; background-color: rgb(7, 184, 214)'></div>
+<div class='gridItem' style='grid-area: 60 / 3; background-color: rgb(95, 151, 252)'></div>
+<div class='gridItem' style='grid-area: 60 / 4; background-color: rgb(46, 36, 57)'></div>
+<div class='gridItem' style='grid-area: 60 / 5; background-color: rgb(189, 190, 95)'></div>
+<div class='gridItem' style='grid-area: 60 / 6; background-color: rgb(69, 204, 143)'></div>
+<div class='gridItem' style='grid-area: 60 / 7; background-color: rgb(177, 126, 135)'></div>
+<div class='gridItem' style='grid-area: 60 / 8; background-color: rgb(18, 232, 235)'></div>
+<div class='gridItem' style='grid-area: 60 / 9; background-color: rgb(202, 138, 145)'></div>
+<div class='gridItem' style='grid-area: 60 / 10; background-color: rgb(72, 159, 139)'></div>
+<div class='gridItem' style='grid-area: 60 / 11; background-color: rgb(43, 76, 219)'></div>
+<div class='gridItem' style='grid-area: 60 / 12; background-color: rgb(99, 164, 4)'></div>
+<div class='gridItem' style='grid-area: 60 / 13; background-color: rgb(249, 71, 28)'></div>
+<div class='gridItem' style='grid-area: 60 / 14; background-color: rgb(102, 148, 196)'></div>
+<div class='gridItem' style='grid-area: 60 / 15; background-color: rgb(225, 209, 51)'></div>
+<div class='gridItem' style='grid-area: 60 / 16; background-color: rgb(43, 53, 20)'></div>
+<div class='gridItem' style='grid-area: 60 / 17; background-color: rgb(66, 53, 107)'></div>
+<div class='gridItem' style='grid-area: 60 / 18; background-color: rgb(4, 190, 236)'></div>
+<div class='gridItem' style='grid-area: 60 / 19; background-color: rgb(174, 176, 192)'></div>
+<div class='gridItem' style='grid-area: 60 / 20; background-color: rgb(103, 233, 146)'></div>
+<div class='gridItem' style='grid-area: 61 / 1; background-color: rgb(97, 140, 46)'></div>
+<div class='gridItem' style='grid-area: 61 / 2; background-color: rgb(165, 145, 62)'></div>
+<div class='gridItem' style='grid-area: 61 / 3; background-color: rgb(3, 60, 185)'></div>
+<div class='gridItem' style='grid-area: 61 / 4; background-color: rgb(236, 95, 80)'></div>
+<div class='gridItem' style='grid-area: 61 / 5; background-color: rgb(215, 184, 76)'></div>
+<div class='gridItem' style='grid-area: 61 / 6; background-color: rgb(190, 225, 196)'></div>
+<div class='gridItem' style='grid-area: 61 / 7; background-color: rgb(141, 128, 228)'></div>
+<div class='gridItem' style='grid-area: 61 / 8; background-color: rgb(137, 26, 106)'></div>
+<div class='gridItem' style='grid-area: 61 / 9; background-color: rgb(171, 64, 61)'></div>
+<div class='gridItem' style='grid-area: 61 / 10; background-color: rgb(219, 153, 220)'></div>
+<div class='gridItem' style='grid-area: 61 / 11; background-color: rgb(174, 144, 165)'></div>
+<div class='gridItem' style='grid-area: 61 / 12; background-color: rgb(123, 222, 21)'></div>
+<div class='gridItem' style='grid-area: 61 / 13; background-color: rgb(120, 251, 64)'></div>
+<div class='gridItem' style='grid-area: 61 / 14; background-color: rgb(62, 135, 242)'></div>
+<div class='gridItem' style='grid-area: 61 / 15; background-color: rgb(138, 208, 122)'></div>
+<div class='gridItem' style='grid-area: 61 / 16; background-color: rgb(186, 199, 215)'></div>
+<div class='gridItem' style='grid-area: 61 / 17; background-color: rgb(127, 95, 122)'></div>
+<div class='gridItem' style='grid-area: 61 / 18; background-color: rgb(222, 193, 176)'></div>
+<div class='gridItem' style='grid-area: 61 / 19; background-color: rgb(47, 63, 177)'></div>
+<div class='gridItem' style='grid-area: 61 / 20; background-color: rgb(221, 237, 51)'></div>
+<div class='gridItem' style='grid-area: 62 / 1; background-color: rgb(148, 12, 94)'></div>
+<div class='gridItem' style='grid-area: 62 / 2; background-color: rgb(173, 147, 40)'></div>
+<div class='gridItem' style='grid-area: 62 / 3; background-color: rgb(222, 135, 218)'></div>
+<div class='gridItem' style='grid-area: 62 / 4; background-color: rgb(73, 91, 119)'></div>
+<div class='gridItem' style='grid-area: 62 / 5; background-color: rgb(14, 86, 12)'></div>
+<div class='gridItem' style='grid-area: 62 / 6; background-color: rgb(46, 35, 58)'></div>
+<div class='gridItem' style='grid-area: 62 / 7; background-color: rgb(52, 109, 55)'></div>
+<div class='gridItem' style='grid-area: 62 / 8; background-color: rgb(92, 88, 11)'></div>
+<div class='gridItem' style='grid-area: 62 / 9; background-color: rgb(152, 94, 234)'></div>
+<div class='gridItem' style='grid-area: 62 / 10; background-color: rgb(148, 148, 245)'></div>
+<div class='gridItem' style='grid-area: 62 / 11; background-color: rgb(3, 166, 119)'></div>
+<div class='gridItem' style='grid-area: 62 / 12; background-color: rgb(215, 54, 181)'></div>
+<div class='gridItem' style='grid-area: 62 / 13; background-color: rgb(231, 90, 112)'></div>
+<div class='gridItem' style='grid-area: 62 / 14; background-color: rgb(54, 87, 128)'></div>
+<div class='gridItem' style='grid-area: 62 / 15; background-color: rgb(113, 129, 190)'></div>
+<div class='gridItem' style='grid-area: 62 / 16; background-color: rgb(165, 195, 79)'></div>
+<div class='gridItem' style='grid-area: 62 / 17; background-color: rgb(223, 84, 225)'></div>
+<div class='gridItem' style='grid-area: 62 / 18; background-color: rgb(205, 190, 220)'></div>
+<div class='gridItem' style='grid-area: 62 / 19; background-color: rgb(164, 178, 228)'></div>
+<div class='gridItem' style='grid-area: 62 / 20; background-color: rgb(243, 39, 48)'></div>
+<div class='gridItem' style='grid-area: 63 / 1; background-color: rgb(6, 11, 59)'></div>
+<div class='gridItem' style='grid-area: 63 / 2; background-color: rgb(48, 226, 215)'></div>
+<div class='gridItem' style='grid-area: 63 / 3; background-color: rgb(19, 34, 152)'></div>
+<div class='gridItem' style='grid-area: 63 / 4; background-color: rgb(179, 216, 20)'></div>
+<div class='gridItem' style='grid-area: 63 / 5; background-color: rgb(83, 239, 234)'></div>
+<div class='gridItem' style='grid-area: 63 / 6; background-color: rgb(1, 75, 128)'></div>
+<div class='gridItem' style='grid-area: 63 / 7; background-color: rgb(214, 215, 11)'></div>
+<div class='gridItem' style='grid-area: 63 / 8; background-color: rgb(178, 239, 240)'></div>
+<div class='gridItem' style='grid-area: 63 / 9; background-color: rgb(177, 156, 6)'></div>
+<div class='gridItem' style='grid-area: 63 / 10; background-color: rgb(114, 4, 159)'></div>
+<div class='gridItem' style='grid-area: 63 / 11; background-color: rgb(235, 5, 133)'></div>
+<div class='gridItem' style='grid-area: 63 / 12; background-color: rgb(127, 62, 9)'></div>
+<div class='gridItem' style='grid-area: 63 / 13; background-color: rgb(78, 126, 30)'></div>
+<div class='gridItem' style='grid-area: 63 / 14; background-color: rgb(239, 141, 47)'></div>
+<div class='gridItem' style='grid-area: 63 / 15; background-color: rgb(13, 73, 190)'></div>
+<div class='gridItem' style='grid-area: 63 / 16; background-color: rgb(197, 148, 213)'></div>
+<div class='gridItem' style='grid-area: 63 / 17; background-color: rgb(135, 90, 206)'></div>
+<div class='gridItem' style='grid-area: 63 / 18; background-color: rgb(100, 80, 217)'></div>
+<div class='gridItem' style='grid-area: 63 / 19; background-color: rgb(4, 202, 170)'></div>
+<div class='gridItem' style='grid-area: 63 / 20; background-color: rgb(239, 249, 110)'></div>
+<div class='gridItem' style='grid-area: 64 / 1; background-color: rgb(75, 11, 145)'></div>
+<div class='gridItem' style='grid-area: 64 / 2; background-color: rgb(75, 140, 214)'></div>
+<div class='gridItem' style='grid-area: 64 / 3; background-color: rgb(116, 238, 169)'></div>
+<div class='gridItem' style='grid-area: 64 / 4; background-color: rgb(106, 48, 76)'></div>
+<div class='gridItem' style='grid-area: 64 / 5; background-color: rgb(10, 178, 124)'></div>
+<div class='gridItem' style='grid-area: 64 / 6; background-color: rgb(76, 251, 54)'></div>
+<div class='gridItem' style='grid-area: 64 / 7; background-color: rgb(222, 188, 185)'></div>
+<div class='gridItem' style='grid-area: 64 / 8; background-color: rgb(81, 125, 224)'></div>
+<div class='gridItem' style='grid-area: 64 / 9; background-color: rgb(142, 82, 181)'></div>
+<div class='gridItem' style='grid-area: 64 / 10; background-color: rgb(74, 56, 26)'></div>
+<div class='gridItem' style='grid-area: 64 / 11; background-color: rgb(119, 56, 71)'></div>
+<div class='gridItem' style='grid-area: 64 / 12; background-color: rgb(97, 210, 197)'></div>
+<div class='gridItem' style='grid-area: 64 / 13; background-color: rgb(130, 168, 223)'></div>
+<div class='gridItem' style='grid-area: 64 / 14; background-color: rgb(183, 150, 45)'></div>
+<div class='gridItem' style='grid-area: 64 / 15; background-color: rgb(54, 253, 5)'></div>
+<div class='gridItem' style='grid-area: 64 / 16; background-color: rgb(1, 190, 170)'></div>
+<div class='gridItem' style='grid-area: 64 / 17; background-color: rgb(190, 3, 100)'></div>
+<div class='gridItem' style='grid-area: 64 / 18; background-color: rgb(92, 6, 74)'></div>
+<div class='gridItem' style='grid-area: 64 / 19; background-color: rgb(250, 132, 239)'></div>
+<div class='gridItem' style='grid-area: 64 / 20; background-color: rgb(17, 14, 106)'></div>
+<div class='gridItem' style='grid-area: 65 / 1; background-color: rgb(31, 89, 114)'></div>
+<div class='gridItem' style='grid-area: 65 / 2; background-color: rgb(69, 12, 16)'></div>
+<div class='gridItem' style='grid-area: 65 / 3; background-color: rgb(39, 21, 105)'></div>
+<div class='gridItem' style='grid-area: 65 / 4; background-color: rgb(81, 230, 200)'></div>
+<div class='gridItem' style='grid-area: 65 / 5; background-color: rgb(168, 156, 174)'></div>
+<div class='gridItem' style='grid-area: 65 / 6; background-color: rgb(161, 248, 1)'></div>
+<div class='gridItem' style='grid-area: 65 / 7; background-color: rgb(54, 110, 128)'></div>
+<div class='gridItem' style='grid-area: 65 / 8; background-color: rgb(231, 14, 75)'></div>
+<div class='gridItem' style='grid-area: 65 / 9; background-color: rgb(16, 77, 44)'></div>
+<div class='gridItem' style='grid-area: 65 / 10; background-color: rgb(88, 74, 125)'></div>
+<div class='gridItem' style='grid-area: 65 / 11; background-color: rgb(136, 33, 156)'></div>
+<div class='gridItem' style='grid-area: 65 / 12; background-color: rgb(46, 36, 0)'></div>
+<div class='gridItem' style='grid-area: 65 / 13; background-color: rgb(239, 77, 254)'></div>
+<div class='gridItem' style='grid-area: 65 / 14; background-color: rgb(183, 94, 246)'></div>
+<div class='gridItem' style='grid-area: 65 / 15; background-color: rgb(67, 122, 7)'></div>
+<div class='gridItem' style='grid-area: 65 / 16; background-color: rgb(182, 28, 14)'></div>
+<div class='gridItem' style='grid-area: 65 / 17; background-color: rgb(12, 119, 69)'></div>
+<div class='gridItem' style='grid-area: 65 / 18; background-color: rgb(108, 143, 20)'></div>
+<div class='gridItem' style='grid-area: 65 / 19; background-color: rgb(68, 141, 250)'></div>
+<div class='gridItem' style='grid-area: 65 / 20; background-color: rgb(188, 204, 215)'></div>
+<div class='gridItem' style='grid-area: 66 / 1; background-color: rgb(227, 104, 53)'></div>
+<div class='gridItem' style='grid-area: 66 / 2; background-color: rgb(235, 248, 115)'></div>
+<div class='gridItem' style='grid-area: 66 / 3; background-color: rgb(200, 178, 232)'></div>
+<div class='gridItem' style='grid-area: 66 / 4; background-color: rgb(177, 177, 145)'></div>
+<div class='gridItem' style='grid-area: 66 / 5; background-color: rgb(115, 23, 243)'></div>
+<div class='gridItem' style='grid-area: 66 / 6; background-color: rgb(175, 226, 91)'></div>
+<div class='gridItem' style='grid-area: 66 / 7; background-color: rgb(185, 207, 170)'></div>
+<div class='gridItem' style='grid-area: 66 / 8; background-color: rgb(205, 101, 12)'></div>
+<div class='gridItem' style='grid-area: 66 / 9; background-color: rgb(58, 212, 177)'></div>
+<div class='gridItem' style='grid-area: 66 / 10; background-color: rgb(207, 145, 201)'></div>
+<div class='gridItem' style='grid-area: 66 / 11; background-color: rgb(243, 236, 89)'></div>
+<div class='gridItem' style='grid-area: 66 / 12; background-color: rgb(146, 13, 151)'></div>
+<div class='gridItem' style='grid-area: 66 / 13; background-color: rgb(63, 248, 0)'></div>
+<div class='gridItem' style='grid-area: 66 / 14; background-color: rgb(199, 141, 8)'></div>
+<div class='gridItem' style='grid-area: 66 / 15; background-color: rgb(89, 22, 183)'></div>
+<div class='gridItem' style='grid-area: 66 / 16; background-color: rgb(135, 156, 110)'></div>
+<div class='gridItem' style='grid-area: 66 / 17; background-color: rgb(250, 243, 234)'></div>
+<div class='gridItem' style='grid-area: 66 / 18; background-color: rgb(20, 94, 181)'></div>
+<div class='gridItem' style='grid-area: 66 / 19; background-color: rgb(55, 172, 58)'></div>
+<div class='gridItem' style='grid-area: 66 / 20; background-color: rgb(234, 30, 214)'></div>
+<div class='gridItem' style='grid-area: 67 / 1; background-color: rgb(201, 210, 184)'></div>
+<div class='gridItem' style='grid-area: 67 / 2; background-color: rgb(208, 72, 24)'></div>
+<div class='gridItem' style='grid-area: 67 / 3; background-color: rgb(172, 116, 182)'></div>
+<div class='gridItem' style='grid-area: 67 / 4; background-color: rgb(19, 197, 57)'></div>
+<div class='gridItem' style='grid-area: 67 / 5; background-color: rgb(73, 208, 145)'></div>
+<div class='gridItem' style='grid-area: 67 / 6; background-color: rgb(165, 244, 186)'></div>
+<div class='gridItem' style='grid-area: 67 / 7; background-color: rgb(215, 66, 110)'></div>
+<div class='gridItem' style='grid-area: 67 / 8; background-color: rgb(178, 194, 64)'></div>
+<div class='gridItem' style='grid-area: 67 / 9; background-color: rgb(6, 195, 71)'></div>
+<div class='gridItem' style='grid-area: 67 / 10; background-color: rgb(3, 76, 189)'></div>
+<div class='gridItem' style='grid-area: 67 / 11; background-color: rgb(71, 92, 85)'></div>
+<div class='gridItem' style='grid-area: 67 / 12; background-color: rgb(209, 230, 204)'></div>
+<div class='gridItem' style='grid-area: 67 / 13; background-color: rgb(105, 103, 207)'></div>
+<div class='gridItem' style='grid-area: 67 / 14; background-color: rgb(160, 200, 109)'></div>
+<div class='gridItem' style='grid-area: 67 / 15; background-color: rgb(178, 92, 209)'></div>
+<div class='gridItem' style='grid-area: 67 / 16; background-color: rgb(232, 151, 147)'></div>
+<div class='gridItem' style='grid-area: 67 / 17; background-color: rgb(124, 35, 11)'></div>
+<div class='gridItem' style='grid-area: 67 / 18; background-color: rgb(118, 227, 213)'></div>
+<div class='gridItem' style='grid-area: 67 / 19; background-color: rgb(219, 224, 250)'></div>
+<div class='gridItem' style='grid-area: 67 / 20; background-color: rgb(211, 168, 245)'></div>
+<div class='gridItem' style='grid-area: 68 / 1; background-color: rgb(1, 41, 196)'></div>
+<div class='gridItem' style='grid-area: 68 / 2; background-color: rgb(45, 184, 46)'></div>
+<div class='gridItem' style='grid-area: 68 / 3; background-color: rgb(67, 228, 128)'></div>
+<div class='gridItem' style='grid-area: 68 / 4; background-color: rgb(100, 78, 147)'></div>
+<div class='gridItem' style='grid-area: 68 / 5; background-color: rgb(148, 170, 218)'></div>
+<div class='gridItem' style='grid-area: 68 / 6; background-color: rgb(31, 25, 35)'></div>
+<div class='gridItem' style='grid-area: 68 / 7; background-color: rgb(68, 240, 171)'></div>
+<div class='gridItem' style='grid-area: 68 / 8; background-color: rgb(19, 42, 57)'></div>
+<div class='gridItem' style='grid-area: 68 / 9; background-color: rgb(60, 100, 75)'></div>
+<div class='gridItem' style='grid-area: 68 / 10; background-color: rgb(22, 149, 7)'></div>
+<div class='gridItem' style='grid-area: 68 / 11; background-color: rgb(100, 14, 5)'></div>
+<div class='gridItem' style='grid-area: 68 / 12; background-color: rgb(51, 24, 159)'></div>
+<div class='gridItem' style='grid-area: 68 / 13; background-color: rgb(180, 146, 15)'></div>
+<div class='gridItem' style='grid-area: 68 / 14; background-color: rgb(55, 243, 197)'></div>
+<div class='gridItem' style='grid-area: 68 / 15; background-color: rgb(239, 239, 27)'></div>
+<div class='gridItem' style='grid-area: 68 / 16; background-color: rgb(115, 201, 151)'></div>
+<div class='gridItem' style='grid-area: 68 / 17; background-color: rgb(240, 221, 142)'></div>
+<div class='gridItem' style='grid-area: 68 / 18; background-color: rgb(179, 162, 43)'></div>
+<div class='gridItem' style='grid-area: 68 / 19; background-color: rgb(123, 253, 149)'></div>
+<div class='gridItem' style='grid-area: 68 / 20; background-color: rgb(223, 149, 194)'></div>
+<div class='gridItem' style='grid-area: 69 / 1; background-color: rgb(164, 167, 170)'></div>
+<div class='gridItem' style='grid-area: 69 / 2; background-color: rgb(6, 65, 15)'></div>
+<div class='gridItem' style='grid-area: 69 / 3; background-color: rgb(188, 174, 131)'></div>
+<div class='gridItem' style='grid-area: 69 / 4; background-color: rgb(168, 84, 74)'></div>
+<div class='gridItem' style='grid-area: 69 / 5; background-color: rgb(239, 20, 176)'></div>
+<div class='gridItem' style='grid-area: 69 / 6; background-color: rgb(199, 19, 244)'></div>
+<div class='gridItem' style='grid-area: 69 / 7; background-color: rgb(206, 51, 134)'></div>
+<div class='gridItem' style='grid-area: 69 / 8; background-color: rgb(109, 184, 150)'></div>
+<div class='gridItem' style='grid-area: 69 / 9; background-color: rgb(217, 59, 253)'></div>
+<div class='gridItem' style='grid-area: 69 / 10; background-color: rgb(172, 225, 16)'></div>
+<div class='gridItem' style='grid-area: 69 / 11; background-color: rgb(142, 89, 186)'></div>
+<div class='gridItem' style='grid-area: 69 / 12; background-color: rgb(135, 195, 104)'></div>
+<div class='gridItem' style='grid-area: 69 / 13; background-color: rgb(239, 128, 183)'></div>
+<div class='gridItem' style='grid-area: 69 / 14; background-color: rgb(191, 180, 145)'></div>
+<div class='gridItem' style='grid-area: 69 / 15; background-color: rgb(18, 130, 16)'></div>
+<div class='gridItem' style='grid-area: 69 / 16; background-color: rgb(83, 131, 251)'></div>
+<div class='gridItem' style='grid-area: 69 / 17; background-color: rgb(142, 176, 239)'></div>
+<div class='gridItem' style='grid-area: 69 / 18; background-color: rgb(26, 228, 229)'></div>
+<div class='gridItem' style='grid-area: 69 / 19; background-color: rgb(138, 250, 181)'></div>
+<div class='gridItem' style='grid-area: 69 / 20; background-color: rgb(51, 227, 238)'></div>
+<div class='gridItem' style='grid-area: 70 / 1; background-color: rgb(61, 155, 246)'></div>
+<div class='gridItem' style='grid-area: 70 / 2; background-color: rgb(123, 95, 242)'></div>
+<div class='gridItem' style='grid-area: 70 / 3; background-color: rgb(41, 198, 214)'></div>
+<div class='gridItem' style='grid-area: 70 / 4; background-color: rgb(210, 63, 108)'></div>
+<div class='gridItem' style='grid-area: 70 / 5; background-color: rgb(129, 191, 198)'></div>
+<div class='gridItem' style='grid-area: 70 / 6; background-color: rgb(26, 198, 188)'></div>
+<div class='gridItem' style='grid-area: 70 / 7; background-color: rgb(222, 210, 237)'></div>
+<div class='gridItem' style='grid-area: 70 / 8; background-color: rgb(94, 245, 228)'></div>
+<div class='gridItem' style='grid-area: 70 / 9; background-color: rgb(52, 208, 167)'></div>
+<div class='gridItem' style='grid-area: 70 / 10; background-color: rgb(197, 143, 52)'></div>
+<div class='gridItem' style='grid-area: 70 / 11; background-color: rgb(199, 66, 212)'></div>
+<div class='gridItem' style='grid-area: 70 / 12; background-color: rgb(137, 44, 72)'></div>
+<div class='gridItem' style='grid-area: 70 / 13; background-color: rgb(209, 148, 200)'></div>
+<div class='gridItem' style='grid-area: 70 / 14; background-color: rgb(109, 87, 175)'></div>
+<div class='gridItem' style='grid-area: 70 / 15; background-color: rgb(177, 150, 137)'></div>
+<div class='gridItem' style='grid-area: 70 / 16; background-color: rgb(27, 127, 243)'></div>
+<div class='gridItem' style='grid-area: 70 / 17; background-color: rgb(27, 70, 42)'></div>
+<div class='gridItem' style='grid-area: 70 / 18; background-color: rgb(6, 163, 26)'></div>
+<div class='gridItem' style='grid-area: 70 / 19; background-color: rgb(212, 217, 131)'></div>
+<div class='gridItem' style='grid-area: 70 / 20; background-color: rgb(227, 68, 193)'></div>
+<div class='gridItem' style='grid-area: 71 / 1; background-color: rgb(194, 1, 87)'></div>
+<div class='gridItem' style='grid-area: 71 / 2; background-color: rgb(27, 144, 35)'></div>
+<div class='gridItem' style='grid-area: 71 / 3; background-color: rgb(138, 104, 120)'></div>
+<div class='gridItem' style='grid-area: 71 / 4; background-color: rgb(32, 64, 162)'></div>
+<div class='gridItem' style='grid-area: 71 / 5; background-color: rgb(110, 96, 21)'></div>
+<div class='gridItem' style='grid-area: 71 / 6; background-color: rgb(25, 69, 62)'></div>
+<div class='gridItem' style='grid-area: 71 / 7; background-color: rgb(242, 223, 119)'></div>
+<div class='gridItem' style='grid-area: 71 / 8; background-color: rgb(67, 114, 173)'></div>
+<div class='gridItem' style='grid-area: 71 / 9; background-color: rgb(198, 147, 242)'></div>
+<div class='gridItem' style='grid-area: 71 / 10; background-color: rgb(52, 35, 238)'></div>
+<div class='gridItem' style='grid-area: 71 / 11; background-color: rgb(9, 169, 244)'></div>
+<div class='gridItem' style='grid-area: 71 / 12; background-color: rgb(250, 98, 169)'></div>
+<div class='gridItem' style='grid-area: 71 / 13; background-color: rgb(112, 57, 70)'></div>
+<div class='gridItem' style='grid-area: 71 / 14; background-color: rgb(248, 181, 56)'></div>
+<div class='gridItem' style='grid-area: 71 / 15; background-color: rgb(233, 167, 200)'></div>
+<div class='gridItem' style='grid-area: 71 / 16; background-color: rgb(113, 70, 116)'></div>
+<div class='gridItem' style='grid-area: 71 / 17; background-color: rgb(154, 52, 168)'></div>
+<div class='gridItem' style='grid-area: 71 / 18; background-color: rgb(8, 224, 48)'></div>
+<div class='gridItem' style='grid-area: 71 / 19; background-color: rgb(93, 32, 91)'></div>
+<div class='gridItem' style='grid-area: 71 / 20; background-color: rgb(120, 233, 252)'></div>
+<div class='gridItem' style='grid-area: 72 / 1; background-color: rgb(57, 201, 57)'></div>
+<div class='gridItem' style='grid-area: 72 / 2; background-color: rgb(16, 248, 84)'></div>
+<div class='gridItem' style='grid-area: 72 / 3; background-color: rgb(91, 123, 129)'></div>
+<div class='gridItem' style='grid-area: 72 / 4; background-color: rgb(22, 60, 122)'></div>
+<div class='gridItem' style='grid-area: 72 / 5; background-color: rgb(55, 121, 206)'></div>
+<div class='gridItem' style='grid-area: 72 / 6; background-color: rgb(87, 190, 70)'></div>
+<div class='gridItem' style='grid-area: 72 / 7; background-color: rgb(52, 15, 86)'></div>
+<div class='gridItem' style='grid-area: 72 / 8; background-color: rgb(94, 45, 27)'></div>
+<div class='gridItem' style='grid-area: 72 / 9; background-color: rgb(135, 212, 254)'></div>
+<div class='gridItem' style='grid-area: 72 / 10; background-color: rgb(106, 247, 94)'></div>
+<div class='gridItem' style='grid-area: 72 / 11; background-color: rgb(71, 173, 2)'></div>
+<div class='gridItem' style='grid-area: 72 / 12; background-color: rgb(175, 33, 66)'></div>
+<div class='gridItem' style='grid-area: 72 / 13; background-color: rgb(96, 62, 166)'></div>
+<div class='gridItem' style='grid-area: 72 / 14; background-color: rgb(134, 122, 254)'></div>
+<div class='gridItem' style='grid-area: 72 / 15; background-color: rgb(58, 145, 198)'></div>
+<div class='gridItem' style='grid-area: 72 / 16; background-color: rgb(109, 247, 248)'></div>
+<div class='gridItem' style='grid-area: 72 / 17; background-color: rgb(9, 105, 166)'></div>
+<div class='gridItem' style='grid-area: 72 / 18; background-color: rgb(24, 144, 114)'></div>
+<div class='gridItem' style='grid-area: 72 / 19; background-color: rgb(146, 195, 118)'></div>
+<div class='gridItem' style='grid-area: 72 / 20; background-color: rgb(155, 128, 166)'></div>
+<div class='gridItem' style='grid-area: 73 / 1; background-color: rgb(88, 9, 248)'></div>
+<div class='gridItem' style='grid-area: 73 / 2; background-color: rgb(171, 6, 203)'></div>
+<div class='gridItem' style='grid-area: 73 / 3; background-color: rgb(249, 203, 214)'></div>
+<div class='gridItem' style='grid-area: 73 / 4; background-color: rgb(79, 218, 70)'></div>
+<div class='gridItem' style='grid-area: 73 / 5; background-color: rgb(79, 15, 42)'></div>
+<div class='gridItem' style='grid-area: 73 / 6; background-color: rgb(191, 127, 6)'></div>
+<div class='gridItem' style='grid-area: 73 / 7; background-color: rgb(39, 104, 189)'></div>
+<div class='gridItem' style='grid-area: 73 / 8; background-color: rgb(119, 104, 20)'></div>
+<div class='gridItem' style='grid-area: 73 / 9; background-color: rgb(190, 60, 54)'></div>
+<div class='gridItem' style='grid-area: 73 / 10; background-color: rgb(169, 104, 143)'></div>
+<div class='gridItem' style='grid-area: 73 / 11; background-color: rgb(223, 253, 132)'></div>
+<div class='gridItem' style='grid-area: 73 / 12; background-color: rgb(90, 232, 145)'></div>
+<div class='gridItem' style='grid-area: 73 / 13; background-color: rgb(225, 155, 195)'></div>
+<div class='gridItem' style='grid-area: 73 / 14; background-color: rgb(207, 107, 69)'></div>
+<div class='gridItem' style='grid-area: 73 / 15; background-color: rgb(3, 117, 181)'></div>
+<div class='gridItem' style='grid-area: 73 / 16; background-color: rgb(254, 78, 155)'></div>
+<div class='gridItem' style='grid-area: 73 / 17; background-color: rgb(120, 127, 135)'></div>
+<div class='gridItem' style='grid-area: 73 / 18; background-color: rgb(21, 73, 93)'></div>
+<div class='gridItem' style='grid-area: 73 / 19; background-color: rgb(11, 18, 187)'></div>
+<div class='gridItem' style='grid-area: 73 / 20; background-color: rgb(193, 87, 106)'></div>
+<div class='gridItem' style='grid-area: 74 / 1; background-color: rgb(44, 250, 1)'></div>
+<div class='gridItem' style='grid-area: 74 / 2; background-color: rgb(95, 62, 41)'></div>
+<div class='gridItem' style='grid-area: 74 / 3; background-color: rgb(179, 123, 94)'></div>
+<div class='gridItem' style='grid-area: 74 / 4; background-color: rgb(101, 159, 51)'></div>
+<div class='gridItem' style='grid-area: 74 / 5; background-color: rgb(219, 189, 177)'></div>
+<div class='gridItem' style='grid-area: 74 / 6; background-color: rgb(57, 188, 62)'></div>
+<div class='gridItem' style='grid-area: 74 / 7; background-color: rgb(4, 74, 111)'></div>
+<div class='gridItem' style='grid-area: 74 / 8; background-color: rgb(203, 51, 123)'></div>
+<div class='gridItem' style='grid-area: 74 / 9; background-color: rgb(165, 116, 117)'></div>
+<div class='gridItem' style='grid-area: 74 / 10; background-color: rgb(121, 163, 157)'></div>
+<div class='gridItem' style='grid-area: 74 / 11; background-color: rgb(223, 35, 49)'></div>
+<div class='gridItem' style='grid-area: 74 / 12; background-color: rgb(151, 47, 162)'></div>
+<div class='gridItem' style='grid-area: 74 / 13; background-color: rgb(117, 21, 246)'></div>
+<div class='gridItem' style='grid-area: 74 / 14; background-color: rgb(165, 36, 249)'></div>
+<div class='gridItem' style='grid-area: 74 / 15; background-color: rgb(243, 249, 243)'></div>
+<div class='gridItem' style='grid-area: 74 / 16; background-color: rgb(159, 155, 172)'></div>
+<div class='gridItem' style='grid-area: 74 / 17; background-color: rgb(146, 233, 143)'></div>
+<div class='gridItem' style='grid-area: 74 / 18; background-color: rgb(250, 179, 95)'></div>
+<div class='gridItem' style='grid-area: 74 / 19; background-color: rgb(29, 53, 16)'></div>
+<div class='gridItem' style='grid-area: 74 / 20; background-color: rgb(167, 225, 2)'></div>
+<div class='gridItem' style='grid-area: 75 / 1; background-color: rgb(236, 142, 247)'></div>
+<div class='gridItem' style='grid-area: 75 / 2; background-color: rgb(176, 122, 49)'></div>
+<div class='gridItem' style='grid-area: 75 / 3; background-color: rgb(123, 200, 217)'></div>
+<div class='gridItem' style='grid-area: 75 / 4; background-color: rgb(65, 26, 165)'></div>
+<div class='gridItem' style='grid-area: 75 / 5; background-color: rgb(238, 150, 192)'></div>
+<div class='gridItem' style='grid-area: 75 / 6; background-color: rgb(41, 188, 114)'></div>
+<div class='gridItem' style='grid-area: 75 / 7; background-color: rgb(229, 86, 237)'></div>
+<div class='gridItem' style='grid-area: 75 / 8; background-color: rgb(39, 23, 234)'></div>
+<div class='gridItem' style='grid-area: 75 / 9; background-color: rgb(206, 19, 186)'></div>
+<div class='gridItem' style='grid-area: 75 / 10; background-color: rgb(246, 251, 116)'></div>
+<div class='gridItem' style='grid-area: 75 / 11; background-color: rgb(219, 89, 92)'></div>
+<div class='gridItem' style='grid-area: 75 / 12; background-color: rgb(150, 166, 250)'></div>
+<div class='gridItem' style='grid-area: 75 / 13; background-color: rgb(87, 201, 199)'></div>
+<div class='gridItem' style='grid-area: 75 / 14; background-color: rgb(158, 43, 155)'></div>
+<div class='gridItem' style='grid-area: 75 / 15; background-color: rgb(178, 214, 84)'></div>
+<div class='gridItem' style='grid-area: 75 / 16; background-color: rgb(159, 46, 154)'></div>
+<div class='gridItem' style='grid-area: 75 / 17; background-color: rgb(174, 142, 99)'></div>
+<div class='gridItem' style='grid-area: 75 / 18; background-color: rgb(69, 77, 55)'></div>
+<div class='gridItem' style='grid-area: 75 / 19; background-color: rgb(100, 164, 115)'></div>
+<div class='gridItem' style='grid-area: 75 / 20; background-color: rgb(211, 1, 249)'></div>
+<div class='gridItem' style='grid-area: 76 / 1; background-color: rgb(72, 242, 176)'></div>
+<div class='gridItem' style='grid-area: 76 / 2; background-color: rgb(2, 246, 36)'></div>
+<div class='gridItem' style='grid-area: 76 / 3; background-color: rgb(151, 118, 139)'></div>
+<div class='gridItem' style='grid-area: 76 / 4; background-color: rgb(216, 161, 250)'></div>
+<div class='gridItem' style='grid-area: 76 / 5; background-color: rgb(173, 240, 90)'></div>
+<div class='gridItem' style='grid-area: 76 / 6; background-color: rgb(59, 124, 223)'></div>
+<div class='gridItem' style='grid-area: 76 / 7; background-color: rgb(187, 44, 196)'></div>
+<div class='gridItem' style='grid-area: 76 / 8; background-color: rgb(172, 59, 49)'></div>
+<div class='gridItem' style='grid-area: 76 / 9; background-color: rgb(125, 20, 104)'></div>
+<div class='gridItem' style='grid-area: 76 / 10; background-color: rgb(130, 251, 143)'></div>
+<div class='gridItem' style='grid-area: 76 / 11; background-color: rgb(60, 9, 13)'></div>
+<div class='gridItem' style='grid-area: 76 / 12; background-color: rgb(29, 157, 107)'></div>
+<div class='gridItem' style='grid-area: 76 / 13; background-color: rgb(109, 66, 148)'></div>
+<div class='gridItem' style='grid-area: 76 / 14; background-color: rgb(157, 62, 81)'></div>
+<div class='gridItem' style='grid-area: 76 / 15; background-color: rgb(9, 177, 121)'></div>
+<div class='gridItem' style='grid-area: 76 / 16; background-color: rgb(67, 75, 130)'></div>
+<div class='gridItem' style='grid-area: 76 / 17; background-color: rgb(114, 49, 11)'></div>
+<div class='gridItem' style='grid-area: 76 / 18; background-color: rgb(24, 118, 105)'></div>
+<div class='gridItem' style='grid-area: 76 / 19; background-color: rgb(243, 66, 233)'></div>
+<div class='gridItem' style='grid-area: 76 / 20; background-color: rgb(100, 81, 223)'></div>
+<div class='gridItem' style='grid-area: 77 / 1; background-color: rgb(226, 179, 197)'></div>
+<div class='gridItem' style='grid-area: 77 / 2; background-color: rgb(11, 200, 236)'></div>
+<div class='gridItem' style='grid-area: 77 / 3; background-color: rgb(223, 96, 10)'></div>
+<div class='gridItem' style='grid-area: 77 / 4; background-color: rgb(140, 168, 109)'></div>
+<div class='gridItem' style='grid-area: 77 / 5; background-color: rgb(228, 58, 118)'></div>
+<div class='gridItem' style='grid-area: 77 / 6; background-color: rgb(66, 196, 194)'></div>
+<div class='gridItem' style='grid-area: 77 / 7; background-color: rgb(118, 185, 240)'></div>
+<div class='gridItem' style='grid-area: 77 / 8; background-color: rgb(25, 224, 218)'></div>
+<div class='gridItem' style='grid-area: 77 / 9; background-color: rgb(187, 170, 178)'></div>
+<div class='gridItem' style='grid-area: 77 / 10; background-color: rgb(80, 211, 29)'></div>
+<div class='gridItem' style='grid-area: 77 / 11; background-color: rgb(78, 94, 125)'></div>
+<div class='gridItem' style='grid-area: 77 / 12; background-color: rgb(24, 36, 133)'></div>
+<div class='gridItem' style='grid-area: 77 / 13; background-color: rgb(241, 73, 140)'></div>
+<div class='gridItem' style='grid-area: 77 / 14; background-color: rgb(126, 59, 171)'></div>
+<div class='gridItem' style='grid-area: 77 / 15; background-color: rgb(46, 101, 143)'></div>
+<div class='gridItem' style='grid-area: 77 / 16; background-color: rgb(59, 111, 123)'></div>
+<div class='gridItem' style='grid-area: 77 / 17; background-color: rgb(58, 29, 249)'></div>
+<div class='gridItem' style='grid-area: 77 / 18; background-color: rgb(144, 79, 87)'></div>
+<div class='gridItem' style='grid-area: 77 / 19; background-color: rgb(65, 233, 121)'></div>
+<div class='gridItem' style='grid-area: 77 / 20; background-color: rgb(208, 28, 248)'></div>
+<div class='gridItem' style='grid-area: 78 / 1; background-color: rgb(221, 165, 174)'></div>
+<div class='gridItem' style='grid-area: 78 / 2; background-color: rgb(6, 244, 214)'></div>
+<div class='gridItem' style='grid-area: 78 / 3; background-color: rgb(95, 122, 14)'></div>
+<div class='gridItem' style='grid-area: 78 / 4; background-color: rgb(82, 36, 91)'></div>
+<div class='gridItem' style='grid-area: 78 / 5; background-color: rgb(139, 111, 123)'></div>
+<div class='gridItem' style='grid-area: 78 / 6; background-color: rgb(140, 189, 210)'></div>
+<div class='gridItem' style='grid-area: 78 / 7; background-color: rgb(159, 225, 194)'></div>
+<div class='gridItem' style='grid-area: 78 / 8; background-color: rgb(216, 90, 168)'></div>
+<div class='gridItem' style='grid-area: 78 / 9; background-color: rgb(117, 248, 6)'></div>
+<div class='gridItem' style='grid-area: 78 / 10; background-color: rgb(19, 168, 167)'></div>
+<div class='gridItem' style='grid-area: 78 / 11; background-color: rgb(11, 56, 198)'></div>
+<div class='gridItem' style='grid-area: 78 / 12; background-color: rgb(21, 176, 5)'></div>
+<div class='gridItem' style='grid-area: 78 / 13; background-color: rgb(159, 240, 24)'></div>
+<div class='gridItem' style='grid-area: 78 / 14; background-color: rgb(112, 16, 190)'></div>
+<div class='gridItem' style='grid-area: 78 / 15; background-color: rgb(229, 65, 101)'></div>
+<div class='gridItem' style='grid-area: 78 / 16; background-color: rgb(13, 58, 145)'></div>
+<div class='gridItem' style='grid-area: 78 / 17; background-color: rgb(56, 99, 38)'></div>
+<div class='gridItem' style='grid-area: 78 / 18; background-color: rgb(97, 197, 123)'></div>
+<div class='gridItem' style='grid-area: 78 / 19; background-color: rgb(93, 116, 244)'></div>
+<div class='gridItem' style='grid-area: 78 / 20; background-color: rgb(199, 47, 249)'></div>
+<div class='gridItem' style='grid-area: 79 / 1; background-color: rgb(105, 25, 92)'></div>
+<div class='gridItem' style='grid-area: 79 / 2; background-color: rgb(164, 141, 147)'></div>
+<div class='gridItem' style='grid-area: 79 / 3; background-color: rgb(224, 18, 251)'></div>
+<div class='gridItem' style='grid-area: 79 / 4; background-color: rgb(212, 19, 138)'></div>
+<div class='gridItem' style='grid-area: 79 / 5; background-color: rgb(106, 164, 93)'></div>
+<div class='gridItem' style='grid-area: 79 / 6; background-color: rgb(221, 7, 172)'></div>
+<div class='gridItem' style='grid-area: 79 / 7; background-color: rgb(52, 96, 198)'></div>
+<div class='gridItem' style='grid-area: 79 / 8; background-color: rgb(219, 96, 72)'></div>
+<div class='gridItem' style='grid-area: 79 / 9; background-color: rgb(253, 20, 162)'></div>
+<div class='gridItem' style='grid-area: 79 / 10; background-color: rgb(49, 237, 191)'></div>
+<div class='gridItem' style='grid-area: 79 / 11; background-color: rgb(208, 23, 172)'></div>
+<div class='gridItem' style='grid-area: 79 / 12; background-color: rgb(242, 231, 223)'></div>
+<div class='gridItem' style='grid-area: 79 / 13; background-color: rgb(13, 221, 117)'></div>
+<div class='gridItem' style='grid-area: 79 / 14; background-color: rgb(188, 87, 134)'></div>
+<div class='gridItem' style='grid-area: 79 / 15; background-color: rgb(134, 224, 202)'></div>
+<div class='gridItem' style='grid-area: 79 / 16; background-color: rgb(181, 80, 52)'></div>
+<div class='gridItem' style='grid-area: 79 / 17; background-color: rgb(34, 59, 58)'></div>
+<div class='gridItem' style='grid-area: 79 / 18; background-color: rgb(162, 223, 52)'></div>
+<div class='gridItem' style='grid-area: 79 / 19; background-color: rgb(151, 65, 41)'></div>
+<div class='gridItem' style='grid-area: 79 / 20; background-color: rgb(145, 65, 38)'></div>
+<div class='gridItem' style='grid-area: 80 / 1; background-color: rgb(122, 230, 236)'></div>
+<div class='gridItem' style='grid-area: 80 / 2; background-color: rgb(215, 205, 171)'></div>
+<div class='gridItem' style='grid-area: 80 / 3; background-color: rgb(124, 165, 34)'></div>
+<div class='gridItem' style='grid-area: 80 / 4; background-color: rgb(238, 14, 118)'></div>
+<div class='gridItem' style='grid-area: 80 / 5; background-color: rgb(217, 143, 77)'></div>
+<div class='gridItem' style='grid-area: 80 / 6; background-color: rgb(137, 53, 68)'></div>
+<div class='gridItem' style='grid-area: 80 / 7; background-color: rgb(161, 5, 106)'></div>
+<div class='gridItem' style='grid-area: 80 / 8; background-color: rgb(26, 143, 254)'></div>
+<div class='gridItem' style='grid-area: 80 / 9; background-color: rgb(208, 132, 183)'></div>
+<div class='gridItem' style='grid-area: 80 / 10; background-color: rgb(143, 184, 236)'></div>
+<div class='gridItem' style='grid-area: 80 / 11; background-color: rgb(159, 155, 158)'></div>
+<div class='gridItem' style='grid-area: 80 / 12; background-color: rgb(60, 149, 64)'></div>
+<div class='gridItem' style='grid-area: 80 / 13; background-color: rgb(164, 63, 86)'></div>
+<div class='gridItem' style='grid-area: 80 / 14; background-color: rgb(133, 41, 153)'></div>
+<div class='gridItem' style='grid-area: 80 / 15; background-color: rgb(28, 6, 73)'></div>
+<div class='gridItem' style='grid-area: 80 / 16; background-color: rgb(159, 122, 70)'></div>
+<div class='gridItem' style='grid-area: 80 / 17; background-color: rgb(156, 13, 46)'></div>
+<div class='gridItem' style='grid-area: 80 / 18; background-color: rgb(109, 241, 239)'></div>
+<div class='gridItem' style='grid-area: 80 / 19; background-color: rgb(43, 160, 116)'></div>
+<div class='gridItem' style='grid-area: 80 / 20; background-color: rgb(6, 253, 131)'></div>
+<div class='gridItem' style='grid-area: 81 / 1; background-color: rgb(214, 100, 53)'></div>
+<div class='gridItem' style='grid-area: 81 / 2; background-color: rgb(41, 29, 88)'></div>
+<div class='gridItem' style='grid-area: 81 / 3; background-color: rgb(166, 79, 39)'></div>
+<div class='gridItem' style='grid-area: 81 / 4; background-color: rgb(217, 180, 40)'></div>
+<div class='gridItem' style='grid-area: 81 / 5; background-color: rgb(189, 242, 133)'></div>
+<div class='gridItem' style='grid-area: 81 / 6; background-color: rgb(4, 79, 199)'></div>
+<div class='gridItem' style='grid-area: 81 / 7; background-color: rgb(58, 171, 127)'></div>
+<div class='gridItem' style='grid-area: 81 / 8; background-color: rgb(110, 210, 23)'></div>
+<div class='gridItem' style='grid-area: 81 / 9; background-color: rgb(177, 78, 163)'></div>
+<div class='gridItem' style='grid-area: 81 / 10; background-color: rgb(72, 249, 202)'></div>
+<div class='gridItem' style='grid-area: 81 / 11; background-color: rgb(64, 169, 21)'></div>
+<div class='gridItem' style='grid-area: 81 / 12; background-color: rgb(60, 253, 92)'></div>
+<div class='gridItem' style='grid-area: 81 / 13; background-color: rgb(155, 49, 201)'></div>
+<div class='gridItem' style='grid-area: 81 / 14; background-color: rgb(97, 56, 166)'></div>
+<div class='gridItem' style='grid-area: 81 / 15; background-color: rgb(219, 189, 17)'></div>
+<div class='gridItem' style='grid-area: 81 / 16; background-color: rgb(70, 247, 245)'></div>
+<div class='gridItem' style='grid-area: 81 / 17; background-color: rgb(221, 64, 126)'></div>
+<div class='gridItem' style='grid-area: 81 / 18; background-color: rgb(50, 46, 226)'></div>
+<div class='gridItem' style='grid-area: 81 / 19; background-color: rgb(246, 109, 119)'></div>
+<div class='gridItem' style='grid-area: 81 / 20; background-color: rgb(37, 254, 160)'></div>
+<div class='gridItem' style='grid-area: 82 / 1; background-color: rgb(168, 205, 140)'></div>
+<div class='gridItem' style='grid-area: 82 / 2; background-color: rgb(180, 43, 198)'></div>
+<div class='gridItem' style='grid-area: 82 / 3; background-color: rgb(212, 203, 234)'></div>
+<div class='gridItem' style='grid-area: 82 / 4; background-color: rgb(45, 53, 164)'></div>
+<div class='gridItem' style='grid-area: 82 / 5; background-color: rgb(187, 16, 195)'></div>
+<div class='gridItem' style='grid-area: 82 / 6; background-color: rgb(242, 33, 199)'></div>
+<div class='gridItem' style='grid-area: 82 / 7; background-color: rgb(48, 254, 25)'></div>
+<div class='gridItem' style='grid-area: 82 / 8; background-color: rgb(129, 180, 5)'></div>
+<div class='gridItem' style='grid-area: 82 / 9; background-color: rgb(70, 64, 182)'></div>
+<div class='gridItem' style='grid-area: 82 / 10; background-color: rgb(67, 142, 35)'></div>
+<div class='gridItem' style='grid-area: 82 / 11; background-color: rgb(225, 57, 26)'></div>
+<div class='gridItem' style='grid-area: 82 / 12; background-color: rgb(225, 30, 222)'></div>
+<div class='gridItem' style='grid-area: 82 / 13; background-color: rgb(118, 47, 173)'></div>
+<div class='gridItem' style='grid-area: 82 / 14; background-color: rgb(203, 203, 202)'></div>
+<div class='gridItem' style='grid-area: 82 / 15; background-color: rgb(76, 187, 43)'></div>
+<div class='gridItem' style='grid-area: 82 / 16; background-color: rgb(231, 243, 243)'></div>
+<div class='gridItem' style='grid-area: 82 / 17; background-color: rgb(236, 74, 14)'></div>
+<div class='gridItem' style='grid-area: 82 / 18; background-color: rgb(196, 176, 75)'></div>
+<div class='gridItem' style='grid-area: 82 / 19; background-color: rgb(59, 223, 50)'></div>
+<div class='gridItem' style='grid-area: 82 / 20; background-color: rgb(247, 175, 158)'></div>
+<div class='gridItem' style='grid-area: 83 / 1; background-color: rgb(54, 7, 18)'></div>
+<div class='gridItem' style='grid-area: 83 / 2; background-color: rgb(166, 99, 62)'></div>
+<div class='gridItem' style='grid-area: 83 / 3; background-color: rgb(62, 200, 40)'></div>
+<div class='gridItem' style='grid-area: 83 / 4; background-color: rgb(128, 13, 248)'></div>
+<div class='gridItem' style='grid-area: 83 / 5; background-color: rgb(99, 43, 73)'></div>
+<div class='gridItem' style='grid-area: 83 / 6; background-color: rgb(226, 213, 27)'></div>
+<div class='gridItem' style='grid-area: 83 / 7; background-color: rgb(221, 157, 109)'></div>
+<div class='gridItem' style='grid-area: 83 / 8; background-color: rgb(179, 156, 130)'></div>
+<div class='gridItem' style='grid-area: 83 / 9; background-color: rgb(23, 38, 26)'></div>
+<div class='gridItem' style='grid-area: 83 / 10; background-color: rgb(76, 231, 235)'></div>
+<div class='gridItem' style='grid-area: 83 / 11; background-color: rgb(68, 94, 39)'></div>
+<div class='gridItem' style='grid-area: 83 / 12; background-color: rgb(219, 3, 91)'></div>
+<div class='gridItem' style='grid-area: 83 / 13; background-color: rgb(168, 69, 224)'></div>
+<div class='gridItem' style='grid-area: 83 / 14; background-color: rgb(93, 63, 176)'></div>
+<div class='gridItem' style='grid-area: 83 / 15; background-color: rgb(106, 0, 69)'></div>
+<div class='gridItem' style='grid-area: 83 / 16; background-color: rgb(102, 178, 174)'></div>
+<div class='gridItem' style='grid-area: 83 / 17; background-color: rgb(94, 138, 72)'></div>
+<div class='gridItem' style='grid-area: 83 / 18; background-color: rgb(75, 76, 147)'></div>
+<div class='gridItem' style='grid-area: 83 / 19; background-color: rgb(162, 81, 245)'></div>
+<div class='gridItem' style='grid-area: 83 / 20; background-color: rgb(104, 98, 21)'></div>
+<div class='gridItem' style='grid-area: 84 / 1; background-color: rgb(180, 68, 209)'></div>
+<div class='gridItem' style='grid-area: 84 / 2; background-color: rgb(201, 242, 243)'></div>
+<div class='gridItem' style='grid-area: 84 / 3; background-color: rgb(185, 236, 114)'></div>
+<div class='gridItem' style='grid-area: 84 / 4; background-color: rgb(215, 8, 76)'></div>
+<div class='gridItem' style='grid-area: 84 / 5; background-color: rgb(248, 148, 144)'></div>
+<div class='gridItem' style='grid-area: 84 / 6; background-color: rgb(148, 140, 45)'></div>
+<div class='gridItem' style='grid-area: 84 / 7; background-color: rgb(210, 26, 158)'></div>
+<div class='gridItem' style='grid-area: 84 / 8; background-color: rgb(189, 127, 85)'></div>
+<div class='gridItem' style='grid-area: 84 / 9; background-color: rgb(105, 145, 44)'></div>
+<div class='gridItem' style='grid-area: 84 / 10; background-color: rgb(163, 251, 154)'></div>
+<div class='gridItem' style='grid-area: 84 / 11; background-color: rgb(78, 107, 160)'></div>
+<div class='gridItem' style='grid-area: 84 / 12; background-color: rgb(52, 40, 34)'></div>
+<div class='gridItem' style='grid-area: 84 / 13; background-color: rgb(255, 233, 108)'></div>
+<div class='gridItem' style='grid-area: 84 / 14; background-color: rgb(217, 202, 122)'></div>
+<div class='gridItem' style='grid-area: 84 / 15; background-color: rgb(12, 24, 169)'></div>
+<div class='gridItem' style='grid-area: 84 / 16; background-color: rgb(191, 7, 134)'></div>
+<div class='gridItem' style='grid-area: 84 / 17; background-color: rgb(208, 108, 7)'></div>
+<div class='gridItem' style='grid-area: 84 / 18; background-color: rgb(172, 195, 12)'></div>
+<div class='gridItem' style='grid-area: 84 / 19; background-color: rgb(244, 82, 88)'></div>
+<div class='gridItem' style='grid-area: 84 / 20; background-color: rgb(163, 211, 167)'></div>
+<div class='gridItem' style='grid-area: 85 / 1; background-color: rgb(146, 37, 221)'></div>
+<div class='gridItem' style='grid-area: 85 / 2; background-color: rgb(103, 13, 171)'></div>
+<div class='gridItem' style='grid-area: 85 / 3; background-color: rgb(43, 226, 192)'></div>
+<div class='gridItem' style='grid-area: 85 / 4; background-color: rgb(252, 32, 8)'></div>
+<div class='gridItem' style='grid-area: 85 / 5; background-color: rgb(170, 84, 181)'></div>
+<div class='gridItem' style='grid-area: 85 / 6; background-color: rgb(74, 7, 79)'></div>
+<div class='gridItem' style='grid-area: 85 / 7; background-color: rgb(62, 78, 69)'></div>
+<div class='gridItem' style='grid-area: 85 / 8; background-color: rgb(163, 161, 64)'></div>
+<div class='gridItem' style='grid-area: 85 / 9; background-color: rgb(127, 112, 95)'></div>
+<div class='gridItem' style='grid-area: 85 / 10; background-color: rgb(157, 76, 92)'></div>
+<div class='gridItem' style='grid-area: 85 / 11; background-color: rgb(208, 43, 106)'></div>
+<div class='gridItem' style='grid-area: 85 / 12; background-color: rgb(255, 186, 134)'></div>
+<div class='gridItem' style='grid-area: 85 / 13; background-color: rgb(121, 43, 246)'></div>
+<div class='gridItem' style='grid-area: 85 / 14; background-color: rgb(167, 125, 209)'></div>
+<div class='gridItem' style='grid-area: 85 / 15; background-color: rgb(8, 28, 122)'></div>
+<div class='gridItem' style='grid-area: 85 / 16; background-color: rgb(149, 36, 47)'></div>
+<div class='gridItem' style='grid-area: 85 / 17; background-color: rgb(190, 222, 212)'></div>
+<div class='gridItem' style='grid-area: 85 / 18; background-color: rgb(82, 110, 16)'></div>
+<div class='gridItem' style='grid-area: 85 / 19; background-color: rgb(245, 236, 163)'></div>
+<div class='gridItem' style='grid-area: 85 / 20; background-color: rgb(108, 168, 88)'></div>
+<div class='gridItem' style='grid-area: 86 / 1; background-color: rgb(65, 195, 118)'></div>
+<div class='gridItem' style='grid-area: 86 / 2; background-color: rgb(177, 225, 208)'></div>
+<div class='gridItem' style='grid-area: 86 / 3; background-color: rgb(84, 179, 249)'></div>
+<div class='gridItem' style='grid-area: 86 / 4; background-color: rgb(244, 107, 191)'></div>
+<div class='gridItem' style='grid-area: 86 / 5; background-color: rgb(145, 241, 158)'></div>
+<div class='gridItem' style='grid-area: 86 / 6; background-color: rgb(184, 94, 12)'></div>
+<div class='gridItem' style='grid-area: 86 / 7; background-color: rgb(167, 104, 204)'></div>
+<div class='gridItem' style='grid-area: 86 / 8; background-color: rgb(8, 42, 73)'></div>
+<div class='gridItem' style='grid-area: 86 / 9; background-color: rgb(207, 32, 180)'></div>
+<div class='gridItem' style='grid-area: 86 / 10; background-color: rgb(54, 212, 119)'></div>
+<div class='gridItem' style='grid-area: 86 / 11; background-color: rgb(95, 32, 116)'></div>
+<div class='gridItem' style='grid-area: 86 / 12; background-color: rgb(157, 207, 169)'></div>
+<div class='gridItem' style='grid-area: 86 / 13; background-color: rgb(62, 107, 200)'></div>
+<div class='gridItem' style='grid-area: 86 / 14; background-color: rgb(35, 71, 179)'></div>
+<div class='gridItem' style='grid-area: 86 / 15; background-color: rgb(55, 173, 81)'></div>
+<div class='gridItem' style='grid-area: 86 / 16; background-color: rgb(162, 130, 245)'></div>
+<div class='gridItem' style='grid-area: 86 / 17; background-color: rgb(43, 182, 4)'></div>
+<div class='gridItem' style='grid-area: 86 / 18; background-color: rgb(57, 159, 121)'></div>
+<div class='gridItem' style='grid-area: 86 / 19; background-color: rgb(101, 70, 225)'></div>
+<div class='gridItem' style='grid-area: 86 / 20; background-color: rgb(58, 160, 142)'></div>
+<div class='gridItem' style='grid-area: 87 / 1; background-color: rgb(233, 136, 184)'></div>
+<div class='gridItem' style='grid-area: 87 / 2; background-color: rgb(248, 22, 65)'></div>
+<div class='gridItem' style='grid-area: 87 / 3; background-color: rgb(92, 251, 149)'></div>
+<div class='gridItem' style='grid-area: 87 / 4; background-color: rgb(156, 142, 96)'></div>
+<div class='gridItem' style='grid-area: 87 / 5; background-color: rgb(113, 145, 20)'></div>
+<div class='gridItem' style='grid-area: 87 / 6; background-color: rgb(249, 183, 94)'></div>
+<div class='gridItem' style='grid-area: 87 / 7; background-color: rgb(12, 213, 22)'></div>
+<div class='gridItem' style='grid-area: 87 / 8; background-color: rgb(83, 133, 152)'></div>
+<div class='gridItem' style='grid-area: 87 / 9; background-color: rgb(34, 19, 169)'></div>
+<div class='gridItem' style='grid-area: 87 / 10; background-color: rgb(126, 133, 97)'></div>
+<div class='gridItem' style='grid-area: 87 / 11; background-color: rgb(39, 5, 61)'></div>
+<div class='gridItem' style='grid-area: 87 / 12; background-color: rgb(115, 149, 91)'></div>
+<div class='gridItem' style='grid-area: 87 / 13; background-color: rgb(95, 204, 251)'></div>
+<div class='gridItem' style='grid-area: 87 / 14; background-color: rgb(157, 143, 99)'></div>
+<div class='gridItem' style='grid-area: 87 / 15; background-color: rgb(2, 117, 170)'></div>
+<div class='gridItem' style='grid-area: 87 / 16; background-color: rgb(108, 60, 90)'></div>
+<div class='gridItem' style='grid-area: 87 / 17; background-color: rgb(166, 178, 165)'></div>
+<div class='gridItem' style='grid-area: 87 / 18; background-color: rgb(86, 208, 13)'></div>
+<div class='gridItem' style='grid-area: 87 / 19; background-color: rgb(9, 149, 54)'></div>
+<div class='gridItem' style='grid-area: 87 / 20; background-color: rgb(41, 223, 131)'></div>
+<div class='gridItem' style='grid-area: 88 / 1; background-color: rgb(217, 32, 77)'></div>
+<div class='gridItem' style='grid-area: 88 / 2; background-color: rgb(231, 165, 131)'></div>
+<div class='gridItem' style='grid-area: 88 / 3; background-color: rgb(249, 87, 107)'></div>
+<div class='gridItem' style='grid-area: 88 / 4; background-color: rgb(226, 185, 248)'></div>
+<div class='gridItem' style='grid-area: 88 / 5; background-color: rgb(70, 124, 34)'></div>
+<div class='gridItem' style='grid-area: 88 / 6; background-color: rgb(230, 104, 152)'></div>
+<div class='gridItem' style='grid-area: 88 / 7; background-color: rgb(75, 68, 90)'></div>
+<div class='gridItem' style='grid-area: 88 / 8; background-color: rgb(246, 16, 110)'></div>
+<div class='gridItem' style='grid-area: 88 / 9; background-color: rgb(16, 226, 97)'></div>
+<div class='gridItem' style='grid-area: 88 / 10; background-color: rgb(216, 89, 70)'></div>
+<div class='gridItem' style='grid-area: 88 / 11; background-color: rgb(178, 127, 169)'></div>
+<div class='gridItem' style='grid-area: 88 / 12; background-color: rgb(225, 217, 82)'></div>
+<div class='gridItem' style='grid-area: 88 / 13; background-color: rgb(74, 135, 174)'></div>
+<div class='gridItem' style='grid-area: 88 / 14; background-color: rgb(163, 189, 24)'></div>
+<div class='gridItem' style='grid-area: 88 / 15; background-color: rgb(54, 78, 232)'></div>
+<div class='gridItem' style='grid-area: 88 / 16; background-color: rgb(136, 93, 152)'></div>
+<div class='gridItem' style='grid-area: 88 / 17; background-color: rgb(100, 25, 169)'></div>
+<div class='gridItem' style='grid-area: 88 / 18; background-color: rgb(196, 166, 157)'></div>
+<div class='gridItem' style='grid-area: 88 / 19; background-color: rgb(150, 104, 155)'></div>
+<div class='gridItem' style='grid-area: 88 / 20; background-color: rgb(170, 67, 152)'></div>
+<div class='gridItem' style='grid-area: 89 / 1; background-color: rgb(244, 76, 54)'></div>
+<div class='gridItem' style='grid-area: 89 / 2; background-color: rgb(110, 78, 165)'></div>
+<div class='gridItem' style='grid-area: 89 / 3; background-color: rgb(185, 12, 202)'></div>
+<div class='gridItem' style='grid-area: 89 / 4; background-color: rgb(96, 199, 134)'></div>
+<div class='gridItem' style='grid-area: 89 / 5; background-color: rgb(180, 34, 138)'></div>
+<div class='gridItem' style='grid-area: 89 / 6; background-color: rgb(143, 196, 58)'></div>
+<div class='gridItem' style='grid-area: 89 / 7; background-color: rgb(236, 187, 180)'></div>
+<div class='gridItem' style='grid-area: 89 / 8; background-color: rgb(35, 51, 37)'></div>
+<div class='gridItem' style='grid-area: 89 / 9; background-color: rgb(54, 157, 251)'></div>
+<div class='gridItem' style='grid-area: 89 / 10; background-color: rgb(3, 253, 253)'></div>
+<div class='gridItem' style='grid-area: 89 / 11; background-color: rgb(209, 31, 91)'></div>
+<div class='gridItem' style='grid-area: 89 / 12; background-color: rgb(114, 62, 194)'></div>
+<div class='gridItem' style='grid-area: 89 / 13; background-color: rgb(7, 209, 235)'></div>
+<div class='gridItem' style='grid-area: 89 / 14; background-color: rgb(18, 59, 2)'></div>
+<div class='gridItem' style='grid-area: 89 / 15; background-color: rgb(248, 140, 217)'></div>
+<div class='gridItem' style='grid-area: 89 / 16; background-color: rgb(118, 65, 206)'></div>
+<div class='gridItem' style='grid-area: 89 / 17; background-color: rgb(142, 123, 106)'></div>
+<div class='gridItem' style='grid-area: 89 / 18; background-color: rgb(178, 234, 159)'></div>
+<div class='gridItem' style='grid-area: 89 / 19; background-color: rgb(65, 133, 25)'></div>
+<div class='gridItem' style='grid-area: 89 / 20; background-color: rgb(10, 55, 148)'></div>
+<div class='gridItem' style='grid-area: 90 / 1; background-color: rgb(63, 55, 29)'></div>
+<div class='gridItem' style='grid-area: 90 / 2; background-color: rgb(115, 177, 187)'></div>
+<div class='gridItem' style='grid-area: 90 / 3; background-color: rgb(67, 96, 122)'></div>
+<div class='gridItem' style='grid-area: 90 / 4; background-color: rgb(221, 20, 106)'></div>
+<div class='gridItem' style='grid-area: 90 / 5; background-color: rgb(218, 64, 80)'></div>
+<div class='gridItem' style='grid-area: 90 / 6; background-color: rgb(87, 157, 112)'></div>
+<div class='gridItem' style='grid-area: 90 / 7; background-color: rgb(213, 182, 247)'></div>
+<div class='gridItem' style='grid-area: 90 / 8; background-color: rgb(86, 145, 114)'></div>
+<div class='gridItem' style='grid-area: 90 / 9; background-color: rgb(175, 107, 144)'></div>
+<div class='gridItem' style='grid-area: 90 / 10; background-color: rgb(149, 152, 171)'></div>
+<div class='gridItem' style='grid-area: 90 / 11; background-color: rgb(2, 148, 13)'></div>
+<div class='gridItem' style='grid-area: 90 / 12; background-color: rgb(131, 120, 220)'></div>
+<div class='gridItem' style='grid-area: 90 / 13; background-color: rgb(106, 202, 56)'></div>
+<div class='gridItem' style='grid-area: 90 / 14; background-color: rgb(167, 242, 72)'></div>
+<div class='gridItem' style='grid-area: 90 / 15; background-color: rgb(0, 97, 123)'></div>
+<div class='gridItem' style='grid-area: 90 / 16; background-color: rgb(97, 125, 202)'></div>
+<div class='gridItem' style='grid-area: 90 / 17; background-color: rgb(91, 116, 187)'></div>
+<div class='gridItem' style='grid-area: 90 / 18; background-color: rgb(205, 33, 6)'></div>
+<div class='gridItem' style='grid-area: 90 / 19; background-color: rgb(117, 144, 214)'></div>
+<div class='gridItem' style='grid-area: 90 / 20; background-color: rgb(149, 23, 222)'></div>
+<div class='gridItem' style='grid-area: 91 / 1; background-color: rgb(223, 94, 207)'></div>
+<div class='gridItem' style='grid-area: 91 / 2; background-color: rgb(143, 178, 166)'></div>
+<div class='gridItem' style='grid-area: 91 / 3; background-color: rgb(163, 49, 90)'></div>
+<div class='gridItem' style='grid-area: 91 / 4; background-color: rgb(11, 98, 247)'></div>
+<div class='gridItem' style='grid-area: 91 / 5; background-color: rgb(93, 206, 214)'></div>
+<div class='gridItem' style='grid-area: 91 / 6; background-color: rgb(38, 198, 136)'></div>
+<div class='gridItem' style='grid-area: 91 / 7; background-color: rgb(20, 109, 155)'></div>
+<div class='gridItem' style='grid-area: 91 / 8; background-color: rgb(104, 69, 61)'></div>
+<div class='gridItem' style='grid-area: 91 / 9; background-color: rgb(207, 254, 108)'></div>
+<div class='gridItem' style='grid-area: 91 / 10; background-color: rgb(3, 104, 199)'></div>
+<div class='gridItem' style='grid-area: 91 / 11; background-color: rgb(133, 91, 129)'></div>
+<div class='gridItem' style='grid-area: 91 / 12; background-color: rgb(243, 195, 111)'></div>
+<div class='gridItem' style='grid-area: 91 / 13; background-color: rgb(33, 66, 70)'></div>
+<div class='gridItem' style='grid-area: 91 / 14; background-color: rgb(67, 75, 118)'></div>
+<div class='gridItem' style='grid-area: 91 / 15; background-color: rgb(224, 171, 131)'></div>
+<div class='gridItem' style='grid-area: 91 / 16; background-color: rgb(94, 244, 196)'></div>
+<div class='gridItem' style='grid-area: 91 / 17; background-color: rgb(100, 51, 30)'></div>
+<div class='gridItem' style='grid-area: 91 / 18; background-color: rgb(70, 243, 46)'></div>
+<div class='gridItem' style='grid-area: 91 / 19; background-color: rgb(156, 21, 170)'></div>
+<div class='gridItem' style='grid-area: 91 / 20; background-color: rgb(76, 97, 153)'></div>
+<div class='gridItem' style='grid-area: 92 / 1; background-color: rgb(225, 95, 129)'></div>
+<div class='gridItem' style='grid-area: 92 / 2; background-color: rgb(191, 14, 181)'></div>
+<div class='gridItem' style='grid-area: 92 / 3; background-color: rgb(119, 75, 174)'></div>
+<div class='gridItem' style='grid-area: 92 / 4; background-color: rgb(91, 58, 180)'></div>
+<div class='gridItem' style='grid-area: 92 / 5; background-color: rgb(232, 78, 4)'></div>
+<div class='gridItem' style='grid-area: 92 / 6; background-color: rgb(54, 137, 47)'></div>
+<div class='gridItem' style='grid-area: 92 / 7; background-color: rgb(107, 170, 9)'></div>
+<div class='gridItem' style='grid-area: 92 / 8; background-color: rgb(170, 121, 48)'></div>
+<div class='gridItem' style='grid-area: 92 / 9; background-color: rgb(14, 122, 17)'></div>
+<div class='gridItem' style='grid-area: 92 / 10; background-color: rgb(91, 123, 149)'></div>
+<div class='gridItem' style='grid-area: 92 / 11; background-color: rgb(196, 226, 60)'></div>
+<div class='gridItem' style='grid-area: 92 / 12; background-color: rgb(6, 98, 192)'></div>
+<div class='gridItem' style='grid-area: 92 / 13; background-color: rgb(31, 46, 84)'></div>
+<div class='gridItem' style='grid-area: 92 / 14; background-color: rgb(6, 200, 136)'></div>
+<div class='gridItem' style='grid-area: 92 / 15; background-color: rgb(5, 136, 251)'></div>
+<div class='gridItem' style='grid-area: 92 / 16; background-color: rgb(3, 64, 223)'></div>
+<div class='gridItem' style='grid-area: 92 / 17; background-color: rgb(130, 32, 211)'></div>
+<div class='gridItem' style='grid-area: 92 / 18; background-color: rgb(144, 14, 1)'></div>
+<div class='gridItem' style='grid-area: 92 / 19; background-color: rgb(91, 231, 187)'></div>
+<div class='gridItem' style='grid-area: 92 / 20; background-color: rgb(167, 175, 3)'></div>
+<div class='gridItem' style='grid-area: 93 / 1; background-color: rgb(182, 75, 231)'></div>
+<div class='gridItem' style='grid-area: 93 / 2; background-color: rgb(175, 35, 3)'></div>
+<div class='gridItem' style='grid-area: 93 / 3; background-color: rgb(72, 72, 44)'></div>
+<div class='gridItem' style='grid-area: 93 / 4; background-color: rgb(74, 159, 85)'></div>
+<div class='gridItem' style='grid-area: 93 / 5; background-color: rgb(108, 21, 196)'></div>
+<div class='gridItem' style='grid-area: 93 / 6; background-color: rgb(130, 21, 73)'></div>
+<div class='gridItem' style='grid-area: 93 / 7; background-color: rgb(98, 152, 53)'></div>
+<div class='gridItem' style='grid-area: 93 / 8; background-color: rgb(247, 175, 23)'></div>
+<div class='gridItem' style='grid-area: 93 / 9; background-color: rgb(140, 170, 9)'></div>
+<div class='gridItem' style='grid-area: 93 / 10; background-color: rgb(50, 178, 81)'></div>
+<div class='gridItem' style='grid-area: 93 / 11; background-color: rgb(22, 162, 229)'></div>
+<div class='gridItem' style='grid-area: 93 / 12; background-color: rgb(235, 238, 67)'></div>
+<div class='gridItem' style='grid-area: 93 / 13; background-color: rgb(81, 205, 100)'></div>
+<div class='gridItem' style='grid-area: 93 / 14; background-color: rgb(170, 101, 67)'></div>
+<div class='gridItem' style='grid-area: 93 / 15; background-color: rgb(197, 4, 242)'></div>
+<div class='gridItem' style='grid-area: 93 / 16; background-color: rgb(221, 248, 147)'></div>
+<div class='gridItem' style='grid-area: 93 / 17; background-color: rgb(133, 99, 147)'></div>
+<div class='gridItem' style='grid-area: 93 / 18; background-color: rgb(194, 144, 174)'></div>
+<div class='gridItem' style='grid-area: 93 / 19; background-color: rgb(159, 104, 115)'></div>
+<div class='gridItem' style='grid-area: 93 / 20; background-color: rgb(94, 166, 60)'></div>
+<div class='gridItem' style='grid-area: 94 / 1; background-color: rgb(54, 15, 214)'></div>
+<div class='gridItem' style='grid-area: 94 / 2; background-color: rgb(46, 199, 63)'></div>
+<div class='gridItem' style='grid-area: 94 / 3; background-color: rgb(182, 99, 121)'></div>
+<div class='gridItem' style='grid-area: 94 / 4; background-color: rgb(239, 53, 202)'></div>
+<div class='gridItem' style='grid-area: 94 / 5; background-color: rgb(172, 17, 64)'></div>
+<div class='gridItem' style='grid-area: 94 / 6; background-color: rgb(89, 85, 8)'></div>
+<div class='gridItem' style='grid-area: 94 / 7; background-color: rgb(38, 75, 144)'></div>
+<div class='gridItem' style='grid-area: 94 / 8; background-color: rgb(188, 242, 60)'></div>
+<div class='gridItem' style='grid-area: 94 / 9; background-color: rgb(249, 108, 203)'></div>
+<div class='gridItem' style='grid-area: 94 / 10; background-color: rgb(12, 27, 14)'></div>
+<div class='gridItem' style='grid-area: 94 / 11; background-color: rgb(225, 199, 149)'></div>
+<div class='gridItem' style='grid-area: 94 / 12; background-color: rgb(13, 55, 140)'></div>
+<div class='gridItem' style='grid-area: 94 / 13; background-color: rgb(13, 81, 159)'></div>
+<div class='gridItem' style='grid-area: 94 / 14; background-color: rgb(119, 227, 227)'></div>
+<div class='gridItem' style='grid-area: 94 / 15; background-color: rgb(110, 131, 236)'></div>
+<div class='gridItem' style='grid-area: 94 / 16; background-color: rgb(138, 158, 179)'></div>
+<div class='gridItem' style='grid-area: 94 / 17; background-color: rgb(97, 66, 46)'></div>
+<div class='gridItem' style='grid-area: 94 / 18; background-color: rgb(2, 246, 224)'></div>
+<div class='gridItem' style='grid-area: 94 / 19; background-color: rgb(176, 67, 142)'></div>
+<div class='gridItem' style='grid-area: 94 / 20; background-color: rgb(174, 0, 106)'></div>
+<div class='gridItem' style='grid-area: 95 / 1; background-color: rgb(244, 53, 43)'></div>
+<div class='gridItem' style='grid-area: 95 / 2; background-color: rgb(244, 193, 215)'></div>
+<div class='gridItem' style='grid-area: 95 / 3; background-color: rgb(200, 21, 50)'></div>
+<div class='gridItem' style='grid-area: 95 / 4; background-color: rgb(118, 10, 12)'></div>
+<div class='gridItem' style='grid-area: 95 / 5; background-color: rgb(140, 10, 36)'></div>
+<div class='gridItem' style='grid-area: 95 / 6; background-color: rgb(40, 123, 83)'></div>
+<div class='gridItem' style='grid-area: 95 / 7; background-color: rgb(204, 136, 58)'></div>
+<div class='gridItem' style='grid-area: 95 / 8; background-color: rgb(238, 8, 159)'></div>
+<div class='gridItem' style='grid-area: 95 / 9; background-color: rgb(234, 210, 188)'></div>
+<div class='gridItem' style='grid-area: 95 / 10; background-color: rgb(2, 245, 22)'></div>
+<div class='gridItem' style='grid-area: 95 / 11; background-color: rgb(28, 105, 183)'></div>
+<div class='gridItem' style='grid-area: 95 / 12; background-color: rgb(69, 117, 53)'></div>
+<div class='gridItem' style='grid-area: 95 / 13; background-color: rgb(86, 155, 203)'></div>
+<div class='gridItem' style='grid-area: 95 / 14; background-color: rgb(121, 90, 40)'></div>
+<div class='gridItem' style='grid-area: 95 / 15; background-color: rgb(40, 75, 26)'></div>
+<div class='gridItem' style='grid-area: 95 / 16; background-color: rgb(189, 191, 71)'></div>
+<div class='gridItem' style='grid-area: 95 / 17; background-color: rgb(124, 90, 158)'></div>
+<div class='gridItem' style='grid-area: 95 / 18; background-color: rgb(108, 253, 40)'></div>
+<div class='gridItem' style='grid-area: 95 / 19; background-color: rgb(79, 218, 35)'></div>
+<div class='gridItem' style='grid-area: 95 / 20; background-color: rgb(44, 163, 235)'></div>
+<div class='gridItem' style='grid-area: 96 / 1; background-color: rgb(95, 104, 3)'></div>
+<div class='gridItem' style='grid-area: 96 / 2; background-color: rgb(17, 175, 206)'></div>
+<div class='gridItem' style='grid-area: 96 / 3; background-color: rgb(86, 115, 217)'></div>
+<div class='gridItem' style='grid-area: 96 / 4; background-color: rgb(163, 136, 132)'></div>
+<div class='gridItem' style='grid-area: 96 / 5; background-color: rgb(67, 84, 81)'></div>
+<div class='gridItem' style='grid-area: 96 / 6; background-color: rgb(15, 185, 7)'></div>
+<div class='gridItem' style='grid-area: 96 / 7; background-color: rgb(100, 64, 79)'></div>
+<div class='gridItem' style='grid-area: 96 / 8; background-color: rgb(4, 173, 172)'></div>
+<div class='gridItem' style='grid-area: 96 / 9; background-color: rgb(236, 245, 79)'></div>
+<div class='gridItem' style='grid-area: 96 / 10; background-color: rgb(55, 250, 29)'></div>
+<div class='gridItem' style='grid-area: 96 / 11; background-color: rgb(18, 188, 11)'></div>
+<div class='gridItem' style='grid-area: 96 / 12; background-color: rgb(26, 35, 112)'></div>
+<div class='gridItem' style='grid-area: 96 / 13; background-color: rgb(106, 80, 118)'></div>
+<div class='gridItem' style='grid-area: 96 / 14; background-color: rgb(63, 41, 247)'></div>
+<div class='gridItem' style='grid-area: 96 / 15; background-color: rgb(25, 26, 217)'></div>
+<div class='gridItem' style='grid-area: 96 / 16; background-color: rgb(76, 57, 243)'></div>
+<div class='gridItem' style='grid-area: 96 / 17; background-color: rgb(97, 105, 139)'></div>
+<div class='gridItem' style='grid-area: 96 / 18; background-color: rgb(229, 87, 234)'></div>
+<div class='gridItem' style='grid-area: 96 / 19; background-color: rgb(77, 41, 5)'></div>
+<div class='gridItem' style='grid-area: 96 / 20; background-color: rgb(5, 89, 84)'></div>
+<div class='gridItem' style='grid-area: 97 / 1; background-color: rgb(53, 56, 83)'></div>
+<div class='gridItem' style='grid-area: 97 / 2; background-color: rgb(253, 210, 29)'></div>
+<div class='gridItem' style='grid-area: 97 / 3; background-color: rgb(30, 189, 98)'></div>
+<div class='gridItem' style='grid-area: 97 / 4; background-color: rgb(197, 57, 114)'></div>
+<div class='gridItem' style='grid-area: 97 / 5; background-color: rgb(150, 93, 0)'></div>
+<div class='gridItem' style='grid-area: 97 / 6; background-color: rgb(179, 210, 204)'></div>
+<div class='gridItem' style='grid-area: 97 / 7; background-color: rgb(113, 129, 242)'></div>
+<div class='gridItem' style='grid-area: 97 / 8; background-color: rgb(181, 240, 62)'></div>
+<div class='gridItem' style='grid-area: 97 / 9; background-color: rgb(158, 156, 137)'></div>
+<div class='gridItem' style='grid-area: 97 / 10; background-color: rgb(102, 60, 78)'></div>
+<div class='gridItem' style='grid-area: 97 / 11; background-color: rgb(106, 109, 25)'></div>
+<div class='gridItem' style='grid-area: 97 / 12; background-color: rgb(69, 140, 45)'></div>
+<div class='gridItem' style='grid-area: 97 / 13; background-color: rgb(26, 105, 232)'></div>
+<div class='gridItem' style='grid-area: 97 / 14; background-color: rgb(130, 120, 16)'></div>
+<div class='gridItem' style='grid-area: 97 / 15; background-color: rgb(213, 46, 136)'></div>
+<div class='gridItem' style='grid-area: 97 / 16; background-color: rgb(88, 183, 18)'></div>
+<div class='gridItem' style='grid-area: 97 / 17; background-color: rgb(57, 111, 181)'></div>
+<div class='gridItem' style='grid-area: 97 / 18; background-color: rgb(43, 73, 255)'></div>
+<div class='gridItem' style='grid-area: 97 / 19; background-color: rgb(80, 86, 250)'></div>
+<div class='gridItem' style='grid-area: 97 / 20; background-color: rgb(27, 230, 167)'></div>
+<div class='gridItem' style='grid-area: 98 / 1; background-color: rgb(241, 61, 150)'></div>
+<div class='gridItem' style='grid-area: 98 / 2; background-color: rgb(217, 102, 96)'></div>
+<div class='gridItem' style='grid-area: 98 / 3; background-color: rgb(224, 54, 93)'></div>
+<div class='gridItem' style='grid-area: 98 / 4; background-color: rgb(56, 67, 246)'></div>
+<div class='gridItem' style='grid-area: 98 / 5; background-color: rgb(132, 146, 176)'></div>
+<div class='gridItem' style='grid-area: 98 / 6; background-color: rgb(132, 48, 214)'></div>
+<div class='gridItem' style='grid-area: 98 / 7; background-color: rgb(116, 222, 16)'></div>
+<div class='gridItem' style='grid-area: 98 / 8; background-color: rgb(208, 76, 62)'></div>
+<div class='gridItem' style='grid-area: 98 / 9; background-color: rgb(170, 254, 61)'></div>
+<div class='gridItem' style='grid-area: 98 / 10; background-color: rgb(141, 48, 244)'></div>
+<div class='gridItem' style='grid-area: 98 / 11; background-color: rgb(75, 215, 241)'></div>
+<div class='gridItem' style='grid-area: 98 / 12; background-color: rgb(58, 139, 64)'></div>
+<div class='gridItem' style='grid-area: 98 / 13; background-color: rgb(146, 190, 29)'></div>
+<div class='gridItem' style='grid-area: 98 / 14; background-color: rgb(236, 169, 6)'></div>
+<div class='gridItem' style='grid-area: 98 / 15; background-color: rgb(79, 148, 38)'></div>
+<div class='gridItem' style='grid-area: 98 / 16; background-color: rgb(2, 243, 100)'></div>
+<div class='gridItem' style='grid-area: 98 / 17; background-color: rgb(154, 246, 145)'></div>
+<div class='gridItem' style='grid-area: 98 / 18; background-color: rgb(134, 181, 223)'></div>
+<div class='gridItem' style='grid-area: 98 / 19; background-color: rgb(58, 61, 83)'></div>
+<div class='gridItem' style='grid-area: 98 / 20; background-color: rgb(47, 44, 204)'></div>
+<div class='gridItem' style='grid-area: 99 / 1; background-color: rgb(144, 120, 53)'></div>
+<div class='gridItem' style='grid-area: 99 / 2; background-color: rgb(242, 55, 117)'></div>
+<div class='gridItem' style='grid-area: 99 / 3; background-color: rgb(160, 17, 202)'></div>
+<div class='gridItem' style='grid-area: 99 / 4; background-color: rgb(41, 140, 194)'></div>
+<div class='gridItem' style='grid-area: 99 / 5; background-color: rgb(74, 121, 186)'></div>
+<div class='gridItem' style='grid-area: 99 / 6; background-color: rgb(73, 82, 200)'></div>
+<div class='gridItem' style='grid-area: 99 / 7; background-color: rgb(191, 7, 173)'></div>
+<div class='gridItem' style='grid-area: 99 / 8; background-color: rgb(82, 84, 157)'></div>
+<div class='gridItem' style='grid-area: 99 / 9; background-color: rgb(29, 8, 201)'></div>
+<div class='gridItem' style='grid-area: 99 / 10; background-color: rgb(156, 100, 151)'></div>
+<div class='gridItem' style='grid-area: 99 / 11; background-color: rgb(188, 226, 106)'></div>
+<div class='gridItem' style='grid-area: 99 / 12; background-color: rgb(78, 37, 230)'></div>
+<div class='gridItem' style='grid-area: 99 / 13; background-color: rgb(39, 73, 164)'></div>
+<div class='gridItem' style='grid-area: 99 / 14; background-color: rgb(151, 94, 234)'></div>
+<div class='gridItem' style='grid-area: 99 / 15; background-color: rgb(21, 252, 64)'></div>
+<div class='gridItem' style='grid-area: 99 / 16; background-color: rgb(130, 166, 70)'></div>
+<div class='gridItem' style='grid-area: 99 / 17; background-color: rgb(8, 18, 158)'></div>
+<div class='gridItem' style='grid-area: 99 / 18; background-color: rgb(229, 140, 188)'></div>
+<div class='gridItem' style='grid-area: 99 / 19; background-color: rgb(189, 233, 39)'></div>
+<div class='gridItem' style='grid-area: 99 / 20; background-color: rgb(122, 67, 71)'></div>
+<div class='gridItem' style='grid-area: 100 / 1; background-color: rgb(255, 226, 5)'></div>
+<div class='gridItem' style='grid-area: 100 / 2; background-color: rgb(209, 174, 187)'></div>
+<div class='gridItem' style='grid-area: 100 / 3; background-color: rgb(192, 103, 87)'></div>
+<div class='gridItem' style='grid-area: 100 / 4; background-color: rgb(181, 167, 167)'></div>
+<div class='gridItem' style='grid-area: 100 / 5; background-color: rgb(61, 132, 250)'></div>
+<div class='gridItem' style='grid-area: 100 / 6; background-color: rgb(182, 125, 88)'></div>
+<div class='gridItem' style='grid-area: 100 / 7; background-color: rgb(20, 147, 234)'></div>
+<div class='gridItem' style='grid-area: 100 / 8; background-color: rgb(68, 233, 40)'></div>
+<div class='gridItem' style='grid-area: 100 / 9; background-color: rgb(216, 234, 128)'></div>
+<div class='gridItem' style='grid-area: 100 / 10; background-color: rgb(43, 10, 17)'></div>
+<div class='gridItem' style='grid-area: 100 / 11; background-color: rgb(206, 102, 156)'></div>
+<div class='gridItem' style='grid-area: 100 / 12; background-color: rgb(184, 210, 49)'></div>
+<div class='gridItem' style='grid-area: 100 / 13; background-color: rgb(214, 203, 53)'></div>
+<div class='gridItem' style='grid-area: 100 / 14; background-color: rgb(239, 54, 215)'></div>
+<div class='gridItem' style='grid-area: 100 / 15; background-color: rgb(86, 163, 33)'></div>
+<div class='gridItem' style='grid-area: 100 / 16; background-color: rgb(154, 6, 174)'></div>
+<div class='gridItem' style='grid-area: 100 / 17; background-color: rgb(191, 232, 100)'></div>
+<div class='gridItem' style='grid-area: 100 / 18; background-color: rgb(127, 179, 214)'></div>
+<div class='gridItem' style='grid-area: 100 / 19; background-color: rgb(45, 43, 72)'></div>
+<div class='gridItem' style='grid-area: 100 / 20; background-color: rgb(178, 180, 196)'></div>
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutfixedgridlotsofstretcheddatahtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Layout/fixed-grid-lots-of-stretched-data.html (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/fixed-grid-lots-of-stretched-data.html 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/PerformanceTests/Layout/fixed-grid-lots-of-stretched-data.html 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -8,9 +8,9 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body {
</span><del>- display: -webkit-grid;
- -webkit-grid-template-rows: repeat(100, 200px);
- -webkit-grid-template-columns: repeat(20, 200px);;
</del><ins>+ display: grid;
+ grid-template-rows: repeat(100, 200px);
+ grid-template-columns: repeat(20, 200px);;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .gridItem {
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::isLayoutDependent):
+ (WebCore::ComputedStyleExtractor::propertyValue):
+ * css/CSSParser.cpp:
+ (WebCore::isSimpleLengthPropertyID):
+ (WebCore::isValidKeywordPropertyAndValue):
+ (WebCore::CSSParser::parseValue):
+ (WebCore::CSSParser::parseGridGapShorthand):
+ (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
+ (WebCore::CSSParser::parseGridTemplateShorthand):
+ (WebCore::CSSParser::parseGridShorthand):
+ (WebCore::CSSParser::parseGridAreaShorthand):
+ * css/CSSPrimitiveValueMappings.h:
+ (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+ * css/CSSPropertyNames.in:
+ * css/CSSValueKeywords.in:
+ * css/StyleBuilderCustom.h:
+ (WebCore::StyleBuilderCustom::applyInitialGridTemplateAreas):
+ (WebCore::StyleBuilderCustom::applyInheritGridTemplateAreas):
+ (WebCore::StyleBuilderCustom::applyValueGridTemplateAreas):
+ (WebCore::StyleBuilderCustom::applyInitialGridTemplateColumns):
+ (WebCore::StyleBuilderCustom::applyInheritGridTemplateColumns):
+ (WebCore::StyleBuilderCustom::applyValueGridTemplateColumns):
+ (WebCore::StyleBuilderCustom::applyInitialGridTemplateRows):
+ (WebCore::StyleBuilderCustom::applyInheritGridTemplateRows):
+ (WebCore::StyleBuilderCustom::applyValueGridTemplateRows):
+ * css/StyleProperties.cpp:
+ (WebCore::StyleProperties::getPropertyValue):
+
</ins><span class="cx"> 2016-05-06 Nan Wang <n_wang@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: <attachment> element should have a replacement character
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -327,18 +327,18 @@
</span><span class="cx"> CSSPropertyFontVariantAlternates,
</span><span class="cx"> CSSPropertyFontVariantEastAsian,
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- CSSPropertyWebkitGridAutoColumns,
- CSSPropertyWebkitGridAutoFlow,
- CSSPropertyWebkitGridAutoRows,
- CSSPropertyWebkitGridColumnEnd,
- CSSPropertyWebkitGridColumnStart,
- CSSPropertyWebkitGridTemplateAreas,
- CSSPropertyWebkitGridTemplateColumns,
- CSSPropertyWebkitGridTemplateRows,
- CSSPropertyWebkitGridRowEnd,
- CSSPropertyWebkitGridRowStart,
- CSSPropertyWebkitGridColumnGap,
- CSSPropertyWebkitGridRowGap,
</del><ins>+ CSSPropertyGridAutoColumns,
+ CSSPropertyGridAutoFlow,
+ CSSPropertyGridAutoRows,
+ CSSPropertyGridColumnEnd,
+ CSSPropertyGridColumnStart,
+ CSSPropertyGridTemplateAreas,
+ CSSPropertyGridTemplateColumns,
+ CSSPropertyGridTemplateRows,
+ CSSPropertyGridRowEnd,
+ CSSPropertyGridRowStart,
+ CSSPropertyGridColumnGap,
+ CSSPropertyGridRowGap,
</ins><span class="cx"> #endif
</span><span class="cx"> CSSPropertyWebkitHyphenateCharacter,
</span><span class="cx"> CSSPropertyWebkitHyphenateLimitAfter,
</span><span class="lines">@@ -2183,10 +2183,10 @@
</span><span class="cx"> case CSSPropertyPaddingLeft:
</span><span class="cx"> return paddingOrMarginIsRendererDependent<&RenderStyle::paddingLeft>(style, renderer);
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- case CSSPropertyWebkitGridTemplateColumns:
- case CSSPropertyWebkitGridTemplateRows:
- case CSSPropertyWebkitGridTemplate:
- case CSSPropertyWebkitGrid:
</del><ins>+ case CSSPropertyGridTemplateColumns:
+ case CSSPropertyGridTemplateRows:
+ case CSSPropertyGridTemplate:
+ case CSSPropertyGrid:
</ins><span class="cx"> return renderer && renderer->isRenderGrid();
</span><span class="cx"> #endif
</span><span class="cx"> default:
</span><span class="lines">@@ -2789,7 +2789,7 @@
</span><span class="cx"> return list;
</span><span class="cx"> }
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- case CSSPropertyWebkitGridAutoFlow: {
</del><ins>+ case CSSPropertyGridAutoFlow: {
</ins><span class="cx"> RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
</span><span class="cx"> ASSERT(style->isGridAutoFlowDirectionRow() || style->isGridAutoFlowDirectionColumn());
</span><span class="cx"> if (style->isGridAutoFlowDirectionRow())
</span><span class="lines">@@ -2808,48 +2808,48 @@
</span><span class="cx"> // grid-auto-columns: 2fr; cannot be resolved to a value in pixels as the '2fr' means very different things
</span><span class="cx"> // depending on the size of the explicit grid or the number of implicit tracks added to the grid. See
</span><span class="cx"> // http://lists.w3.org/Archives/Public/www-style/2013Nov/0014.html
</span><del>- case CSSPropertyWebkitGridAutoColumns:
</del><ins>+ case CSSPropertyGridAutoColumns:
</ins><span class="cx"> return specifiedValueForGridTrackSize(style->gridAutoColumns(), *style);
</span><del>- case CSSPropertyWebkitGridAutoRows:
</del><ins>+ case CSSPropertyGridAutoRows:
</ins><span class="cx"> return specifiedValueForGridTrackSize(style->gridAutoRows(), *style);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridTemplateColumns:
</del><ins>+ case CSSPropertyGridTemplateColumns:
</ins><span class="cx"> return valueForGridTrackList(ForColumns, renderer, *style);
</span><del>- case CSSPropertyWebkitGridTemplateRows:
</del><ins>+ case CSSPropertyGridTemplateRows:
</ins><span class="cx"> return valueForGridTrackList(ForRows, renderer, *style);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridColumnStart:
</del><ins>+ case CSSPropertyGridColumnStart:
</ins><span class="cx"> return valueForGridPosition(style->gridItemColumnStart());
</span><del>- case CSSPropertyWebkitGridColumnEnd:
</del><ins>+ case CSSPropertyGridColumnEnd:
</ins><span class="cx"> return valueForGridPosition(style->gridItemColumnEnd());
</span><del>- case CSSPropertyWebkitGridRowStart:
</del><ins>+ case CSSPropertyGridRowStart:
</ins><span class="cx"> return valueForGridPosition(style->gridItemRowStart());
</span><del>- case CSSPropertyWebkitGridRowEnd:
</del><ins>+ case CSSPropertyGridRowEnd:
</ins><span class="cx"> return valueForGridPosition(style->gridItemRowEnd());
</span><del>- case CSSPropertyWebkitGridArea:
- return getCSSPropertyValuesForGridShorthand(webkitGridAreaShorthand());
- case CSSPropertyWebkitGridTemplate:
- return getCSSPropertyValuesForGridShorthand(webkitGridTemplateShorthand());
- case CSSPropertyWebkitGrid:
- return getCSSPropertyValuesForGridShorthand(webkitGridShorthand());
- case CSSPropertyWebkitGridColumn:
- return getCSSPropertyValuesForGridShorthand(webkitGridColumnShorthand());
- case CSSPropertyWebkitGridRow:
- return getCSSPropertyValuesForGridShorthand(webkitGridRowShorthand());
</del><ins>+ case CSSPropertyGridArea:
+ return getCSSPropertyValuesForGridShorthand(gridAreaShorthand());
+ case CSSPropertyGridTemplate:
+ return getCSSPropertyValuesForGridShorthand(gridTemplateShorthand());
+ case CSSPropertyGrid:
+ return getCSSPropertyValuesForGridShorthand(gridShorthand());
+ case CSSPropertyGridColumn:
+ return getCSSPropertyValuesForGridShorthand(gridColumnShorthand());
+ case CSSPropertyGridRow:
+ return getCSSPropertyValuesForGridShorthand(gridRowShorthand());
</ins><span class="cx">
</span><del>- case CSSPropertyWebkitGridTemplateAreas:
</del><ins>+ case CSSPropertyGridTemplateAreas:
</ins><span class="cx"> if (!style->namedGridAreaRowCount()) {
</span><span class="cx"> ASSERT(!style->namedGridAreaColumnCount());
</span><span class="cx"> return cssValuePool.createIdentifierValue(CSSValueNone);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return CSSGridTemplateAreasValue::create(style->namedGridArea(), style->namedGridAreaRowCount(), style->namedGridAreaColumnCount());
</span><del>- case CSSPropertyWebkitGridColumnGap:
</del><ins>+ case CSSPropertyGridColumnGap:
</ins><span class="cx"> return zoomAdjustedPixelValueForLength(style->gridColumnGap(), *style);
</span><del>- case CSSPropertyWebkitGridRowGap:
</del><ins>+ case CSSPropertyGridRowGap:
</ins><span class="cx"> return zoomAdjustedPixelValueForLength(style->gridRowGap(), *style);
</span><del>- case CSSPropertyWebkitGridGap:
- return getCSSPropertyValuesForGridShorthand(webkitGridGapShorthand());
</del><ins>+ case CSSPropertyGridGap:
+ return getCSSPropertyValuesForGridShorthand(gridGapShorthand());
</ins><span class="cx"> #endif /* ENABLE(CSS_GRID_LAYOUT) */
</span><span class="cx"> case CSSPropertyHeight:
</span><span class="cx"> if (renderer && !renderer->isRenderSVGModelObject()) {
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -549,8 +549,8 @@
</span><span class="cx"> case CSSPropertyWebkitPaddingEnd:
</span><span class="cx"> case CSSPropertyWebkitPaddingStart:
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- case CSSPropertyWebkitGridColumnGap:
- case CSSPropertyWebkitGridRowGap:
</del><ins>+ case CSSPropertyGridColumnGap:
+ case CSSPropertyGridRowGap:
</ins><span class="cx"> #endif
</span><span class="cx"> acceptsNegativeNumbers = false;
</span><span class="cx"> return true;
</span><span class="lines">@@ -679,11 +679,11 @@
</span><span class="cx"> // inline | block | list-item | inline-block | table |
</span><span class="cx"> // inline-table | table-row-group | table-header-group | table-footer-group | table-row |
</span><span class="cx"> // table-column-group | table-column | table-cell | table-caption | -webkit-box | -webkit-inline-box | none | inherit
</span><del>- // flex | -webkit-flex | inline-flex | -webkit-inline-flex | -webkit-grid | -webkit-inline-grid | contents
</del><ins>+ // flex | -webkit-flex | inline-flex | -webkit-inline-flex | grid | inline-grid | contents
</ins><span class="cx"> if ((valueID >= CSSValueInline && valueID <= CSSValueContents) || valueID == CSSValueNone)
</span><span class="cx"> return true;
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- if (parserContext.cssGridLayoutEnabled && (valueID == CSSValueWebkitGrid || valueID == CSSValueWebkitInlineGrid))
</del><ins>+ if (parserContext.cssGridLayoutEnabled && (valueID == CSSValueGrid || valueID == CSSValueInlineGrid))
</ins><span class="cx"> return true;
</span><span class="cx"> #endif
</span><span class="cx"> break;
</span><span class="lines">@@ -2796,68 +2796,68 @@
</span><span class="cx"> m_valueList->setCurrentIndex(0);
</span><span class="cx"> return parseItemPositionOverflowPosition(propId, important);
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- case CSSPropertyWebkitGridAutoColumns:
- case CSSPropertyWebkitGridAutoRows:
</del><ins>+ case CSSPropertyGridAutoColumns:
+ case CSSPropertyGridAutoRows:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> parsedValue = parseGridTrackSize(*m_valueList);
</span><span class="cx"> break;
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridTemplateColumns:
- case CSSPropertyWebkitGridTemplateRows:
</del><ins>+ case CSSPropertyGridTemplateColumns:
+ case CSSPropertyGridTemplateRows:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> parsedValue = parseGridTrackList();
</span><span class="cx"> break;
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridColumnStart:
- case CSSPropertyWebkitGridColumnEnd:
- case CSSPropertyWebkitGridRowStart:
- case CSSPropertyWebkitGridRowEnd:
</del><ins>+ case CSSPropertyGridColumnStart:
+ case CSSPropertyGridColumnEnd:
+ case CSSPropertyGridRowStart:
+ case CSSPropertyGridRowEnd:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> parsedValue = parseGridPosition();
</span><span class="cx"> break;
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridColumnGap:
- case CSSPropertyWebkitGridRowGap:
</del><ins>+ case CSSPropertyGridColumnGap:
+ case CSSPropertyGridRowGap:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> validPrimitive = validateUnit(valueWithCalculation, FLength | FNonNeg);
</span><span class="cx"> break;
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridGap:
</del><ins>+ case CSSPropertyGridGap:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> return parseGridGapShorthand(important);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridColumn:
- case CSSPropertyWebkitGridRow:
</del><ins>+ case CSSPropertyGridColumn:
+ case CSSPropertyGridRow:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> return parseGridItemPositionShorthand(propId, important);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridTemplate:
</del><ins>+ case CSSPropertyGridTemplate:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> return parseGridTemplateShorthand(important);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGrid:
</del><ins>+ case CSSPropertyGrid:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> return parseGridShorthand(important);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridArea:
</del><ins>+ case CSSPropertyGridArea:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> return parseGridAreaShorthand(important);
</span><span class="cx">
</span><del>- case CSSPropertyWebkitGridTemplateAreas:
</del><ins>+ case CSSPropertyGridTemplateAreas:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> parsedValue = parseGridTemplateAreas();
</span><span class="cx"> break;
</span><del>- case CSSPropertyWebkitGridAutoFlow:
</del><ins>+ case CSSPropertyGridAutoFlow:
</ins><span class="cx"> if (!isCSSGridLayoutEnabled())
</span><span class="cx"> return false;
</span><span class="cx"> parsedValue = parseGridAutoFlow(*m_valueList);
</span><span class="lines">@@ -5579,8 +5579,8 @@
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isCSSGridLayoutEnabled());
</span><span class="cx">
</span><del>- ShorthandScope scope(this, CSSPropertyWebkitGridGap);
- ASSERT(shorthandForProperty(CSSPropertyWebkitGridGap).length() == 2);
</del><ins>+ ShorthandScope scope(this, CSSPropertyGridGap);
+ ASSERT(shorthandForProperty(CSSPropertyGridGap).length() == 2);
</ins><span class="cx">
</span><span class="cx"> CSSParserValue* value = m_valueList->current();
</span><span class="cx"> if (!value)
</span><span class="lines">@@ -5594,8 +5594,8 @@
</span><span class="cx">
</span><span class="cx"> value = m_valueList->next();
</span><span class="cx"> if (!value) {
</span><del>- addProperty(CSSPropertyWebkitGridColumnGap, rowGap, important);
- addProperty(CSSPropertyWebkitGridRowGap, rowGap, important);
</del><ins>+ addProperty(CSSPropertyGridColumnGap, rowGap, important);
+ addProperty(CSSPropertyGridRowGap, rowGap, important);
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -5608,8 +5608,8 @@
</span><span class="cx">
</span><span class="cx"> RefPtr<CSSPrimitiveValue> columnGap = createPrimitiveNumericValue(columnValueWithCalculation);
</span><span class="cx">
</span><del>- addProperty(CSSPropertyWebkitGridRowGap, rowGap, important);
- addProperty(CSSPropertyWebkitGridColumnGap, columnGap, important);
</del><ins>+ addProperty(CSSPropertyGridRowGap, rowGap, important);
+ addProperty(CSSPropertyGridColumnGap, columnGap, important);
</ins><span class="cx">
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="lines">@@ -5685,11 +5685,11 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns ? templateColumns.release() : CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateRows, templateRows.release(), important);
+ addProperty(CSSPropertyGridTemplateColumns, templateColumns ? templateColumns.release() : CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</ins><span class="cx">
</span><span class="cx"> RefPtr<CSSValue> templateAreas = CSSGridTemplateAreasValue::create(gridAreaMap, rowCount, columnCount);
</span><del>- addProperty(CSSPropertyWebkitGridTemplateAreas, templateAreas.release(), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateAreas, templateAreas.release(), important);
</ins><span class="cx">
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="lines">@@ -5698,8 +5698,8 @@
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isCSSGridLayoutEnabled());
</span><span class="cx">
</span><del>- ShorthandScope scope(this, CSSPropertyWebkitGridTemplate);
- ASSERT(shorthandForProperty(CSSPropertyWebkitGridTemplate).length() == 3);
</del><ins>+ ShorthandScope scope(this, CSSPropertyGridTemplate);
+ ASSERT(shorthandForProperty(CSSPropertyGridTemplate).length() == 3);
</ins><span class="cx">
</span><span class="cx"> // At least "none" must be defined.
</span><span class="cx"> if (!m_valueList->current())
</span><span class="lines">@@ -5709,9 +5709,9 @@
</span><span class="cx">
</span><span class="cx"> // 1- 'none' case.
</span><span class="cx"> if (firstValueIsNone && !m_valueList->next()) {
</span><del>- addProperty(CSSPropertyWebkitGridTemplateColumns, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
- addProperty(CSSPropertyWebkitGridTemplateRows, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
- addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateColumns, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
+ addProperty(CSSPropertyGridTemplateRows, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
+ addProperty(CSSPropertyGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -5727,9 +5727,9 @@
</span><span class="cx"> if (!columnsValue)
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- addProperty(CSSPropertyWebkitGridTemplateColumns, columnsValue.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateRows, rowsValue.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateColumns, columnsValue.release(), important);
+ addProperty(CSSPropertyGridTemplateRows, rowsValue.release(), important);
+ addProperty(CSSPropertyGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -5744,18 +5744,18 @@
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isCSSGridLayoutEnabled());
</span><span class="cx">
</span><del>- ShorthandScope scope(this, CSSPropertyWebkitGrid);
- ASSERT(shorthandForProperty(CSSPropertyWebkitGrid).length() == 8);
</del><ins>+ ShorthandScope scope(this, CSSPropertyGrid);
+ ASSERT(shorthandForProperty(CSSPropertyGrid).length() == 8);
</ins><span class="cx">
</span><span class="cx"> // 1- <grid-template>
</span><span class="cx"> if (parseGridTemplateShorthand(important)) {
</span><span class="cx"> // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
</span><span class="cx"> // The sub-properties not specified are set to their initial value, as normal for shorthands.
</span><del>- addProperty(CSSPropertyWebkitGridAutoFlow, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridAutoColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridAutoRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</del><ins>+ addProperty(CSSPropertyGridAutoFlow, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridAutoColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridAutoRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -5763,7 +5763,7 @@
</span><span class="cx"> m_valueList->setCurrentIndex(0);
</span><span class="cx">
</span><span class="cx"> // 2- <grid-auto-flow> [ <grid-auto-columns> [ / <grid-auto-rows> ]? ]
</span><del>- if (!parseValue(CSSPropertyWebkitGridAutoFlow, important))
</del><ins>+ if (!parseValue(CSSPropertyGridAutoFlow, important))
</ins><span class="cx"> return false;
</span><span class="cx">
</span><span class="cx"> RefPtr<CSSValue> autoColumnsValue;
</span><span class="lines">@@ -5792,16 +5792,16 @@
</span><span class="cx"> if (!autoColumnsValue)
</span><span class="cx"> autoColumnsValue = autoRowsValue;
</span><span class="cx">
</span><del>- addProperty(CSSPropertyWebkitGridAutoColumns, autoColumnsValue.release(), important);
- addProperty(CSSPropertyWebkitGridAutoRows, autoRowsValue.release(), important);
</del><ins>+ addProperty(CSSPropertyGridAutoColumns, autoColumnsValue.release(), important);
+ addProperty(CSSPropertyGridAutoRows, autoRowsValue.release(), important);
</ins><span class="cx">
</span><span class="cx"> // It can only be specified the explicit or the implicit grid properties in a single grid declaration.
</span><span class="cx"> // The sub-properties not specified are set to their initial value, as normal for shorthands.
</span><del>- addProperty(CSSPropertyWebkitGridTemplateColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridTemplateRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
- addProperty(CSSPropertyWebkitGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</del><ins>+ addProperty(CSSPropertyGridTemplateColumns, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridTemplateRows, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridTemplateAreas, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridColumnGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
+ addProperty(CSSPropertyGridRowGap, CSSValuePool::singleton().createImplicitInitialValue(), important);
</ins><span class="cx">
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="lines">@@ -5810,8 +5810,8 @@
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isCSSGridLayoutEnabled());
</span><span class="cx">
</span><del>- ShorthandScope scope(this, CSSPropertyWebkitGridArea);
- ASSERT(shorthandForProperty(CSSPropertyWebkitGridArea).length() == 4);
</del><ins>+ ShorthandScope scope(this, CSSPropertyGridArea);
+ ASSERT(shorthandForProperty(CSSPropertyGridArea).length() == 4);
</ins><span class="cx">
</span><span class="cx"> RefPtr<CSSValue> rowStartValue = parseGridPosition();
</span><span class="cx"> if (!rowStartValue)
</span><span class="lines">@@ -5838,10 +5838,10 @@
</span><span class="cx"> if (!columnEndValue)
</span><span class="cx"> columnEndValue = gridMissingGridPositionValue(*columnStartValue);
</span><span class="cx">
</span><del>- addProperty(CSSPropertyWebkitGridRowStart, rowStartValue, important);
- addProperty(CSSPropertyWebkitGridColumnStart, columnStartValue, important);
- addProperty(CSSPropertyWebkitGridRowEnd, rowEndValue, important);
- addProperty(CSSPropertyWebkitGridColumnEnd, columnEndValue, important);
</del><ins>+ addProperty(CSSPropertyGridRowStart, rowStartValue, important);
+ addProperty(CSSPropertyGridColumnStart, columnStartValue, important);
+ addProperty(CSSPropertyGridRowEnd, rowEndValue, important);
+ addProperty(CSSPropertyGridColumnEnd, columnEndValue, important);
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueMappingsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1379,10 +1379,10 @@
</span><span class="cx"> break;
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> case GRID:
</span><del>- m_value.valueID = CSSValueWebkitGrid;
</del><ins>+ m_value.valueID = CSSValueGrid;
</ins><span class="cx"> break;
</span><span class="cx"> case INLINE_GRID:
</span><del>- m_value.valueID = CSSValueWebkitInlineGrid;
</del><ins>+ m_value.valueID = CSSValueInlineGrid;
</ins><span class="cx"> break;
</span><span class="cx"> #endif
</span><span class="cx"> case NONE:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertyNamesin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPropertyNames.in 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/CSSPropertyNames.in 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -496,24 +496,24 @@
</span><span class="cx"> justify-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
</span><span class="cx"> -webkit-justify-items = justify-items
</span><span class="cx"> #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
</span><del>--webkit-grid [Longhands=-webkit-grid-template-rows|-webkit-grid-template-columns|-webkit-grid-template-areas|-webkit-grid-auto-flow|-webkit-grid-auto-rows|-webkit-grid-auto-columns|-webkit-grid-column-gap|-webkit-grid-row-gap]
--webkit-grid-area [Longhands=-webkit-grid-row-start|-webkit-grid-column-start|-webkit-grid-row-end|-webkit-grid-column-end]
--webkit-grid-auto-columns [Converter=GridTrackSize]
--webkit-grid-auto-rows [Converter=GridTrackSize]
--webkit-grid-column-end [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnEnd]
--webkit-grid-column-gap [Initial=initialZeroLength, Converter=Length]
--webkit-grid-column-start [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnStart]
--webkit-grid-template [Longhands=-webkit-grid-template-rows|-webkit-grid-template-columns|-webkit-grid-template-areas]
--webkit-grid-template-columns [Custom=All]
--webkit-grid-template-rows [Custom=All]
--webkit-grid-row-end [ConditionalConverter=GridPosition, NameForMethods=GridItemRowEnd]
--webkit-grid-row-gap [Initial=initialZeroLength, Converter=Length]
--webkit-grid-row-start [ConditionalConverter=GridPosition, NameForMethods=GridItemRowStart]
--webkit-grid-column [Longhands=-webkit-grid-column-start|-webkit-grid-column-end]
--webkit-grid-gap [Longhands=-webkit-grid-row-gap|-webkit-grid-column-gap]
--webkit-grid-row [Longhands=-webkit-grid-row-start|-webkit-grid-row-end]
--webkit-grid-template-areas [Custom=All]
--webkit-grid-auto-flow [Converter=GridAutoFlow]
</del><ins>+grid [Longhands=grid-template-rows|grid-template-columns|grid-template-areas|grid-auto-flow|grid-auto-rows|grid-auto-columns|grid-column-gap|grid-row-gap]
+grid-area [Longhands=grid-row-start|grid-column-start|grid-row-end|grid-column-end]
+grid-auto-columns [Converter=GridTrackSize]
+grid-auto-rows [Converter=GridTrackSize]
+grid-column-end [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnEnd]
+grid-column-gap [Initial=initialZeroLength, Converter=Length]
+grid-column-start [ConditionalConverter=GridPosition, NameForMethods=GridItemColumnStart]
+grid-template [Longhands=grid-template-rows|grid-template-columns|grid-template-areas]
+grid-template-columns [Custom=All]
+grid-template-rows [Custom=All]
+grid-row-end [ConditionalConverter=GridPosition, NameForMethods=GridItemRowEnd]
+grid-row-gap [Initial=initialZeroLength, Converter=Length]
+grid-row-start [ConditionalConverter=GridPosition, NameForMethods=GridItemRowStart]
+grid-column [Longhands=grid-column-start|grid-column-end]
+grid-gap [Longhands=grid-row-gap|grid-column-gap]
+grid-row [Longhands=grid-row-start|grid-row-end]
+grid-template-areas [Custom=All]
+grid-auto-flow [Converter=GridAutoFlow]
</ins><span class="cx"> #endif
</span><span class="cx"> -webkit-hyphenate-character [Inherited, NameForMethods=HyphenationString, Converter=StringOrAuto]
</span><span class="cx"> -webkit-hyphenate-limit-after [Inherited, NameForMethods=HyphenationLimitAfter, Converter=NumberOrAuto<short>]
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSValueKeywordsin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSValueKeywords.in (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSValueKeywords.in 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/CSSValueKeywords.in 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -418,8 +418,8 @@
</span><span class="cx"> inline-flex
</span><span class="cx"> -webkit-inline-flex
</span><span class="cx"> contents
</span><del>--webkit-grid
--webkit-inline-grid
</del><ins>+grid
+inline-grid
</ins><span class="cx"> //none
</span><span class="cx"> //
</span><span class="cx"> // CSS_PROP_CURSOR:
</span><span class="lines">@@ -1155,10 +1155,10 @@
</span><span class="cx"> // stroke
</span><span class="cx"> markers
</span><span class="cx">
</span><del>-// -webkit-grid-{column-start|column-end|row-start|row-end}
</del><ins>+// grid-{column-start|column-end|row-start|row-end}
</ins><span class="cx"> span
</span><span class="cx">
</span><del>-// -webkit-grid-auto-flow
</del><ins>+// grid-auto-flow
</ins><span class="cx"> dense
</span><span class="cx">
</span><span class="cx"> #if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderCustomh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderCustom.h (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -94,9 +94,9 @@
</span><span class="cx"> DECLARE_PROPERTY_CUSTOM_HANDLERS(FontVariantNumeric);
</span><span class="cx"> DECLARE_PROPERTY_CUSTOM_HANDLERS(FontVariantEastAsian);
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitGridTemplateAreas);
- DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitGridTemplateColumns);
- DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitGridTemplateRows);
</del><ins>+ DECLARE_PROPERTY_CUSTOM_HANDLERS(GridTemplateAreas);
+ DECLARE_PROPERTY_CUSTOM_HANDLERS(GridTemplateColumns);
+ DECLARE_PROPERTY_CUSTOM_HANDLERS(GridTemplateRows);
</ins><span class="cx"> #endif // ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitMaskBoxImageOutset);
</span><span class="cx"> DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitMaskBoxImageRepeat);
</span><span class="lines">@@ -1599,21 +1599,21 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>-inline void StyleBuilderCustom::applyInitialWebkitGridTemplateAreas(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInitialGridTemplateAreas(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setNamedGridArea(RenderStyle::initialNamedGridArea());
</span><span class="cx"> styleResolver.style()->setNamedGridAreaRowCount(RenderStyle::initialNamedGridAreaCount());
</span><span class="cx"> styleResolver.style()->setNamedGridAreaColumnCount(RenderStyle::initialNamedGridAreaCount());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyInheritWebkitGridTemplateAreas(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInheritGridTemplateAreas(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setNamedGridArea(styleResolver.parentStyle()->namedGridArea());
</span><span class="cx"> styleResolver.style()->setNamedGridAreaRowCount(styleResolver.parentStyle()->namedGridAreaRowCount());
</span><span class="cx"> styleResolver.style()->setNamedGridAreaColumnCount(styleResolver.parentStyle()->namedGridAreaColumnCount());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyValueWebkitGridTemplateAreas(StyleResolver& styleResolver, CSSValue& value)
</del><ins>+inline void StyleBuilderCustom::applyValueGridTemplateAreas(StyleResolver& styleResolver, CSSValue& value)
</ins><span class="cx"> {
</span><span class="cx"> if (is<CSSPrimitiveValue>(value)) {
</span><span class="cx"> ASSERT(downcast<CSSPrimitiveValue>(value).getValueID() == CSSValueNone);
</span><span class="lines">@@ -1635,14 +1635,14 @@
</span><span class="cx"> styleResolver.style()->setNamedGridAreaColumnCount(gridTemplateAreasValue.columnCount());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyInitialWebkitGridTemplateColumns(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInitialGridTemplateColumns(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setGridColumns(RenderStyle::initialGridColumns());
</span><span class="cx"> styleResolver.style()->setNamedGridColumnLines(RenderStyle::initialNamedGridColumnLines());
</span><span class="cx"> styleResolver.style()->setOrderedNamedGridColumnLines(RenderStyle::initialOrderedNamedGridColumnLines());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyInheritWebkitGridTemplateColumns(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInheritGridTemplateColumns(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setGridColumns(styleResolver.parentStyle()->gridColumns());
</span><span class="cx"> styleResolver.style()->setNamedGridColumnLines(styleResolver.parentStyle()->namedGridColumnLines());
</span><span class="lines">@@ -1659,7 +1659,7 @@
</span><span class="cx"> style->setAutoRepeatOrderedNamedGrid##TrackType##Lines(tracksData.m_autoRepeatOrderedNamedGridLines); \
</span><span class="cx"> style->setGridAutoRepeat##TrackType##sType(tracksData.m_autoRepeatType);
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyValueWebkitGridTemplateColumns(StyleResolver& styleResolver, CSSValue& value)
</del><ins>+inline void StyleBuilderCustom::applyValueGridTemplateColumns(StyleResolver& styleResolver, CSSValue& value)
</ins><span class="cx"> {
</span><span class="cx"> StyleBuilderConverter::TracksData tracksData;
</span><span class="cx"> if (!StyleBuilderConverter::createGridTrackList(value, tracksData, styleResolver))
</span><span class="lines">@@ -1671,21 +1671,21 @@
</span><span class="cx"> SET_TRACKS_DATA(tracksData, styleResolver.style(), Column);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyInitialWebkitGridTemplateRows(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInitialGridTemplateRows(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setGridRows(RenderStyle::initialGridRows());
</span><span class="cx"> styleResolver.style()->setNamedGridRowLines(RenderStyle::initialNamedGridRowLines());
</span><span class="cx"> styleResolver.style()->setOrderedNamedGridRowLines(RenderStyle::initialOrderedNamedGridRowLines());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyInheritWebkitGridTemplateRows(StyleResolver& styleResolver)
</del><ins>+inline void StyleBuilderCustom::applyInheritGridTemplateRows(StyleResolver& styleResolver)
</ins><span class="cx"> {
</span><span class="cx"> styleResolver.style()->setGridRows(styleResolver.parentStyle()->gridRows());
</span><span class="cx"> styleResolver.style()->setNamedGridRowLines(styleResolver.parentStyle()->namedGridRowLines());
</span><span class="cx"> styleResolver.style()->setOrderedNamedGridRowLines(styleResolver.parentStyle()->orderedNamedGridRowLines());
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline void StyleBuilderCustom::applyValueWebkitGridTemplateRows(StyleResolver& styleResolver, CSSValue& value)
</del><ins>+inline void StyleBuilderCustom::applyValueGridTemplateRows(StyleResolver& styleResolver, CSSValue& value)
</ins><span class="cx"> {
</span><span class="cx"> StyleBuilderConverter::TracksData tracksData;
</span><span class="cx"> if (!StyleBuilderConverter::createGridTrackList(value, tracksData, styleResolver))
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.cpp (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.cpp 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebCore/css/StyleProperties.cpp 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -166,16 +166,16 @@
</span><span class="cx"> case CSSPropertyFlexFlow:
</span><span class="cx"> return getShorthandValue(flexFlowShorthand());
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- case CSSPropertyWebkitGridArea:
- return getShorthandValue(webkitGridAreaShorthand());
- case CSSPropertyWebkitGridTemplate:
- return getShorthandValue(webkitGridTemplateShorthand());
- case CSSPropertyWebkitGrid:
- return getShorthandValue(webkitGridShorthand());
- case CSSPropertyWebkitGridColumn:
- return getShorthandValue(webkitGridColumnShorthand());
- case CSSPropertyWebkitGridRow:
- return getShorthandValue(webkitGridRowShorthand());
</del><ins>+ case CSSPropertyGridArea:
+ return getShorthandValue(gridAreaShorthand());
+ case CSSPropertyGridTemplate:
+ return getShorthandValue(gridTemplateShorthand());
+ case CSSPropertyGrid:
+ return getShorthandValue(gridShorthand());
+ case CSSPropertyGridColumn:
+ return getShorthandValue(gridColumnShorthand());
+ case CSSPropertyGridRow:
+ return getShorthandValue(gridRowShorthand());
</ins><span class="cx"> #endif
</span><span class="cx"> case CSSPropertyFont:
</span><span class="cx"> return fontValue();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * UserInterface/Models/CSSKeywordCompletions.js:
+
</ins><span class="cx"> 2016-05-05 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> REGRESSION(r200474): Exception in autocompletion - `getCompletions` not found
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSKeywordCompletionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -392,7 +392,7 @@
</span><span class="cx"> "none", "inline", "block", "list-item", "compact", "inline-block", "table", "inline-table",
</span><span class="cx"> "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
</span><span class="cx"> "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box", "-wap-marquee",
</span><del>- "flex", "inline-flex", "-webkit-grid", "-webkit-inline-grid"
</del><ins>+ "flex", "inline-flex", "grid", "inline-grid"
</ins><span class="cx"> ],
</span><span class="cx"> "image-rendering": [
</span><span class="cx"> "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast", "crisp-edges", "pixelated"
</span><span class="lines">@@ -776,31 +776,31 @@
</span><span class="cx"> "flex-basis": [
</span><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-after": [
</del><ins>+ "grid-after": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-before": [
</del><ins>+ "grid-before": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-end": [
</del><ins>+ "grid-end": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-start": [
</del><ins>+ "grid-start": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-auto-flow": [
</del><ins>+ "grid-auto-flow": [
</ins><span class="cx"> "row", "column", "dense"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-column": [
</del><ins>+ "grid-column": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-row": [
</del><ins>+ "grid-row": [
</ins><span class="cx"> "auto"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-columns": [
</del><ins>+ "grid-columns": [
</ins><span class="cx"> "auto", "-webkit-max-content", "-webkit-min-content"
</span><span class="cx"> ],
</span><del>- "-webkit-grid-rows": [
</del><ins>+ "grid-rows": [
</ins><span class="cx"> "auto", "-webkit-max-content", "-webkit-min-content"
</span><span class="cx"> ],
</span><span class="cx"> "-webkit-ruby-position": [
</span></span></pre></div>
<a id="trunkToolsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Tools/ChangeLog (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Tools/ChangeLog 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Tools/ChangeLog 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2016-05-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Unprefix CSS Grid Layout properties
+ https://bugs.webkit.org/show_bug.cgi?id=157137
+
+ Reviewed by Simon Fraser.
+
+ Remove "-webkit" prefix from all the grid layout properties,
+ including the display value.
+ Update the source code to remove the prefix where it was used too.
+
+ * TestWebKitAPI/Tests/WebCore/CSSParser.cpp:
+ (TestWebKitAPI::TEST):
+
</ins><span class="cx"> 2016-05-05 Alexey Proskuryakov <ap@apple.com>
</span><span class="cx">
</span><span class="cx"> Partially revert http://trac.webkit.org/r200504
</span></span></pre></div>
<a id="trunkToolsTestWebKitAPITestsWebCoreCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Tools/TestWebKitAPI/Tests/WebCore/CSSParser.cpp (200509 => 200510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Tools/TestWebKitAPI/Tests/WebCore/CSSParser.cpp 2016-05-06 07:45:04 UTC (rev 200509)
+++ trunk/Tools/TestWebKitAPI/Tests/WebCore/CSSParser.cpp 2016-05-06 08:17:12 UTC (rev 200510)
</span><span class="lines">@@ -54,22 +54,22 @@
</span><span class="cx"> const char* input;
</span><span class="cx"> const size_t output;
</span><span class="cx"> } testCases[] = {
</span><del>- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(999999, 20px);", 999999},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(999999, 20px);", 999999},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(1000000, 10%);", 1000000},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(1000000, 10%);", 1000000},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(1000000, [first] -webkit-min-content [last]);", 1000000},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(1000000, [first] -webkit-min-content [last]);", 1000000},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(1000001, auto);", 1000000},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(1000001, auto);", 1000000},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(400000, 2em minmax(10px, -webkit-max-content) 0.5fr);", 999999},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(400000, 2em minmax(10px, -webkit-max-content) 0.5fr);", 999999},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(600000, [first] 3vh 10% 2fr [nav] 10px auto 1fr 6em [last]);", 999999},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(600000, [first] 3vh 10% 2fr [nav] 10px auto 1fr 6em [last]);", 999999},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(100000000000000000000, 10% 1fr);", 1000000},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(100000000000000000000, 10% 1fr);", 1000000},
- {CSSPropertyWebkitGridTemplateColumns, "-webkit-grid-template-columns: repeat(100000000000000000000, 10% 5em 1fr auto auto 15px -webkit-min-content);", 999999},
- {CSSPropertyWebkitGridTemplateRows, "-webkit-grid-template-rows: repeat(100000000000000000000, 10% 5em 1fr auto auto 15px -webkit-min-content);", 999999},
</del><ins>+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(999999, 20px);", 999999},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(999999, 20px);", 999999},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(1000000, 10%);", 1000000},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(1000000, 10%);", 1000000},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(1000000, [first] -webkit-min-content [last]);", 1000000},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(1000000, [first] -webkit-min-content [last]);", 1000000},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(1000001, auto);", 1000000},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(1000001, auto);", 1000000},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(400000, 2em minmax(10px, -webkit-max-content) 0.5fr);", 999999},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(400000, 2em minmax(10px, -webkit-max-content) 0.5fr);", 999999},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(600000, [first] 3vh 10% 2fr [nav] 10px auto 1fr 6em [last]);", 999999},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(600000, [first] 3vh 10% 2fr [nav] 10px auto 1fr 6em [last]);", 999999},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(100000000000000000000, 10% 1fr);", 1000000},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(100000000000000000000, 10% 1fr);", 1000000},
+ {CSSPropertyGridTemplateColumns, "grid-template-columns: repeat(100000000000000000000, 10% 5em 1fr auto auto 15px -webkit-min-content);", 999999},
+ {CSSPropertyGridTemplateRows, "grid-template-rows: repeat(100000000000000000000, 10% 5em 1fr auto auto 15px -webkit-min-content);", 999999},
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> CSSParser parser(strictCSSParserContext());
</span></span></pre>
</div>
</div>
</body>
</html>