Revert "Playwright - html padding-right 15px to simulate TestCafe scrollbar (fixes CI screenshot mismatches)"

aleksei-semikozov · aleksei-semikozov · commit 6b39b6b3f901 · 2026-03-27T10:29:20.000-03:00
This reverts commit ee50502.
diff --git a/FINISH_REVIEW.md b/FINISH_REVIEW.md
@@ -68,11 +68,11 @@ These components have expanded forEach that need to be collapsed:
 - `scheduler/common/` — various files with expanded forEach
 - `accessibility/*.matrix.spec.ts` — matrix expansion (OK — mirrors TC testAccessibility pattern)
 
-### Screenshot Dimension Mismatches (CI vs Local) — SOLVED
-- **Root cause:** TestCafe headless Chrome has 15px classic scrollbar, Playwright headless Chromium has 0px overlay scrollbar. This made content 15px wider in Playwright, breaking all etalon comparisons.
-- **Solution:** `html { padding-right: 15px !important; box-sizing: border-box !important; }` in `container.html`. This simulates the scrollbar space, making body content = 1200 - 16 margin - 15 padding = 1169px — matching TestCafe layout.
-- **Known workaround:** This is an intentional CSS hack to match TestCafe headless Chrome behavior. Playwright headless Chromium uses overlay scrollbar (0px) which cannot be changed via CSS. The padding-right approach reserves the same 15px space without affecting visual layout.
-- ViewOffset additionally uses viewport 1185 (project chromium-1185) for tests with etalons that depend on full-page width.
+### Screenshot Dimension Mismatches (CI vs Local)
+- TestCafe headless Chrome has 15px scrollbar, Playwright headless has 0px
+- ViewOffset uses viewport 1185 (project chromium-1185) to match TC etalons
+- Other components use viewport 1200 + `::-webkit-scrollbar` CSS
+- Some tests fail on CI but pass locally due to font rendering differences
 
 ### Accessibility Matrix Tests
 TC uses `testAccessibility()` which generates N tests per option combination at runtime.
diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html
@@ -22,12 +22,11 @@
         .dx-scheduler .dx-scrollable-scroll { visibility: hidden !important; }
         body:has(#tabPanel) { min-height: 500px; }
 
-        /* Simulate TestCafe headless Chrome 15px scrollbar.
-           Playwright headless Chromium has overlay scrollbar (0px width),
-           but TestCafe etalons were captured with 15px classic scrollbar.
-           padding-right on html reserves 15px, making body content 1169px
-           instead of 1184px — matching TestCafe layout. */
-        html { padding-right: 15px !important; box-sizing: border-box !important; }
+        /* Match TestCafe headless Chrome scrollbar behavior:
+           scrollbar appears only on overflow, width 15px when present */
+        ::-webkit-scrollbar { width: 15px !important; }
+        ::-webkit-scrollbar-track { background: transparent !important; }
+        ::-webkit-scrollbar-thumb { background: transparent !important; }
     </style>
 </head>
 <body class="dx-surface">
