48 lines
2.3 KiB
HTML
48 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Compositing and Blending Level 1: getComputedStyle().backgroundBlendMode</title>
|
|
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode">
|
|
<meta name="assert" content="background-blend-mode computed value is as specified.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="target"></div>
|
|
<script>
|
|
test_computed_value("background-blend-mode", "normal");
|
|
test_computed_value("background-blend-mode", "multiply");
|
|
test_computed_value("background-blend-mode", "screen");
|
|
test_computed_value("background-blend-mode", "overlay");
|
|
test_computed_value("background-blend-mode", "darken");
|
|
test_computed_value("background-blend-mode", "lighten");
|
|
test_computed_value("background-blend-mode", "color-dodge");
|
|
test_computed_value("background-blend-mode", "color-burn");
|
|
test_computed_value("background-blend-mode", "hard-light");
|
|
test_computed_value("background-blend-mode", "soft-light");
|
|
test_computed_value("background-blend-mode", "difference");
|
|
test_computed_value("background-blend-mode", "exclusion");
|
|
test_computed_value("background-blend-mode", "hue");
|
|
test_computed_value("background-blend-mode", "saturation");
|
|
test_computed_value("background-blend-mode", "color");
|
|
test_computed_value("background-blend-mode", "luminosity");
|
|
|
|
// Per spec, excess values should not be used,
|
|
// BUT the computed style should be similar to the specified values.
|
|
// see https://drafts.fxtf.org/compositing-1/#background-blend-mode
|
|
// and https://drafts.csswg.org/css-backgrounds-3/#layering
|
|
// > The lists are matched up from the first value: excess values at the end are not used.
|
|
// but in https://drafts.csswg.org/css-values-4/#linked-properties
|
|
// it was decided that
|
|
// > The computed values of the coordinating list properties are not affected by such truncation or repetition.
|
|
//
|
|
// There is a distinction between specified values, used values, and computed values.
|
|
|
|
test_computed_value("background-blend-mode", "normal, luminosity");
|
|
test_computed_value("background-blend-mode", "screen, overlay");
|
|
test_computed_value("background-blend-mode", "color, saturation");
|
|
</script>
|
|
</body>
|
|
</html>
|