Attachment 461661 Details for Bug 243949 – Static testcase

Static testcase

many-negative-z-pseudos.html (text/html), 1.15 KB, created by Simon Fraser (smfr) on 2022-08-15 21:27:25 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2022-08-15 21:27:25 PDT

Size: 1.15 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <head>
>    <meta charset="UTF-8" />
>    <title>z-index crash</title>
>    <meta
>      name="viewport"
>      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
>    />
>    <style>
>        .container {
>            transform: translate3d(0, 0, 0);
>        }
>      .item .native {
>        position: relative;
>        z-index: 1;
>      }
>        
>      .item .native::after {
>        position: relative;
>        content: "";
>        z-index: -1;
>      }
>    </style>
>  </head>
>  <body>
>    <div class="container">
>      <div class="item">
>        <div class="native">
>          <div class="inner">
>            <img src="https://picsum.photos/200/300" />
>          </div>
>        </div>
>      </div>
>    </div>
>  </body>
>  
>  <script>
>    const container = document.querySelector('.container');
>    
>    let template = '';
>    
>    for (let i = 0; i < 20; i++) {
>      template += `
>        <div class="item">
>          <div class="native">
>            <div>
>              <img src="https://picsum.photos/200/300" />
>            </div>
>          </div>
>        </div>
>      `
>    }
>    
>    container.innerHTML = template;
>  </script>
></html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>z-index crash</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
    />
    <style>
        .container {
            transform: translate3d(0, 0, 0);
        }
      .item .native {
        position: relative;
        z-index: 1;
      }
        
      .item .native::after {
        position: relative;
        content: "";
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div class="native">
          <div class="inner">
            <img src="https://picsum.photos/200/300" />
          </div>
        </div>
      </div>
    </div>
  </body>
  
  <script>
    const container = document.querySelector('.container');
    
    let template = '';
    
    for (let i = 0; i < 20; i++) {
      template += `
        <div class="item">
          <div class="native">
            <div>
              <img src="https://picsum.photos/200/300" />
            </div>
          </div>
        </div>
      `
    }
    
    container.innerHTML = template;
  </script>
</html>

Actions: View

Attachments on bug 243949: 461639 | 461661