Blitz - WPT: hidpi-invert-filter-background.html

wpt / css / filter-effects / hidpi-invert-filter-background.html

/css/filter-effects/hidpi-invert-filter-background.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Inverted background on HiDPI</title>
<link rel="help" href="https://crbug.com/412115607">
<meta name="assert" content="The background should be inverted.">
<link rel="match" href="hidpi-invert-filter-background-ref.html">
<style>
  html {
    filter: invert(100%);
    /* Ensure there's some content area for html/body to paint */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* A 1x1 white PNG. When html is inverted, this should make the effective background black. */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC");
    background-attachment: fixed;
    background-repeat: repeat;
  }
</style>
<!-- No visible content needed, we are checking the background color via pixel matching the -ref file. -->
</html>

/css/filter-effects/hidpi-invert-filter-background-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Reference: Inverted background on HiDPI</title>
<style>
  html {
    background-color: black; /* The expected result after inversion of white body background */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</html>