Update Top HTML/CSS Interoperability pain points for 2025

.devcontainer/devcontainer.json

@@ -18,7 +18,9 @@
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
     "ghcr.io/devcontainers/features/go:1": {
-      "version": "1.25.4"
+      "version": "1.25.4",
+      // Reminder: bump this whenever we bump the go version.
+      "golangciLintVersion": "2.7.2"
     },
     "ghcr.io/devcontainers/features/github-cli:1": {},
     "ghcr.io/devcontainers/features/docker-in-docker:2": {

e2e/tests/overview-page.spec.ts

@@ -22,6 +22,8 @@ import {
   waitForOverviewPageLoad,
 } from './utils';
 
+const DEFAULT_PAGE_SIZE = 25;
+
 test('matches the screenshot', async ({page}) => {
   await gotoOverviewPageUrl(page, 'http://localhost:5555/');
   const pageContainer = page.locator('.page-container');
@@ -72,7 +74,7 @@ test('shows an error that their query is invalid', async ({page}) => {
 test('shows an unknown error when there is an internal error', async ({
   page,
 }) => {
-  await page.route('**/v1/features?page_size=25', route =>
+  await page.route('**/v1/features?page_size=' + DEFAULT_PAGE_SIZE, route =>
     route.fulfill({
       status: 500,
       contentType: 'application/json',
@@ -388,14 +390,14 @@ test.describe('saved searches', () => {
         1,
         'http://localhost:8080/v1/saved-searches/a09386fe-65f1-4640-b28d-3cf2f2de69c9',
       );
-      await verifyTableRowCount(25);
+      await verifyTableRowCount(DEFAULT_PAGE_SIZE);
     });
 
     await test.step('Navigate to next page (1)', async () => {
       await clickNextPage();
       const featureCount = await getOverviewPageFeatureCount(page);
       expect(featureCount, 'Feature count should be 73').toEqual(73);
-      await verifyTableRowCount(25);
+      await verifyTableRowCount(DEFAULT_PAGE_SIZE);
       await verifyFeaturesRequest(
         'baseline_status:limited OR available_on:chrome',
       );
@@ -468,7 +470,11 @@ test.describe('saved searches', () => {
         return url.pathname.split('/').pop();
       }),
     );
-    expect(rowIDs.length).toBe(10);
+    // Assert that data is loaded.
+    expect(rowIDs.length).toBeGreaterThan(0);
+    // Assert that it does not exceed the default page size
+    expect(rowIDs.length).toBeLessThanOrEqual(DEFAULT_PAGE_SIZE);
+
     // rowIDs should match ids in the same order.
     expect(rowIDs).toStrictEqual(ids);
     await expect(

frontend/src/static/js/utils/constants.ts

@@ -69,30 +69,34 @@ export interface OpenSavedSearchEvent {
 
 export const TOP_CSS_INTEROP_ISSUES: string[] = [
   'anchor-positioning',
-  'container-queries',
-  'has',
-  'nesting',
-  'view-transitions',
-  'subgrid',
-  'grid',
-  'scrollbar-gutter',
-  'scrollbar-width',
-  'scrollbar-color',
   'scroll-driven-animations',
+  'view-transitions',
+  'cross-document-view-transitions',
+  'container-style-queries',
+  'nesting',
+  'has',
+  'container-queries',
   'scope',
+  'if',
+  'grid',
 ];
 
+// Note: This list is used in getSpecialFeatureDetails in util/cmd/load_fake_data/main.go
+// Changes to this will need to be reflected there for the playwright tests to pass.
+// See e2e/tests/overview-page.spec.ts for the applicable tests.
 export const TOP_HTML_INTEROP_ISSUES: string[] = [
+  'customizable-select',
   'popover',
   'anchor-positioning',
-  'cross-document-view-transitions',
-  'dialog',
-  'datalist',
   'customized-built-in-elements',
+  'shadow-dom',
+  'dialog',
+  'view-transitions',
+  'cross-document-view-transitions',
   'file-system-access',
-  'scroll-driven-animations',
-  'notifications',
-  'web-bluetooth',
+  'input-date-time',
+  'invoker-commands',
+  'webusb',
 ];
 
 // This focus area to web feature mapping is defined at
@@ -160,15 +164,15 @@ export const DEFAULT_GLOBAL_SAVED_SEARCHES: GlobalSavedSearch[] = [
     name: 'Top CSS Interop issues',
     query: `id:${TOP_CSS_INTEROP_ISSUES.join(' OR id:')}`,
     description:
-      "This list reflects the top 10 interoperability pain points identified by developers in the State of CSS 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
+      "This list reflects the top 10 interoperability pain points identified by developers in the State of CSS 2025 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
     is_ordered: true,
     override_num_param: 25,
   },
   {
     name: 'Top HTML Interop issues',
     query: `id:${TOP_HTML_INTEROP_ISSUES.join(' OR id:')}`,
     description:
-      "This list reflects the top 10 interoperability pain points identified by developers in the State of HTML 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements.",
+      "This list reflects the top 10 interoperability pain points identified by developers in the State of HTML 2025 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
     is_ordered: true,
     override_num_param: 25,
   },

util/cmd/load_fake_data/main.go

@@ -95,6 +95,11 @@ func getSpecialFeatureDetails() []struct {
 		id   string
 	}{
 		// Top HTML Interop Issues
+		// Copied from TOP_HTML_INTEROP_ISSUES in frontend/src/static/js/utils/constants.ts
+		{
+			name: "Customizable Select",
+			id:   "customizable-select",
+		},
 		{
 			name: "Popover",
 			id:   "popover",
@@ -105,36 +110,40 @@ func getSpecialFeatureDetails() []struct {
 			id:   featurePageFeatureKey,
 		},
 		{
-			name: "Cross-Document View Transitions",
-			id:   "cross-document-view-transitions",
+			name: "Customized Built-in Elements",
+			id:   "customized-built-in-elements",
+		},
+		{
+			name: "Shadow DOM",
+			id:   "shadow-dom",
 		},
 		{
 			name: "Dialog",
 			id:   "dialog",
 		},
 		{
-			name: "Data List",
-			id:   "datalist",
+			name: "View Transitions",
+			id:   "view-transitions",
 		},
 		{
-			name: "Customized Built-in Elements",
-			id:   "customized-built-in-elements",
+			name: "Cross Document View Transitions",
+			id:   "cross-document-view-transitions",
 		},
 		{
 			name: "File System Access",
 			id:   "file-system-access",
 		},
 		{
-			name: "Scroll-Driven Animations",
-			id:   "scroll-driven-animations",
+			name: "Input Date Time",
+			id:   "input-date-time",
 		},
 		{
-			name: "Notifications",
-			id:   "notifications",
+			name: "Invoker Commands",
+			id:   "invoker-commands",
 		},
 		{
-			name: "Web Bluetooth",
-			id:   "web-bluetooth",
+			name: "WebUSB",
+			id:   "webusb",
 		},
 		// Feature evolution
 		// old-feature will be moved to new-feature