mediaFeatures.mjs 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import uniteSets from '../utils/uniteSets.mjs';
  2. /** @type {ReadonlySet<string>} */
  3. const deprecatedMediaFeatureNames = new Set([
  4. 'device-aspect-ratio',
  5. 'device-height',
  6. 'device-width',
  7. ]);
  8. /** @type {ReadonlySet<string>} */
  9. export const rangeTypeMediaFeatureNames = uniteSets(deprecatedMediaFeatureNames, [
  10. 'aspect-ratio',
  11. 'color',
  12. 'color-index',
  13. 'height',
  14. 'horizontal-viewport-segments',
  15. 'monochrome',
  16. 'resolution',
  17. 'vertical-viewport-segments',
  18. 'width',
  19. ]);
  20. /** @type {ReadonlySet<string>} */
  21. export const rangeTypeMediaFeatureNamesWithMinMaxPrefix = new Set(
  22. [...rangeTypeMediaFeatureNames].flatMap((name) => {
  23. return [`min-${name}`, `max-${name}`];
  24. }),
  25. );
  26. /** @type {ReadonlySet<string>} */
  27. const discreteTypeMediaFeatureNames = new Set([
  28. 'any-hover',
  29. 'any-pointer',
  30. 'color-gamut',
  31. 'display-mode',
  32. 'dynamic-range',
  33. 'environment-blending',
  34. 'forced-colors',
  35. 'grid',
  36. 'hover',
  37. 'inverted-colors',
  38. 'light-level',
  39. 'nav-controls',
  40. 'orientation',
  41. 'overflow-block',
  42. 'overflow-inline',
  43. 'pointer',
  44. 'prefers-color-scheme',
  45. 'prefers-contrast',
  46. 'prefers-reduced-data',
  47. 'prefers-reduced-motion',
  48. 'prefers-reduced-transparency',
  49. 'scan',
  50. 'scripting',
  51. 'update',
  52. 'video-color-gamut',
  53. 'video-dynamic-range',
  54. ]);
  55. /** @type {ReadonlySet<string>} */
  56. export const mediaFeatureNames = uniteSets(
  57. deprecatedMediaFeatureNames,
  58. rangeTypeMediaFeatureNames,
  59. rangeTypeMediaFeatureNamesWithMinMaxPrefix,
  60. discreteTypeMediaFeatureNames,
  61. );
  62. /** @type {ReadonlyMap<string, ReadonlySet<string>>} */
  63. export const mediaFeatureNameAllowedValueKeywords = new Map([
  64. ['any-hover', new Set(['none', 'hover'])],
  65. ['any-pointer', new Set(['none', 'coarse', 'fine'])],
  66. ['color-gamut', new Set(['srgb', 'p3', 'rec2020'])],
  67. [
  68. 'display-mode',
  69. new Set(['fullscreen', 'standalone', 'minimal-ui', 'browser', 'picture-in-picture']),
  70. ],
  71. ['dynamic-range', new Set(['standard', 'high'])],
  72. ['environment-blending', new Set(['opaque', 'additive', 'subtractive'])],
  73. ['forced-colors', new Set(['none', 'active'])],
  74. ['hover', new Set(['none', 'hover'])],
  75. ['inverted-colors', new Set(['none', 'inverted'])],
  76. ['nav-controls', new Set(['none', 'back'])],
  77. ['orientation', new Set(['portrait', 'landscape'])],
  78. ['overflow-block', new Set(['none', 'scroll', 'paged'])],
  79. ['overflow-inline', new Set(['none', 'scroll'])],
  80. ['pointer', new Set(['none', 'coarse', 'fine'])],
  81. ['prefers-color-scheme', new Set(['light', 'dark'])],
  82. ['prefers-contrast', new Set(['no-preference', 'less', 'more', 'custom'])],
  83. ['prefers-reduced-data', new Set(['no-preference', 'reduce'])],
  84. ['prefers-reduced-motion', new Set(['no-preference', 'reduce'])],
  85. ['prefers-reduced-transparency', new Set(['no-preference', 'reduce'])],
  86. ['resolution', new Set(['infinite'])],
  87. ['scan', new Set(['interlace', 'progressive'])],
  88. ['scripting', new Set(['none', 'initial-only', 'enabled'])],
  89. ['update', new Set(['none', 'slow', 'fast'])],
  90. ['video-color-gamut', new Set(['srgb', 'p3', 'rec2020'])],
  91. ['video-dynamic-range', new Set(['standard', 'high'])],
  92. ]);
  93. /** @type {ReadonlyMap<string, ReadonlySet<string>>} */
  94. export const mediaFeatureNameAllowedValueTypes = new Map([
  95. ['aspect-ratio', new Set(['ratio'])],
  96. ['color', new Set(['integer'])],
  97. ['color-index', new Set(['integer'])],
  98. ['device-aspect-ratio', new Set(['ratio'])],
  99. ['device-height', new Set(['length'])],
  100. ['device-width', new Set(['length'])],
  101. ['grid', new Set(['mq-boolean'])],
  102. ['height', new Set(['length'])],
  103. ['horizontal-viewport-segments', new Set(['integer'])],
  104. ['monochrome', new Set(['integer'])],
  105. ['resolution', new Set(['resolution'])],
  106. ['vertical-viewport-segments', new Set(['integer'])],
  107. ['width', new Set(['length'])],
  108. ]);