wpt/css/css-images/cross-fade-computed-value.html at master · web-platform-tests/wpt · GitHub

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
52
<!DOCTYPE html>
<html>
  <head>
    <title>cross-fade() computed value</title>
    <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
    <link rel="help" href="https://drafts.csswg.org/css-images-4/#cross-fade-function">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/css/support/computed-testcommon.js"></script>
    <style>
      #target {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="target"></div>
    <script>
      // https://drafts.csswg.org/css-images-4/#serialization specifies that
      // “For cross-fade(), always serialize the <percentage>.”, but it's not clear what
      // “the” percentage is, since the implicit percentages are different for drawing and
      // sizing, and may not be known computed-value time, so we assume one that is not
      // given should also not be serialized.
      test_computed_value(
        'background-image',
        'cross-fade(30% color-mix(in srgb, currentcolor, blue), white)',
        'cross-fade(color(srgb 0.5 0 0.5) 30%, rgb(255, 255, 255))');

      // Unneccessary percentages should be kept.
      test_computed_value('background-image', 'cross-fade(50% red, 50% green)',
        'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%)');

      // Percentage normalization should not be visible computed-value time.
      test_computed_value('background-image', 'cross-fade(20% red, 20% green)',
        'cross-fade(rgb(255, 0, 0) 20%, rgb(0, 128, 0) 20%)');

      // More than two values.
      test_computed_value('background-image',
        'cross-fade(50% red, 50% green, 50% blue)',
        'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%, rgb(0, 0, 255) 50%)');

      // More-than-100% should be invalid, but in calc() we can't reject it parse-time;
      // it will be clamped on serialization.
      test_computed_value('background-image',
        'cross-fade(calc(101%) red, green)',
        'cross-fade(rgb(255, 0, 0) 100%, rgb(0, 128, 0))');
      test_computed_value('background-image',
        'cross-fade(calc(-200%) red, green)',
        'cross-fade(rgb(255, 0, 0) 0%, rgb(0, 128, 0))');
    </script>
  </body>
</html>