text: ﻿<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>CSS Test: Grid-column with a negative value</title>
          <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
          <link rel="help" href="http://dev.w3.org/csswg/css3-grid-align/#grid-declaration" />
          <meta name="flags" content="ahem invalid" />
          <meta name="assert" content="The 'grid-column' with a negative value is invalid and inserts the grid-item in the first column." />
          <script src="../../../../libs/jquery-1.9.1.min.js"></script>
          <script src="../../../../grid-layout-polyfill.js"></script>
          <style type="text/css">
              #test
              {
                  color: green;
                  display: -ms-grid;
                  display: -moz-grid;
                  display: -o-grid;
                  display: -webkit-grid;
                  display: grid;
                  font: 20px/1 ahem;
                  height: 3em;
                  -ms-grid-columns: auto 1fr;
                  -moz-grid-columns: auto 1fr;
                  -o-grid-columns: auto 1fr;
                  -webkit-grid-columns: auto 1fr;
                  grid-columns: auto 1fr;
                  -ms-grid-rows: auto 1fr;
                  -moz-grid-rows: auto 1fr;
                  -o-grid-rows: auto 1fr;
                  -webkit-grid-rows: auto 1fr;
                  grid-rows: auto 1fr;
              }
              #griditem
              {
                  color: red;
                  -ms-grid-column: -1;
                  -moz-grid-column: -1;
                  -o-grid-column: -1;
                  -webkit-grid-column: -1;
                  grid-column: -1;
                  -ms-grid-row: 1;
                  -moz-grid-row: 1;
                  -o-grid-row: 1;
                  -webkit-grid-row: 1;
                  grid-row: 1;
              }
          </style>
      </head>
      <body>
          <p>Test passes if there is no red visible on the page.</p>
          <div id="test">
              <div id="griditem">XXXX</div>
              <div>XXXXX</div>
          </div>
      </body>
  </html>