Bug 1058783 - Add rendering tests for blur radius in ems and rems. r=mstange

This commit is contained in:
Max Vujovic 2014-09-10 10:26:50 -07:00
parent 248f710550
commit 9d970270a4
5 changed files with 122 additions and 0 deletions

View File

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
<link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
<style type="text/css">
#target {
filter: url(#blur);
background-color: #0f0;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>You should see a blurred green square.</p>
<div id="target"></div>
<svg width="0" height="0">
<filter id="blur">
<feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
</filter>
</svg>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
<link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
<link rel="match" href="blur-em-radius-ref.html">
<meta name="assert"
content="Given a valid blur radius in ems, the CSS blur filter function
should blur an HTML element.">
<style type="text/css">
#target {
filter: blur(0.3em);
font-size: 10px;
background-color: #0f0;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>You should see a blurred green square.</p>
<div id="target"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
<link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
<style type="text/css">
html {
font-size: 30px;
}
#target {
filter: url(#blur);
background-color: #0f0;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>You should see a blurred green square.</p>
<div id="target"></div>
<svg width="0" height="0">
<filter id="blur">
<feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
</filter>
</svg>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
<link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
<link rel="match" href="blur-rem-radius-ref.html">
<meta name="assert"
content="Given a valid blur radius in rems, the CSS blur filter function
should blur an HTML element.">
<style type="text/css">
html {
font-size: 30px;
}
#target {
filter: blur(0.1rem);
font-size: 16px;
background-color: #0f0;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>You should see a blurred green square.</p>
<div id="target"></div>
</body>
</html>

View File

@ -8,6 +8,8 @@ default-preferences pref(layout.css.filters.enabled,true)
== blur-calc.html blur-calc-ref.html
== blur-calc-negative.html blur-calc-negative-ref.html
skip-if(d2d) pref(layers.acceleration.disabled,true) == blur-cap-large-radius-on-software.html blur-cap-large-radius-on-software-ref.html
== blur-em-radius.html blur-em-radius-ref.html
== blur-rem-radius.html blur-rem-radius-ref.html
== blur-zero-radius.html blur-zero-radius-ref.html
== blur-zoomed-page.html blur-zoomed-page-ref.html
== brightness.html brightness-ref.html