Attachment 358227 Details for Bug 193095 – Testcase

Testcase

text-smoothing.html (text/html), 6.67 KB, created by Simon Fraser (smfr) on 2019-01-02 17:17:16 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-01-02 17:17:16 PST

Size: 6.67 KB

patch

obsolete

><!DOCTYPE html>
>
><html>
><head>
>  <title>Font smoothing and layers</title>
>  <style>
>    body {
>      color: white;
>      background-color: black;
>      min-width: 1000px;
>    }
>    
>    .box {
>      position: relative;
>      display: inline-block;
>      width: 360px;
>      padding: 10px;
>      margin: 20px 50px;
>      font-size: 12pt;
>      border-bottom: 4px solid transparent;
>    }
>    
>    .large {
>      font-family: Times, serif;
>      font-size: 14px;
>    }
>    
>    .small {
>      font-family: "Lucida Grande";
>      color: gray;
>      font-size: 9px;
>    }
>
>    .box:hover {
>/*      -webkit-transform: translateX(5px);*/
>    }
>    .white {
>      color: white;
>    }
>    .black {
>      color: black;
>    }
>    
>    .opaque.box {
>      background-color: black;
>    }
>
>    .opaque.box.black {
>      color: black;
>      background-color: white;
>    }
>
>    .white.background {
>      position: absolute;
>      top: 50px;
>      left: 500px;
>      height: 860px;
>      width: 450px;
>      background-color: white;
>    }
>
>    body.animating .box {
>      will-change: transform;
>      border-bottom: 4px solid gray;
>    }
>    
>    .unsmoothed {
>      -webkit-font-smoothing: antialiased;
>    }
>
>  </style>
>  <script>
>    window.addEventListener('load', function() {
>      window.setInterval(function() {
>        document.body.classList.toggle('animating');
>      }, 500);
>    }, false);
>  </script>
></head>
><body class="animating">
>
><p>Elements are rendering into CA layers when the gray border is visible</p>
>  <div class="white background"></div>
>
>  <h2>Opaque backgrounds</h2>
>  <div class="opaque box white">
>    <div class="large">
>        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>    <div class="small">
>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>  </div>
>  <div class="opaque box black">
>    <div class="large">
>        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>    <div class="small">
>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>  </div>
>  <h2>Transparent backgrounds</h2>
>
>  <div class="box white">
>    <div class="large">
>      Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>    <div class="small">
>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>  </div>
>  <div class="box black">
>    <div class="large">
>        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>    <div class="small">
>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>    </div>
>  </div>
>
>  <h2>Transparent backgrounds, no sub-pixel AA</h2>
>  <div class="unsmoothed">
>    <div class="box white">
>      <div class="large">
>          Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>      </div>
>      <div class="small">
>        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>      </div>
>    </div>
>    <div class="box black">
>      <div class="large">
>          Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>      </div>
>      <div class="small">
>        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
>      </div>
>    </div>
></div>
>
></body>
></html>

<!DOCTYPE html>

<html>
<head>
  <title>Font smoothing and layers</title>
  <style>
    body {
      color: white;
      background-color: black;
      min-width: 1000px;
    }
    
    .box {
      position: relative;
      display: inline-block;
      width: 360px;
      padding: 10px;
      margin: 20px 50px;
      font-size: 12pt;
      border-bottom: 4px solid transparent;
    }
    
    .large {
      font-family: Times, serif;
      font-size: 14px;
    }
    
    .small {
      font-family: "Lucida Grande";
      color: gray;
      font-size: 9px;
    }

    .box:hover {
/*      -webkit-transform: translateX(5px);*/
    }
    .white {
      color: white;
    }
    .black {
      color: black;
    }
    
    .opaque.box {
      background-color: black;
    }

    .opaque.box.black {
      color: black;
      background-color: white;
    }

    .white.background {
      position: absolute;
      top: 50px;
      left: 500px;
      height: 860px;
      width: 450px;
      background-color: white;
    }

    body.animating .box {
      will-change: transform;
      border-bottom: 4px solid gray;
    }
    
    .unsmoothed {
      -webkit-font-smoothing: antialiased;
    }

  </style>
  <script>
    window.addEventListener('load', function() {
      window.setInterval(function() {
        document.body.classList.toggle('animating');
      }, 500);
    }, false);
  </script>
</head>
<body class="animating">

<p>Elements are rendering into CA layers when the gray border is visible</p>
  <div class="white background"></div>

  <h2>Opaque backgrounds</h2>
  <div class="opaque box white">
    <div class="large">
        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="opaque box black">
    <div class="large">
        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <h2>Transparent backgrounds</h2>

  <div class="box white">
    <div class="large">
      Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="box black">
    <div class="large">
        Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>

  <h2>Transparent backgrounds, no sub-pixel AA</h2>
  <div class="unsmoothed">
    <div class="box white">
      <div class="large">
          Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
      <div class="small">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
    <div class="box black">
      <div class="large">
          Lorem ipsum dolor sit amet, <span class="light">consectetur adipisicing elit, sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris <span class="dark">nisi ut aliquip ex ea commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
      <div class="small">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
</div>

</body>
</html>

Actions: View

Attachments on bug 193095: 358227 | 358244 | 358245