third_party/WebKit/LayoutTests/fast/block/positioning/051.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
   2 <html lang="en-US">
   3 <head>
   4 <title>Layered Presentation</title>
   5 <style type="text/css">
   6
   7 div.contain {
   8         position: relative;
   9         height: 600px;
  10         width: 600px;
  11         border: 10px solid black;
  12         margin: 1em;
  13         }
  14
  15 div.subcontain {
  16         position: absolute;
  17         top: 0;
  18         left: 0;
  19         right: 0;
  20         bottom: 0;
  21         }
  22
  23 div.contain p {
  24         position: absolute;
  25         width: 100px;
  26         height: 100px;
  27         padding: 50px; /* 200px * 200px overall */
  28         margin: 0;
  29         border: none;
  30         font: bold 80px/1 Verdana, Arial, sans-serif;
  31         text-align: center;
  32         color: white;
  33         }
  34
  35 .one {  top: 0px;       left: 200px; background: #f00; }
  36 .two {  top: 50px;      left: 350px; background: #f90; }
  37 .three{ top: 200px;     left: 400px; background: #cc0; }
  38 .four { top: 350px;     left: 350px; background: #0c0; }
  39 .five { top: 400px;     left: 200px; background: #099; }
  40 .six {  top: 350px;     left: 50px; background: #00f; }
  41 .seven{ top: 200px;     left: 0px; background: #609; }
  42 .eight{ top: 50px;      left: 50px; background: #906; }
  43
  44 </style>
  45 </head>
  46 <body>
  47 <h1>Layered Presentation</h1>
  48
  49 <p>
  50
  51         Robert O'Callahan pointed out to me some mistakes in this test
  52         that I have not yet had the time to examine or correct.
  53
  54 </p>
  55
  56 <p>In each of the following, 1 should be the top layer and 8 the
  57 bottom layer:</p>
  58
  59 <div class="contain">
  60         <p class="eight">&nbsp;8&nbsp;hide&nbsp;me</p>
  61         <p class="seven">7</p>
  62         <p class="six">6</p>
  63         <p class="five">5</p>
  64         <p class="four">4</p>
  65         <p class="three">3</p>
  66         <p class="two">2</p>
  67         <p class="one">1</p>
  68 </div>
  69
  70 <div class="contain">
  71         <p class="one" style="z-index: 4">1</p>
  72         <p class="two" style="z-index: 3">2</p>
  73         <p class="three" style="z-index: 2">3</p>
  74         <p class="four" style="z-index: 1">4</p>
  75         <p class="five" style="z-index: 0">5</p>
  76         <p class="six" style="z-index: -1">6</p>
  77         <p class="seven" style="z-index: -2">7</p>
  78         <p class="eight" style="z-index: -3">&nbsp;8&nbsp;hide&nbsp;me</p>
  79 </div>
  80
  81 <div class="contain">
  82         <p class="one" style="z-index: 4000000">1</p>
  83         <p class="two" style="z-index: 3000000">2</p>
  84         <p class="three" style="z-index: 2000000">3</p>
  85         <p class="four" style="z-index: 1000000">4</p>
  86         <p class="five" style="z-index: 0">5</p>
  87         <p class="six" style="z-index: -1000000">6</p>
  88         <p class="seven" style="z-index: -2000000">7</p>
  89         <p class="eight" style="z-index: -3000000">8</p>
  90 </div>
  91
  92 <div class="contain">
  93         <p class="one" style="z-index: 3">1</p>
  94         <p class="two" style="z-index: +2">2</p>
  95         <p class="four" style="z-index: +0">4</p>
  96         <p class="three" style="z-index: -0">3</p>
  97         <p class="six" style="z-index: -2">6</p>  <!-- determined by order in doc -->
  98         <p class="five" style="z-index: -2">5</p>
  99         <p class="seven" style="z-index: -30">7</p>
 100         <p class="eight" style="z-index: -040">8</p>  <!-- decimal, not octal -->
 101 </div>
 102
 103 <div class="contain">
 104         <p class="six" style="z-index: 0">6</p>
 105         <p class="five" style="z-index: 0">5</p>
 106         <p class="four" style="z-index: 0">4</p>
 107         <p class="eight" style="z-index: -3">8</p>
 108         <p class="seven" style="z-index: -3">7</p>
 109         <p class="three" style="z-index: 4">3</p>
 110         <p class="two" style="z-index: 4">2</p>
 111         <p class="one" style="z-index: 4">1</p>
 112 </div>
 113
 114 <div class="contain">
 115         <p class="one" style="z-index: 4">1</p>
 116         <p class="two" style="z-index: 3">2</p>
 117         <p class="three" style="z-index: 2">3</p>
 118         <div class="subcontain" style="z-index: 0">
 119                 <p class="four" style="z-index: 9">4</p>
 120                 <p class="five" style="z-index: 0">5</p>
 121                 <p class="six" style="z-index: -9">6</p>
 122         </div>
 123         <p class="seven" style="z-index: -2">7</p>
 124         <p class="eight" style="z-index: -3">8</p>
 125 </div>
 126
 127
 128 <div class="contain">
 129         <div class="subcontain" style="z-index: auto">
 130                 <p class="four" style="z-index: 1">4</p>
 131                 <p class="two" style="z-index: 3">2</p>
 132                 <p class="seven" style="z-index: -2">7</p>
 133         </div>
 134         <p class="three" style="z-index: 2">3</p>
 135         <p class="five" style="z-index: 0">5</p>
 136         <p class="six" style="z-index: -1">6</p>
 137         <p class="one" style="z-index: 4">1</p>
 138         <p class="eight" style="z-index: -3">8</p>
 139 </div>
 140
 141 <p>Using assumed default value of z-index (may not pass):</p>
 142 <div class="contain">
 143         <div class="subcontain">  <!-- ASSUMED z-index of auto -->
 144                 <p class="four" style="z-index: 1">4</p>
 145                 <p class="two" style="z-index: 3">2</p>
 146                 <p class="seven" style="z-index: -2">7</p>
 147         </div>
 148         <p class="three" style="z-index: 2">3</p>
 149         <p class="five" style="z-index: 0">5</p>
 150         <p class="six" style="z-index: -1">6</p>
 151         <p class="one" style="z-index: 4">1</p>
 152         <p class="eight" style="z-index: -3">8</p>
 153 </div>
 154
 155 </body></html>