wpt/css/css-conditional/at-supports-named-feature-001.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<title>CSS Conditional Test: @supports named-feature()</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#support-definition-named-features">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#target {
  position: relative; /* so z-index works */
}
</style>
<style id="s"></style>

<div id="target"></div>

<script>

let gGlobalCounter = 0;

function test_supports_condition(condition, expected) {
  test(() => {
    ++gGlobalCounter;
    document.getElementById("s").textContent = `
      @supports ${condition} {
        #target {
          z-index: ${gGlobalCounter};
        }
      }
    `;
    assert_equals(getComputedStyle(document.getElementById("target")).zIndex,
                  expected ? "" + gGlobalCounter : "auto");
  }, `@supports ${condition} should be ${Boolean.prototype.toString(expected)}`);
}

let is_anchor_position_follows_transforms_supported;

test(() => {
  let outer = document.createElement("div");
  outer.innerHTML = `
    <style>

    body { margin: 0; }
    .container { position: absolute; top: 50px; left: 50px; }
    .transform { transform: translateX(7px); }
    .anchor { position: absolute; top: 0; left: 11px; anchor-name: --a; }
    .anchorpos { position: absolute; top: 0; left: 13px; left: anchor(--a left);
                 height: 10px; width: 10px; background: orange; }

    </style>

    <div class="container">
      <div class="transform">
        <div class="anchor"></div>
      </div>
      <div class="anchorpos"></div>
    </div>
  `;
  document.body.append(outer);
  let expected;
  // left should be:
  //  * 63 if anchor positioning is not supported
  //  * 61 if anchor positioning is supported but it doesn't follow transforms
  //  * 68 if anchor positioning follows stransforms
  let left = outer.querySelector(".anchorpos").getBoundingClientRect().left;
  if (left == 61 || left == 63) {
    is_anchor_position_follows_transforms_supported = false;
    expected = true;
  } else if (left == 68) {
    is_anchor_position_follows_transforms_supported = true;
    expected = true;
  } else {
    expected = false;
  }
  outer.remove();
  assert_true(expected);
}, "can detect whether anchor position follows transforms");

test_supports_condition("named-feature(anchor-position-follows-transforms)", is_anchor_position_follows_transforms_supported);
test_supports_condition("named-feature( anchor-position-follows-transforms )", is_anchor_position_follows_transforms_supported);
test_supports_condition("named-feature(unknown-feature)", false);
test_supports_condition("named-feature(named-feature)", false);
test_supports_condition("named-feature(color)", false);

</script>