LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>CSS Test: 'contain: layout' should not create a stacking context when no principle box is generated.</title>
   6   <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
   7   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   8   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
   9   <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
  10   <style>
  11     div {
  12       position: relative;
  13       width: 100px;
  14     }
  15     #div1,
  16     #div3 {
  17       background-color: #cfc;
  18       height: 100px;
  19     }
  20     #div1 {
  21       z-index: 5;
  22     }
  23     #div2 {
  24       display: contents;
  25       contain: layout;
  26       background-color: #fdd;
  27       height: 100px;
  28       top: -20px;
  29     }
  30     #div2_1 {
  31       background-color: #ffc;
  32       z-index: 6;
  33       top: -10px;
  34       height: 100px;
  35     }
  36     #div2_2 {
  37       z-index: 3;
  38       position: absolute;
  39       top: -15px;
  40       width: 40px;
  41       height: 300px;
  42       background-color: #ddf;
  43     }
  44     #div3 {
  45       z-index: 2;
  46       top: -50px;
  47     }
  48   </style>
  49 </head>
  50 <body>
  51   <div id="div1"></div>
  52
  53   <div id="div2">
  54     <div id="div2_1"></div>
  55
  56     <div id="div2_2"></div>
  57   </div>
  58
  59   <div id="div3"></div>
  60 </body>
  61 </html>