The problem with brightness()

dabblet.css

/**
 * The problem with brightness()
 */

body {
	display: flex;
}

div {
	width: 150px;
	height: 150px;
	background: hsl(210, 50%, 30%);
	color: white;
	padding: 25px;
}

div:nth-child(1) {
	filter: brightness(250%);
}

div:nth-child(3) {
	background: hsl(210, 50%, 75%);
}

div:nth-child(4) {
	filter: url(#brightness);
}

dabblet.html

<div>filter: brightness(250%)</div>
<div>original color</div>
<div>lightness *= 2.5</div>
<div>filter: url(#brightness)</div>
<svg>
	<filter id="brightness">
		<feComponentTransfer>
			<feFuncR type="linear" slope="2.5"/>
			<feFuncG type="linear" slope="2.5"/>
			<feFuncB type="linear" slope="2.5"/>
		</feComponentTransfer>
	</filter>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}