CINXE.COM
[css-values] Inconsistent position serialization · Issue #2274 · 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-605318cbe3a1.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-bd1cb5575fff.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-52a2075571c3.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-bf3988586de0.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-27a437876a92.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-97f0dc959f8f.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-708e3a93215a.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-9217138a8d5b.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-4397d91bdb49.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.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-21a7f868f707.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":["a11y_quote_reply_fix","contentful_lp_optimize_image","contentful_lp_hero_video_cover_image","copilot_immersive_file_preview","copilot_immersive_plugin_system","copilot_new_references_ui","copilot_chat_repo_custom_instructions_preview","copilot_chat_immersive_subthreading","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_spaces_multi_file_picker","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","insert_before_patch","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","sample_network_conn_type","swp_enterprise_contact_form","site_copilot_extensions_ga","site_copilot_extensions_hero","site_copilot_vscode_link_update","site_proxima_australia_update","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-152fc5801d5c.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_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_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_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-e73c59eabd5a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-a71c0dc18ea2.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-2a55124d5c52.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-768abe60b1f8.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-3e000c5d31a9.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-21948f72ce0b.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-e429cff6ceb1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-3852665e5a2d.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-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-d4f7d0473d87.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-e519a5f595dd.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_es_mjs-dd1d3ea6a436.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_focus-visible_dist_focus-visible_js-node_modules_fzy_js_index_js-node_mo-39e45c-b30cde6f79f8.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_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_tanstack_react-query_b-a9a485-0bb0ea04f1cd.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-34345cb18aac.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-9bdddaf19a27.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_date-picker_date-picker_ts-ui_packages_github-avatar_GitHubAvatar_tsx-2547a2db6909.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-1e3001b48338.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-86a873dd8971.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-6fb16bd0f3b0.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-709d5b6b1e7a.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-10268c2d7dda.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_issue-create_dialog_CreateIssueDialogEntry_tsx-67420a47e110.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-e1aba2403cb2.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_signed-commit-badge_index_ts-ui_packages_use-navigate_use-navigate_ts-7d3b385f92f0.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-af5b653bb52a.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-09c78630cced.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-952a1ef3df4d.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-fb883a-355e7a6de3bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/issues-react-d95b803d0ded.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.06ef4542f4eb3071e82e.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.e62001f509f25bc4e310.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/issues-react.b295e2e7b59010ee91e5.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-58a0c58bfee4.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>[css-values] Inconsistent position serialization · Issue #2274 · 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="95EC:1D0A34:E27A53:1085285:67CAF32E" data-pjax-transient="true"/><meta name="html-safe-nonce" content="a5405e5418bbdbb7b32562d6d55cca9c80566780cf8c3533a5817086e4234312" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5NUVDOjFEMEEzNDpFMjdBNTM6MTA4NTI4NTo2N0NBRjMyRSIsInZpc2l0b3JfaWQiOiIzNzg4MjM4MjQ3MTgxMzQ5Njc4IiwicmVnaW9uX2VkZ2UiOiJzb3V0aGVhc3Rhc2lhIiwicmVnaW9uX3JlbmRlciI6InNvdXRoZWFzdGFzaWEifQ==" data-pjax-transient="true"/><meta name="visitor-hmac" content="ba48b7ff2b19811c1f76add028a99520c44d4130dd442dcdf249739156443b20" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="issue:294260344" 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="The position spec mentions The canonical order when serializing is the horizontal component followed by the vertical component. but does not discuss if the serialization should contain the author's supplied keywords or if they should be ..."> <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/2274/issue_layout" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/432e30e8dfd3c376d638a1031f725156b9652f70f21bdee059b40c9ad1ee96df/w3c/csswg-drafts/issues/2274" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="[css-values] Inconsistent position serialization · Issue #2274 · w3c/csswg-drafts" /><meta name="twitter:description" content="The position spec mentions The canonical order when serializing is the horizontal component followed by the vertical component. but does not discuss if the serialization should contain the author&#..." /> <meta property="og:image" content="https://opengraph.githubassets.com/432e30e8dfd3c376d638a1031f725156b9652f70f21bdee059b40c9ad1ee96df/w3c/csswg-drafts/issues/2274" /><meta property="og:image:alt" content="The position spec mentions The canonical order when serializing is the horizontal component followed by the vertical component. but does not discuss if the serialization should contain the author's..." /><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-values] Inconsistent position serialization · Issue #2274 · w3c/csswg-drafts" /><meta property="og:url" content="https://github.com/w3c/csswg-drafts/issues/2274" /><meta property="og:description" content="The position spec mentions The canonical order when serializing is the horizontal component followed by the vertical component. but does not discuss if the serialization should contain the author's..." /><meta property="og:author:username" content="ewilligers" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="3191ee6a76a196f3117a67beb318e9249874e42eac3b1b018fb7fba99e5c9e0a" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="1387756d457e2f7c930482f0374bab8f35110d772491ea950a7236d69098c3a6" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="a30977995814647d0827c66025b8a8c5cb8722c27765b03e9e34bf066d054640" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="bf1994a47c057885e9d9b49c983c2d0f7ef13a03d758ea87fa339fbdac570462" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="voltron-timing" value="669"> <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-ac448fe050d6.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-730dca81d0a2.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%2F2274" 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/2274","user_id":null}}" data-hydro-click-hmac="86b48e0f56e8b19b388d618f0cf9cc81bd7f7381dfb3716cb623104a5d54011b" 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":"copilot_for_business","context":"enterprise","tag":"link","label":"copilot_for_business_link_enterprise_navbar"}" href="/features/copilot/copilot-business"> <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">Copilot for business</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="XoUG270FBYZMsBq_txGeIgOLMhlYtQhEXQ7L5mqM2XWO0RINEgekJ4jMrE-tzj1cSDd2yvrN3PAAlik3MprMJQ" 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-ab2e71d4-f221-4317-a0b7-8123bdae8d10" 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-ab2e71d4-f221-4317-a0b7-8123bdae8d10" 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="Zq6Epz2It0JygXJffm/ZegmH1vQUQipoGyhyim0c+dKPJHf1OuQX4yI9i3kUU7kC1p7EnYFkbqBWGoL/9M+Saw==" /> <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="+j1sRF/1ebTQzL/Das18615akvGmhhr6pQcd+aUodzjumZd8iumVoOqlCgfusvq0C5u/6jAvyi7qcX0gGXJcFw==" /> <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="BrIks1bvyYzbcYYN0fdN8yz8Ohivjz69QMlw7FtuogfczYxTEJHL+xDK6q+UJqI0QYW7qr7IbX5fm5ClqETnDA==" /> </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%2F2274" 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/2274","user_id":null}}" data-hydro-click-hmac="86b48e0f56e8b19b388d618f0cf9cc81bd7f7381dfb3716cb623104a5d54011b" 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/2274","user_id":null}}" data-hydro-click-hmac="86b48e0f56e8b19b388d618f0cf9cc81bd7f7381dfb3716cb623104a5d54011b" 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-f375da5b-5310-4aa0-8d09-10e279804727" aria-labelledby="tooltip-7c2bb075-a896-4022-9661-43083dd6ce62" 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-7c2bb075-a896-4022-9661-43083dd6ce62" for="icon-button-f375da5b-5310-4aa0-8d09-10e279804727" 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/2274","user_id":null}}" data-hydro-click-hmac="b83608bd45f78a37270299c0442e5739b380526c74d6a8af3821976247756c30" 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-a7f4e446-08a7-42a4-b3a8-0b54ca593f54" 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/2274","user_id":null}}" data-hydro-click-hmac="2844e791a33cb425ad232ef977f0c848c6b203de068ce5b74eb0133f9d818e63" 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="694" data-view-component="true" class="Counter">694</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/2274","user_id":null}}" data-hydro-click-hmac="b3c490902a166429af43c44c0be0291361a21e38d01c4f95b7c72dd88e4fa1e0" 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="4604 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="4,604" 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,728" 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-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-button" popovertarget="action-menu-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-overlay" aria-controls="action-menu-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-list" aria-haspopup="true" aria-labelledby="tooltip-fb612502-864f-4eb5-a434-8a4f58b17ff8" 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-fb612502-864f-4eb5-a434-8a4f58b17ff8" for="action-menu-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-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-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-overlay" anchor="action-menu-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-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-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-button" id="action-menu-4ae1e4b1-fa7f-4499-ab10-e2fbdd2dab64-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-ce3eeda7-5cdb-4bc9-b96f-0d73ed71846d" 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-48dbd0d7-f3c1-4123-bead-61b57a3ebbdf" 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-0bde7b96-d3d5-46e8-8dff-64618bde8baf" 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-ddec5649-f185-4071-8280-01d4aa37d7a8" 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-d8bb59cc-68d2-4c78-bfe8-afebf171838e" 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-3ac1f593-cfa2-49f4-8138-94b8c7d04e41" 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-0842a125-9b09-4aa9-aa00-09cdfbe3e10f" 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/2274" 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":"25751ac4479a4b558a56d35931fdc2e0","queryName":"IssueViewerViewQuery","variables":{"id":"repository","number":2274,"owner":"w3c","repo":"csswg-drafts"},"result":{"data":{"repository":{"isOwnerEnterpriseManaged":false,"issue":{"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","updatedAt":"2023-11-22T21:26:04Z","title":"[css-values] Inconsistent position serialization","number":2274,"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-values] Inconsistent position serialization","url":"https://github.com/w3c/csswg-drafts/issues/2274","viewerCanUpdateNext":false,"issueType":null,"state":"CLOSED","stateReason":"COMPLETED","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":"MDU6TGFiZWwzODE4ODgyMzA=","color":"c5def5","name":"css-backgrounds-4","nameHTML":"css-backgrounds-4","description":null,"url":"https://github.com/w3c/csswg-drafts/labels/css-backgrounds-4","__typename":"Label"},"cursor":"Mg"},{"node":{"id":"MDU6TGFiZWw0MTAzMDIyMzQ=","color":"c5def5","name":"css-values-4","nameHTML":"css-values-4","description":"Current Work","url":"https://github.com/w3c/csswg-drafts/labels/css-values-4","__typename":"Label"},"cursor":"Mw"},{"node":{"id":"MDU6TGFiZWwzODE4OTI0MDk=","color":"c5def5","name":"cssom-1","nameHTML":"cssom-1","description":"Current Work","url":"https://github.com/w3c/csswg-drafts/labels/cssom-1","__typename":"Label"},"cursor":"NA"},{"node":{"id":"MDU6TGFiZWw2NjU0MzM1MDE=","color":"5319e7","name":"Needs Testcase (WPT)","nameHTML":"Needs Testcase (WPT)","description":null,"url":"https://github.com/w3c/csswg-drafts/labels/Needs%20Testcase%20%28WPT%29","__typename":"Label"},"cursor":"NQ"},{"node":{"id":"LA_kwDOAI0trM7LAwL8","color":"BFDADC","name":"topic: serialization","nameHTML":"topic: serialization","description":"","url":"https://github.com/w3c/csswg-drafts/labels/topic%3A%20serialization","__typename":"Label"},"cursor":"Ng"}],"pageInfo":{"endCursor":"Ng","hasNextPage":false}},"__isNode":"Issue","assignees":{"nodes":[]},"milestone":null,"databaseId":294260344,"viewerDidAuthor":false,"locked":false,"author":{"__typename":"User","__isActor":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg==","profileUrl":"https://github.com/ewilligers","avatarUrl":"https://avatars.githubusercontent.com/u/929206?u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3\u0026v=4"},"__isComment":"Issue","body":"The `position` [spec](https://drafts.csswg.org/css-values/#position) mentions\r\n\r\n\u003e The canonical order when serializing is the horizontal component followed by the vertical component.\r\n\r\nbut does not discuss if the serialization should contain the author's supplied keywords or if they should be converted to equivalent percentages.\r\n\r\nThe spec also doesn't mention if 'center' should be added or removed when serializing. (Edge and Safari sometimes serialize `center center` as `center`.)\r\n\r\nBrowsers are currently inconsistent with themselves and each other:\r\n\r\n\r\n| 10% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 10% center | 10% | 10% center | 10% center | \r\n| background-position: `\u003cbg-position\u003e` | 10% center | 10% | 10% center | 10% center | \r\n| object-position: `\u003cposition\u003e` | 10% center | 10% 50% | 10% center | 10% center | \r\n| perspective-origin: `\u003cposition\u003e` | 10% center | 10% 50% | 10% center | 10% center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 10% 50% | 10% | 10% | 10% 50% | \r\n\r\n| 20% 30px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 20% 30px | 20% 30px | 20% 30px | 20% 30px | \r\n| background-position: `\u003cbg-position\u003e` | 20% 30px | 20% 30px | 20% 30px | 20% 30px | \r\n| object-position: `\u003cposition\u003e` | 20% 30px | 20% 30px | 20% 30px | 20% 30px | \r\n| perspective-origin: `\u003cposition\u003e` | 20% 30px | 20% 30px | 20% 30px | 20% 30px | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 20% 30px | 20% 30px | 20% 30px | 20% 30px | \r\n\r\n| 30px center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 30px center | 30px | 30px center | 30px center | \r\n| background-position: `\u003cbg-position\u003e` | 30px center | 30px | 30px center | 30px center | \r\n| object-position: `\u003cposition\u003e` | 30px center | 30px 50% | 30px center | 30px center | \r\n| perspective-origin: `\u003cposition\u003e` | 30px center | 30px center | 30px center | 30px center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 30px 50% | 30px center | 30px center | 30px 50% | \r\n\r\n| 40px top | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 40px top | 40px top | 40px top | 40px top | \r\n| background-position: `\u003cbg-position\u003e` | 40px top | 40px top | 40px top | 40px top | \r\n| object-position: `\u003cposition\u003e` | 40px top | 40px 0% | 40px top | 40px top | \r\n| perspective-origin: `\u003cposition\u003e` | 40px top | 40px top | 40px top | 40px top | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 40px 0% | 40px top | 40px top | 40px 0% | \r\n\r\n| bottom 10% right 20% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | \r\n| background-position: `\u003cbg-position\u003e` | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | \r\n| object-position: `\u003cposition\u003e` | right 20% bottom 10% | calc(80%) calc(90%) | right 20% bottom 10% | right 20% bottom 10% | \r\n| perspective-origin: `\u003cposition\u003e` | right 20% bottom 10% | undefined | right 20% bottom 10% | right 20% bottom 10% | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 80% 90% | bottom 10% right 20% | bottom 10% right 20% | 80% 90% | \r\n\r\n| bottom right | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | right bottom | right bottom | right bottom | right bottom | \r\n| background-position: `\u003cbg-position\u003e` | right bottom | right bottom | right bottom | right bottom | \r\n| object-position: `\u003cposition\u003e` | right bottom | 100% 100% | right bottom | right bottom | \r\n| perspective-origin: `\u003cposition\u003e` | right bottom | right bottom | right bottom | right bottom | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 100% 100% | bottom right | bottom right | 100% 100% | \r\n\r\n| center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center center | center | center center | center center | \r\n| background-position: `\u003cbg-position\u003e` | center center | center | center center | center center | \r\n| object-position: `\u003cposition\u003e` | center center | 50% 50% | center center | center | \r\n| perspective-origin: `\u003cposition\u003e` | center center | center 50% | center center | center center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 50% | center | center | 50% 50% | \r\n\r\n| center 50px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center 50px | center 50px | center 50px | center 50px | \r\n| background-position: `\u003cbg-position\u003e` | center 50px | center 50px | center 50px | center 50px | \r\n| object-position: `\u003cposition\u003e` | center 50px | 50% 50px | center 50px | center 50px | \r\n| perspective-origin: `\u003cposition\u003e` | center 50px | center 50px | center 50px | center 50px | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 50px | center 50px | center 50px | 50% 50px | \r\n\r\n| center bottom | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center bottom | bottom | center bottom | center bottom | \r\n| background-position: `\u003cbg-position\u003e` | center bottom | bottom | center bottom | center bottom | \r\n| object-position: `\u003cposition\u003e` | center bottom | 50% 100% | center bottom | center bottom | \r\n| perspective-origin: `\u003cposition\u003e` | center bottom | center bottom | center bottom | center bottom | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 100% | center bottom | center bottom | 50% 100% | \r\n\r\n| center center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center center | center | center center | center center | \r\n| background-position: `\u003cbg-position\u003e` | center center | center | center center | center center | \r\n| object-position: `\u003cposition\u003e` | center center | 50% 50% | center center | center | \r\n| perspective-origin: `\u003cposition\u003e` | center center | center center | center center | center center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 50% | center center | center center | 50% 50% | \r\n\r\n| center left | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left center | left | left center | left center | \r\n| background-position: `\u003cbg-position\u003e` | left center | left | left center | left center | \r\n| object-position: `\u003cposition\u003e` | left center | 0% 50% | left center | left center | \r\n| perspective-origin: `\u003cposition\u003e` | left center | left center | left center | left center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 50% | center left | center left | 0% 50% | \r\n\r\n| left | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left center | left | left center | left center | \r\n| background-position: `\u003cbg-position\u003e` | left center | left | left center | left center | \r\n| object-position: `\u003cposition\u003e` | left center | 0% 50% | left center | left center | \r\n| perspective-origin: `\u003cposition\u003e` | left center | left 50% | left center | left center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 50% | left | left | 0% 50% | \r\n\r\n| left bottom | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left bottom | left bottom | left bottom | left bottom | \r\n| background-position: `\u003cbg-position\u003e` | left bottom | left bottom | left bottom | left bottom | \r\n| object-position: `\u003cposition\u003e` | left bottom | 0% 100% | left bottom | left bottom | \r\n| perspective-origin: `\u003cposition\u003e` | left bottom | left bottom | left bottom | left bottom | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 100% | left bottom | left bottom | 0% 100% | \r\n\r\n| left center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left center | left | left center | left center | \r\n| background-position: `\u003cbg-position\u003e` | left center | left | left center | left center | \r\n| object-position: `\u003cposition\u003e` | left center | 0% 50% | left center | left center | \r\n| perspective-origin: `\u003cposition\u003e` | left center | left center | left center | left center | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 50% | left center | left center | 0% 50% | \r\n\r\n| right 30% top 60px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | right 30% top 60px | right 30% top 60px | right 30% top 60px | right 30% top 60px | \r\n| background-position: `\u003cbg-position\u003e` | right 30% top 60px | right 30% top 60px | right 30% top 60px | right 30% top 60px | \r\n| object-position: `\u003cposition\u003e` | right 30% top 60px | calc(70%) 60px | right 30% top 60px | right 30% top 60px | \r\n| perspective-origin: `\u003cposition\u003e` | right 30% top 60px | undefined | right 30% top 60px | right 30% top 60px | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 70% 60px | right 30% top 60px | right 30% top 60px | 70% 60px | \r\n\r\n| right 40% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | right 40% | right 40% | right 40% | right 40% | \r\n| background-position: `\u003cbg-position\u003e` | right 40% | right 40% | right 40% | right 40% | \r\n| object-position: `\u003cposition\u003e` | right 40% | 100% 40% | right 40% | right 40% | \r\n| perspective-origin: `\u003cposition\u003e` | right 40% | right 40% | right 40% | right 40% | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 100% 40% | right 40% | right 40% | 100% 40% | \r\n\r\n| top | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center top | top | center top | center top | \r\n| background-position: `\u003cbg-position\u003e` | center top | top | center top | center top | \r\n| object-position: `\u003cposition\u003e` | center top | 50% 0% | center top | center top | \r\n| perspective-origin: `\u003cposition\u003e` | center top | 50% top | center top | center top | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 0% | top | top | 50% 0% | \r\n\r\n| top center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | center top | top | center top | center top | \r\n| background-position: `\u003cbg-position\u003e` | center top | top | center top | center top | \r\n| object-position: `\u003cposition\u003e` | center top | 50% 0% | center top | center top | \r\n| perspective-origin: `\u003cposition\u003e` | center top | center top | center top | center top | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 50% 0% | top center | top center | 50% 0% | \r\n","bodyHTML":"\u003cp dir=\"auto\"\u003eThe \u003ccode class=\"notranslate\"\u003eposition\u003c/code\u003e \u003ca href=\"https://drafts.csswg.org/css-values/#position\" rel=\"nofollow\"\u003espec\u003c/a\u003e mentions\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThe canonical order when serializing is the horizontal component followed by the vertical component.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003ebut does not discuss if the serialization should contain the author's supplied keywords or if they should be converted to equivalent percentages.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe spec also doesn't mention if 'center' should be added or removed when serializing. (Edge and Safari sometimes serialize \u003ccode class=\"notranslate\"\u003ecenter center\u003c/code\u003e as \u003ccode class=\"notranslate\"\u003ecenter\u003c/code\u003e.)\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBrowsers are currently inconsistent with themselves and each other:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e10%\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10%\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10%\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% 50%\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% 50%\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003ctd\u003e10% center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e10% 50%\u003c/td\u003e\n\u003ctd\u003e10%\u003c/td\u003e\n\u003ctd\u003e10%\u003c/td\u003e\n\u003ctd\u003e10% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e20% 30px\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003ctd\u003e20% 30px\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e30px center\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px 50%\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e30px 50%\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px center\u003c/td\u003e\n\u003ctd\u003e30px 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e40px top\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px 0%\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e40px 0%\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px top\u003c/td\u003e\n\u003ctd\u003e40px 0%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ebottom 10% right 20%\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003ecalc(80%) calc(90%)\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003ctd\u003eright 20% bottom 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e80% 90%\u003c/td\u003e\n\u003ctd\u003ebottom 10% right 20%\u003c/td\u003e\n\u003ctd\u003ebottom 10% right 20%\u003c/td\u003e\n\u003ctd\u003e80% 90%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ebottom right\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003e100% 100%\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003ctd\u003eright bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e100% 100%\u003c/td\u003e\n\u003ctd\u003ebottom right\u003c/td\u003e\n\u003ctd\u003ebottom right\u003c/td\u003e\n\u003ctd\u003e100% 100%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ecenter\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter 50%\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ecenter 50px\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003e50% 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003ecenter 50px\u003c/td\u003e\n\u003ctd\u003e50% 50px\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ecenter bottom\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ebottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ebottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003e50% 100%\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 100%\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003ecenter bottom\u003c/td\u003e\n\u003ctd\u003e50% 100%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ecenter center\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003ecenter center\u003c/td\u003e\n\u003ctd\u003e50% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ecenter left\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003ecenter left\u003c/td\u003e\n\u003ctd\u003ecenter left\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eleft\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft 50%\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eleft bottom\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003e0% 100%\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 100%\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003eleft bottom\u003c/td\u003e\n\u003ctd\u003e0% 100%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eleft center\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003eleft center\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eright 30% top 60px\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003ecalc(70%) 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e70% 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003eright 30% top 60px\u003c/td\u003e\n\u003ctd\u003e70% 60px\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eright 40%\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003e100% 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e100% 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003eright 40%\u003c/td\u003e\n\u003ctd\u003e100% 40%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003etop\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003e50% top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003etop center\u003c/th\u003e\n\u003cth\u003eChrome 64\u003c/th\u003e\n\u003cth\u003eEdge 16\u003c/th\u003e\n\u003cth\u003eFirefox 58\u003c/th\u003e\n\u003cth\u003eSafari 11\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003etop\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003ctd\u003ecenter top\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003ctd\u003etop center\u003c/td\u003e\n\u003ctd\u003etop center\u003c/td\u003e\n\u003ctd\u003e50% 0%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e","bodyVersion":"e2457887730c5e3d126361fe9a19b7d76b4b857bd6cff9f5a5c62ae34a0f8068","createdAt":"2018-02-05T02:59:37Z","__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":"Y3Vyc29yOnYyOpPPAAABZwjzbHABqjE5NjA5MTQ2Njc="},"totalCount":43,"edges":[{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":1458648947,"createdAt":"2018-02-05T19:22:24Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODE4OTI0MDk=","nameHTML":"cssom-1","name":"cssom-1","color":"c5def5","description":"Current Work"},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDE0NTg2NDg5NDc="},"cursor":"Y3Vyc29yOnYyOpPPAAABYWdrWYABqjE0NTg2NDg5NDc="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":1458649764,"createdAt":"2018-02-05T19:22:53Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODE4OTIyNTI=","nameHTML":"css-values-3","name":"css-values-3","color":"c5def5","description":null},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDE0NTg2NDk3NjQ="},"cursor":"Y3Vyc29yOnYyOpPPAAABYWdrysgBqjE0NTg2NDk3NjQ="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":1458649765,"createdAt":"2018-02-05T19:22:53Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWw0MTAzMDIyMzQ=","nameHTML":"css-values-4","name":"css-values-4","color":"c5def5","description":"Current Work"},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDE0NTg2NDk3NjU="},"cursor":"Y3Vyc29yOnYyOpPPAAABYWdrysgBqjE0NTg2NDk3NjU="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":1458649925,"createdAt":"2018-02-05T19:22:58Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODE4ODgyMzA=","nameHTML":"css-backgrounds-4","name":"css-backgrounds-4","color":"c5def5","description":null},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDE0NTg2NDk5MjU="},"cursor":"Y3Vyc29yOnYyOpPPAAABYWdr3lABqjE0NTg2NDk5MjU="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":589468401,"createdAt":"2018-02-14T01:37:14Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWUyOTYyNDEzNDQ="},"willCloseTarget":false,"referencedAt":"2018-02-14T01:37:14Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"MDU6SXNzdWUyOTQyNjAzNDQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWUyOTYyNDEzNDQ=","issueTitleHTML":"[css-shapes] Why does this spec need to special-case serialization of \u0026lt;position\u0026gt;?","url":"https://github.com/w3c/csswg-drafts/issues/2301","number":2301,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4","name":"csswg-drafts","isPrivate":false,"owner":{"__typename":"Organization","login":"w3c","id":"MDEyOk9yZ2FuaXphdGlvbjM3OTIxNg=="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50NTg5NDY4NDAx"},"cursor":"Y3Vyc29yOnYyOpPPAAABYZH1ZRACqTU4OTQ2ODQwMQ=="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":644708884,"createdAt":"2018-04-09T21:46:29Z","actor":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/929206?s=64\u0026u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3\u0026v=4"},"source":{"__typename":"PullRequest","__isNode":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0MTY2NTA5OTk4"},"willCloseTarget":false,"referencedAt":"2018-04-09T21:46:29Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"__isNode":"Issue","id":"MDU6SXNzdWUyOTQyNjAzNDQ="},"innerSource":{"__typename":"PullRequest","__isReferencedSubject":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0MTY2NTA5OTk4","pullTitleHTML":"[css3-images] Parsing tests for images properties","url":"https://github.com/web-platform-tests/wpt/pull/9339","number":9339,"state":"MERGED","isDraft":false,"isInMergeQueue":false,"repository":{"id":"MDEwOlJlcG9zaXRvcnkzNjE4MTMz","name":"wpt","isPrivate":false,"owner":{"__typename":"Organization","login":"web-platform-tests","id":"MDEyOk9yZ2FuaXphdGlvbjM3MjI2MjMz"}},"__isNode":"PullRequest"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50NjQ0NzA4ODg0"},"cursor":"Y3Vyc29yOnYyOpPPAAABYqxf5wgCqTY0NDcwODg4NA=="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":1694363023,"createdAt":"2018-06-21T18:29:41Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWw1MDM4MDc0MDI=","nameHTML":"Agenda+ F2F","name":"Agenda+ F2F","color":"000000","description":null},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDE2OTQzNjMwMjM="},"cursor":"Y3Vyc29yOnYyOpPPAAABZCOb9ggBqjE2OTQzNjMwMjM="},{"node":{"__typename":"UnlabeledEvent","__isIssueTimelineItems":"UnlabeledEvent","__isTimelineEvent":"UnlabeledEvent","databaseId":1694363026,"createdAt":"2018-06-21T18:29:41Z","actor":{"__typename":"User","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/725717?s=64\u0026u=d55083686ee8c23a0547d1ab2fb3981ee180287e\u0026v=4"},"label":{"id":"MDU6TGFiZWwzODE4OTIyNTI=","nameHTML":"css-values-3","name":"css-values-3","color":"c5def5","description":null},"__isNode":"UnlabeledEvent","id":"MDE0OlVubGFiZWxlZEV2ZW50MTY5NDM2MzAyNg=="},"cursor":"Y3Vyc29yOnYyOpPPAAABZCOb9ggBqjE2OTQzNjMwMjY="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":402322967,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","number":2274,"locked":false,"databaseId":294260344},"author":{"__typename":"User","login":"css-meeting-bot","avatarUrl":"https://avatars.githubusercontent.com/u/27466577?u=f1db811551a47160e3d78e2d4104d52f1fad7e13\u0026v=4","id":"MDQ6VXNlcjI3NDY2NTc3"},"id":"MDEyOklzc3VlQ29tbWVudDQwMjMyMjk2Nw==","body":"The Working Group just discussed `Inconsistent position serialization`, and agreed to the following:\r\n\r\n* `RESOLVED: 1) All the positions serialize the same way (background-position,m object-position, etc.) 2) All of them resolve as \u003cposition\u003e. Background-position 3-value syntax’s are not allowed.`\r\n* `RESOLVED: All the \u003cposition\u003e values serialize to at least two values.`\r\n\r\n\u003cdetails\u003e\u003csummary\u003eThe full IRC log of that discussion\u003c/summary\u003e\r\n\u0026lt;myles\u003e Topic: Inconsistent position serialization\u003cbr\u003e\r\n\u0026lt;myles\u003e Github: https://github.com/w3c/csswg-drafts/issues/2274\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: For one of the properties, the spec is explicit about serialization, and that’s different from all the other ones\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: another inconsistency is that all the browsers behave differently from one another\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: suggestions?\u003cbr\u003e\r\n\u0026lt;myles\u003e leaverou: don’t we have a principle that shorter serializations are better?\u003cbr\u003e\r\n\u0026lt;myles\u003e TabAtkins: yes\u003cbr\u003e\r\n\u0026lt;myles\u003e leaverou: if we follow that, 50% should not be introduced\u003cbr\u003e\r\n\u0026lt;myles\u003e leaverou: do that mean if it was specified explicitly, it should be introduced?\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: there are cases where you do need it to be disambiguated. center 10% and 10% center are different\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: someone should go through, figure out what the compatible behavior is, figure out what the same behavior is, and figure out what should actually happen. This table is rather large for going through in the WG meeting\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: the one that’s different from the others, is that a mistake and they should all the consistent?\u003cbr\u003e\r\n\u0026lt;myles\u003e emilio: yes\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: some of these things are very easy to write as a spec editor, but we should be careful to stick them in when they cause inconsistencies like this. Implementors should be suspicious of them too, if they say to do something different from everything else\u003cbr\u003e\r\n\u0026lt;myles\u003e emilio: Can we resolve on the special case being outside?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: All the cases should be the same\u003cbr\u003e\r\n\u0026lt;emilio\u003e s/outside/removed\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: yes\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: we should think about transform origin and background position, because transform origin is 3D, and background position accepts the 3 value grammar. So “left 10% top”\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: we’re trying to get rid of 3 values\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: we can resolve on 2 things: 1) all the serializsations should be the same, 2) we never serialize to the three value serializations, unless one of the three values is center, and 3)\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: What about always serialize to a valid \u0026lt;position\u003e\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: bgposition should not be allowed in serialization\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: objections?\u003cbr\u003e\r\n\u0026lt;myles\u003e RESOLVED: 1) All the positions serialize the same way (background-position,m object-position, etc.) 2) All of them resolve as \u0026lt;position\u003e. Background-position 3-value syntax’s are not allowed.\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: We have more questions. 1) Do we ever serialize to a 1-value syntax? Eric made an amazing chart of compat data. Edge takes the shortest backwards-compatible serialization principle very seriously, and when it can, drops down to a single value. The other implementations will always have at least 2 values\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: yeeeeeup\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: Should we ask Edge to change? To match everyone else? Or are one-value serializations actually good\u003cbr\u003e\r\n\u0026lt;myles\u003e TabAtkins: This decision applies to typed OM too.\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: I think two-value syntax is more understandable to work with. Because if you happen to land on 50% arbitrarily, it would be awkward otherwise. And we have 3 implementations this way. So, because of minimizing the amount of work, we should standardize on 2-values\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: Is this a general principle? Like pairs of numbers that are coordinates, they should always be serialized as two-values?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: I don’t think that’s valuable\u003cbr\u003e\r\n\u0026lt;Rossen\u003e s/Rossen: yeeeeeup//\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: One reason position is different is that it has a relatively complicated set of rules, where you’re allowed to do X Y order, or Y X order much of the time but not all of the time, which makes it complicated to figure out which values will round-trip correctly if you reduce it to just one\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: a more important reason is the transform-origin syntax, which becomes ambiguous if you only have one value\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: You wouldn’t be able to consider position as a single value without considering whether or not you have a Z component. That creates a serialization of position cannot be self-contained\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: The proposal: \u0026lt;position\u003e always serializes at least two values\u003cbr\u003e\r\n\u0026lt;myles\u003e TabAtkins: I’m down with that\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: It means some work for us, but ...\u003cbr\u003e\r\n\u0026lt;myles\u003e TabAtkins: It means some work for all of us because we’re inconsistent\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: okay.\u003cbr\u003e\r\n\u0026lt;myles\u003e RESOLVED: All the \u0026lt;position\u003e values serialize to at least two values.\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: Is there a way to tell for a given property whether or not we have considered its serialization and what’s in the spec is a considered decision?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: not really\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: In most cases, you follow the general principle of “shortest most backwards-compatible serialization” and the exceptions are where we will have to explicitly say something. The spec says “it’s probably this” but you need to check in case there’s some legacy something\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: I don’t like having to check\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: Are you volunteering to do the checking?\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: No\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: We should reflect our discussions back in the spec so we don’t have to check\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: We may not be testing in all 4 browsers\u003cbr\u003e\r\n\u0026lt;myles\u003e heycam: So tests may serve this purpose?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: When we have a 4-value syntax, do you serialize it out to 4 values or do you compress it using calc to two values\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: I looked at this a year ago int he context of object-position. Most of the testing I did cross browsers suggested that almost all implementations attempt to serialize down to calc for computed values on getComputedStyle(), and were inconsistent as described in this one for style serialization\u003cbr\u003e\r\n\u0026lt;myles\u003e emilio: I don’t think we synthesize calc in any case for computed value serialization. If you specify it as calc(), and we cannot simplify it, but I dont’ think we should use calc to shorten the result\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: We’re just talking about serialization, not computed value\u003cbr\u003e\r\n\u0026lt;myles\u003e emilio: It’s essentially the same thing\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: yeah\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: We’re talking about specified values, not computed styles\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: Blink would never give you a keyword as a computed value\u003cbr\u003e\r\n\u0026lt;fantasai\u003e s/fantasai/ericwilligers/\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: What are we thinkging about in terms of 4 value serialization?\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: Should we attempt to do 2 when possible?\u003cbr\u003e\r\n\u0026lt;myles\u003e plinss: Turning a non-calc into a calc seems weird\u003cbr\u003e\r\n\u0026lt;myles\u003e astearns: Ifwe can simplify a 4-value into a 2 value without calc, that makes sense, but if you have to use calc, then it’s not a simplification\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: I agree as well, though the principle that would say to use calc() is the most compatible syntax principle, because calc() got implemented in background-position background to the 4-value syntax\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: So for a while you were able to do the effects of the 4-value syntax with calc, without the real 4-value syntax. BUt for now we shouldn’t do it because it’s less compatible\u003cbr\u003e\r\n\u0026lt;myles\u003e astearns: We went through this when we were deciding how to use these values in basic shapes. What I thought we were doing was coming up with general principles that would generally be applied to other things than basic shapes. Basic shapes prefers two values, if you can express it without calc, so we may look to that as what we were trying to do years ago\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: Eric, do you have the test you used for the 4-value syntax?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: Can you modify it from bottom right to top left to see if the values get dropped, or if we keep the 4 value syntax even in that case\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: It takes me a while to get results because I use browser stack.\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: If you tell me what you want to know, we can figure it out\u003cbr\u003e\r\n\u0026lt;astearns\u003e \u0026lt;position\u003e in basic shapes is paragraph 2 of https://drafts.csswg.org/css-shapes/#basic-shape-serialization\u003cbr\u003e\r\n\u0026lt;fantasai\u003e top 10% left 20%\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: With the suggestion that we go down do two unless it introduces a calc, what effect would that be fore background-position?\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: The minute you have top 10% and then center ..\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: Peopel were saying “we should never ever go to three”\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: right 10% top wil go to 4\u003cbr\u003e\r\n\u0026lt;myles\u003e ericwilligers: 1 more question: right 10% top should serialize differently from left 10% top???\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: That was the question I wanted to ask. We should see what the output is. If there is consensus, we tend to go with that. So I think we should investigate this question a little more over the break. And then go on to the issue of whether to serialize out keywords when you put serialize as a percentage\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: but this is after the discussion int eh morning?\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: no, we can do it now\u003cbr\u003e\r\n\u0026lt;Rossen\u003e s/int eh/in the/\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: Looka t the 3rd table: 30px center. Some of the serializations use 50%, some use the keyword center\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: The table after that: 40px top, some use 0% and some use the keyword top\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: So the question is, do we resolve on outputting the keyword when the percentage would work?\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: The bulk of the boxes are they keyword except 3 of them\u003cbr\u003e\r\n\u0026lt;myles\u003e dbaron: That said, I don’t know if we should try to go through all of this\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: 2 questions: 1) How do we deal with keywords, both if the author supplies them and do we turn 50% into center, and 2) the two-value vs 4-value question\u003cbr\u003e\r\n\u0026lt;myles\u003e fantasai: We can look into that over the break.\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: This is where we are going to get a lot more calcs in percentages\u003cbr\u003e\r\n\u0026lt;myles\u003e Rossen: okay that’s everything for this for now\u003cbr\u003e\r\n\u003c/details\u003e\r\n\r\nSee [official minutes](https://lists.w3.org/Archives/Public/www-style/2018Jul/0023.html)","bodyHTML":"\u003cp dir=\"auto\"\u003eThe Working Group just discussed \u003ccode class=\"notranslate\"\u003eInconsistent position serialization\u003c/code\u003e, and agreed to the following:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: 1) All the positions serialize the same way (background-position,m object-position, etc.) 2) All of them resolve as \u0026lt;position\u0026gt;. Background-position 3-value syntax’s are not allowed.\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: All the \u0026lt;position\u0026gt; values serialize to at least two values.\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;myles\u0026gt; Topic: Inconsistent position serialization\u003cbr\u003e\n\u0026lt;myles\u0026gt; Github: https://github.com/\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"294260344\" data-permission-text=\"Title is private\" data-url=\"https://github.com/w3c/csswg-drafts/issues/2274\" data-hovercard-type=\"issue\" data-hovercard-url=\"/w3c/csswg-drafts/issues/2274/hovercard\" href=\"https://github.com/w3c/csswg-drafts/issues/2274\"\u003e/issues/2274\u003c/a\u003e\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: For one of the properties, the spec is explicit about serialization, and that’s different from all the other ones\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: another inconsistency is that all the browsers behave differently from one another\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: suggestions?\u003cbr\u003e\n\u0026lt;myles\u0026gt; leaverou: don’t we have a principle that shorter serializations are better?\u003cbr\u003e\n\u0026lt;myles\u0026gt; TabAtkins: yes\u003cbr\u003e\n\u0026lt;myles\u0026gt; leaverou: if we follow that, 50% should not be introduced\u003cbr\u003e\n\u0026lt;myles\u0026gt; leaverou: do that mean if it was specified explicitly, it should be introduced?\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: there are cases where you do need it to be disambiguated. center 10% and 10% center are different\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: someone should go through, figure out what the compatible behavior is, figure out what the same behavior is, and figure out what should actually happen. This table is rather large for going through in the WG meeting\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: the one that’s different from the others, is that a mistake and they should all the consistent?\u003cbr\u003e\n\u0026lt;myles\u0026gt; emilio: yes\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: some of these things are very easy to write as a spec editor, but we should be careful to stick them in when they cause inconsistencies like this. Implementors should be suspicious of them too, if they say to do something different from everything else\u003cbr\u003e\n\u0026lt;myles\u0026gt; emilio: Can we resolve on the special case being outside?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: All the cases should be the same\u003cbr\u003e\n\u0026lt;emilio\u0026gt; s/outside/removed\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: yes\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: we should think about transform origin and background position, because transform origin is 3D, and background position accepts the 3 value grammar. So “left 10% top”\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: we’re trying to get rid of 3 values\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: we can resolve on 2 things: 1) all the serializsations should be the same, 2) we never serialize to the three value serializations, unless one of the three values is center, and 3)\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: What about always serialize to a valid \u0026lt;position\u0026gt;\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: bgposition should not be allowed in serialization\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: objections?\u003cbr\u003e\n\u0026lt;myles\u0026gt; RESOLVED: 1) All the positions serialize the same way (background-position,m object-position, etc.) 2) All of them resolve as \u0026lt;position\u0026gt;. Background-position 3-value syntax’s are not allowed.\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: We have more questions. 1) Do we ever serialize to a 1-value syntax? Eric made an amazing chart of compat data. Edge takes the shortest backwards-compatible serialization principle very seriously, and when it can, drops down to a single value. The other implementations will always have at least 2 values\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: yeeeeeup\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: Should we ask Edge to change? To match everyone else? Or are one-value serializations actually good\u003cbr\u003e\n\u0026lt;myles\u0026gt; TabAtkins: This decision applies to typed OM too.\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: I think two-value syntax is more understandable to work with. Because if you happen to land on 50% arbitrarily, it would be awkward otherwise. And we have 3 implementations this way. So, because of minimizing the amount of work, we should standardize on 2-values\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: Is this a general principle? Like pairs of numbers that are coordinates, they should always be serialized as two-values?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: I don’t think that’s valuable\u003cbr\u003e\n\u0026lt;Rossen\u0026gt; s/Rossen: yeeeeeup//\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: One reason position is different is that it has a relatively complicated set of rules, where you’re allowed to do X Y order, or Y X order much of the time but not all of the time, which makes it complicated to figure out which values will round-trip correctly if you reduce it to just one\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: a more important reason is the transform-origin syntax, which becomes ambiguous if you only have one value\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: You wouldn’t be able to consider position as a single value without considering whether or not you have a Z component. That creates a serialization of position cannot be self-contained\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: The proposal: \u0026lt;position\u0026gt; always serializes at least two values\u003cbr\u003e\n\u0026lt;myles\u0026gt; TabAtkins: I’m down with that\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: It means some work for us, but ...\u003cbr\u003e\n\u0026lt;myles\u0026gt; TabAtkins: It means some work for all of us because we’re inconsistent\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: okay.\u003cbr\u003e\n\u0026lt;myles\u0026gt; RESOLVED: All the \u0026lt;position\u0026gt; values serialize to at least two values.\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: Is there a way to tell for a given property whether or not we have considered its serialization and what’s in the spec is a considered decision?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: not really\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: In most cases, you follow the general principle of “shortest most backwards-compatible serialization” and the exceptions are where we will have to explicitly say something. The spec says “it’s probably this” but you need to check in case there’s some legacy something\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: I don’t like having to check\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: Are you volunteering to do the checking?\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: No\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: We should reflect our discussions back in the spec so we don’t have to check\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: We may not be testing in all 4 browsers\u003cbr\u003e\n\u0026lt;myles\u0026gt; heycam: So tests may serve this purpose?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: When we have a 4-value syntax, do you serialize it out to 4 values or do you compress it using calc to two values\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: I looked at this a year ago int he context of object-position. Most of the testing I did cross browsers suggested that almost all implementations attempt to serialize down to calc for computed values on getComputedStyle(), and were inconsistent as described in this one for style serialization\u003cbr\u003e\n\u0026lt;myles\u0026gt; emilio: I don’t think we synthesize calc in any case for computed value serialization. If you specify it as calc(), and we cannot simplify it, but I dont’ think we should use calc to shorten the result\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: We’re just talking about serialization, not computed value\u003cbr\u003e\n\u0026lt;myles\u0026gt; emilio: It’s essentially the same thing\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: yeah\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: We’re talking about specified values, not computed styles\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: Blink would never give you a keyword as a computed value\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; s/fantasai/ericwilligers/\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: What are we thinkging about in terms of 4 value serialization?\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: Should we attempt to do 2 when possible?\u003cbr\u003e\n\u0026lt;myles\u0026gt; plinss: Turning a non-calc into a calc seems weird\u003cbr\u003e\n\u0026lt;myles\u0026gt; astearns: Ifwe can simplify a 4-value into a 2 value without calc, that makes sense, but if you have to use calc, then it’s not a simplification\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: I agree as well, though the principle that would say to use calc() is the most compatible syntax principle, because calc() got implemented in background-position background to the 4-value syntax\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: So for a while you were able to do the effects of the 4-value syntax with calc, without the real 4-value syntax. BUt for now we shouldn’t do it because it’s less compatible\u003cbr\u003e\n\u0026lt;myles\u0026gt; astearns: We went through this when we were deciding how to use these values in basic shapes. What I thought we were doing was coming up with general principles that would generally be applied to other things than basic shapes. Basic shapes prefers two values, if you can express it without calc, so we may look to that as what we were trying to do years ago\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: Eric, do you have the test you used for the 4-value syntax?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: Can you modify it from bottom right to top left to see if the values get dropped, or if we keep the 4 value syntax even in that case\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: It takes me a while to get results because I use browser stack.\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: If you tell me what you want to know, we can figure it out\u003cbr\u003e\n\u0026lt;astearns\u0026gt; \u0026lt;position\u0026gt; in basic shapes is paragraph 2 of https://drafts.csswg.org/css-shapes/#basic-shape-serialization\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; top 10% left 20%\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: With the suggestion that we go down do two unless it introduces a calc, what effect would that be fore background-position?\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: The minute you have top 10% and then center ..\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: Peopel were saying “we should never ever go to three”\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: right 10% top wil go to 4\u003cbr\u003e\n\u0026lt;myles\u0026gt; ericwilligers: 1 more question: right 10% top should serialize differently from left 10% top???\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: That was the question I wanted to ask. We should see what the output is. If there is consensus, we tend to go with that. So I think we should investigate this question a little more over the break. And then go on to the issue of whether to serialize out keywords when you put serialize as a percentage\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: but this is after the discussion int eh morning?\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: no, we can do it now\u003cbr\u003e\n\u0026lt;Rossen\u0026gt; s/int eh/in the/\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: Looka t the 3rd table: 30px center. Some of the serializations use 50%, some use the keyword center\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: The table after that: 40px top, some use 0% and some use the keyword top\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: So the question is, do we resolve on outputting the keyword when the percentage would work?\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: The bulk of the boxes are they keyword except 3 of them\u003cbr\u003e\n\u0026lt;myles\u0026gt; dbaron: That said, I don’t know if we should try to go through all of this\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: 2 questions: 1) How do we deal with keywords, both if the author supplies them and do we turn 50% into center, and 2) the two-value vs 4-value question\u003cbr\u003e\n\u0026lt;myles\u0026gt; fantasai: We can look into that over the break.\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: This is where we are going to get a lot more calcs in percentages\u003cbr\u003e\n\u0026lt;myles\u0026gt; Rossen: okay that’s everything for this for now\u003cbr\u003e\n\u003c/details\u003e\n\u003cp dir=\"auto\"\u003eSee \u003ca href=\"https://lists.w3.org/Archives/Public/www-style/2018Jul/0023.html\" rel=\"nofollow\"\u003eofficial minutes\u003c/a\u003e\u003c/p\u003e","bodyVersion":"0a6af9c4f42785b396f7ba8b7993f0d1525af7df4754784e2f70d7f6437abb90","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402322967","createdAt":"2018-07-03T23:50:14Z","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":"2022-10-10T23:48:39Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/fantasai","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw=="},"id":"UCE_lALOAI0trM4X-vYXzig0wdk"},"__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":"Y3Vyc29yOnYyOpPPAAABZGKNvvAAqTQwMjMyMjk2Nw=="},{"node":{"__typename":"UnlabeledEvent","__isIssueTimelineItems":"UnlabeledEvent","__isTimelineEvent":"UnlabeledEvent","databaseId":1715223435,"createdAt":"2018-07-03T23:54:05Z","actor":{"__typename":"User","login":"astearns","id":"MDQ6VXNlcjEzODA3NTE=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/1380751?s=64\u0026u=dc70d74c456a4cdfcb6ec3d1778e8be9d4bbddd1\u0026v=4"},"label":{"id":"MDU6TGFiZWw1MDM4MDc0MDI=","nameHTML":"Agenda+ F2F","name":"Agenda+ F2F","color":"000000","description":null},"__isNode":"UnlabeledEvent","id":"MDE0OlVubGFiZWxlZEV2ZW50MTcxNTIyMzQzNQ=="},"cursor":"Y3Vyc29yOnYyOpPPAAABZGKRRUgBqjE3MTUyMjM0MzU="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":402330108,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","number":2274,"locked":false,"databaseId":294260344},"author":{"__typename":"User","login":"ewilligers","avatarUrl":"https://avatars.githubusercontent.com/u/929206?u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3\u0026v=4","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDEyOklzc3VlQ29tbWVudDQwMjMzMDEwOA==","body":"Some more test results:\r\n\r\n| left 10% top | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-position: `\u003cbg-position\u003e` | left 10% top | 10% top | left 10% top | left 10% top | \r\n\r\n| right 10% top | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-position: `\u003cbg-position\u003e` | right 10% top | right 10% top 0% | right 10% top | right 10% top | \r\n\r\n| top 10% left 20% | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left 20% top 10% | 20% 10% | left 20% top 10% | left 20% top 10% | \r\n| background-position: `\u003cbg-position\u003e` | left 20% top 10% | 20% 10% | left 20% top 10% | left 20% top 10% | \r\n| object-position: `\u003cposition\u003e` | left 20% top 10% | 20% 10% | left 20% top 10% | left 20% top 10% | \r\n| perspective-origin: `\u003cposition\u003e` | left 20% top 10% | undefined | left 20% top 10% | left 20% top 10% | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 20% 10% | top 10% left 20% | top 10% left 20% | 20% 10% | \r\n\r\n| 0% 50% | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| background-position: `\u003cbg-position\u003e` | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| object-position: `\u003cposition\u003e` | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| perspective-origin: `\u003cposition\u003e` | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n\r\n([raw results](https://docs.google.com/document/d/1mYCBLbFRdLqiBCWhqIU9CRThI-dJQNDx1LSiNnekNPA/edit))","bodyHTML":"\u003cp dir=\"auto\"\u003eSome more test results:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eleft 10% top\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 10% top\u003c/td\u003e\n\u003ctd\u003e10% top\u003c/td\u003e\n\u003ctd\u003eleft 10% top\u003c/td\u003e\n\u003ctd\u003eleft 10% top\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eright 10% top\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 10% top\u003c/td\u003e\n\u003ctd\u003eright 10% top 0%\u003c/td\u003e\n\u003ctd\u003eright 10% top\u003c/td\u003e\n\u003ctd\u003eright 10% top\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003etop 10% left 20%\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003etop 10% left 20%\u003c/td\u003e\n\u003ctd\u003etop 10% left 20%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e0% 50%\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e(\u003ca href=\"https://docs.google.com/document/d/1mYCBLbFRdLqiBCWhqIU9CRThI-dJQNDx1LSiNnekNPA/edit\" rel=\"nofollow\"\u003eraw results\u003c/a\u003e)\u003c/p\u003e","bodyVersion":"d0db8ff7a1b8fc9a139101307ad3a03547a5ffa4a2ccf79d4515aa080e336d27","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402330108","createdAt":"2018-07-04T00:42:48Z","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":"2018-07-04T01:05:55Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/ewilligers","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDE1OlVzZXJDb250ZW50RWRpdDEwNDMwODk3Mg=="},"__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":"Y3Vyc29yOnYyOpPPAAABZGK930AAqTQwMjMzMDEwOA=="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":402335617,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","number":2274,"locked":false,"databaseId":294260344},"author":{"__typename":"User","login":"ewilligers","avatarUrl":"https://avatars.githubusercontent.com/u/929206?u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3\u0026v=4","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDEyOklzc3VlQ29tbWVudDQwMjMzNTYxNw==","body":"All of the above were specified values. There is also variation in **computed values**.\r\n\r\n| left 10% top | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-position: `\u003cbg-position\u003e` | left 10% 0% | 10% 0% | 10% 0% | left 10% 0% | \r\n\r\n| right 10% top | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-position: `\u003cbg-position\u003e` | right 10% 0% | right 10% top 0% | 90% 0% | right 10% 0% | \r\n\r\n| top 10% left 20% | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | left 20% top 10% | 20% 10% | 20% 10% | left 20% top 10% | \r\n| background-position: `\u003cbg-position\u003e` | left 20% top 10% | 20% 10% | 20% 10% | left 20% top 10% | \r\n| object-position: `\u003cposition\u003e` | 20% 10% | 20% 10% | 20% 10% | 20% 10% | \r\n| perspective-origin: `\u003cposition\u003e` | 20px 0px | 50px 0px | 20px 0px | 20px 0px | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 20% 10% | undefined | undefined | 20% 10% | \r\n\r\n| 0% 50% | Chrome 67 | Edge 17 | Firefox 60 | Safari 11.1 | \r\n| --- | --- | --- | --- | --- | \r\n| background-image: radial-gradient(at `\u003cposition\u003e`, red, blue) | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| background-position: `\u003cbg-position\u003e` | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| object-position: `\u003cposition\u003e` | 0% 50% | 0% 50% | 0% 50% | 0% 50% | \r\n| perspective-origin: `\u003cposition\u003e` | 0px 0px | 0px 0px | 0px 0px | 0px 0px | \r\n| shape-outside: circle(at `\u003cposition\u003e`) | 0% 50% | undefined | undefined | 0% 50% | \r\n\r\n([raw results](https://docs.google.com/document/d/1mYCBLbFRdLqiBCWhqIU9CRThI-dJQNDx1LSiNnekNPA/edit))","bodyHTML":"\u003cp dir=\"auto\"\u003eAll of the above were specified values. There is also variation in \u003cstrong\u003ecomputed values\u003c/strong\u003e.\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eleft 10% top\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 10% 0%\u003c/td\u003e\n\u003ctd\u003e10% 0%\u003c/td\u003e\n\u003ctd\u003e10% 0%\u003c/td\u003e\n\u003ctd\u003eleft 10% 0%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eright 10% top\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eright 10% 0%\u003c/td\u003e\n\u003ctd\u003eright 10% top 0%\u003c/td\u003e\n\u003ctd\u003e90% 0%\u003c/td\u003e\n\u003ctd\u003eright 10% 0%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003etop 10% left 20%\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eleft 20% top 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e20px 0px\u003c/td\u003e\n\u003ctd\u003e50px 0px\u003c/td\u003e\n\u003ctd\u003e20px 0px\u003c/td\u003e\n\u003ctd\u003e20px 0px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003e20% 10%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable role=\"table\"\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e0% 50%\u003c/th\u003e\n\u003cth\u003eChrome 67\u003c/th\u003e\n\u003cth\u003eEdge 17\u003c/th\u003e\n\u003cth\u003eFirefox 60\u003c/th\u003e\n\u003cth\u003eSafari 11.1\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-image: radial-gradient(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e, red, blue)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebackground-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;bg-position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eobject-position: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eperspective-origin: \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e0px 0px\u003c/td\u003e\n\u003ctd\u003e0px 0px\u003c/td\u003e\n\u003ctd\u003e0px 0px\u003c/td\u003e\n\u003ctd\u003e0px 0px\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshape-outside: circle(at \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003eundefined\u003c/td\u003e\n\u003ctd\u003e0% 50%\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e(\u003ca href=\"https://docs.google.com/document/d/1mYCBLbFRdLqiBCWhqIU9CRThI-dJQNDx1LSiNnekNPA/edit\" rel=\"nofollow\"\u003eraw results\u003c/a\u003e)\u003c/p\u003e","bodyVersion":"85bc77d1ef0db642a19cce64e599fd5883a8461a87b0b22efabbc5edfe671a36","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402335617","createdAt":"2018-07-04T01:23:01Z","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":"2018-07-04T01:25:31Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/ewilligers","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDE1OlVzZXJDb250ZW50RWRpdDEwNDMxMzYyNQ=="},"__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":"Y3Vyc29yOnYyOpPPAAABZGLisQgAqTQwMjMzNTYxNw=="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":402368486,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","number":2274,"locked":false,"databaseId":294260344},"author":{"__typename":"User","login":"emilio","avatarUrl":"https://avatars.githubusercontent.com/u/1323194?u=93e4d24fee9e70f1199839b665e9285308b78818\u0026v=4","id":"MDQ6VXNlcjEzMjMxOTQ="},"id":"MDEyOklzc3VlQ29tbWVudDQwMjM2ODQ4Ng==","body":"FWIW, Servo's / Firefox's logic for computed `\u003cposition\u003e`:\r\n\r\n https://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/computed/position.rs#43\r\n\r\nAnd specified:\r\n\r\n https://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/specified/position.rs#159","bodyHTML":"\u003cp dir=\"auto\"\u003eFWIW, Servo's / Firefox's logic for computed \u003ccode class=\"notranslate\"\u003e\u0026lt;position\u0026gt;\u003c/code\u003e:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/computed/position.rs#43\" rel=\"nofollow\"\u003ehttps://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/computed/position.rs#43\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAnd specified:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/specified/position.rs#159\" rel=\"nofollow\"\u003ehttps://searchfox.org/mozilla-central/rev/403038737ba75af3842ba6b43b6e2fb47eb06609/servo/components/style/values/specified/position.rs#159\u003c/a\u003e\u003c/p\u003e","bodyVersion":"013054215340579a526441f10fe29ede4196a0946537e1197168bc4d796c4ebf","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402368486","createdAt":"2018-07-04T05:36:46Z","authorAssociation":"COLLABORATOR","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":"Y3Vyc29yOnYyOpPPAAABZGPLAbAAqTQwMjM2ODQ4Ng=="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":402398299,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"ewilligers","id":"MDQ6VXNlcjkyOTIwNg=="},"id":"MDU6SXNzdWUyOTQyNjAzNDQ=","number":2274,"locked":false,"databaseId":294260344},"author":{"__typename":"User","login":"css-meeting-bot","avatarUrl":"https://avatars.githubusercontent.com/u/27466577?u=f1db811551a47160e3d78e2d4104d52f1fad7e13\u0026v=4","id":"MDQ6VXNlcjI3NDY2NTc3"},"id":"MDEyOklzc3VlQ29tbWVudDQwMjM5ODI5OQ==","body":"The Working Group just discussed `serialization of \u003cposition\u003e`, and agreed to the following:\r\n\r\n* `RESOLVED: above`\r\n* `RESOLVED: Any objections to specifying that specified values are serialized`\r\n* `RESOLVED: For \u003cbg-position\u003e, preserve keywords where we can, center turns to top 50%, and where we need to add a keyword use top/left, where we add an offset, use percentages.`\r\n* `RESOLVED: For computed values of \u003cbg-position\u003e and \u003cposition\u003e, they are always two \u003clength-percentage\u003e values.`\r\n\r\n\u003cdetails\u003e\u003csummary\u003eThe full IRC log of that discussion\u003c/summary\u003e\r\n\u0026lt;fantasai\u003e Topic: serialization of \u0026lt;position\u003e\u003cbr\u003e\r\n\u0026lt;TabAtkins\u003e The preprocessor features that are :matches()-equivalent explode combinatorially, so the preprocessors trim what they generate. In the common case, nesting expands merely multiplicatively , so they fully expand; so you are already *parsing* a fully-expanded set of selectors.\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e github: https://github.com/w3c/csswg-drafts/issues/2274\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e \"\u0026lt;position\u003e is always serialized as 2 or 4 values.\" or \"Neither component may be omitted when serializing.\"\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: I thin we've completely resolved serialization of \u0026lt;position\u003e\u003cbr\u003e\r\n\u0026lt;fantasai\u003e fantasai: We already resolved that \u0026lt;bg-position\u003e should serialize same as \u0026lt;position\u003e\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e How exactly does \"left 10% center\" serialize?\u003cbr\u003e\r\n\u0026lt;fantasai\u003e fantasai: Need to resolve that keywords are serialized out in specified value if originally specified as keywords (and not otherwise)\u003cbr\u003e\r\n\u0026lt;fantasai\u003e emilio: In which order?\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: Horizontal first\u003cbr\u003e\r\n\u0026lt;fantasai\u003e emilio: And always both\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: Yes\u003cbr\u003e\r\n\u0026lt;fantasai\u003e dbaron: It feels like this is saying you have to remember the syntax level, but you don't preserve the number of values in the syntax\u003cbr\u003e\r\n\u0026lt;fantasai\u003e dbaron: But you preserve the keywords\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: ...\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: We're talking about specified values only atm\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: Edge sometimes serializes as percentages rather than keywords\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: For certian properties\u003cbr\u003e\r\n\u0026lt;fantasai\u003e https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402330108\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e Existing spec: \"If only one value is specified, the second value is assumed to be center.\" \"The canonical order when serializing is the horizontal component followed by the vertical component.\"\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ...\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e https://drafts.csswg.org/css-values/#position\u003cbr\u003e\r\n\u0026lt;ericwilligers\u003e https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position\u003cbr\u003e\r\n\u0026lt;fantasai\u003e astearns: Any objections to specifying that specified values are serialized as keywords if specified as keyword sand percentages if specified as percentages?\u003cbr\u003e\r\n\u0026lt;fantasai\u003e RESOLVED: above\u003cbr\u003e\r\n\u0026lt;fantasai\u003e RESOLVED: Any objections to specifying that specified values are serialized\u003cbr\u003e\r\n\u0026lt;fantasai\u003e as keywords if specified as keyword sand percentages if specified as\u003cbr\u003e\r\n\u0026lt;fantasai\u003e percentages?\u003cbr\u003e\r\n\u0026lt;fantasai\u003e ericwilligers: If 3 values are specified, we'll need to turn into 4 values\u003cbr\u003e\r\n\u0026lt;heycam\u003e ScribeNick: heycam\u003cbr\u003e\r\n\u0026lt;heycam\u003e ericwilligers: : \"left 10% right\" -\u003e \"left 10% right 0%\"\u003cbr\u003e\r\n\u0026lt;dbaron\u003e There was a discussion about 'left 1% center\" which is apparently no longer a valid \u0026lt;position\u003e but is a \u0026lt;bg-position\u003e.\u003cbr\u003e\r\n\u0026lt;heycam\u003e ericwilligers: \"left 10% 20%\" -\u003e \"left 10% top 20%\"\u003cbr\u003e\r\n\u0026lt;heycam\u003e s/\"left 10% right\"/\"left 10% bottom\"/\u003cbr\u003e\r\n\u0026lt;heycam\u003e s/\"left 10% right 0%\"/\"left 10% bottom 0%\"/\u003cbr\u003e\r\n\u0026lt;heycam\u003e fantasai: if we need a keyword we use top or left, if we need an offset we add a percentage\u003cbr\u003e\r\n\u0026lt;heycam\u003e ericwilligers: plus a weird case for center\u003cbr\u003e\r\n\u0026lt;dbaron\u003e ericwilligers: we can convert 3 values to 4 values by converting \"center\" to \"top 50%\", \"bottom\" to \"bottom 0%\", and \"20%\" to \"top 20%\"\u003cbr\u003e\r\n\u0026lt;heycam\u003e astearns: and there's text in Shapes that does everything you said, except that shapes will convert bottom to top 100%\u003cbr\u003e\r\n\u0026lt;heycam\u003e ericwilligers: we've resolved to remove that text, but I can reuse it\u003cbr\u003e\r\n\u0026lt;heycam\u003e astearns: I don't mind if it stays as bottom or converts to top\u003cbr\u003e\r\n\u0026lt;heycam\u003e fantasai: so left 10% bottom 0% would stay as is, but left 10% bottom would become left 10% top 90%?\u003cbr\u003e\r\n\u0026lt;heycam\u003e astearns: yes\u003cbr\u003e\r\n\u0026lt;heycam\u003e fantasai: if we're preserving the keyword in the case we have the offset, may as well when we don't too\u003cbr\u003e\r\n\u0026lt;heycam\u003e emilio: does everyone support 3 values on background-position?\u003cbr\u003e\r\n\u0026lt;heycam\u003e fantasai: yes\u003cbr\u003e\r\n\u0026lt;heycam\u003e astearns: we ripped it out everywhere we could, but had to leave it there\u003cbr\u003e\r\n\u0026lt;heycam\u003e emilio: ok, I'm fine with that\u003cbr\u003e\r\n\u0026lt;heycam\u003e RESOLVED: For \u0026lt;bg-position\u003e, preserve keywords where we can, center turns to top 50%, and where we need to add a keyword use top/left, where we add an offset, use percentages.\u003cbr\u003e\r\n\u0026lt;heycam\u003e ericwilligers: earlier talking about computed values, I was incorrect to say we never give keywords. we do sometimes!\u003cbr\u003e\r\n\u0026lt;heycam\u003e ... but I don't think we should\u003cbr\u003e\r\n\u0026lt;heycam\u003e ... I propose for computed values, it's always \u0026lt;length-percentage\u003e\u003cbr\u003e\r\n\u0026lt;heycam\u003e Rossen: or calc()\u003cbr\u003e\r\n\u0026lt;heycam\u003e astearns: so for computed values of \u0026lt;bg-position\u003e and \u0026lt;position\u003e, they are always two \u0026lt;length-percentage\u003e values\u003cbr\u003e\r\n\u0026lt;heycam\u003e ... no keywords, calc() if needed\u003cbr\u003e\r\n\u0026lt;heycam\u003e RESOLVED: For computed values of \u0026lt;bg-position\u003e and \u0026lt;position\u003e, they are always two \u0026lt;length-percentage\u003e values.\u003cbr\u003e\r\n\u003c/details\u003e\r\n\r\nSee [official minutes](https://lists.w3.org/Archives/Public/www-style/2018Jul/0027.html)","bodyHTML":"\u003cp dir=\"auto\"\u003eThe Working Group just discussed \u003ccode class=\"notranslate\"\u003eserialization of \u0026lt;position\u0026gt;\u003c/code\u003e, and agreed to the following:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: above\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: Any objections to specifying that specified values are serialized\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: For \u0026lt;bg-position\u0026gt;, preserve keywords where we can, center turns to top 50%, and where we need to add a keyword use top/left, where we add an offset, use percentages.\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode class=\"notranslate\"\u003eRESOLVED: For computed values of \u0026lt;bg-position\u0026gt; and \u0026lt;position\u0026gt;, they are always two \u0026lt;length-percentage\u0026gt; values.\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;fantasai\u0026gt; Topic: serialization of \u0026lt;position\u0026gt;\u003cbr\u003e\n\u0026lt;TabAtkins\u0026gt; The preprocessor features that are :matches()-equivalent explode combinatorially, so the preprocessors trim what they generate. In the common case, nesting expands merely multiplicatively , so they fully expand; so you are already *parsing* a fully-expanded set of selectors.\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; github: https://github.com/\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"294260344\" data-permission-text=\"Title is private\" data-url=\"https://github.com/w3c/csswg-drafts/issues/2274\" data-hovercard-type=\"issue\" data-hovercard-url=\"/w3c/csswg-drafts/issues/2274/hovercard\" href=\"https://github.com/w3c/csswg-drafts/issues/2274\"\u003e/issues/2274\u003c/a\u003e\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; \"\u0026lt;position\u0026gt; is always serialized as 2 or 4 values.\" or \"Neither component may be omitted when serializing.\"\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: I thin we've completely resolved serialization of \u0026lt;position\u0026gt;\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; fantasai: We already resolved that \u0026lt;bg-position\u0026gt; should serialize same as \u0026lt;position\u0026gt;\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; How exactly does \"left 10% center\" serialize?\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; fantasai: Need to resolve that keywords are serialized out in specified value if originally specified as keywords (and not otherwise)\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; emilio: In which order?\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: Horizontal first\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; emilio: And always both\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: Yes\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; dbaron: It feels like this is saying you have to remember the syntax level, but you don't preserve the number of values in the syntax\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; dbaron: But you preserve the keywords\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: ...\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: We're talking about specified values only atm\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: Edge sometimes serializes as percentages rather than keywords\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: For certian properties\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; https://github.com/\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"294260344\" data-permission-text=\"Title is private\" data-url=\"https://github.com/w3c/csswg-drafts/issues/2274\" data-hovercard-type=\"issue\" data-hovercard-url=\"/w3c/csswg-drafts/issues/2274/hovercard\" href=\"https://github.com/w3c/csswg-drafts/issues/2274\"\u003e/issues/2274\u003c/a\u003e#issuecomment-402330108\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; Existing spec: \"If only one value is specified, the second value is assumed to be center.\" \"The canonical order when serializing is the horizontal component followed by the vertical component.\"\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ...\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; https://drafts.csswg.org/css-values/#position\u003cbr\u003e\n\u0026lt;ericwilligers\u0026gt; https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; astearns: Any objections to specifying that specified values are serialized as keywords if specified as keyword sand percentages if specified as percentages?\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; RESOLVED: above\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; RESOLVED: Any objections to specifying that specified values are serialized\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; as keywords if specified as keyword sand percentages if specified as\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; percentages?\u003cbr\u003e\n\u0026lt;fantasai\u0026gt; ericwilligers: If 3 values are specified, we'll need to turn into 4 values\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ScribeNick: heycam\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ericwilligers: : \"left 10% right\" -\u0026gt; \"left 10% right 0%\"\u003cbr\u003e\n\u0026lt;dbaron\u0026gt; There was a discussion about 'left 1% center\" which is apparently no longer a valid \u0026lt;position\u0026gt; but is a \u0026lt;bg-position\u0026gt;.\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ericwilligers: \"left 10% 20%\" -\u0026gt; \"left 10% top 20%\"\u003cbr\u003e\n\u0026lt;heycam\u0026gt; s/\"left 10% right\"/\"left 10% bottom\"/\u003cbr\u003e\n\u0026lt;heycam\u0026gt; s/\"left 10% right 0%\"/\"left 10% bottom 0%\"/\u003cbr\u003e\n\u0026lt;heycam\u0026gt; fantasai: if we need a keyword we use top or left, if we need an offset we add a percentage\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ericwilligers: plus a weird case for center\u003cbr\u003e\n\u0026lt;dbaron\u0026gt; ericwilligers: we can convert 3 values to 4 values by converting \"center\" to \"top 50%\", \"bottom\" to \"bottom 0%\", and \"20%\" to \"top 20%\"\u003cbr\u003e\n\u0026lt;heycam\u0026gt; astearns: and there's text in Shapes that does everything you said, except that shapes will convert bottom to top 100%\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ericwilligers: we've resolved to remove that text, but I can reuse it\u003cbr\u003e\n\u0026lt;heycam\u0026gt; astearns: I don't mind if it stays as bottom or converts to top\u003cbr\u003e\n\u0026lt;heycam\u0026gt; fantasai: so left 10% bottom 0% would stay as is, but left 10% bottom would become left 10% top 90%?\u003cbr\u003e\n\u0026lt;heycam\u0026gt; astearns: yes\u003cbr\u003e\n\u0026lt;heycam\u0026gt; fantasai: if we're preserving the keyword in the case we have the offset, may as well when we don't too\u003cbr\u003e\n\u0026lt;heycam\u0026gt; emilio: does everyone support 3 values on background-position?\u003cbr\u003e\n\u0026lt;heycam\u0026gt; fantasai: yes\u003cbr\u003e\n\u0026lt;heycam\u0026gt; astearns: we ripped it out everywhere we could, but had to leave it there\u003cbr\u003e\n\u0026lt;heycam\u0026gt; emilio: ok, I'm fine with that\u003cbr\u003e\n\u0026lt;heycam\u0026gt; RESOLVED: For \u0026lt;bg-position\u0026gt;, preserve keywords where we can, center turns to top 50%, and where we need to add a keyword use top/left, where we add an offset, use percentages.\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ericwilligers: earlier talking about computed values, I was incorrect to say we never give keywords. we do sometimes!\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ... but I don't think we should\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ... I propose for computed values, it's always \u0026lt;length-percentage\u0026gt;\u003cbr\u003e\n\u0026lt;heycam\u0026gt; Rossen: or calc()\u003cbr\u003e\n\u0026lt;heycam\u0026gt; astearns: so for computed values of \u0026lt;bg-position\u0026gt; and \u0026lt;position\u0026gt;, they are always two \u0026lt;length-percentage\u0026gt; values\u003cbr\u003e\n\u0026lt;heycam\u0026gt; ... no keywords, calc() if needed\u003cbr\u003e\n\u0026lt;heycam\u0026gt; RESOLVED: For computed values of \u0026lt;bg-position\u0026gt; and \u0026lt;position\u0026gt;, they are always two \u0026lt;length-percentage\u0026gt; values.\u003cbr\u003e\n\u003c/details\u003e\n\u003cp dir=\"auto\"\u003eSee \u003ca href=\"https://lists.w3.org/Archives/Public/www-style/2018Jul/0027.html\" rel=\"nofollow\"\u003eofficial minutes\u003c/a\u003e\u003c/p\u003e","bodyVersion":"63c199704eab0fbbeaa319d0b578937e156fc539f6f2b7ad046d67de7dd36243","viewerCanUpdate":false,"url":"https://github.com/w3c/csswg-drafts/issues/2274#issuecomment-402398299","createdAt":"2018-07-04T08:04:23Z","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":"2022-10-10T23:48:24Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/fantasai","login":"fantasai","id":"MDQ6VXNlcjcyNTcxNw=="},"id":"UCE_lALOAI0trM4X_Bxbzig0wXI"},"__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":"Y3Vyc29yOnYyOpPPAAABZGRSJ1gAqTQwMjM5ODI5OQ=="},{"node":{"__typename":"ReferencedEvent","__isIssueTimelineItems":"ReferencedEvent","__isTimelineEvent":"ReferencedEvent","databaseId":1960914667,"createdAt":"2018-11-12T17:23:50Z","actor":{"__typename":"User","login":"moz-v2v-gh","id":"MDQ6VXNlcjcyMTc1MTU=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/7217515?s=64\u0026v=4"},"willCloseSubject":false,"subject":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWUyOTQyNjAzNDQ="},"commit":{"message":"Bug 1473184: Remove serialize_basicshape_position. r=xidorn\n\nPer https://github.com/w3c/csswg-drafts/issues/2274. There's a whole lot of new failures, but those need to be updated along with the spec changes in that issue.\n\nWe did resolve that position serialized the same everywhere though.\n\nDifferential Revision: https://phabricator.services.mozilla.com/D1933\n\n--HG--\nextra : moz-landing-system : lando","messageHeadlineHTML":"Bug 1473184: Remove serialize_basicshape_position. r=xidorn","messageBodyHTML":"Per \u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"294260344\" data-permission-text=\"Title is private\" data-url=\"https://github.com/w3c/csswg-drafts/issues/2274\" data-hovercard-type=\"issue\" data-hovercard-url=\"/w3c/csswg-drafts/issues/2274/hovercard\" href=\"https://github.com/w3c/csswg-drafts/issues/2274\"\u003ew3c/csswg-drafts#2274\u003c/a\u003e. There's a whole lot of new failures, but those need to be updated along with the spec changes in that issue.\n\nWe did resolve that position serialized the same everywhere though.\n\nDifferential Revision: \u003ca href=\"https://phabricator.services.mozilla.com/D1933\" rel=\"nofollow\"\u003ehttps://phabricator.services.mozilla.com/D1933\u003c/a\u003e\n\n--HG--\nextra : moz-landing-system : lando","url":"https://github.com/mozilla/gecko-dev/commit/bea44aa4f66cc05398643280d80829dd90253803","abbreviatedOid":"bea44aa","signature":null,"verificationStatus":"UNSIGNED","hasSignature":false,"repository":{"name":"gecko-dev","owner":{"__typename":"Organization","login":"mozilla","id":"MDEyOk9yZ2FuaXphdGlvbjEzMTUyNA=="},"defaultBranch":"master","id":"MDEwOlJlcG9zaXRvcnkxMzUwOTEwOA=="},"id":"MDY6Q29tbWl0MTM1MDkxMDg6YmVhNDRhYTRmNjZjYzA1Mzk4NjQzMjgwZDgwODI5ZGQ5MDI1MzgwMw=="},"__isNode":"ReferencedEvent","id":"MDE1OlJlZmVyZW5jZWRFdmVudDE5NjA5MTQ2Njc="},"cursor":"Y3Vyc29yOnYyOpPPAAABZwjzbHABqjE5NjA5MTQ2Njc="}]},"backTimelineItems":{"pageInfo":{"hasPreviousPage":true,"startCursor":null},"totalCount":43,"edges":[]}},"id":"MDEwOlJlcG9zaXRvcnk5MjUyMjY4"},"safeViewer":null}},"timestamp":1741353774}]},"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_cross_repo_selection":false,"issues_react_disable_sticky_header_observer":true,"issues_react_grouped_diff_on_edit_history":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*/ .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*/ .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,fDhSWy,kpqASb,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.g5[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*/ .gtSSYO{-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:191;--label-g:218;--label-b:220;--label-h:184;--label-s:29;--label-l:81;--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,gtSSYO,"}/*!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*/ .jawglP{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-done-emphasis,var(--color-done-emphasis,#8250df));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:14px;white-space:nowrap;}/*!sc*/ data-styled.g124[id="StateLabel__StateLabelBase-sc-qthdln-0"]{content:"jawglP,"}/*!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-values] Inconsistent position serialization</bdi> <span class="Box-sc-g0xbh4-0 YJa-Di">#2274</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 jawglP"><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="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path></svg>Closed</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 jawglP"><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="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path></svg>Closed</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-values] Inconsistent position serialization</bdi></a><span class="Text__StyledText-sc-17v1xeu-0 bvWSyv">#2274</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%20Testcase%20(WPT)%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 Testcase (WPT)</span></span></span><span class="sr-only" id="MDU6TGFiZWw2NjU0MzM1MDE=-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-backgrounds-4%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-backgrounds-4</span></span></span><span class="sr-only" id="MDU6TGFiZWwzODE4ODgyMzA=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R1qq9b:"></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-values-4%22" muted="" aria-describedby=":R2aq9b:"><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-values-4</span></span></span><span class="sr-only" id="MDU6TGFiZWw0MTAzMDIyMzQ=-tooltip">Current Work</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="Current Work" role="tooltip" aria-hidden="true" id=":R2aq9b:">Current Work</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%22cssom-1%22" muted="" aria-describedby=":R2qq9b:"><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">cssom-1</span></span></span><span class="sr-only" id="MDU6TGFiZWwzODE4OTI0MDk=-tooltip">Current Work</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="Current Work" role="tooltip" aria-hidden="true" id=":R2qq9b:">Current Work</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%22topic%3A%20serialization%22" muted="" aria-describedby=":R3aq9b:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 gtSSYO"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">topic: serialization</span></span></span><span class="sr-only" id="LA_kwDOAI0trM7LAwL8-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R3aq9b:"></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="/ewilligers" data-hovercard-url="/users/ewilligers/hovercard" aria-label="@ewilligers's profile"><img data-component="Avatar" class="Avatar-module__issueViewerAvatar--grA_h prc-Avatar-Avatar-ZRS-m" alt="@ewilligers" width="40" height="40" style="--avatarSize-regular:40px" src="https://avatars.githubusercontent.com/u/929206?u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3&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="/ewilligers" data-hovercard-url="/users/ewilligers/hovercard" aria-label="@ewilligers's profile"><img data-component="Avatar" class="prc-Avatar-Avatar-ZRS-m" alt="@ewilligers" width="24" height="24" style="--avatarSize-regular:24px" src="https://avatars.githubusercontent.com/u/929206?u=6a498b3de02e9d5ab2e010a6b3012c17f42f16d3&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/ewilligers" data-hovercard-url="/users/ewilligers/hovercard" data-testid="issue-body-header-author">ewilligers</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/2274#issue-294260344" data-testid="issue-body-header-link"><relative-time sx="[object Object]" class="sc-aXZVg gcWyXp">on <!-- -->Feb 5, 2018</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-haspopup="true" aria-expanded="false" tabindex="0" class="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" aria-labelledby=":Rv5bd5db:" 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><span class="Tooltip__StyledTooltip-sc-e45c7z-0 jOyaRH" data-direction="s" aria-hidden="true" id=":Rv5bd5db:">Issue body actions</span></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">The <code class="notranslate">position</code> <a href="https://drafts.csswg.org/css-values/#position" rel="nofollow">spec</a> mentions</p> <blockquote> <p dir="auto">The canonical order when serializing is the horizontal component followed by the vertical component.</p> </blockquote> <p dir="auto">but does not discuss if the serialization should contain the author's supplied keywords or if they should be converted to equivalent percentages.</p> <p dir="auto">The spec also doesn't mention if 'center' should be added or removed when serializing. (Edge and Safari sometimes serialize <code class="notranslate">center center</code> as <code class="notranslate">center</code>.)</p> <p dir="auto">Browsers are currently inconsistent with themselves and each other:</p> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>10%</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>10% center</td> <td>10%</td> <td>10% center</td> <td>10% center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>10% center</td> <td>10%</td> <td>10% center</td> <td>10% center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>10% center</td> <td>10% 50%</td> <td>10% center</td> <td>10% center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>10% center</td> <td>10% 50%</td> <td>10% center</td> <td>10% center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>10% 50%</td> <td>10%</td> <td>10%</td> <td>10% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>20% 30px</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> <td>20% 30px</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>30px center</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>30px center</td> <td>30px</td> <td>30px center</td> <td>30px center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>30px center</td> <td>30px</td> <td>30px center</td> <td>30px center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>30px center</td> <td>30px 50%</td> <td>30px center</td> <td>30px center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>30px center</td> <td>30px center</td> <td>30px center</td> <td>30px center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>30px 50%</td> <td>30px center</td> <td>30px center</td> <td>30px 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>40px top</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>40px top</td> <td>40px top</td> <td>40px top</td> <td>40px top</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>40px top</td> <td>40px top</td> <td>40px top</td> <td>40px top</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>40px top</td> <td>40px 0%</td> <td>40px top</td> <td>40px top</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>40px top</td> <td>40px top</td> <td>40px top</td> <td>40px top</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>40px 0%</td> <td>40px top</td> <td>40px top</td> <td>40px 0%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>bottom 10% right 20%</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>right 20% bottom 10%</td> <td>calc(80%) calc(90%)</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>right 20% bottom 10%</td> <td>undefined</td> <td>right 20% bottom 10%</td> <td>right 20% bottom 10%</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>80% 90%</td> <td>bottom 10% right 20%</td> <td>bottom 10% right 20%</td> <td>80% 90%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>bottom right</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>right bottom</td> <td>100% 100%</td> <td>right bottom</td> <td>right bottom</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> <td>right bottom</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>100% 100%</td> <td>bottom right</td> <td>bottom right</td> <td>100% 100%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>center</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center center</td> <td>center</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center center</td> <td>center</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center center</td> <td>50% 50%</td> <td>center center</td> <td>center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center center</td> <td>center 50%</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 50%</td> <td>center</td> <td>center</td> <td>50% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>center 50px</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center 50px</td> <td>50% 50px</td> <td>center 50px</td> <td>center 50px</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> <td>center 50px</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 50px</td> <td>center 50px</td> <td>center 50px</td> <td>50% 50px</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>center bottom</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center bottom</td> <td>bottom</td> <td>center bottom</td> <td>center bottom</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center bottom</td> <td>bottom</td> <td>center bottom</td> <td>center bottom</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center bottom</td> <td>50% 100%</td> <td>center bottom</td> <td>center bottom</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center bottom</td> <td>center bottom</td> <td>center bottom</td> <td>center bottom</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 100%</td> <td>center bottom</td> <td>center bottom</td> <td>50% 100%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>center center</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center center</td> <td>center</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center center</td> <td>center</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center center</td> <td>50% 50%</td> <td>center center</td> <td>center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center center</td> <td>center center</td> <td>center center</td> <td>center center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 50%</td> <td>center center</td> <td>center center</td> <td>50% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>center left</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>left center</td> <td>0% 50%</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>left center</td> <td>left center</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>0% 50%</td> <td>center left</td> <td>center left</td> <td>0% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>left</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>left center</td> <td>0% 50%</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>left center</td> <td>left 50%</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>0% 50%</td> <td>left</td> <td>left</td> <td>0% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>left bottom</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>left bottom</td> <td>0% 100%</td> <td>left bottom</td> <td>left bottom</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> <td>left bottom</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>0% 100%</td> <td>left bottom</td> <td>left bottom</td> <td>0% 100%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>left center</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>left center</td> <td>left</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>left center</td> <td>0% 50%</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>left center</td> <td>left center</td> <td>left center</td> <td>left center</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>0% 50%</td> <td>left center</td> <td>left center</td> <td>0% 50%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>right 30% top 60px</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>right 30% top 60px</td> <td>calc(70%) 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>right 30% top 60px</td> <td>undefined</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>70% 60px</td> <td>right 30% top 60px</td> <td>right 30% top 60px</td> <td>70% 60px</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>right 40%</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>right 40%</td> <td>100% 40%</td> <td>right 40%</td> <td>right 40%</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> <td>right 40%</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>100% 40%</td> <td>right 40%</td> <td>right 40%</td> <td>100% 40%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>top</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center top</td> <td>top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center top</td> <td>top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center top</td> <td>50% 0%</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center top</td> <td>50% top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 0%</td> <td>top</td> <td>top</td> <td>50% 0%</td> </tr> </tbody> </table></markdown-accessiblity-table> <markdown-accessiblity-table><table role="table"> <thead> <tr> <th>top center</th> <th>Chrome 64</th> <th>Edge 16</th> <th>Firefox 58</th> <th>Safari 11</th> </tr> </thead> <tbody> <tr> <td>background-image: radial-gradient(at <code class="notranslate"><position></code>, red, blue)</td> <td>center top</td> <td>top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>background-position: <code class="notranslate"><bg-position></code></td> <td>center top</td> <td>top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>object-position: <code class="notranslate"><position></code></td> <td>center top</td> <td>50% 0%</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>perspective-origin: <code class="notranslate"><position></code></td> <td>center top</td> <td>center top</td> <td>center top</td> <td>center top</td> </tr> <tr> <td>shape-outside: circle(at <code class="notranslate"><position></code>)</td> <td>50% 0%</td> <td>top center</td> <td>top center</td> <td>50% 0%</td> </tr> </tbody> </table></markdown-accessiblity-table></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 class="IssueViewer-module__issueViewerMetadataPane--Q1n1b" data-testid="issue-viewer-metadata-pane"><h2 class="IssueViewer-module__metadataHeader--ZtOKL prc-Heading-Heading-6CmGO">Metadata</h2><h2 class="IssueViewer-module__largeScreenMetadataHeader--YW31U sr-only 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=":R1hedb:"><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=":R1hedb:"></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%20Testcase%20(WPT)%22" muted="" aria-describedby=":R2hedb:"><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 Testcase (WPT)</span></span></span><span class="sr-only" id="MDU6TGFiZWw2NjU0MzM1MDE=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R2hedb:"></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-backgrounds-4%22" muted="" aria-describedby=":R3hedb:"><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-backgrounds-4</span></span></span><span class="sr-only" id="MDU6TGFiZWwzODE4ODgyMzA=-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R3hedb:"></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-values-4%22" muted="" aria-describedby=":R4hedb:"><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-values-4</span></span></span><span class="sr-only" id="MDU6TGFiZWw0MTAzMDIyMzQ=-tooltip">Current Work</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="Current Work" role="tooltip" aria-hidden="true" id=":R4hedb:">Current Work</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%22cssom-1%22" muted="" aria-describedby=":R5hedb:"><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">cssom-1</span></span></span><span class="sr-only" id="MDU6TGFiZWwzODE4OTI0MDk=-tooltip">Current Work</span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 dFtvlV" data-direction="s" aria-label="Current Work" role="tooltip" aria-hidden="true" id=":R5hedb:">Current Work</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%22topic%3A%20serialization%22" muted="" aria-describedby=":R6hedb:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 gtSSYO"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="Text__StyledText-sc-17v1xeu-0 hWqAbU">topic: serialization</span></span></span><span class="sr-only" id="LA_kwDOAI0trM7LAwL8-tooltip"></span></a><span class="Tooltip__StyledTooltip-sc-e45c7z-0 gvbHuF" data-direction="s" aria-label="" role="tooltip" aria-hidden="true" id=":R6hedb:"></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>