CINXE.COM
[css-color-hdr] CSS syntax for HDR colors parameterized by headroom · Issue #11616 · w3c/csswg-drafts · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-7aa84bb7e11e.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-f65db3e8d171.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-a8258e3c6dda.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-7e97d834719c.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-01d869f460be.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-534f3e971240.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-a8cc7d138001.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-35e9dfdc4f9f.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-cf4cc5f62dfe.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-d9abecd14f1e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-93aded0ee8a1.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-8bed0685a4b5.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-15d4b28ab680.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-4fce88777fa8.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_immersive_file_preview","copilot_new_references_ui","copilot_attach_folder_reference","copilot_personal_instructions","copilot_personal_instructions_templates","copilot_chat_repo_custom_instructions_preview","copilot_chat_retry_on_error","copilot_chat_persist_submitted_input","copilot_conversational_ux_history_refs","copilot_chat_shared_chat_input","copilot_editor_upsells","copilot_implicit_context","copilot_no_floating_button","copilot_smell_icebreaker_ux","copilot_read_shared_conversation","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_o3_mini_streaming","hovercard_accessibility","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","issues_react_include_bots_in_pickers","marketing_pages_search_explore_provider","remove_child_patch","report_hydro_web_vitals","sample_network_conn_type","swp_enterprise_contact_form","site_copilot_extensions_ga","site_copilot_vscode_link_update","site_proxima_australia_update","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates","runner_image_edit_enhancements"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-9ba4196f6b81.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-d7e6bc799724.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-4600dbf2d60a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-f6da4b3fa34c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a74b4e0a8a6b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-8094ee2ecc5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-0b85275f2754.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-60f7ac31cad2.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-72267f4e3ff9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-e3cbe28f1638.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-69cfcc-bc42a18e77d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-a1563f62660e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-f48a418a99d4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-8fa27fd7fbb6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-e2caa5390f5a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-783fc7e142e5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-5393e37eef90.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-e12489347ccf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-9a5713772ca5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-af33445b6fc3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-611691cca2f6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-2df2f32ec596.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-f7cc96ebae76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b89b98661809.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__Stack_js-node_modules_lodash-es__Uint8Array_js-node_modules_l-4faaa6-4a736fde5c2f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_date-fns_format_mjs-6e4d0f904632.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_date-fns_addWeeks_mjs-node_modules_date-fns_addYears_mjs-node_modules_da-827f4f-cf37cd06c24f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_react-relay_index_js-3e4c69718bad.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_focus-visible_dist_focus-visible_js-node_modules_fzy_js_index_js-node_mo-39e45c-b992ce5622d4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hotkey_dist_index_js-node_modules_date-fns_getDaysInMonth_mjs-nod-70c11b-75afe0f5c344.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__baseIsEqual_js-8929eb9718d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-b846ac-738877ca2286.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-cff384-b7d3c96e5f18.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_react-relay_hooks_js-node_modules_color2k_dist_index_exports_import_es_m-05025c-dd04247c9c77.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-fe32b5-953cbe0ec5cf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_react-intersection-obs-075542-c83d00622efd.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_jtml_lib_index_js-node_modules_lodash-es_escapeRegExp_js-node_mod-acccf9-d4efaca04049.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_promise-with-resolvers-polyfill_promise-with-r-17c672-d6b5ea82572a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-395232c5892e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-97496b0f52ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_list-view_src_ListItem_ListItem_tsx-ui_packages_list-view_src_ListItem_Title_tsx--68e5b9-2bc29a0628ce.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_date-picker_date-picker_ts-ui_packages_github-avatar_GitHubAvatar_tsx-df9548397fca.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_constants_labels_ts-ui_packages_item-picker_constants_values_ts-ui_pa-163a9a-5949c2b63962.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_components_RepositoryPicker_tsx-fed97f53635f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_filter_utils_index_ts-ui_packages_fuzzy-score_fuzzy-filter_ts-ui_packages_use-ana-3b6d0b-70673e87e68d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_comment-box_api_file-upload_ts-ui_packages_comment-box_api_preview_ts-ui_packages-630ec3-082d3cc19579.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_issue-create_dialog_CreateIssueDialogEntry_tsx-f5bc73141b2c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_document-metadata_document-metadata_ts-ui_packages_filter_providers_index_ts-a62be1f3fb2a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_drag-and-drop_drag-and-drop_ts-d40ba0c1eceb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_query-builder-element_query-builder-element_ts-763c74a29685.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_components_PullRequestAndBranchPicker_tsx-2e5f57a7e421.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_use-client-value_use-client-value_ts-ui_packages_issue-viewer_components_IssueVie-38d496-5754ee2a706e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_issue-viewer_constants_hotkeys_ts-ui_packages_list-view-items-issues-prs_componen-f3edb7-62ad4f00b5a3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_use-is-platform_use-is-platform_ts-ui_packages_issue-viewer_contexts_IssueViewerC-981022-46516b1cc49a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/issues-react-3d120589b964.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.2b41f48ec06f29182cb4.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/ui_packages_use-client-value_use-client-value_ts-ui_packages_issue-viewer_components_IssueVie-38d496.17dfef8058fcb537de3b.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/issues-react.594eeea0d9d7bad6b49b.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-4a07d5e6bdd6.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>[css-color-hdr] CSS syntax for HDR colors parameterized by headroom · Issue #11616 · w3c/csswg-drafts · GitHub</title> <meta name="route-pattern" content="/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)" data-turbo-transient> <meta name="route-controller" content="voltron_issues_fragments" data-turbo-transient> <meta name="route-action" content="issue_layout" data-turbo-transient> <meta name="current-catalog-service-hash" content="81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114"> <meta name="request-id" content="CA30:3A2F3C:25800:2D1F0:67B9B597" data-pjax-transient="true"/><meta name="html-safe-nonce" content="7c18207536f3d5d57fe01d07cd5a9d24051b5e5939026342e1f6bc7b30d3a979" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJDQTMwOjNBMkYzQzoyNTgwMDoyRDFGMDo2N0I5QjU5NyIsInZpc2l0b3JfaWQiOiI2NTg5MzUzOTg0MjAzMDExNDc5IiwicmVnaW9uX2VkZ2UiOiJzb3V0aGVhc3Rhc2lhIiwicmVnaW9uX3JlbmRlciI6InNvdXRoZWFzdGFzaWEifQ==" data-pjax-transient="true"/><meta name="visitor-hmac" content="ea9bd572efc30b44bd45814b7f05ca57fd40a7daba5a328844386fbb8a96d634" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="issue:2821630230" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,issues,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_issues" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="@ccameron-chromium suggested a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom. It also establishes, in a backwards-and-forwards compatible way, the convention ..."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/w3c/csswg-drafts/11616/issue_layout" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/d180163d0e9cfa421b84d2d2c01e087631e89e18882c29566626c9f0282bd2cb/w3c/csswg-drafts/issues/11616" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="[css-color-hdr] CSS syntax for HDR colors parameterized by headroom · Issue #11616 · w3c/csswg-drafts" /><meta name="twitter:description" content="@ccameron-chromium suggested a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom. It also establishes, in a backwards-and-..." /> <meta property="og:image" content="https://opengraph.githubassets.com/d180163d0e9cfa421b84d2d2c01e087631e89e18882c29566626c9f0282bd2cb/w3c/csswg-drafts/issues/11616" /><meta property="og:image:alt" content="@ccameron-chromium suggested a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom. It also establishes, in a backwards-and-..." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="[css-color-hdr] CSS syntax for HDR colors parameterized by headroom · Issue #11616 · w3c/csswg-drafts" /><meta property="og:url" content="https://github.com/w3c/csswg-drafts/issues/11616" /><meta property="og:description" content="@ccameron-chromium suggested a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom. It also establishes, in a backwards-and-..." /><meta property="og:author:username" content="svgeesus" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="d7e38434ef11b3a4136492a9adfc1855177d90b68e056a7e2a2b7fe1582065e9" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="249d206a8cd18f10036cb45c470746438fc2c46dae40dbaa0f80bb8c4539b047" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="f654cf88132548c4bbf22452395a1ba5b6511ff32842baef4b7bee3fa51f574e" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="voltron-timing" value="546"> <meta name="go-import" content="github.com/w3c/csswg-drafts git https://github.com/w3c/csswg-drafts.git"> <meta name="octolytics-dimension-user_id" content="379216" /><meta name="octolytics-dimension-user_login" content="w3c" /><meta name="octolytics-dimension-repository_id" content="9252268" /><meta name="octolytics-dimension-repository_nwo" content="w3c/csswg-drafts" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="9252268" /><meta name="octolytics-dimension-repository_network_root_nwo" content="w3c/csswg-drafts" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-c79a97a16b04.js"></script> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-56e2d9924e94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-d44ff9eb4aa3.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fissues%2F11616" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="2020b6e4744909efb47675519c5bb83fd197c2dfeb4ad6b48316ca1b67d91b3a" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"nonprofits","context":"solutions","tag":"link","label":"nonprofits_link_solutions_navbar"}" href="/solutions/industry/nonprofits"> Nonprofits </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"events_amp_webinars","context":"resources","tag":"link","label":"events_amp_webinars_link_resources_navbar"}" href="https://resources.github.com"> Events & Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ebooks_amp_whitepapers","context":"resources","tag":"link","label":"ebooks_amp_whitepapers_link_resources_navbar"}" href="https://github.com/resources/whitepapers"> Ebooks & Whitepapers </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"executive_insights","context":"resources","tag":"link","label":"executive_insights_link_resources_navbar"}" href="https://github.com/solutions/executive-insights"> Executive Insights </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:w3c/csswg-drafts" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="NlVxmqo_ReCJr8OiLN-SEa8lF80vew2NY26nNjIS5rWeaGWldoImyi9dCzNq3njz5AsiKs180x8gz9rrtj7gVA" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="w3c/csswg-drafts" data-current-org="w3c" data-current-owner="" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-cc3a6ef5-53c4-422f-8957-da5c9d90d85d" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-cc3a6ef5-53c4-422f-8957-da5c9d90d85d" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="A/IlhSzWUhQVMNJawQJXXWHOQXwlo+vzb8uFU6AiW6LP/Tmb4b9LYeFvHCNBoTFhoD2qf16ynSnAzu5AUY5fWw==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="zveFavoIcHO0BvZHnsXRi7l49XbnJ+MI60N4dKZFaiS65WC/Vzw72HEAHlkURfq264K+dxnRtzXw/fqExChSHA==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required only-validate-on-blur="false"> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="uTXoYPeUjxcYyX2Fj6hoKkpXSG5KBVb446DiprrnOok5KGNhdL38EOMyDWVXFsMl1E0zZOSD7TGpEjublvRngw==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fissues%2F11616" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="2020b6e4744909efb47675519c5bb83fd197c2dfeb4ad6b48316ca1b67d91b3a" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fvoltron%2Fissues_fragments%2Fissue_layout&source=header-repo&source_repo=w3c%2Fcsswg-drafts" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="2020b6e4744909efb47675519c5bb83fd197c2dfeb4ad6b48316ca1b67d91b3a" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-b0413263-d84b-46ff-96bf-ce517cdbf1b6" aria-labelledby="tooltip-52be92f2-d637-4568-a72c-b2a1e350d708" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-52be92f2-d637-4568-a72c-b2a1e350d708" for="icon-button-b0413263-d84b-46ff-96bf-ce517cdbf1b6" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/w3c/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/w3c"> w3c </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/w3c/csswg-drafts">csswg-drafts</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Fw3c%2Fcsswg-drafts" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="4397b85001dfff87b0062701b4995f496d49baed9816b926a573189e02e871f0" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-97920cc4-8afb-4331-a956-44744d1d52c5" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fw3c%2Fcsswg-drafts" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":9252268,"auth_type":"LOG_IN","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="10a40dc17a318f7275101b2f28d8ab7654166a995f0701a9c1a907927f7c92c6" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="693" data-view-component="true" class="Counter">693</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fw3c%2Fcsswg-drafts" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":9252268,"auth_type":"LOG_IN","originating_url":"https://github.com/w3c/csswg-drafts/issues/11616","user_id":null}}" data-hydro-click-hmac="dc1c0aa3f450c2a18c8b6f2faf7f567ef90dee975dfb8963212f68bc97cff83a" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="4595 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="4,595" data-view-component="true" class="Counter js-social-count">4.6k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/w3c/csswg-drafts" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /w3c/csswg-drafts" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/w3c/csswg-drafts/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /w3c/csswg-drafts/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="3,675" data-view-component="true" class="Counter">3.7k</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/w3c/csswg-drafts/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /w3c/csswg-drafts/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="110" data-view-component="true" class="Counter">110</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/w3c/csswg-drafts/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /w3c/csswg-drafts/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/w3c/csswg-drafts/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /w3c/csswg-drafts/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="9" data-view-component="true" class="Counter">9</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/w3c/csswg-drafts/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /w3c/csswg-drafts/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/w3c/csswg-drafts/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/w3c/csswg-drafts/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /w3c/csswg-drafts/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-button" popovertarget="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-overlay" aria-controls="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-list" aria-haspopup="true" aria-labelledby="tooltip-a893f489-644f-48cf-b262-e407eba22850" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-a893f489-644f-48cf-b262-e407eba22850" for="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-overlay" anchor="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-button" id="action-menu-a3fd507a-1f4d-472a-839f-d7dd62df6c6c-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-7bcfe1be-6669-4627-81f0-6fe93e38a18c" href="/w3c/csswg-drafts" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-50c6b9cc-2734-4b17-8962-b295901cfed7" href="/w3c/csswg-drafts/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-e2b495de-5d92-4dda-97d5-ad1fcf92d8fd" href="/w3c/csswg-drafts/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-0c2c7916-b5a8-41cd-b1a1-2c798e17741f" href="/w3c/csswg-drafts/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8bf975b0-82b9-4bed-9cf1-c970c95a1591" href="/w3c/csswg-drafts/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-459b8b65-5bd6-48c1-beba-09c70744b99a" href="/w3c/csswg-drafts/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-ec63443b-dbf3-46d0-a4b5-14a68ec25fb1" href="/w3c/csswg-drafts/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <react-app app-name="issues-react" initial-path="/w3c/csswg-drafts/issues/11616" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" data-data-router-enabled="false" > <script type="application/json" data-target="react-app.embeddedData">{"payload":{"preloaded_records":{},"preloadedQueries":[{"queryId":"98fbce80c1210854fef52742786b67c3","queryName":"IssueViewerViewQuery","variables":{"id":"repository","number":11616,"owner":"w3c","repo":"csswg-drafts"},"result":{"data":{"repository":{"isOwnerEnterpriseManaged":false,"issue":{"id":"I_kwDOAI0trM6oLqkW","updatedAt":"2025-02-15T22:04:27Z","title":"[css-color-hdr] CSS syntax for HDR colors parameterized by headroom","number":11616,"repository":{"nameWithOwner":"w3c/csswg-drafts","id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","login":"w3c","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","url":"https://github.com/w3c"},"isArchived":false,"isPrivate":false,"databaseId":9252268,"slashCommandsEnabled":false,"viewerCanInteract":false,"viewerInteractionLimitReasonHTML":"","planFeatures":{"maximumAssignees":10},"visibility":"PUBLIC","pinnedIssues":{"totalCount":0},"viewerCanPinIssues":false,"issueTypes":{"edges":[{"node":{"id":"IT_kwDOAAXJUM4AAanL"}},{"node":{"id":"IT_kwDOAAXJUM4AAanO"}},{"node":{"id":"IT_kwDOAAXJUM4AAanR"}}]}},"titleHTML":"[css-color-hdr] CSS syntax for HDR colors parameterized by headroom","url":"https://github.com/w3c/csswg-drafts/issues/11616","viewerCanUpdateNext":false,"issueType":null,"state":"OPEN","stateReason":null,"duplicateOf":null,"linkedPullRequests":{"nodes":[]},"subIssuesSummary":{"total":0,"completed":0},"__isLabelable":"Issue","labels":{"edges":[{"node":{"id":"MDU6TGFiZWwzOTU3ODU5Njk=","color":"0e8a16","name":"Closed Accepted by CSSWG Resolution","nameHTML":"Closed Accepted by CSSWG Resolution","description":null,"url":"https://github.com/w3c/csswg-drafts/labels/Closed%20Accepted%20by%20CSSWG%20Resolution","__typename":"Label"},"cursor":"MQ"},{"node":{"id":"MDU6TGFiZWwyMzExNzY4MjQy","color":"c5def5","name":"css-color-hdr","nameHTML":"css-color-hdr","description":"CSS HDR extension","url":"https://github.com/w3c/csswg-drafts/labels/css-color-hdr","__typename":"Label"},"cursor":"Mg"},{"node":{"id":"MDU6TGFiZWw0Njk0MjY3MDQ=","color":"5319e7","name":"Needs Edits","nameHTML":"Needs Edits","description":null,"url":"https://github.com/w3c/csswg-drafts/labels/Needs%20Edits","__typename":"Label"},"cursor":"Mw"}],"pageInfo":{"endCursor":"Mw","hasNextPage":false}},"__isNode":"Issue","assignees":{"nodes":[]},"milestone":null,"databaseId":2821630230,"viewerDidAuthor":false,"locked":false,"author":{"__typename":"User","__isActor":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY=","profileUrl":"https://github.com/svgeesus","avatarUrl":"https://avatars.githubusercontent.com/u/2506926?u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f\u0026v=4"},"__isComment":"Issue","body":"@ccameron-chromium [suggested](https://github.com/ccameron-chromium/ColorWeb-CG/blob/css_color_hdr/color_hdr_function.md) a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom.\n\nIt also establishes, in a backwards-and-forwards compatible way, the convention that CSS colors are to be gamut mapped to the SDR gamut of the display, unless they explicitly opt-in to a potentially-higher-headroom gamut via the new syntax.","bodyHTML":"\u003cp dir=\"auto\"\u003e\u003ca class=\"user-mention notranslate\" data-hovercard-type=\"user\" data-hovercard-url=\"/users/ccameron-chromium/hovercard\" data-octo-click=\"hovercard-link-click\" data-octo-dimensions=\"link_type:self\" href=\"https://github.com/ccameron-chromium\"\u003e@ccameron-chromium\u003c/a\u003e \u003ca href=\"https://github.com/ccameron-chromium/ColorWeb-CG/blob/css_color_hdr/color_hdr_function.md\"\u003esuggested\u003c/a\u003e a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIt also establishes, in a backwards-and-forwards compatible way, the convention that CSS colors are to be gamut mapped to the SDR gamut of the display, unless they explicitly opt-in to a potentially-higher-headroom gamut via the new syntax.\u003c/p\u003e","bodyVersion":"bca8086c48e24d9209e0cf16ccadf422fb495c3aa0927f48857713edb60dd31d","createdAt":"2025-01-30T19:19:57Z","__isReactable":"Issue","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"viewerCanUpdateMetadata":false,"viewerCanComment":false,"viewerCanAssign":false,"viewerCanLabel":false,"__isIssueOrPullRequest":"Issue","projectItemsNext":{"edges":[],"pageInfo":{"endCursor":null,"hasNextPage":false}},"viewerCanSetMilestone":false,"isPinned":false,"viewerCanDelete":false,"viewerCanTransfer":false,"viewerCanConvertToDiscussion":false,"viewerCanLock":false,"viewerCanType":false,"frontTimelineItems":{"pageInfo":{"hasNextPage":true,"endCursor":"Y3Vyc29yOnYyOpPPAAABlQWr78gCqjIwNTU2ODM1OTk="},"totalCount":16,"edges":[{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":16129017149,"createdAt":"2025-01-30T19:20:35Z","actor":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2506926?s=64\u0026u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODI1OTExNzA=","nameHTML":"Agenda+","name":"Agenda+","color":"000000","description":null},"__isNode":"LabeledEvent","id":"LE_lADOAI0trM6oLqkWzwAAAAPBXUU9"},"cursor":"Y3Vyc29yOnYyOpPPAAABlLioc7gBqzE2MTI5MDE3MTQ5"},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2625374442,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"svgeesus","avatarUrl":"https://avatars.githubusercontent.com/u/2506926?u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f\u0026v=4","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"IC_kwDOAI0trM6cfAjq","body":"Agenda+ to see if we can resolve to adopt the proposal.","bodyHTML":"\u003cp dir=\"auto\"\u003eAgenda+ to see if we can resolve to adopt the proposal.\u003c/p\u003e","bodyVersion":"fd477a02541b3e45392fbf86b8ef690aa2f66842efa67cfbe67efb72a1440bda","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2625374442","createdAt":"2025-01-30T19:20:37Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlLioe4gAqjI2MjUzNzQ0NDI="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1991649071,"createdAt":"2025-01-30T22:35:26Z","actor":{"__typename":"User","login":"css-meeting-bot","id":"MDQ6VXNlcjI3NDY2NTc3","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/27466577?s=64\u0026u=f1db811551a47160e3d78e2d4104d52f1fad7e13\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"I_kwDOAI0trM6nNXeF"},"willCloseTarget":false,"referencedAt":"2025-01-30T22:35:25Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"I_kwDOAI0trM6oLqkW"},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"I_kwDOAI0trM6nNXeF","issueTitleHTML":"[css-color-hdr] auto value of dynamic-range-limit","url":"https://github.com/w3c/csswg-drafts/issues/11558","number":11558,"stateReason":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","isPrivate":false,"owner":{"__typename":"Organization","login":"w3c","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg=="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"CRE_kwDOAI0trM52ticv"},"cursor":"Y3Vyc29yOnYyOpPPAAABlLla17ACqjE5OTE2NDkwNzE="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":16145432082,"createdAt":"2025-01-31T20:32:12Z","actor":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2506926?s=64\u0026u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f\u0026v=4"},"label":{"id":"MDU6TGFiZWwyMzExNzY4MjQy","nameHTML":"css-color-hdr","name":"css-color-hdr","color":"c5def5","description":"CSS HDR extension"},"__isNode":"LabeledEvent","id":"LE_lADOAI0trM6oLqkWzwAAAAPCV74S"},"cursor":"Y3Vyc29yOnYyOpPPAAABlL4QYOABqzE2MTQ1NDMyMDgy"},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2629096916,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"weinig","avatarUrl":"https://avatars.githubusercontent.com/u/1987800?v=4","id":"MDQ6VXNlcjE5ODc4MDA="},"id":"IC_kwDOAI0trM6ctNXU","body":"Really glad to see this being discussed!\n\nOne thing I can't figure out from the proposal on first reading is if this allows matching the colors of an HDR image or HDR video. (Partially, this is likely a problem of me not knowing enough about how HDR images / videos are represented/ encoded).\n\nThat is, if a user has an HDR image, and for the sake of simplicity, it is all one color, is there a way to create CSS Color values that match that color in all headrooms?","bodyHTML":"\u003cp dir=\"auto\"\u003eReally glad to see this being discussed!\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOne thing I can't figure out from the proposal on first reading is if this allows matching the colors of an HDR image or HDR video. (Partially, this is likely a problem of me not knowing enough about how HDR images / videos are represented/ encoded).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThat is, if a user has an HDR image, and for the sake of simplicity, it is all one color, is there a way to create CSS Color values that match that color in all headrooms?\u003c/p\u003e","bodyVersion":"dc9da417612d81002d1927c2726eaeaef99aaf43f965f449ecfb335f167381ed","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2629096916","createdAt":"2025-02-01T20:17:49Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlMMpkcgAqjI2MjkwOTY5MTY="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2629328065,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"ccameron-chromium","avatarUrl":"https://avatars.githubusercontent.com/u/32557109?v=4","id":"MDQ6VXNlcjMyNTU3MTA5"},"id":"IC_kwDOAI0trM6cuFzB","body":"\u003e That is, if a user has an HDR image, and for the sake of simplicity, it is all one color, is there a way to create CSS Color values that match that color in all headrooms?\n\nYes, that's the goal -- to be able to create a CSS Color that will match an HDR image color in all headrooms.\n\nIn order to handle all possible ISO 21496-1 images, the \"it may be worth adding those as parameters to be able to color match with gain map images\" would need some elaboration.\n\nIf there's consensus around this general approach, then I can flesh out those details.","bodyHTML":"\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThat is, if a user has an HDR image, and for the sake of simplicity, it is all one color, is there a way to create CSS Color values that match that color in all headrooms?\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eYes, that's the goal -- to be able to create a CSS Color that will match an HDR image color in all headrooms.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn order to handle all possible ISO 21496-1 images, the \"it may be worth adding those as parameters to be able to color match with gain map images\" would need some elaboration.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf there's consensus around this general approach, then I can flesh out those details.\u003c/p\u003e","bodyVersion":"515e5f0ce79c3edc8472cca65635f48d762060f74a9ed370d10dd020e9c88db7","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2629328065","createdAt":"2025-02-02T10:07:13Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlMYg6GgAqjI2MjkzMjgwNjU="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2629516317,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"weinig","avatarUrl":"https://avatars.githubusercontent.com/u/1987800?v=4","id":"MDQ6VXNlcjE5ODc4MDA="},"id":"IC_kwDOAI0trM6cuzwd","body":"Great. Ok, after reading a bit more about ISO 21496-1 images I think I understand the idea (I do wish those ISO specs were not behind paywalls, but I digress and should just fork over some cash).\n\nGenerally, and for matching images that use ISO 21496-1 gain map, this seems like a great way forward to me. \n\nOne thing that might make sense in addition to adding parameterization (primaries of the space, esp value, etc.) of the interpolation space would be a way to explicitly use an image's metadata. For example:\n\n```\n color-hdr(matching url(myImage.png),\n color(rec2100-linear 0.9 1.0 0.8) 1,\n color(rec2100-linear 1.8 2.0 1.5) 2);\n```\n\nWhat about HDR images that don't use ISO 21496-1 gain maps? (I think one can make an HDR image that has no gain map, presumably getting some default tone-mapping from the system?) \n\nAny thoughts on HDR video?","bodyHTML":"\u003cp dir=\"auto\"\u003eGreat. Ok, after reading a bit more about ISO 21496-1 images I think I understand the idea (I do wish those ISO specs were not behind paywalls, but I digress and should just fork over some cash).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eGenerally, and for matching images that use ISO 21496-1 gain map, this seems like a great way forward to me.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOne thing that might make sense in addition to adding parameterization (primaries of the space, esp value, etc.) of the interpolation space would be a way to explicitly use an image's metadata. For example:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\" color-hdr(matching url(myImage.png),\n color(rec2100-linear 0.9 1.0 0.8) 1,\n color(rec2100-linear 1.8 2.0 1.5) 2);\"\u003e\u003cpre class=\"notranslate\"\u003e\u003ccode class=\"notranslate\"\u003e color-hdr(matching url(myImage.png),\n color(rec2100-linear 0.9 1.0 0.8) 1,\n color(rec2100-linear 1.8 2.0 1.5) 2);\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhat about HDR images that don't use ISO 21496-1 gain maps? (I think one can make an HDR image that has no gain map, presumably getting some default tone-mapping from the system?)\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAny thoughts on HDR video?\u003c/p\u003e","bodyVersion":"acd515683bfedce5f5afb3c6367566e2898689bba4a34e07f274403fe34a3ef0","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2629516317","createdAt":"2025-02-02T19:05:44Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlMgN70AAqjI2Mjk1MTYzMTc="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2633603943,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"ccameron-chromium","avatarUrl":"https://avatars.githubusercontent.com/u/32557109?v=4","id":"MDQ6VXNlcjMyNTU3MTA5"},"id":"IC_kwDOAI0trM6c-Ztn","body":"\u003e What about HDR images that don't use ISO 21496-1 gain maps?\n\nThere is a similar proposal in ICC that defines this mapping as a global tone map. I don't think it's share-able yet, unfortunately. It is also representable by this scheme.\n\nAlso if there is no ICC global tone map, and no other metadata, then ISO 22028-5 is working to define how this would be tone mapped \"by default\".\n\n(BTW, I'd like for us to eventually have WPT tests for all 3 of these cases: gain map tone mapping, global profile tone mapping, and default tone mapping ... hopefully by the end of the year?).\n\n\u003e color-hdr(matching url(myImage.png)\n\nI suspect that we'll want to provide something like the ICC global tone map as metadata also for canvases. And so I think something more like that metadata would be a better \"match\". There are also some parameters in the image metadata to account for the fact that image data is in [0,1] (the min/max/gamma parameters), which don't apply to CSS colors that can specify any value.\n\n\u003e Any thoughts on HDR video?\n\nThere is a proposal for gainmap support in AV1 video. I would like for there to be a uniform approach on global tone mapping between ICC and video as well.\n","bodyHTML":"\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eWhat about HDR images that don't use ISO 21496-1 gain maps?\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThere is a similar proposal in ICC that defines this mapping as a global tone map. I don't think it's share-able yet, unfortunately. It is also representable by this scheme.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAlso if there is no ICC global tone map, and no other metadata, then ISO 22028-5 is working to define how this would be tone mapped \"by default\".\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e(BTW, I'd like for us to eventually have WPT tests for all 3 of these cases: gain map tone mapping, global profile tone mapping, and default tone mapping ... hopefully by the end of the year?).\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003ecolor-hdr(matching url(myImage.png)\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eI suspect that we'll want to provide something like the ICC global tone map as metadata also for canvases. And so I think something more like that metadata would be a better \"match\". There are also some parameters in the image metadata to account for the fact that image data is in [0,1] (the min/max/gamma parameters), which don't apply to CSS colors that can specify any value.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eAny thoughts on HDR video?\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThere is a proposal for gainmap support in AV1 video. I would like for there to be a uniform approach on global tone mapping between ICC and video as well.\u003c/p\u003e","bodyVersion":"43a1d92e71e6d083cffb15215690874c98cc5e36ad4ad0ce84aea35f87a4bdec","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2633603943","createdAt":"2025-02-04T11:17:32Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlNCuAOAAqjI2MzM2MDM5NDM="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2634811259,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"svgeesus","avatarUrl":"https://avatars.githubusercontent.com/u/2506926?u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f\u0026v=4","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"IC_kwDOAI0trM6dDAd7","body":"\u003e (BTW, I'd like for us to eventually have WPT tests for all 3 of these cases: gain map tone mapping, global profile tone mapping, and default tone mapping ... hopefully by the end of the year?).\n\nYes, definitely!\n\n\u003e Great. Ok, after reading a bit more about ISO 21496-1 images I think I understand the idea (I do wish those ISO specs were not behind paywalls, but I digress and should just fork over some cash).\n\nI agree that these paywalled specs do hinder development. In your case @weinig I suggest an email to Nicolas Bonnier at Apple would be helpful.","bodyHTML":"\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e(BTW, I'd like for us to eventually have WPT tests for all 3 of these cases: gain map tone mapping, global profile tone mapping, and default tone mapping ... hopefully by the end of the year?).\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eYes, definitely!\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eGreat. Ok, after reading a bit more about ISO 21496-1 images I think I understand the idea (I do wish those ISO specs were not behind paywalls, but I digress and should just fork over some cash).\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eI agree that these paywalled specs do hinder development. In your case \u003ca class=\"user-mention notranslate\" data-hovercard-type=\"user\" data-hovercard-url=\"/users/weinig/hovercard\" data-octo-click=\"hovercard-link-click\" data-octo-dimensions=\"link_type:self\" href=\"https://github.com/weinig\"\u003e@weinig\u003c/a\u003e I suggest an email to Nicolas Bonnier at Apple would be helpful.\u003c/p\u003e","bodyVersion":"be2db83e5d75308f8c7c5e64559d52b1c4eb3e442d1525a79dca4d615855fdfa","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2634811259","createdAt":"2025-02-04T18:57:50Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":null,"lastUserContentEdit":null,"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlNJTa7AAqjI2MzQ4MTEyNTk="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":2654776232,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"svgeesus","id":"MDQ6VXNlcjI1MDY5MjY="},"id":"I_kwDOAI0trM6oLqkW","number":11616,"locked":false,"databaseId":2821630230},"author":{"__typename":"User","login":"css-meeting-bot","avatarUrl":"https://avatars.githubusercontent.com/u/27466577?u=f1db811551a47160e3d78e2d4104d52f1fad7e13\u0026v=4","id":"MDQ6VXNlcjI3NDY2NTc3"},"id":"IC_kwDOAI0trM6ePKuo","body":"The CSS Working Group just discussed `[css-color-hdr] CSS syntax for HDR colors parameterized by headroom`, and agreed to the following:\n\n* `RESOLVED: add current proposal as a Note into the spec`\n\n\u003cdetails\u003e\u003csummary\u003eThe full IRC log of that discussion\u003c/summary\u003e\n\u0026lt;ccameron\u003e hello!\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: Taking some ideas in ICC, and also colour matching with 8 map images in ISO\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... A good way to deal with HDR colours\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... We're not going to expose headroom directly\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... recomputing every time there are changes is painful\u003cbr\u003e\n\u0026lt;ChrisL\u003e q+\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... want to say headroom for this and that, and interoplate between the two in UA\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... the UA and device can limit it\u003cbr\u003e\n\u0026lt;smfr\u003e q+\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... wanted to present the idea. not the definitive way to do it\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... good to wait until ICC stuff is in a good place\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... but that's the idea. wanted to see if anyone has thoughts\u003cbr\u003e\n\u0026lt;astearns\u003e ack ChrisL\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: I really like the idea\u003cbr\u003e\n\u0026lt;weinig\u003e q+\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... for SDR, everything relative to medium white\u003cbr\u003e\n\u0026lt;cpn\u003e s/8 map/gain map/\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... but HDR there is no single value to use but we can't expose the headroom\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... in the original proposal, you can say what the headroom is for two colours\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... but when would it not be 0?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it's only defined in between. what if headroom is 2 and 4 on an SDR display?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: it needs to be defined down to 0\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... I'm still working on proposal for what to do with different headroom values\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... maybe we should build that into the syntax\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... for images, you can say-- Oh. There is a reason why not to have 0\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... suppose you had content that you don't want to become HDR\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... is that the most useful thing, I don't know\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: we have to define what happens when headroom is 0\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... could make the headroom 0 the default value. removes verbosity\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... could have n values\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... I don't want to make this too complicated. I want it to be good enough\u003cbr\u003e\n\u0026lt;ChrisL\u003e q?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: I like that idea. I also think that if we workshop this, having an initial version with only two values, one headroom 0 sounds good\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... maybe we do want the whole p?? wise thing\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it adds complexity, but I'd be happy to leave that out for v1\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... make sure the common case is super simple\u003cbr\u003e\n\u0026lt;joshtumath\u003e smfr: The colour that you render, the comutation of that colour takes into account screen brightness?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: yes\u003cbr\u003e\n\u0026lt;joshtumath\u003e smfr: need to treat it like accent colour and not paint it into canvas?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: I think canvas right now, it's a snapshot at a fixed headroom. not possible to realise values at rendering\u003cbr\u003e\n\u0026lt;pal\u003e q+\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... so I haven't written this up. but 2d canvas has a headroom that's 0 SDR\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... so maybe render canvas by 2, but you need to tell canvas what the effective headroom is\u003cbr\u003e\n\u0026lt;joshtumath\u003e smfr: so there's no way of using the colour painted as a proxy for screen brightness?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: there better not be!\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... the goal is to make it so you can't exfoltrate that\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... you have to re-render your entire page when the headroom changes, so we're aligned on that\u003cbr\u003e\n\u0026lt;joshtumath\u003e smfr: the screen brightness things are ramped\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... I really want to avoid re-rendering on brightness change\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: what is the alternative?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ???: let the rendering change deal with the viewing environment\u003cbr\u003e\n\u0026lt;astearns\u003e s/???/pal/\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: you can't write arbitrary PQ values\u003cbr\u003e\n\u0026lt;joshtumath\u003e pal: as long as we allow that, that's fine right?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... you're just writing HDR values and let the renderer deal with it\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... as long as that's possible, everything else is optional convinience\u003cbr\u003e\n\u0026lt;smfr\u003e q+\u003cbr\u003e\n\u0026lt;ccameron\u003e q+ (for the topic of churning the WindowServer during ramp-up)\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: Understand that will be possible but that's not topic\u003cbr\u003e\n\u0026lt;joshtumath\u003e pal: I think it's important. apps that will want additional control, may want this, but otherwise should be able to let renderer do its thing\u003cbr\u003e\n\u0026lt;pal\u003e q-\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: I was thinking about this. if getting to parity with what images and video can do... if images have to recompute each pixel value...\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... then this will have to, too\u003cbr\u003e\n\u0026lt;astearns\u003e q+ ccameron\u003cbr\u003e\n\u0026lt;ChrisL\u003e Agree that this is CSS parity for images/video\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it's as if you have lots of tiny images that you've loaded that have metadata with 'between these ranges'\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... comfortable for implementation if it mirrors what images and video can already do\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... so I think that should quell smfr's concerns\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it's something that engines already have to deal with\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... we should discuss alternative of this proposal. new property with CSS colour values that should be treated as if they are HDR values and the system can do whatever tone mapping it wants\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... I think there are some formats with no colour map. system decides how to tone map that\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: yes PNG and ???? has that\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it's just the values\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: so I think benefit to having the gain map, matching something that uses PQ values directly\u003cbr\u003e\n\u0026lt;astearns\u003e ack ccameron\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: yes absolutely. right now it's going on in ICC where you say 'here's my headroom dependent ICC profile'\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... here's the transformation to get to headroom 3 1 0\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... my goal with that is that can be something you can attach to canvas\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... 'here's the tone mapping for different headrooms'\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... and that packet, I'd like to have the same packet between video, images, CSS, canvas\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... so that's another option\u003cbr\u003e\n\u0026lt;smfr\u003e q-\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... perhaps that's better than the suggestion I had\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: we just want to get the model of what's happening in the system. something like: you can attach to px some metadata about how to tone map\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... and the compositor does it\u003cbr\u003e\n\u0026lt;joshtumath\u003e smfr: I think both. you map at paint time and ????. I'm not sure whether we redraw in the first case but I think we do\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: for us, if something is in a layer, we can delegate to the OS\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... otherwise we rewrite every pixel when headroom changes\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... we throttle it\u003cbr\u003e\n\u0026lt;ChrisL\u003e s/???/re-render the whole buffer/\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... interopolate it out or in\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: but for systems with display lists, etc, they don't have to block paint\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... a concern is, if we're privacy minded, we don't leak this info through perf characteristics\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: on some platforms it's observable\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... but the goal is to push as far down pipeline as possible\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: but if we parallel what images can do, simplifies model\u003cbr\u003e\n\u0026lt;joshtumath\u003e astearns: where are we at. can we resolve to adopt?\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... or the idea of a different packet to send around something to explore?\u003cbr\u003e\n\u0026lt;ChrisL\u003e q+\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: I want something written down and give ICC something public to point at\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... it's an idea worth getting out to marinate\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... get an idea of concerns. but I like the packet idea.\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... we should try to incorporate that\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: agreed needs to marinate. let engines experiment to see what is feasable\u003cbr\u003e\n\u0026lt;astearns\u003e ack ChrisL\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... makes a lot more sense to figure out how for images and video it will start playing before we tackle this\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: would like to see this in spec so people can see what we're looking at\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... can't currently make a HDR colour\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... rather people get to see something\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... am rep to ICC. I know they tend to hide things until they're public.\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... these are things to look at, and we need experimentation that's coordinated. get a stick in the ground to kick around\u003cbr\u003e\n\u0026lt;joshtumath\u003e weinig: maybe we could say in the spec that this is changing\u003cbr\u003e\n\u0026lt;joshtumath\u003e ChrisL: yes\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... an explicit 'DO NOT SHIP!!!'\u003cbr\u003e\n\u0026lt;joshtumath\u003e astearns: we can point to the issue and put in a competing proposal too\u003cbr\u003e\n\u0026lt;joshtumath\u003e ccameron: everyone same page about: on chrome, you specify the colour and you get something bright\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... the goal is for that to not be the case. you opt into a brighter colour is the goal\u003cbr\u003e\n\u0026lt;joshtumath\u003e ... otherwise you get gamut mapped to SDR\u003cbr\u003e\n\u0026lt;joshtumath\u003e PROPOSED RESOLUTION: put current proposal in spec with a note that we need to solve this and where discussion is happening\u003cbr\u003e\n\u0026lt;joshtumath\u003e RESOLVED: add current proposal as a Note into the spec\u003cbr\u003e\n\u003c/details\u003e\n","bodyHTML":"\u003cp dir=\"auto\"\u003eThe CSS Working Group just discussed \u003ccode class=\"notranslate\"\u003e[css-color-hdr] CSS syntax for HDR colors parameterized by headroom\u003c/code\u003e, and agreed to the following:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: add current proposal as a Note into the spec\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdetails\u003e\u003csummary\u003eThe full IRC log of that discussion\u003c/summary\u003e\n\u0026lt;ccameron\u0026gt; hello!\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: Taking some ideas in ICC, and also colour matching with 8 map images in ISO\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... A good way to deal with HDR colours\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... We're not going to expose headroom directly\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... recomputing every time there are changes is painful\u003cbr\u003e\n\u0026lt;ChrisL\u0026gt; q+\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... want to say headroom for this and that, and interoplate between the two in UA\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... the UA and device can limit it\u003cbr\u003e\n\u0026lt;smfr\u0026gt; q+\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... wanted to present the idea. not the definitive way to do it\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... good to wait until ICC stuff is in a good place\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... but that's the idea. wanted to see if anyone has thoughts\u003cbr\u003e\n\u0026lt;astearns\u0026gt; ack ChrisL\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: I really like the idea\u003cbr\u003e\n\u0026lt;weinig\u0026gt; q+\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... for SDR, everything relative to medium white\u003cbr\u003e\n\u0026lt;cpn\u0026gt; s/8 map/gain map/\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... but HDR there is no single value to use but we can't expose the headroom\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... in the original proposal, you can say what the headroom is for two colours\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... but when would it not be 0?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it's only defined in between. what if headroom is 2 and 4 on an SDR display?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: it needs to be defined down to 0\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... I'm still working on proposal for what to do with different headroom values\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... maybe we should build that into the syntax\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... for images, you can say-- Oh. There is a reason why not to have 0\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... suppose you had content that you don't want to become HDR\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... is that the most useful thing, I don't know\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: we have to define what happens when headroom is 0\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... could make the headroom 0 the default value. removes verbosity\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... could have n values\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... I don't want to make this too complicated. I want it to be good enough\u003cbr\u003e\n\u0026lt;ChrisL\u0026gt; q?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: I like that idea. I also think that if we workshop this, having an initial version with only two values, one headroom 0 sounds good\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... maybe we do want the whole p?? wise thing\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it adds complexity, but I'd be happy to leave that out for v1\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... make sure the common case is super simple\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; smfr: The colour that you render, the comutation of that colour takes into account screen brightness?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: yes\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; smfr: need to treat it like accent colour and not paint it into canvas?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: I think canvas right now, it's a snapshot at a fixed headroom. not possible to realise values at rendering\u003cbr\u003e\n\u0026lt;pal\u0026gt; q+\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... so I haven't written this up. but 2d canvas has a headroom that's 0 SDR\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... so maybe render canvas by 2, but you need to tell canvas what the effective headroom is\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; smfr: so there's no way of using the colour painted as a proxy for screen brightness?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: there better not be!\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... the goal is to make it so you can't exfoltrate that\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... you have to re-render your entire page when the headroom changes, so we're aligned on that\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; smfr: the screen brightness things are ramped\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... I really want to avoid re-rendering on brightness change\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: what is the alternative?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ???: let the rendering change deal with the viewing environment\u003cbr\u003e\n\u0026lt;astearns\u0026gt; s/???/pal/\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: you can't write arbitrary PQ values\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; pal: as long as we allow that, that's fine right?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... you're just writing HDR values and let the renderer deal with it\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... as long as that's possible, everything else is optional convinience\u003cbr\u003e\n\u0026lt;smfr\u0026gt; q+\u003cbr\u003e\n\u0026lt;ccameron\u0026gt; q+ (for the topic of churning the WindowServer during ramp-up)\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: Understand that will be possible but that's not topic\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; pal: I think it's important. apps that will want additional control, may want this, but otherwise should be able to let renderer do its thing\u003cbr\u003e\n\u0026lt;pal\u0026gt; q-\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: I was thinking about this. if getting to parity with what images and video can do... if images have to recompute each pixel value...\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... then this will have to, too\u003cbr\u003e\n\u0026lt;astearns\u0026gt; q+ ccameron\u003cbr\u003e\n\u0026lt;ChrisL\u0026gt; Agree that this is CSS parity for images/video\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it's as if you have lots of tiny images that you've loaded that have metadata with 'between these ranges'\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... comfortable for implementation if it mirrors what images and video can already do\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... so I think that should quell smfr's concerns\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it's something that engines already have to deal with\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... we should discuss alternative of this proposal. new property with CSS colour values that should be treated as if they are HDR values and the system can do whatever tone mapping it wants\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... I think there are some formats with no colour map. system decides how to tone map that\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: yes PNG and ???? has that\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it's just the values\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: so I think benefit to having the gain map, matching something that uses PQ values directly\u003cbr\u003e\n\u0026lt;astearns\u0026gt; ack ccameron\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: yes absolutely. right now it's going on in ICC where you say 'here's my headroom dependent ICC profile'\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... here's the transformation to get to headroom 3 1 0\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... my goal with that is that can be something you can attach to canvas\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... 'here's the tone mapping for different headrooms'\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... and that packet, I'd like to have the same packet between video, images, CSS, canvas\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... so that's another option\u003cbr\u003e\n\u0026lt;smfr\u0026gt; q-\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... perhaps that's better than the suggestion I had\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: we just want to get the model of what's happening in the system. something like: you can attach to px some metadata about how to tone map\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... and the compositor does it\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; smfr: I think both. you map at paint time and ????. I'm not sure whether we redraw in the first case but I think we do\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: for us, if something is in a layer, we can delegate to the OS\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... otherwise we rewrite every pixel when headroom changes\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... we throttle it\u003cbr\u003e\n\u0026lt;ChrisL\u0026gt; s/???/re-render the whole buffer/\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... interopolate it out or in\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: but for systems with display lists, etc, they don't have to block paint\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... a concern is, if we're privacy minded, we don't leak this info through perf characteristics\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: on some platforms it's observable\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... but the goal is to push as far down pipeline as possible\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: but if we parallel what images can do, simplifies model\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; astearns: where are we at. can we resolve to adopt?\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... or the idea of a different packet to send around something to explore?\u003cbr\u003e\n\u0026lt;ChrisL\u0026gt; q+\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: I want something written down and give ICC something public to point at\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... it's an idea worth getting out to marinate\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... get an idea of concerns. but I like the packet idea.\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... we should try to incorporate that\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: agreed needs to marinate. let engines experiment to see what is feasable\u003cbr\u003e\n\u0026lt;astearns\u0026gt; ack ChrisL\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... makes a lot more sense to figure out how for images and video it will start playing before we tackle this\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: would like to see this in spec so people can see what we're looking at\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... can't currently make a HDR colour\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... rather people get to see something\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... am rep to ICC. I know they tend to hide things until they're public.\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... these are things to look at, and we need experimentation that's coordinated. get a stick in the ground to kick around\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; weinig: maybe we could say in the spec that this is changing\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ChrisL: yes\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... an explicit 'DO NOT SHIP!!!'\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; astearns: we can point to the issue and put in a competing proposal too\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ccameron: everyone same page about: on chrome, you specify the colour and you get something bright\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... the goal is for that to not be the case. you opt into a brighter colour is the goal\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; ... otherwise you get gamut mapped to SDR\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; PROPOSED RESOLUTION: put current proposal in spec with a note that we need to solve this and where discussion is happening\u003cbr\u003e\n\u0026lt;joshtumath\u0026gt; RESOLVED: add current proposal as a Note into the spec\u003cbr\u003e\n\u003c/details\u003e","bodyVersion":"35b5ad389f72dcc72f72ef9dd20efa17802baf283e9bbb522dfb0a1470c4bf87","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/11616#issuecomment-2654776232","createdAt":"2025-02-12T20:30:32Z","authorAssociation":"MEMBER","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg==","login":"w3c","url":"https://github.com/w3c"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"w3c/csswg-drafts","databaseId":9252268},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":"2025-02-12T21:01:23Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/astearns","login":"astearns","id":"MDQ6VXNlcjEzODA3NTE="},"id":"UCE_lALOAI0trM6ePKuozlycJCU"},"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABlPvbKkAAqjI2NTQ3NzYyMzI="},{"node":{"__typename":"UnlabeledEvent","__isIssueTimelineItems":"UnlabeledEvent","__isTimelineEvent":"UnlabeledEvent","databaseId":16286733986,"createdAt":"2025-02-12T20:30:32Z","actor":{"__typename":"User","login":"css-meeting-bot","id":"MDQ6VXNlcjI3NDY2NTc3","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/27466577?s=64\u0026u=f1db811551a47160e3d78e2d4104d52f1fad7e13\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODI1OTExNzA=","nameHTML":"Agenda+","name":"Agenda+","color":"000000","description":null},"__isNode":"UnlabeledEvent","id":"UNLE_lADOAI0trM6oLqkWzwAAAAPKw9ai"},"cursor":"Y3Vyc29yOnYyOpPPAAABlPvbKkABqzE2Mjg2NzMzOTg2"},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":2046139199,"createdAt":"2025-02-12T20:31:30Z","actor":{"__typename":"User","login":"mozilla-apprentice","id":"MDQ6VXNlcjQ5NjY3OTgx","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/49667981?s=64\u0026u=6fb1b1b7955f1955885372ffdeaf1dc5814a7ee8\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"I_kwDOCtM1Ac6p1LHd"},"willCloseTarget":false,"referencedAt":"2025-02-12T20:31:29Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"I_kwDOAI0trM6oLqkW"},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"I_kwDOCtM1Ac6p1LHd","issueTitleHTML":"[css-color-hdr] CSS syntax for HDR colors parameterized by headroom","url":"https://github.com/mozilla/wg-decisions/issues/1810","number":1810,"stateReason":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnkxODE2MTM4MjU=","name":"wg-decisions","isPrivate":false,"owner":{"__typename":"Organization","login":"mozilla","id":"MDEyOk9yZ2FuaXphdGlvbjEzMTUyNA=="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"CRE_kwDOCtM1Ac559Zs_"},"cursor":"Y3Vyc29yOnYyOpPPAAABlPvcDNACqjIwNDYxMzkxOTk="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":2046140582,"createdAt":"2025-02-12T20:32:03Z","actor":{"__typename":"User","login":"chromium-helper","id":"U_kgDOB09u5g","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/122646246?s=64\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"I_kwDOIyvLMc6p1LWa"},"willCloseTarget":false,"referencedAt":"2025-02-12T20:32:02Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"I_kwDOAI0trM6oLqkW"},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"I_kwDOIyvLMc6p1LWa","issueTitleHTML":"[css-color-hdr] CSS syntax for HDR colors parameterized by headroom","url":"https://github.com/chromium-helper/csswg-resolutions/issues/702","number":702,"stateReason":"COMPLETED","repository":{"id":"R_kgDOIyvLMQ","name":"csswg-resolutions","isPrivate":false,"owner":{"__typename":"User","login":"chromium-helper","id":"U_kgDOB09u5g"}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"CRE_kwDOIyvLMc559aCm"},"cursor":"Y3Vyc29yOnYyOpPPAAABlPvcjbgCqjIwNDYxNDA1ODI="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":16287054404,"createdAt":"2025-02-12T21:01:01Z","actor":{"__typename":"User","login":"astearns","id":"MDQ6VXNlcjEzODA3NTE=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/1380751?s=64\u0026u=dc70d74c456a4cdfcb6ec3d1778e8be9d4bbddd1\u0026v=4"},"label":{"id":"MDU6TGFiZWw0Njk0MjY3MDQ=","nameHTML":"Needs Edits","name":"Needs Edits","color":"5319e7","description":null},"__isNode":"LabeledEvent","id":"LE_lADOAI0trM6oLqkWzwAAAAPKyLpE"},"cursor":"Y3Vyc29yOnYyOpPPAAABlPv3EsgBqzE2Mjg3MDU0NDA0"},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":2055683599,"createdAt":"2025-02-14T18:15:09Z","actor":{"__typename":"User","login":"weinig","id":"MDQ6VXNlcjE5ODc4MDA=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/1987800?s=64\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"I_kwDOAI0trM6qIzxy"},"willCloseTarget":false,"referencedAt":"2025-02-14T18:15:08Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"I_kwDOAI0trM6oLqkW"},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"I_kwDOAI0trM6qIzxy","issueTitleHTML":"[css-color-hdr] Alternative proposal for \u003ccode\u003edynamic-range-limit\u003c/code\u003e defaults","url":"https://github.com/w3c/csswg-drafts/issues/11711","number":11711,"stateReason":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","isPrivate":false,"owner":{"__typename":"Organization","login":"w3c","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg=="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"CRE_kwDOAI0trM56hz4P"},"cursor":"Y3Vyc29yOnYyOpPPAAABlQWr78gCqjIwNTU2ODM1OTk="}]},"backTimelineItems":{"pageInfo":{"hasPreviousPage":true,"startCursor":null},"totalCount":16,"edges":[]}},"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"safeViewer":null}},"timestamp":1740223895}]},"title":null,"appPayload":{"initial_view_content":{"team_id":null,"can_edit_view":true},"current_user":null,"current_user_settings":{"use_monospace_font":false,"use_single_key_shortcut":false,"preferred_emoji_skin_tone":null},"paste_url_link_as_plain_text":false,"base_avatar_url":"https://avatars.githubusercontent.com","help_url":"https://docs.github.com","sso_organizations":null,"tracing":false,"tracing_flamegraph":false,"catalog_service":"github/issues_experience","scoped_repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","owner":"w3c","name":"csswg-drafts","is_archived":false},"enabled_features":{"use_pull_request_subscriptions_enabled":false,"pull_request_single_subscription":true,"disable_issues_react_ssr":false,"issues_react":false,"issues_react_prefetch":false,"issue_types":true,"issues_react_dashboard_saved_views":false,"sub_issues":true,"copilot_natural_language_github_search":false,"private_avatars":false,"reserved_domain":true,"projects_classic_sunset_ui":true,"projects_classic_sunset_override":false,"issues_react_validate_timeline_items":false,"refresh_image_video_src":true,"issues_react_bypass_es_limits":true,"issues_react_csr_index_actions":true,"notifyd_issue_watch_activity_notify":false,"notifyd_enable_issue_thread_subscriptions":false,"issues_react_new_sort_dropdown":true,"issues_react_new_select_panel":false,"issues_react_create_milestone":true,"issues_react_preload_labels":true,"copilot_workspace_use_moda":false,"issues_react_assignee_warning":true,"copilot_workspace":null,"tasklist_block":false,"issues_react_perf_test":false}}}</script> <div data-target="react-app.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.gjuRkX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;}/*!sc*/ .gjuRkX > *{width:100%;}/*!sc*/ .hzqxma{height:100%;}/*!sc*/ .fGkgDM{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;padding-top:16px;}/*!sc*/ .ehzXEi{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:1280px;width:100%;padding-top:0;padding-left:16px;padding-right:16px;padding-bottom:0;}/*!sc*/ @media screen and (min-width:544px){.ehzXEi{padding-left:16px;padding-right:16px;}}/*!sc*/ @media screen and (min-width:768px){.ehzXEi{padding-left:24px;padding-right:24px;}}/*!sc*/ .fHrHav{display:grid;grid-template-columns:auto auto auto auto 1fr;grid-template-areas:'context-area context-area context-area context-area context-area' 'leading-action breadcrumbs title-area trailing-action actions' 'description description description description description' 'navigation navigation navigation navigation navigation';}/*!sc*/ .fHrHav:has([data-component="TitleArea"][data-size-variant="large"]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));}/*!sc*/ .fHrHav:has([data-component="TitleArea"][data-size-variant="medium"]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));}/*!sc*/ .fHrHav:has([data-component="TitleArea"][data-size-variant="subtitle"]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));}/*!sc*/ .fHrHav [data-component="PH_LeadingAction"],.fHrHav [data-component="PH_TrailingAction"],.fHrHav [data-component="PH_Actions"],.fHrHav [data-component="PH_LeadingVisual"],.fHrHav [data-component="PH_TrailingVisual"]{height:calc(var(--title-line-height) * 1em);}/*!sc*/ .krPEL{grid-row:2;grid-area:title-area;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.5rem;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-top:8px;}/*!sc*/ @media screen and (min-width:544px){.krPEL{padding-top:8px;}}/*!sc*/ @media screen and (min-width:768px){.krPEL{padding-top:0;}}/*!sc*/ @media screen and (min-width:1012px){.krPEL{padding-top:0;}}/*!sc*/ .clYxDg{display:block;-webkit-order:1;-ms-flex-order:1;order:1;font-size:26px;font-weight:400;line-height:1;margin-right:8px;}/*!sc*/ @media screen and (min-width:544px){.clYxDg{font-size:26px;}}/*!sc*/ @media screen and (min-width:768px){.clYxDg{font-size:var(--text-title-size-large,32px);}}/*!sc*/ @media screen and (min-width:1012px){.clYxDg{font-size:var(--text-title-size-large,32px);}}/*!sc*/ .lhNOUb{display:inline;word-break:break-word;}/*!sc*/ .YJa-Di{display:inline;white-space:nowrap;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-weight:300;}/*!sc*/ .kuCWTy{grid-row:1;grid-area:context-area;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:0.5rem;gap:0.5rem;font-weight:initial;line-height:var(--text-body-lineHeight-medium,1.4285);font-size:var(--text-body-size-medium,0.875rem);}/*!sc*/ @media screen and (max-width:calc(768px - 0.02px)){.kuCWTy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:768px){.kuCWTy{display:none;}}/*!sc*/ .vcYPI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;width:100%;}/*!sc*/ @media screen and (max-width:calc(768px - 0.02px)){.vcYPI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:768px){.vcYPI{display:none;}}/*!sc*/ .cQpCwc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}/*!sc*/ .lkyTpy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:4px;}/*!sc*/ @media screen and (min-width:544px){.lkyTpy{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ @media screen and (min-width:768px){.lkyTpy{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}}/*!sc*/ @media screen and (min-width:1012px){.lkyTpy{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}}/*!sc*/ .kcuWpx{grid-row:2;grid-area:actions;display:none;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding-left:0.5rem;gap:0.5rem;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-box-pack:right;-webkit-justify-content:right;-ms-flex-pack:right;justify-content:right;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ @media screen and (min-width:544px){.kcuWpx{display:none;}}/*!sc*/ @media screen and (min-width:768px){.kcuWpx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:1012px){.kcuWpx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ .eshSer{height:100%;min-height:56px;width:100%;}/*!sc*/ .cySYaL{border-bottom:1px solid;border-color:var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;}/*!sc*/ .exQbKw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding-top:var(--base-size-12,12px);padding-bottom:var(--base-size-12,12px);overflow:hidden;}/*!sc*/ .emuTBT{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border-bottom:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));display:none;height:56px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:-webkit-sticky;position:sticky;width:100%;z-index:14;}/*!sc*/ .iEncmA{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;width:100%;}/*!sc*/ .fHWHoy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:2px;overflow:hidden;width:100%;}/*!sc*/ .htJDeH{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}/*!sc*/ .hVVawZ{color:var(--fgColor-default,var(--color-fg-default,#1F2328));display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-word;}/*!sc*/ .jGasrR{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:none;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ @media screen and (min-width:544px){.jGasrR{display:none;}}/*!sc*/ @media screen and (min-width:768px){.jGasrR{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:1012px){.jGasrR{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ .jGasrR > *:not(:last-child)::after{content:"•";margin-left:4px;margin-right:4px;}/*!sc*/ .foDGRB{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;gap:4px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;height:100%;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;padding-left:8px;padding-right:8px;padding-top:4px;padding-bottom:8px;font-size:12px;}/*!sc*/ .gOJubP{overflow:hidden;}/*!sc*/ .gxAvdY{top:-1px;height:1px;visibility:hidden;}/*!sc*/ .dkqtNN{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:1280px;width:100%;padding-top:0;padding-left:16px;padding-right:16px;padding-bottom:0;margin-bottom:24px;}/*!sc*/ @media screen and (min-width:544px){.dkqtNN{padding-left:16px;padding-right:16px;}}/*!sc*/ @media screen and (min-width:768px){.dkqtNN{padding-left:24px;padding-right:24px;}}/*!sc*/ .hfKjHv{width:100%;}/*!sc*/ .jonlJW{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;gap:8px;}/*!sc*/ @media screen and (min-width:544px){.jonlJW{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:8px;}}/*!sc*/ @media screen and (min-width:768px){.jonlJW{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}}/*!sc*/ @media screen and (min-width:1012px){.jonlJW{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:24px;}}/*!sc*/ .bSTcOH{width:100%;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.bSTcOH{width:100%;}}/*!sc*/ @media screen and (min-width:768px){.bSTcOH{width:auto;}}/*!sc*/ @media screen and (min-width:1012px){.bSTcOH{width:auto;}}/*!sc*/ .gRssIw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}/*!sc*/ .bDlPR{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:1;-ms-flex-order:1;order:1;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:768px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:1012px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:1280px){.bDlPR{-webkit-order:0;-ms-flex-order:0;order:0;}}/*!sc*/ .bDlPR video{aspect-ratio:16/9;width:100%;}/*!sc*/ .crMLA-D{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ .bjwYme{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0;}/*!sc*/ .jSpDiO{background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));border-top-left-radius:6px;border-top-right-radius:6px;border-bottom:1px solid;border-bottom-color:var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex:1;-ms-flex:1;flex:1;font-size:14px;padding-top:4px;padding-bottom:4px;padding-right:4px;padding-left:16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;}/*!sc*/ .fnEhwD{width:100%;min-width:0;min-height:var(--control-small-size,28px);-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding-bottom:0;}/*!sc*/ .iKiGfw{place-self:center;grid-area:avatar;margin-right:8px;}/*!sc*/ .koxHLL{min-width:0;grid-column-start:title;grid-column-end:badges;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-column-gap:0.45ch;column-gap:0.45ch;padding-top:4px;padding-bottom:4px;}/*!sc*/ .dqmClk{grid-area:title;margin-top:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:hidden;}/*!sc*/ .cRhwji{color:var(--fgColor-default,var(--color-fg-default,#1F2328));font-weight:500;grid-area:login;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}/*!sc*/ .bJQcYY{grid-area:footer;line-height:1.4;}/*!sc*/ .bjFvWy{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .kgTqOk{white-space:nowrap;grid-area:actions;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}/*!sc*/ .izrTon{grid-area:edits;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-left:8px;}/*!sc*/ @media screen and (min-width:544px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ @media screen and (min-width:768px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ @media screen and (min-width:1012px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ .kpoUe{grid-column-start:badges;grid-column-end:actions;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}/*!sc*/ .ezcJRX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--base-size-8,8px);column-gap:var(--base-size-8,8px);margin-left:4px;}/*!sc*/ .dnyPuu{grid-area:actions;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);}/*!sc*/ .ffkqe[data-size="small"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .fDhSWy{margin-bottom:16px;}/*!sc*/ .kpqASb{width:auto;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ @media screen and (min-width:544px){.kpqASb{width:auto;}}/*!sc*/ @media screen and (min-width:768px){.kpqASb{width:256px;}}/*!sc*/ @media screen and (min-width:1012px){.kpqASb{width:296px;}}/*!sc*/ .ksIBib{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}/*!sc*/ .jvMkCn{font-size:16px;margin-bottom:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;}/*!sc*/ @media screen and (min-width:544px){.jvMkCn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:768px){.jvMkCn{display:none;}}/*!sc*/ @media screen and (min-width:1012px){.jvMkCn{display:none;}}/*!sc*/ .kDreLw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding-top:4px;margin-bottom:16px;position:relative;width:100%;}/*!sc*/ .kDreLw:after{content:"";position:absolute;height:1px;bottom:-8px;left:8px;background-color:var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));width:calc(100% - 8px);}/*!sc*/ .bwxuvd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-bottom:8px;}/*!sc*/ .jVkRst{top:4px;left:8px;font-size:12px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));position:relative;pointer-events:none;}/*!sc*/ .flpEwB{height:0px;padding:0;margin:0;border:0;visibility:hidden;}/*!sc*/ .fUGKEb{width:100%;padding:0;}/*!sc*/ .gMMrYE{margin-left:8px;margin-top:4px;}/*!sc*/ .fBPJxs{padding-left:8px;padding-right:4px;width:100%;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"gjuRkX,hzqxma,fGkgDM,ehzXEi,fHrHav,krPEL,clYxDg,lhNOUb,YJa-Di,kuCWTy,vcYPI,cQpCwc,lkyTpy,kcuWpx,eshSer,cySYaL,exQbKw,emuTBT,iEncmA,fHWHoy,htJDeH,hVVawZ,jGasrR,foDGRB,gOJubP,gxAvdY,dkqtNN,hfKjHv,jonlJW,bSTcOH,gRssIw,bDlPR,crMLA-D,bjwYme,jSpDiO,fnEhwD,iKiGfw,koxHLL,dqmClk,cRhwji,bJQcYY,bjFvWy,kgTqOk,izrTon,kpoUe,ezcJRX,dnyPuu,ffkqe,fDhSWy,kpqASb,ksIBib,jvMkCn,kDreLw,bwxuvd,jVkRst,flpEwB,fUGKEb,gMMrYE,fBPJxs,"}/*!sc*/ .bvWSyv{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));margin-left:4px;}/*!sc*/ .bvWSyv:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .bvWSyv:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .bvWSyv:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .bvWSyv:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .bvWSyv:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .bvWSyv:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .bvWSyv:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .hWqAbU:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .hWqAbU:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .hWqAbU:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .hWqAbU:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .hWqAbU:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .hWqAbU:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .hWqAbU:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .hpGcnS{font-size:12px;padding-left:8px;padding-right:8px;margin-bottom:8px;margin-top:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:block;}/*!sc*/ .hpGcnS:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .hpGcnS:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .hpGcnS:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .hpGcnS:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .hpGcnS:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .hpGcnS:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .hpGcnS:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"bvWSyv,hWqAbU,hpGcnS,"}/*!sc*/ .jOyaRH{display:none;}/*!sc*/ .jOyaRH[popover]{position:absolute;padding:0.5em 0.75em;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:auto;-webkit-clip:auto;clip:auto;white-space:normal;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;border:0;opacity:0;max-width:250px;inset:auto;overflow:visible;}/*!sc*/ .jOyaRH[popover]:popover-open{display:block;}/*!sc*/ .jOyaRH[popover].\:popover-open{display:block;}/*!sc*/ @media (forced-colors:active){.jOyaRH{outline:1px solid transparent;}}/*!sc*/ .jOyaRH::after{position:absolute;display:block;right:0;left:0;height:var(--overlay-offset,0.25rem);content:'';}/*!sc*/ .jOyaRH[data-direction='n']::after,.jOyaRH[data-direction='ne']::after,.jOyaRH[data-direction='nw']::after{top:100%;}/*!sc*/ .jOyaRH[data-direction='s']::after,.jOyaRH[data-direction='se']::after,.jOyaRH[data-direction='sw']::after{bottom:100%;}/*!sc*/ .jOyaRH[data-direction='w']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;left:100%;}/*!sc*/ .jOyaRH[data-direction='e']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;right:100%;margin-left:-8px;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .jOyaRH:popover-open,.jOyaRH:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .jOyaRH.\:popover-open,.jOyaRH.\:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .gvbHuF{display:none;position:absolute;visibility:hidden;}/*!sc*/ .gvbHuF[popover]{position:absolute;padding:0.5em 0.75em;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:auto;-webkit-clip:auto;clip:auto;white-space:normal;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;border:0;opacity:0;max-width:250px;inset:auto;overflow:visible;}/*!sc*/ .gvbHuF[popover]:popover-open{display:block;}/*!sc*/ .gvbHuF[popover].\:popover-open{display:block;}/*!sc*/ @media (forced-colors:active){.gvbHuF{outline:1px solid transparent;}}/*!sc*/ .gvbHuF::after{position:absolute;display:block;right:0;left:0;height:var(--overlay-offset,0.25rem);content:'';}/*!sc*/ .gvbHuF[data-direction='n']::after,.gvbHuF[data-direction='ne']::after,.gvbHuF[data-direction='nw']::after{top:100%;}/*!sc*/ .gvbHuF[data-direction='s']::after,.gvbHuF[data-direction='se']::after,.gvbHuF[data-direction='sw']::after{bottom:100%;}/*!sc*/ .gvbHuF[data-direction='w']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;left:100%;}/*!sc*/ .gvbHuF[data-direction='e']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;right:100%;margin-left:-8px;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .gvbHuF:popover-open,.gvbHuF:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .gvbHuF.\:popover-open,.gvbHuF.\:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .dFtvlV{display:none;position:absolute;visibility:visible;}/*!sc*/ .dFtvlV[popover]{position:absolute;padding:0.5em 0.75em;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:auto;-webkit-clip:auto;clip:auto;white-space:normal;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;border:0;opacity:0;max-width:250px;inset:auto;overflow:visible;}/*!sc*/ .dFtvlV[popover]:popover-open{display:block;}/*!sc*/ .dFtvlV[popover].\:popover-open{display:block;}/*!sc*/ @media (forced-colors:active){.dFtvlV{outline:1px solid transparent;}}/*!sc*/ .dFtvlV::after{position:absolute;display:block;right:0;left:0;height:var(--overlay-offset,0.25rem);content:'';}/*!sc*/ .dFtvlV[data-direction='n']::after,.dFtvlV[data-direction='ne']::after,.dFtvlV[data-direction='nw']::after{top:100%;}/*!sc*/ .dFtvlV[data-direction='s']::after,.dFtvlV[data-direction='se']::after,.dFtvlV[data-direction='sw']::after{bottom:100%;}/*!sc*/ .dFtvlV[data-direction='w']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;left:100%;}/*!sc*/ .dFtvlV[data-direction='e']::after{position:absolute;display:block;height:100%;width:8px;content:'';bottom:0;right:100%;margin-left:-8px;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .dFtvlV:popover-open,.dFtvlV:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .dFtvlV.\:popover-open,.dFtvlV.\:popover-open::before{-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ data-styled.g16[id="Tooltip__StyledTooltip-sc-e45c7z-0"]{content:"jOyaRH,gvbHuF,dFtvlV,"}/*!sc*/ .eoXvfR{margin:0;padding-inline-start:0;padding-top:0;padding-bottom:0;}/*!sc*/ data-styled.g18[id="List__ListBox-sc-1x7olzq-0"]{content:"eoXvfR,"}/*!sc*/ .hlWueK{position:relative;color:var(--fgColor-default,var(--color-fg-default,#1F2328));padding:16px;border-style:solid;border-width:1px;border-radius:6px;margin-top:0;color:var(--fgColor-default,var(--color-fg-default,#1F2328));background-color:var(--bgColor-attention-muted,var(--color-attention-subtle,#fff8c5));border-color:var(--borderColor-attention-muted,var(--color-attention-muted,rgba(212,167,44,0.4)));margin-top:16px;}/*!sc*/ .hlWueK p:last-child{margin-bottom:0;}/*!sc*/ .hlWueK svg{margin-right:8px;}/*!sc*/ .hlWueK svg{color:var(--fgColor-attention,var(--color-attention-fg,#9a6700));}/*!sc*/ data-styled.g60[id="Flash__StyledFlash-sc-hzrzfc-0"]{content:"hlWueK,"}/*!sc*/ .hTWZgt{margin-right:4px;}/*!sc*/ data-styled.g61[id="Octicon-sc-9kayk9-0"]{content:"hTWZgt,"}/*!sc*/ .gcWyXp{font-size:inherit;}/*!sc*/ data-styled.g72[id="sc-aXZVg"]{content:"gcWyXp,"}/*!sc*/ .kIpASS{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:999px;cursor:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-weight:600;font-family:inherit;-webkit-text-decoration:none;text-decoration:none;max-width:100%;position:relative;white-space:nowrap;font-size:12px;height:20px;line-height:20px;padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;--label-r:14;--label-g:138;--label-b:22;--label-h:124;--label-s:82;--label-l:30;--perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));--border-color:var(--borderColor-muted,var(--color-border-subtle));position:relative;min-width:0;overflow:hidden;--lightness-threshold:0.453;--border-threshold:0.96;--background-alpha:0.20;--border-alpha:max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));background:rgb(var(--label-r),var(--label-g),var(--label-b));color:hsl(0deg,0%,calc(var(--lightness-switch) * 100%));border-width:1px;border-style:solid;border-color:hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));}/*!sc*/ .bbnHIf{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:999px;cursor:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-weight:600;font-family:inherit;-webkit-text-decoration:none;text-decoration:none;max-width:100%;position:relative;white-space:nowrap;font-size:12px;height:20px;line-height:20px;padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;--label-r:83;--label-g:25;--label-b:231;--label-h:257;--label-s:81;--label-l:50;--perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));--border-color:var(--borderColor-muted,var(--color-border-subtle));position:relative;min-width:0;overflow:hidden;--lightness-threshold:0.453;--border-threshold:0.96;--background-alpha:0.20;--border-alpha:max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));background:rgb(var(--label-r),var(--label-g),var(--label-b));color:hsl(0deg,0%,calc(var(--lightness-switch) * 100%));border-width:1px;border-style:solid;border-color:hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));}/*!sc*/ .llLMmH{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:999px;cursor:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-weight:600;font-family:inherit;-webkit-text-decoration:none;text-decoration:none;max-width:100%;position:relative;white-space:nowrap;font-size:12px;height:20px;line-height:20px;padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;--label-r:197;--label-g:222;--label-b:245;--label-h:209;--label-s:71;--label-l:87;--perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));--border-color:var(--borderColor-muted,var(--color-border-subtle));position:relative;min-width:0;overflow:hidden;--lightness-threshold:0.453;--border-threshold:0.96;--background-alpha:0.20;--border-alpha:max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));background:rgb(var(--label-r),var(--label-g),var(--label-b));color:hsl(0deg,0%,calc(var(--lightness-switch) * 100%));border-width:1px;border-style:solid;border-color:hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));}/*!sc*/ data-styled.g111[id="TokenBase__StyledTokenBase-sc-a4e18a14-0"]{content:"kIpASS,bbnHIf,llLMmH,"}/*!sc*/ .ljslTk{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:0;font:inherit;margin:0;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;color:currentColor;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ljslTk:is(a,button,[tabIndex='0']){cursor:pointer;}/*!sc*/ .ljslTk:is(a,button,[tabIndex='0'])::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}/*!sc*/ data-styled.g112[id="TokenTextContainer-sc-eef9053-0"]{content:"ljslTk,"}/*!sc*/ .dbMnOz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}/*!sc*/ data-styled.g117[id="Timeline__ToggleTimeline-sc-1nkzbnu-0"]{content:"dbMnOz,"}/*!sc*/ .hohGHO{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;line-height:16px;color:var(--bgColor-default,var(--color-canvas-default,#ffffff));text-align:center;border-radius:100px;background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:14px;white-space:nowrap;}/*!sc*/ data-styled.g127[id="StateLabel__StateLabelBase-sc-qthdln-0"]{content:"hohGHO,"}/*!sc*/ </style><!--$--><!--$--><div class="Box-sc-g0xbh4-0 gjuRkX"><div data-testid="issue-viewer-container" class="Box-sc-g0xbh4-0 hzqxma"><!--$--><div class="Box-sc-g0xbh4-0 fGkgDM IssueViewer-module__issueViewerContainer--flht4"><!--$--><div class="Box-sc-g0xbh4-0 ehzXEi"><div aria-label="Header" role="region" data-testid="issue-header"><div class="Box-sc-g0xbh4-0 fHrHav HeaderViewer-module__headerContainer--p0Eo1 "><div class="Box-sc-g0xbh4-0 krPEL" data-component="TitleArea" data-size-variant="medium"><h1 class="Box-sc-g0xbh4-0 clYxDg prc-Heading-Heading-6CmGO" data-component="PH_Title" data-hidden="false" style="--custom-font-size:26px,26px,var(--text-title-size-large, 32px),var(--text-title-size-large, 32px);--custom-line-height:1;--custom-font-weight:normal"><bdi class="Box-sc-g0xbh4-0 lhNOUb markdown-title" data-testid="issue-title">[css-color-hdr] CSS syntax for HDR colors parameterized by headroom</bdi> <span class="Box-sc-g0xbh4-0 YJa-Di">#11616</span></h1></div><div class="Box-sc-g0xbh4-0 kuCWTy"><div class="Box-sc-g0xbh4-0 vcYPI"><div class="Box-sc-g0xbh4-0 cQpCwc"><div class="Box-sc-g0xbh4-0 lkyTpy"><a type="button" href="/login?return_to=" target="_blank" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="primary" aria-describedby=":R4ih9b:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">New issue</span></span></a></div><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Reqh9b:-loading-announcement" aria-labelledby=":Rqh9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="Tooltip__StyledTooltip-sc-e45c7z-0 jOyaRH CopyToClipboardButton-module__tooltip--Dq1IB" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":Rqh9b:">Copy link</span></div></div></div><div class="Box-sc-g0xbh4-0 kcuWpx" data-component="PH_Actions"><div class="Box-sc-g0xbh4-0 cQpCwc"><div class="Box-sc-g0xbh4-0 lkyTpy"><a type="button" href="/login?return_to=" target="_blank" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="primary" aria-describedby=":R4kh9b:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">New issue</span></span></a></div><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Resh9b:-loading-announcement" aria-labelledby=":Rsh9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="Tooltip__StyledTooltip-sc-e45c7z-0 jOyaRH CopyToClipboardButton-module__tooltip--Dq1IB" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":Rsh9b:">Copy link</span></div></div></div></div></div><div class="Box-sc-g0xbh4-0 ehzXEi"><div data-testid="issue-metadata-fixed" class="Box-sc-g0xbh4-0 eshSer"><div class="Box-sc-g0xbh4-0 cySYaL"><div class="Box-sc-g0xbh4-0 exQbKw"><div><span data-testid="header-state" class="StateLabel__StateLabelBase-sc-qthdln-0 hohGHO"><svg focusable="false" aria-label="Issue" class="Octicon-sc-9kayk9-0 hTWZgt" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg>Open</span></div><!--$--><!--/$--></div></div></div></div><div data-testid="issue-metadata-sticky" class="Box-sc-g0xbh4-0 emuTBT js-notification-shelf-offset-top"><div class="Box-sc-g0xbh4-0 ehzXEi"><div class="Box-sc-g0xbh4-0 iEncmA"><div><span data-testid="header-state" class="StateLabel__StateLabelBase-sc-qthdln-0 hohGHO"><svg focusable="false" aria-label="Issue" class="Octicon-sc-9kayk9-0 hTWZgt" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg>Open</span></div><div class="Box-sc-g0xbh4-0 fHWHoy"><div class="Box-sc-g0xbh4-0 htJDeH"><a class="Box-sc-g0xbh4-0 hVVawZ prc-Link-Link-85e08" href="#top"><bdi class="Box-sc-g0xbh4-0 markdown-title" data-testid="issue-title-sticky">[css-color-hdr] CSS syntax for HDR colors parameterized by headroom</bdi></a><span class="Text__StyledText-sc-17v1xeu-0 bvWSyv">#11616</span></div><div class="Box-sc-g0xbh4-0 jGasrR"><!--$--><!--/$--></div></div><div><div class="Box-sc-g0xbh4-0 cQpCwc"><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":R77i9b:-loading-announcement" aria-labelledby=":R7i9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="Tooltip__StyledTooltip-sc-e45c7z-0 jOyaRH CopyToClipboardButton-module__tooltip--Dq1IB" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":R7i9b:">Copy link</span></div></div></div></div></div><div class="IssueMetadata-module__issueMetadata--KKAau"><div class="IssueMetadata-module__metadata--NFeDC"><div class="IssueMetadata-module__metadataTitle--QU1pi">Labels</div><div class="IssueMetadata-module__metadataValue--wfbKs"><div tabindex="-1" class="Box-sc-g0xbh4-0 foDGRB"><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22Closed%20Accepted%20by%20CSSWG%20Resolution%22" muted="" aria-describedby=":Rqq9b:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 kIpASS"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">Closed Accepted by CSSWG Resolution</span></span></span><span class="sr-only" id="MDU6TGFiZWwzOTU3ODU5Njk=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":Rqq9b:"></span><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22Needs%20Edits%22" muted="" aria-describedby=":R1aq9b:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 bbnHIf"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">Needs Edits</span></span></span><span class="sr-only" id="MDU6TGFiZWw0Njk0MjY3MDQ=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R1aq9b:"></span><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22css-color-hdr%22" muted="" aria-describedby=":R1qq9b:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 llLMmH"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">css-color-hdr</span></span></span><span class="sr-only" id="MDU6TGFiZWwyMzExNzY4MjQy-tooltip">CSS HDR extension</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="CSS HDR extension" role="tooltip" aria-hidden="true" id=":R1qq9b:">CSS HDR extension</span></div></div></div></div><div class="Box-sc-g0xbh4-0 gxAvdY"></div><div class="Box-sc-g0xbh4-0 dkqtNN"><div class="Box-sc-g0xbh4-0 hfKjHv"></div></div><div class="Box-sc-g0xbh4-0 ehzXEi"><div class="Box-sc-g0xbh4-0 jonlJW"><div class="Box-sc-g0xbh4-0 bSTcOH"><div data-testid="issue-viewer-issue-container"><div class="Box-sc-g0xbh4-0 gRssIw"><a class="Avatar-module__avatarLink--S36bm Avatar-module__avatarOuter--MZJZH prc-Link-Link-85e08" href="/svgeesus" data-hovercard-url="/users/svgeesus/hovercard" aria-label="@svgeesus's profile"><img data-component="Avatar" class="Avatar-module__issueViewerAvatar--grA_h prc-Avatar-Avatar-ZRS-m" alt="@svgeesus" width="40" height="40" style="--avatarSize-regular:40px" src="https://avatars.githubusercontent.com/u/2506926?u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f&v=4&size=80" data-testid="github-avatar"/></a><div data-testid="issue-body" class="Box-sc-g0xbh4-0 bDlPR react-issue-body" data-hpc="true"><h2 class="sr-only">Description</h2><div class="Box-sc-g0xbh4-0 crMLA-D"><div class="Box-sc-g0xbh4-0 bjwYme"><div class="Box-sc-g0xbh4-0 jSpDiO"><div class="Box-sc-g0xbh4-0 fnEhwD ActivityHeader-module__activityHeader--Flalv"><div class="Box-sc-g0xbh4-0 iKiGfw Avatar-module__avatarInner--rVuJD"><a class="Avatar-module__avatarLink--S36bm prc-Link-Link-85e08" href="/svgeesus" data-hovercard-url="/users/svgeesus/hovercard" aria-label="@svgeesus's profile"><img data-component="Avatar" class="prc-Avatar-Avatar-ZRS-m" alt="@svgeesus" width="24" height="24" style="--avatarSize-regular:24px" src="https://avatars.githubusercontent.com/u/2506926?u=6995fd268e56090a8c2e9df31e80ee6d10cfa70f&v=4&size=48" data-testid="github-avatar"/></a></div><div class="Box-sc-g0xbh4-0 koxHLL ActivityHeader-module__narrowViewportWrapper--Hjl75"><div class="Box-sc-g0xbh4-0 dqmClk"><a class="Box-sc-g0xbh4-0 cRhwji prc-Link-Link-85e08" href="https://github.com/svgeesus" data-hovercard-url="/users/svgeesus/hovercard" data-testid="issue-body-header-author">svgeesus</a></div><div class="Box-sc-g0xbh4-0 bJQcYY ActivityHeader-module__footer--FVHp7"><span>opened </span><a class="Box-sc-g0xbh4-0 bjFvWy prc-Link-Link-85e08" href="https://github.com/w3c/csswg-drafts/issues/11616#issue-2821630230" data-testid="issue-body-header-link"><relative-time sx="[object Object]" class="sc-aXZVg gcWyXp">on <!-- -->Jan 30, 2025</relative-time></a></div></div><div class="Box-sc-g0xbh4-0 kgTqOk ActivityHeader-module__narrowViewportWrapper--Hjl75"><div class="Box-sc-g0xbh4-0 izrTon ActivityHeader-module__edits--LwHTE"></div><div class="Box-sc-g0xbh4-0 kpoUe"><div class="Box-sc-g0xbh4-0 ezcJRX"></div><div class="Box-sc-g0xbh4-0 dnyPuu"><button data-component="IconButton" type="button" aria-label="Issue body actions" aria-haspopup="true" aria-expanded="false" tabindex="0" class="Box-sc-g0xbh4-0 ffkqe prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" data-variant="invisible" aria-describedby=":R15bd5db:-loading-announcement" id=":R15bd5db:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div></div></div><div class="IssueBodyViewer-module__IssueBody--MXyFt"><div data-testid="markdown-body" data-team-hovercards-enabled="true" class="markdown-body" data-turbolinks="false"><div class="Box-sc-g0xbh4-0 markdown-body NewMarkdownViewer-module__safe-html-box--cRsz0"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ccameron-chromium/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ccameron-chromium">@ccameron-chromium</a> <a href="https://github.com/ccameron-chromium/ColorWeb-CG/blob/css_color_hdr/color_hdr_function.md">suggested</a> a mechanism for allowing CSS colors to be displayed in HDR, which copes with displays having different amounts of HDR headroom.</p> <p dir="auto">It also establishes, in a backwards-and-forwards compatible way, the convention that CSS colors are to be gamut mapped to the SDR gamut of the display, unless they explicitly opt-in to a potentially-higher-headroom gamut via the new syntax.</p></div></div><div class="IssueBodyViewer-module__IssueBodyTaskList--r4XEH"><!--$--><div role="toolbar" aria-label="Reactions" class="d-flex gap-1 flex-wrap"></div><!--/$--></div></div></div></div></div></div></div><div data-testid="issue-viewer-comments-container" class="react-comments-container"><div class="Box-sc-g0xbh4-0 fDhSWy"><!--$--><h2 class="sr-only">Activity</h2><div data-testid="issue-timeline-container" class="Timeline__ToggleTimeline-sc-1nkzbnu-0 dbMnOz"></div><div class="Flash__StyledFlash-sc-hzrzfc-0 hlWueK"><a href="/signup?return_to=" data-jump-to-bottom-target="true" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="primary" aria-describedby="signed-out-banner-sign-up-loading-announcement" id="signed-out-banner-sign-up"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">Sign up for free</span></span></a><span><strong> <!-- -->to join this conversation on GitHub.</strong> <!-- -->Already have an account?<!-- --> </span><a class="prc-Link-Link-85e08" href="/login?return_to=">Sign in to comment</a></div><!--/$--></div></div></div><div data-testid="issue-viewer-metadata-container" class="Box-sc-g0xbh4-0 kpqASb"><div data-testid="issue-viewer-metadata-pane" class="Box-sc-g0xbh4-0 ksIBib"><h2 class="Box-sc-g0xbh4-0 jvMkCn prc-Heading-Heading-6CmGO">Metadata</h2><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Assignees</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">No one assigned</span><div class="Box-sc-g0xbh4-0 flpEwB"><ul class="List__ListBox-sc-1x7olzq-0 eoXvfR"></ul></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Labels</h3></div></div><div class="Box-sc-g0xbh4-0 fUGKEb"><div tabindex="-1" data-testid="issue-labels" class="Box-sc-g0xbh4-0 foDGRB"><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22Closed%20Accepted%20by%20CSSWG%20Resolution%22" muted="" aria-describedby=":R1hadb:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 kIpASS"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">Closed Accepted by CSSWG Resolution</span></span></span><span class="sr-only" id="MDU6TGFiZWwzOTU3ODU5Njk=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R1hadb:"></span><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22Needs%20Edits%22" muted="" aria-describedby=":R2hadb:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 bbnHIf"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">Needs Edits</span></span></span><span class="sr-only" id="MDU6TGFiZWw0Njk0MjY3MDQ=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R2hadb:"></span><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22css-color-hdr%22" muted="" aria-describedby=":R3hadb:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 llLMmH"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">css-color-hdr</span></span></span><span class="sr-only" id="MDU6TGFiZWwyMzExNzY4MjQy-tooltip">CSS HDR extension</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="CSS HDR extension" role="tooltip" aria-hidden="true" id=":R3hadb:">CSS HDR extension</span></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Type</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">No type</span><div class="Box-sc-g0xbh4-0 flpEwB"><div class="Box-sc-g0xbh4-0 gMMrYE"><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div></div></div><!--$--><div data-testid="sidebar-projects-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Projects</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">No projects</span><div class="Box-sc-g0xbh4-0 flpEwB"><div class="Box-sc-g0xbh4-0 fBPJxs"></div></div></div></div><!--/$--><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Milestone</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">No milestone</span><div class="Box-sc-g0xbh4-0 flpEwB"><ul class="List__ListBox-sc-1x7olzq-0 eoXvfR"><div class="Box-sc-g0xbh4-0 flpEwB"></div></ul></div></div></div><!--$--><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Relationships</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">None yet</span><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Development</h3></div><span class="Text__StyledText-sc-17v1xeu-0 hpGcnS">No branches or pull requests</span><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div><!--/$--><h2 class="sr-only prc-Heading-Heading-6CmGO">Issue actions</h2><ul class="List__ListBox-sc-1x7olzq-0 eoXvfR OptionsSection-module__ActionListOverrides--M6klF"></ul></div></div></div></div><!--/$--></div><!--/$--></div></div><!--/$--><!--/$--><script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-app> </turbo-frame> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>