@viewscript/renderer 0.1.0-202605140639

package/playwright-report/data/9281aca8abfb06c6cecb35d5ddd13d61f8c752d8.md

@@ -0,0 +1,226 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: gradient-animation.spec.ts >> Gradient Rendering: Conic (Sweep) Gradients >> renders rotated conic gradient
+- Location: tests/e2e/gradient-animation.spec.ts:254:3
+
+# Error details
+
+```
+Error: expect(received).toBeGreaterThan(expected)
+
+Expected: > 255
+Received:   1
+```
+
+# Test source
+
+```ts
+  167 |       css: 'radial-gradient(circle at center, white, black)',
+  168 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  169 |     });
+  170 | 
+  171 |     // Center should be white, corners should be dark
+  172 |     const center = getPixelColor(pixelBuffer, 100, 100, 50, 50);
+  173 |     const corner = getPixelColor(pixelBuffer, 100, 100, 5, 5);
+  174 | 
+  175 |     expect(center.r).toBeGreaterThan(200);
+  176 |     expect(center.g).toBeGreaterThan(200);
+  177 |     expect(center.b).toBeGreaterThan(200);
+  178 | 
+  179 |     expect(corner.r).toBeLessThan(100);
+  180 |     expect(corner.g).toBeLessThan(100);
+  181 |     expect(corner.b).toBeLessThan(100);
+  182 | 
+  183 |     await compareGolden(pixelBuffer, 'radial-circle-center');
+  184 |   });
+  185 | 
+  186 |   /**
+  187 |    * Test: Offset focal point radial gradient
+  188 |    *
+  189 |    * CSS: radial-gradient(circle at 25% 25%, red, blue)
+  190 |    * Expected: Gradient center offset to top-left quadrant
+  191 |    */
+  192 |   test('renders offset radial gradient', async ({ page }) => {
+  193 |     await setupDeterministicRenderer(page);
+  194 | 
+  195 |     const pixelBuffer = await renderGradient(page, {
+  196 |       type: 'radial-gradient',
+  197 |       css: 'radial-gradient(circle at 25% 25%, red, blue)',
+  198 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  199 |     });
+  200 | 
+  201 |     // Point at 25%, 25% should be red (center of gradient)
+  202 |     const focalPoint = getPixelColor(pixelBuffer, 100, 100, 25, 25);
+  203 | 
+  204 |     expect(focalPoint.r).toBeGreaterThan(200);
+  205 |     expect(focalPoint.b).toBeLessThan(100);
+  206 | 
+  207 |     await compareGolden(pixelBuffer, 'radial-offset');
+  208 |   });
+  209 | });
+  210 | 
+  211 | // =============================================================================
+  212 | // Conic Gradient Tests
+  213 | // =============================================================================
+  214 | 
+  215 | test.describe('Gradient Rendering: Conic (Sweep) Gradients', () => {
+  216 |   test.beforeAll(async () => {
+  217 |     ensureDirectories();
+  218 |   });
+  219 | 
+  220 |   /**
+  221 |    * Test: Color wheel conic gradient
+  222 |    *
+  223 |    * CSS: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red)
+  224 |    * Expected: Full color wheel around center
+  225 |    */
+  226 |   test('renders color wheel conic gradient', async ({ page }) => {
+  227 |     await setupDeterministicRenderer(page);
+  228 | 
+  229 |     const pixelBuffer = await renderGradient(page, {
+  230 |       type: 'conic-gradient',
+  231 |       css: 'conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red)',
+  232 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  233 |     });
+  234 | 
+  235 |     // Sample at 0deg (right), 90deg (bottom), 180deg (left), 270deg (top)
+  236 |     // relative to center (50, 50)
+  237 |     const right = getPixelColor(pixelBuffer, 100, 100, 95, 50); // 0deg - red
+  238 |     const bottom = getPixelColor(pixelBuffer, 100, 100, 50, 95); // 90deg - between yellow and lime
+  239 |     const left = getPixelColor(pixelBuffer, 100, 100, 5, 50);   // 180deg - cyan
+  240 |     const top = getPixelColor(pixelBuffer, 100, 100, 50, 5);    // 270deg - blue/magenta
+  241 | 
+  242 |     // Right edge (0deg) should be red
+  243 |     expect(right.r).toBeGreaterThan(150);
+  244 | 
+  245 |     await compareGolden(pixelBuffer, 'conic-color-wheel');
+  246 |   });
+  247 | 
+  248 |   /**
+  249 |    * Test: Rotated conic gradient
+  250 |    *
+  251 |    * CSS: conic-gradient(from 90deg at center, red, blue)
+  252 |    * Expected: Gradient starts from bottom instead of right
+  253 |    */
+  254 |   test('renders rotated conic gradient', async ({ page }) => {
+  255 |     await setupDeterministicRenderer(page);
+  256 | 
+  257 |     const pixelBuffer = await renderGradient(page, {
+  258 |       type: 'conic-gradient',
+  259 |       css: 'conic-gradient(from 90deg at center, red, blue)',
+  260 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  261 |     });
+  262 | 
+  263 |     // With 90deg rotation, red should be at bottom, blue at top
+  264 |     const bottom = getPixelColor(pixelBuffer, 100, 100, 50, 95);
+  265 |     const top = getPixelColor(pixelBuffer, 100, 100, 50, 5);
+  266 | 
+> 267 |     expect(bottom.r).toBeGreaterThan(bottom.b); // More red at bottom
+      |                      ^ Error: expect(received).toBeGreaterThan(expected)
+  268 |     expect(top.b).toBeGreaterThan(top.r); // More blue at top
+  269 | 
+  270 |     await compareGolden(pixelBuffer, 'conic-rotated');
+  271 |   });
+  272 | });
+  273 | 
+  274 | // =============================================================================
+  275 | // T-Vector Animation Tests
+  276 | // =============================================================================
+  277 | 
+  278 | test.describe('Gradient Animation: T-Vector Binding', () => {
+  279 |   test.beforeAll(async () => {
+  280 |     ensureDirectories();
+  281 |   });
+  282 | 
+  283 |   /**
+  284 |    * Test: Animated gradient angle
+  285 |    *
+  286 |    * T-vector controls the gradient angle: as T increases, angle rotates.
+  287 |    * This validates that P-dimension constraints properly propagate to GPU.
+  288 |    */
+  289 |   test('animates gradient angle via T-vector', async ({ page }) => {
+  290 |     await setupDeterministicRenderer(page);
+  291 | 
+  292 |     // Frame 1: T=0, angle=0deg
+  293 |     const frame1 = await renderAnimatedGradient(page, {
+  294 |       type: 'linear-gradient',
+  295 |       baseAngle: 0,
+  296 |       tValue: 0,
+  297 |       anglePerT: 90, // 90 degrees per T unit
+  298 |       colors: ['red', 'blue'],
+  299 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  300 |     });
+  301 | 
+  302 |     // Frame 2: T=1, angle=90deg
+  303 |     const frame2 = await renderAnimatedGradient(page, {
+  304 |       type: 'linear-gradient',
+  305 |       baseAngle: 0,
+  306 |       tValue: 1,
+  307 |       anglePerT: 90,
+  308 |       colors: ['red', 'blue'],
+  309 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  310 |     });
+  311 | 
+  312 |     // Frame 1 should be horizontal (red on left)
+  313 |     const f1Left = getPixelColor(frame1, 100, 100, 10, 50);
+  314 |     expect(f1Left.r).toBeGreaterThan(f1Left.b);
+  315 | 
+  316 |     // Frame 2 should be vertical (red on top)
+  317 |     const f2Top = getPixelColor(frame2, 100, 100, 50, 10);
+  318 |     expect(f2Top.r).toBeGreaterThan(f2Top.b);
+  319 | 
+  320 |     // Frames should be different
+  321 |     const hash1 = computeHash(frame1);
+  322 |     const hash2 = computeHash(frame2);
+  323 |     expect(hash1).not.toBe(hash2);
+  324 |   });
+  325 | 
+  326 |   /**
+  327 |    * Test: Animated color stop positions
+  328 |    *
+  329 |    * T-vector controls color stop positions for dynamic effects.
+  330 |    */
+  331 |   test('animates color stop positions via T-vector', async ({ page }) => {
+  332 |     await setupDeterministicRenderer(page);
+  333 | 
+  334 |     // Frame 1: First stop at 30%
+  335 |     const frame1 = await renderAnimatedGradient(page, {
+  336 |       type: 'linear-gradient',
+  337 |       baseAngle: 90, // Top to bottom
+  338 |       tValue: 0.3,
+  339 |       colors: ['red', 'blue'],
+  340 |       stopPositions: [{ base: 0, tFactor: 1 }, { base: 1, tFactor: 0 }],
+  341 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  342 |     });
+  343 | 
+  344 |     // Frame 2: First stop at 70%
+  345 |     const frame2 = await renderAnimatedGradient(page, {
+  346 |       type: 'linear-gradient',
+  347 |       baseAngle: 90,
+  348 |       tValue: 0.7,
+  349 |       colors: ['red', 'blue'],
+  350 |       stopPositions: [{ base: 0, tFactor: 1 }, { base: 1, tFactor: 0 }],
+  351 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  352 |     });
+  353 | 
+  354 |     // In frame 1, red extends further (to ~30% from top)
+  355 |     // In frame 2, red extends much further (to ~70% from top)
+  356 |     const f1Mid = getPixelColor(frame1, 100, 100, 50, 50);
+  357 |     const f2Mid = getPixelColor(frame2, 100, 100, 50, 50);
+  358 | 
+  359 |     // Frame 2 middle should have more red than frame 1 middle
+  360 |     expect(f2Mid.r).toBeGreaterThan(f1Mid.r);
+  361 |   });
+  362 | });
+  363 | 
+  364 | // =============================================================================
+  365 | // Tile Mode Tests
+  366 | // =============================================================================
+  367 | 
+```