mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1058783 - Add rendering tests for blur radius in ems and rems. r=mstange
This commit is contained in:
parent
248f710550
commit
9d970270a4
@ -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>
|
29
layout/reftests/svg/filters/css-filters/blur-em-radius.html
Normal file
29
layout/reftests/svg/filters/css-filters/blur-em-radius.html
Normal 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>
|
@ -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>
|
32
layout/reftests/svg/filters/css-filters/blur-rem-radius.html
Normal file
32
layout/reftests/svg/filters/css-filters/blur-rem-radius.html
Normal 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>
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user