blob: 7400c8b37938f143fa701e9126c0a769d4d4de1c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<title>CSS Filter Effects: feTurbulence with negative values from baseFrequency</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#element-attrdef-feturbulence-basefrequency">
<link rel="help" href="https://crbug.com/1068863"/>
<link rel="match" href="reference/filter-turbulence-invalid-001-ref.html">
<meta name="assert" content="This test checks that negative baseFrequency values are unsupported for feTurbulence.">
<style>
.target {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="target" style="filter: url(#fn1)"></div>
<div class="target" style="filter: url(#fn2)"></div>
<div class="target" style="filter: url(#tb1)"></div>
<div class="target" style="filter: url(#tb2)"></div>
<svg height="0" color-interpolation-filters="sRGB">
<!-- type=fractalNoise -->
<filter id="fn1" x="0" y="0" width="1" height="1">
<feTurbulence type="fractalNoise" baseFrequency="-1 1"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="1 0 1"/>
<feFuncG type="discrete" tableValues="0 0.502 0"/> <!-- map [0..1/3] -> 0; [1/3...2/3] -> 0.502; [2/3..1] -> 0 -->
<feFuncB type="discrete" tableValues="0"/>
<feFuncA type="discrete" tableValues="0 1 0"/>
</feComponentTransfer>
</filter>
<filter id="fn2" x="0" y="0" width="1" height="1">
<feTurbulence type="fractalNoise" baseFrequency="1 -1"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="1 0 1"/>
<feFuncG type="discrete" tableValues="0 0.502 0"/> <!-- map [0..1/3] -> 0; [1/3...2/3] -> 0.502; [2/3..1] -> 0 -->
<feFuncB type="discrete" tableValues="0"/>
<feFuncA type="discrete" tableValues="0 1 0"/>
</feComponentTransfer>
</filter>
<!-- type=turbulence -->
<filter id="tb1" x="0" y="0" width="1" height="1">
<feTurbulence type="turbulence" baseFrequency="-1 1"/>
<feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.502, 0 0 1 0 0, 0 0 0 1 1"/>
</filter>
<filter id="tb2" x="0" y="0" width="1" height="1">
<feTurbulence type="turbulence" baseFrequency="1 -1"/>
<feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.502, 0 0 1 0 0, 0 0 0 1 1"/>
</filter>
</svg>
|