layout/reftests/css-grid/grid-abspos-items-011.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 Grid Test: abs pos areas in empty grid</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
  11   <link rel="match" href="grid-abspos-items-011-ref.html">
  12   <style type="text/css">
  13
  14 div {
  15   display: grid;
  16   position: relative;
  17   float: left;
  18   width: 20px;
  19   height: 20px;
  20   background: red;
  21 }
  22 div.green {
  23   background: lime;
  24 }
  25 x div {
  26   padding: 4px;
  27   background: white;
  28 }
  29
  30 span {
  31   position: absolute;
  32   top:0;left:0;bottom:0;right:0;
  33   background: lime;
  34 }
  35 span.red {
  36   background: red;
  37 }
  38
  39 .cs { grid-column-start: 1; }
  40 .ce { grid-column-end: 1; }
  41 .rs { grid-row-start: 1; }
  42 .re { grid-row-end: 1; }
  43
  44 </style>
  45 </head>
  46 <body>
  47
  48 There should be no red areas.
  49 <br clear="all">
  50
  51 <div><span class="cs"></span></div>
  52 <div class="green"><span class="ce red"></span></div>
  53 <div><span class="rs"></span></div>
  54 <div class="green"><span class="re red"></span></div>
  55
  56 <div><span class="cs ce"></span></div>
  57 <div><span class="cs rs"></span></div>
  58 <div class="green"><span class="cs re red"></span></div>
  59 <div class="green"><span class="ce rs red"></span></div>
  60 <div class="green"><span class="ce re red"></span></div>
  61 <div><span class="rs re"></span></div>
  62
  63 <div><span class="cs ce rs"></span></div>
  64 <div class="green"><span class="cs ce re red"></span></div>
  65 <div><span class="rs re cs"></span></div>
  66 <div class="green"><span class="rs re ce red"></span></div>
  67
  68 <div><span class="cs ce rs re"></span></div>
  69
  70 <br clear="all">
  71 <br clear="all">
  72
  73 <!-- the same combinations in a grid container with padding -->
  74
  75 <x>
  76 <div><span class="cs"></span></div>
  77 <div><span class="ce"></span></div>
  78 <div><span class="rs"></span></div>
  79 <div><span class="re"></span></div>
  80
  81 <div><span class="cs ce"></span></div>
  82 <div><span class="cs rs"></span></div>
  83 <div><span class="cs re"></span></div>
  84 <div><span class="ce rs"></span></div>
  85 <div><span class="ce re"></span></div>
  86 <div><span class="rs re"></span></div>
  87
  88 <div><span class="cs ce rs"></span></div>
  89 <div><span class="cs ce re"></span></div>
  90 <div><span class="rs re cs"></span></div>
  91 <div><span class="rs re ce"></span></div>
  92
  93 <div><span class="cs ce rs re"></span></div>
  94 </x>
  95
  96 </body>
  97 </html>