| <!doctype html> |
| <title>CSS Test: Blur filter scaling.</title> |
| <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1224207"> |
| <link rel="match" href="filter-scaling-001-ref.html"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| |
| :root, #outer { |
| width: 100vw; |
| height: 100vh; |
| overflow: hidden; |
| } |
| |
| #outer { |
| transform-origin: 0 0; |
| transform: scale(5); |
| } |
| |
| #pad { |
| /* So that scaling by five it takes half of the viewport */ |
| height: 10vh; |
| } |
| |
| #filtered { |
| filter: url(#blur); |
| width: 100%; |
| height: 10vh; |
| background: green; |
| } |
| </style> |
| <div id="outer"> |
| <div id="pad"></div> |
| <div id="filtered"></div> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> |
| <defs> |
| <filter id="blur"> |
| <feGaussianBlur in="SourceGraphic" stdDeviation="0,0"></feGaussianBlur> |
| </filter> |
| </defs> |
| </svg> |
| </div> |
