SupportsCSS/docs/_data/supportTable.js at 1e13a1ecbc258e73ef1e5635134d157f8b159044 · 5t3ph/SupportsCSS · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
const testSuite = [
  {
    name: "at-container",
    test: "`window.CSSContainerRule`",
  },
  {
    name: "at-container-style-properties",
    test: "* [See explanation](#atcontainerstyleproperties-test)",
  },
  {
    name: "at-counter-style",
    test: "`window.CSSCounterStyleRule`",
  },
  {
    name: "at-layer",
    test: "`window.CSSLayerBlockRule`",
  },
  {
    name: "at-property",
    test: "`window.CSSPropertyRule`",
  },
  {
    name: "at-scope",
    test: "`window.CSSScopeRule`",
  },
  {
    name: "anchor",
    test: "`CSS.supports('left: anchor(center)')`",
  },
  {
    name: "color-function",
    test: "`CSS.supports('color: color(srgb 0 0 1)')`",
  },
  {
    name: "color-mix",
    test: "`CSS.supports('color: color-mix(in lch, white, black)')`",
  },
  {
    name: "container-units",
    test: "`CSS.supports('width: 1cqi')`",
  },
  {
    name: "dynamic-viewport-units",
    test: "`CSS.supports('width: 1dvi')`",
  },
  {
    name: "has",
    test: "`CSS.supports('selector(:has(+ *))')` <br>(_Possible false positive in Firefox 112_)",
  },
  {
    name: "houdini-paint-api",
    test: "`window.CSS.paintWorklet`",
  },
  {
    name: "individual-transforms",
    test: "`CSS.supports('transform: scale(1)')`",
  },
  {
    name: "logical-properties",
    test: "`CSS.supports('border-start-start-radius: 1px')`",
  },
  {
    name: "media-range-syntax",
    test: "`window.matchMedia('(width >= 1px)')`",
  },
  {
    name: "nesting",
    test: "`CSS.supports('selector(& a)')`",
  },
  {
    name: "nth-of-s",
    test: "`CSS.supports('selector(:nth-child(1 of .a))')`",
  },
  {
    name: "overscroll-behavior",
    test: "`CSS.supports('overscroll-behavior: none')`",
  },
  {
    name: "relative-color-syntax",
    test: "`CSS.supports('color: rgb(from red r g b / 1%)')`",
  },
  {
    name: "scroll-timeline",
    test: "`CSS.supports('scroll-timeline-name: a')`",
  },
  {
    name: "subgrid",
    test: "`CSS.supports('grid-template-rows: subgrid')`",
  },
  {
    name: "text-box-trim",
    test: "`CSS.supports('(leading-trim: both) or (text-box-trim: both)')`",
  },
  {
    name: "trigonometry",
    test: "`CSS.supports('width: calc(1px * cos(1deg))')`",
  },
  {
    name: "view-timeline",
    test: "`window.ViewTimeline`",
  },
  {
    name: "view-transitions",
    test: "`window.ViewTransition`",
  },
  {
    name: "focus-within",
    test: "`CSS.supports('selector(:focus-within)')`",
  },
  {
    name: "focus-visible",
    test: "`CSS.supports('selector(:focus-visible)')`",
  },
];

const registryName = (name) =>
  name
    .split("-")
    .map((part) => {
      return part.charAt(0).toUpperCase() + part.slice(1);
    })
    .join("");

const supportTable = () => {
  let table =
    "| Feature Class | Global Name | Test Condition |\n|---|---|---|\n";

  for (const { name, test } of testSuite) {
    table += `| ${name} | ${registryName(name)} | ${test} |\n`;
  }

  return table;
};

module.exports = supportTable;