layout/reftests/css-grid/grid-order-placement-definite-001.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>CSS Test: Testing definite placement of grid items with 'order'</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
  11   <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
  12   <link rel="match" href="grid-order-placement-definite-001-ref.html">
  13   <style type="text/css">
  14 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
  15
  16 .grid {
  17  display: grid;
  18  position: relative;
  19  grid-template-columns: 20px 20px 20px 20px;
  20  grid-template-rows: 20px;
  21  padding: 17px 7px 11px 13px;
  22  width: 100px;
  23  height: 25px;
  24 }
  25
  26 .a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; }
  27 .b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; }
  28 .c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; }
  29 .d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; }
  30 .e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; }
  31
  32 span {
  33   border: 1px solid;
  34 }
  35
  36 .f2 { background:white; }
  37 .f2 span { opacity: 0.5; }
  38 .f2 span.e { display:none; }
  39   </style>
  40 </head>
  41 <body>
  42
  43 <f>
  44
  45 <div class="grid">
  46 <span class="a">a</span>
  47 <span class="b">b</span>
  48 <span class="c">c</span>
  49 <span class="e"></span>
  50 <span class="d">d</span>
  51 </div>
  52
  53 <div class="grid">
  54 <span class="e"></span>
  55 <span class="d">d</span>
  56 <span class="b">b</span>
  57 <span class="c">c</span>
  58 <span class="a">a</span>
  59 </div>
  60
  61 </f>
  62
  63 <script>
  64   var f = document.querySelector('f');
  65   var f2 = f.cloneNode(true);
  66   f2.className = 'f2';
  67   document.body.appendChild(f2);
  68 </script>
  69
  70 </body>
  71 </html>