scale-filtered-content-01-ref.html

Enable keyboard shortcuts

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!DOCTYPE html>

<html>

<head>

  <title>CSS Filters: Filtered content should be rendered in device space</title>

  <style type="text/css">

    #filtered {

      width: 100px;

      height: 50px;

      background-color: lime;

      opacity: 0.5;

      transform: translate(10px) scale(5);

      transform-origin: 0 0;

    .inner {

      position: absolute;

      background-color: blue;

      width: 10px;

      height:10px;

  </style>

</head>

<body>

  <p>You should see clear blue rects.</p>

  <div id="filtered">

    <div class="inner" style="left:10px; top:10px;"></div>

    <div class="inner" style="left:50px; top:20px;"></div>

    <div class="inner" style="left:80px; top:30px;"></div>

  </div>

</body>