Blitz - WPT: filter-function-005.html

wpt / css / filter-effects / filter-function / filter-function-005.html

/css/filter-effects/filter-function/filter-function-005.html

<!DOCTYPE html>
<html>
<head>
<title>filter function units are not scaled when applied to a scaled image included as content</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"/>
<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
<meta name="assert" content="The dimensions in the filter functions are absolute dimensions, and if the image they are applied to is scaled (as it is here due to being part of an image included as generated content), the units in the filters should not be scaled. The filter must be applied after scaling." />
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    image-rendering: crisp-edges;
    content: filter(url(resources/green-transparent-20x10.png), drop-shadow(50px 0 0 green));
}
</style>
</head>
<body>
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div></div>
</body>
</html>

/css/reference/ref-filled-green-100px-square.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <style type="text/css"><![CDATA[
  div
  {
  background-color: green;
  height: 100px;
  width: 100px;
  }
  ]]></style>
 </head>
 <body>
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  <div></div>
 </body>
</html>