@mkhuda/dom-screenshot 0.0.1 → 1.0.1

package/tests/fixtures/styles.ts

@@ -0,0 +1,288 @@
+/**
+ * CSS and style test fixtures
+ */
+
+/**
+ * Basic CSS fixtures
+ */
+export const CSS_FIXTURES = {
+  /**
+   * Basic div with color
+   */
+  coloredDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background-color: blue;
+      color: white;
+    ">Colored</div>
+  `,
+
+  /**
+   * Gradient background
+   */
+  gradientDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background: linear-gradient(to right, red, blue);
+    ">Gradient</div>
+  `,
+
+  /**
+   * Border and shadow
+   */
+  borderShadowDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      border: 2px solid black;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      background-color: white;
+    ">Border & Shadow</div>
+  `,
+
+  /**
+   * Border radius
+   */
+  borderRadiusDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background-color: green;
+      border-radius: 50%;
+    ">Circle</div>
+  `,
+
+  /**
+   * Transform and rotation
+   */
+  transformDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background-color: orange;
+      transform: rotate(45deg);
+    ">Rotated</div>
+  `,
+
+  /**
+   * Opacity
+   */
+  opacityDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background-color: purple;
+      opacity: 0.5;
+    ">Transparent</div>
+  `,
+
+  /**
+   * Font styling
+   */
+  fontStyledDiv: `
+    <div style="
+      font-family: Arial, sans-serif;
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+      line-height: 1.5;
+    ">
+      <p>Styled text</p>
+    </div>
+  `,
+
+  /**
+   * Flexbox layout
+   */
+  flexboxDiv: `
+    <div style="
+      display: flex;
+      gap: 10px;
+      background-color: #f0f0f0;
+      padding: 10px;
+    ">
+      <div style="
+        width: 50px;
+        height: 50px;
+        background-color: red;
+      "></div>
+      <div style="
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      "></div>
+      <div style="
+        width: 50px;
+        height: 50px;
+        background-color: blue;
+      "></div>
+    </div>
+  `,
+
+  /**
+   * Grid layout
+   */
+  gridDiv: `
+    <div style="
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      background-color: #f0f0f0;
+      padding: 10px;
+    ">
+      <div style="background-color: red; height: 50px;"></div>
+      <div style="background-color: green; height: 50px;"></div>
+      <div style="background-color: blue; height: 50px;"></div>
+    </div>
+  `,
+
+  /**
+   * Padding and margin
+   */
+  spacingDiv: `
+    <div style="
+      background-color: #ddd;
+      padding: 20px;
+      margin: 10px;
+      border: 1px solid #999;
+    ">
+      <div style="
+        background-color: white;
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid #ccc;
+      ">Spaced content</div>
+    </div>
+  `,
+
+  /**
+   * Text alignment
+   */
+  textAlignDiv: `
+    <div style="width: 200px;">
+      <p style="text-align: left;">Left aligned</p>
+      <p style="text-align: center;">Center aligned</p>
+      <p style="text-align: right;">Right aligned</p>
+    </div>
+  `,
+
+  /**
+   * Overflow handling
+   */
+  overflowDiv: `
+    <div style="
+      width: 100px;
+      height: 100px;
+      background-color: #f0f0f0;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    ">
+      This text will be cut off because it exceeds the container size.
+    </div>
+  `,
+
+  /**
+   * List styling
+   */
+  listDiv: `
+    <ul style="
+      list-style: none;
+      padding: 0;
+    ">
+      <li style="
+        padding: 5px;
+        background-color: #eee;
+        margin: 2px;
+        border-left: 3px solid blue;
+        padding-left: 10px;
+      ">Item 1</li>
+      <li style="
+        padding: 5px;
+        background-color: #eee;
+        margin: 2px;
+        border-left: 3px solid blue;
+        padding-left: 10px;
+      ">Item 2</li>
+    </ul>
+  `,
+
+  /**
+   * Table styling
+   */
+  tableDiv: `
+    <table style="
+      border-collapse: collapse;
+      width: 200px;
+    ">
+      <tr>
+        <th style="
+          background-color: #333;
+          color: white;
+          padding: 8px;
+          border: 1px solid #333;
+        ">Header 1</th>
+        <th style="
+          background-color: #333;
+          color: white;
+          padding: 8px;
+          border: 1px solid #333;
+        ">Header 2</th>
+      </tr>
+      <tr>
+        <td style="padding: 8px; border: 1px solid #ddd;">Data 1</td>
+        <td style="padding: 8px; border: 1px solid #ddd;">Data 2</td>
+      </tr>
+    </table>
+  `,
+};
+
+/**
+ * Create a CSS style element
+ */
+export function createStyleElement(css: string): HTMLStyleElement {
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  return style;
+}
+
+/**
+ * Create pseudo-element CSS
+ */
+export function createPseudoElementCSS(): string {
+  return `
+    .with-before::before {
+      content: '→ ';
+      color: red;
+      font-weight: bold;
+    }
+    .with-after::after {
+      content: ' ←';
+      color: blue;
+      font-weight: bold;
+    }
+    .with-both::before {
+      content: '[';
+      color: green;
+    }
+    .with-both::after {
+      content: ']';
+      color: green;
+    }
+  `;
+}
+
+/**
+ * Create a div with pseudo-elements
+ */
+export function createDivWithPseudoElements(): HTMLDivElement {
+  const style = createStyleElement(createPseudoElementCSS());
+
+  const div = document.createElement('div');
+  div.className = 'with-both';
+  div.textContent = 'Text with pseudo-elements';
+
+  return div;
+}

package/tests/helpers/dom-helpers.ts

@@ -0,0 +1,242 @@
+/**
+ * DOM testing helpers
+ */
+
+/**
+ * Create a simple div with text content
+ */
+export function createSimpleDiv(text: string = 'Test'): HTMLDivElement {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div;
+}
+
+/**
+ * Create a styled div with custom CSS
+ */
+export function createStyledDiv(
+  text: string,
+  styles: Record<string, string>
+): HTMLDivElement {
+  const div = createSimpleDiv(text);
+  Object.assign(div.style, styles);
+  return div;
+}
+
+/**
+ * Create a div with background color
+ */
+export function createColoredDiv(
+  text: string,
+  color: string,
+  bgColor: string
+): HTMLDivElement {
+  return createStyledDiv(text, { color, backgroundColor: bgColor });
+}
+
+/**
+ * Create a simple image element
+ */
+export function createImageElement(
+  src: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
+  alt: string = 'test'
+): HTMLImageElement {
+  const img = document.createElement('img');
+  img.src = src;
+  img.alt = alt;
+  return img;
+}
+
+/**
+ * Create a canvas element with some drawing
+ */
+export function createCanvasElement(
+  width: number = 100,
+  height: number = 100
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  return canvas;
+}
+
+/**
+ * Create a video element
+ */
+export function createVideoElement(
+  src: string = 'data:video/mp4;base64,',
+  width: number = 100,
+  height: number = 100
+): HTMLVideoElement {
+  const video = document.createElement('video');
+  video.src = src;
+  video.width = width;
+  video.height = height;
+  return video;
+}
+
+/**
+ * Create a textarea with value
+ */
+export function createTextarea(value: string = 'test value'): HTMLTextAreaElement {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  return textarea;
+}
+
+/**
+ * Create an input element with value
+ */
+export function createInput(
+  value: string = 'test input',
+  type: string = 'text'
+): HTMLInputElement {
+  const input = document.createElement('input');
+  input.type = type;
+  input.value = value;
+  return input;
+}
+
+/**
+ * Create a complex DOM tree with various elements
+ */
+export function createComplexDOM(): HTMLDivElement {
+  const container = document.createElement('div');
+  container.style.width = '200px';
+  container.style.height = '200px';
+  container.style.backgroundColor = '#f0f0f0';
+
+  // Add text
+  const heading = document.createElement('h1');
+  heading.textContent = 'Test Heading';
+  heading.style.color = '#333';
+  container.appendChild(heading);
+
+  // Add paragraph
+  const para = document.createElement('p');
+  para.textContent = 'This is a test paragraph.';
+  para.style.fontSize = '14px';
+  container.appendChild(para);
+
+  // Add image
+  const img = createImageElement();
+  img.style.width = '50px';
+  img.style.height = '50px';
+  container.appendChild(img);
+
+  // Add nested div
+  const nested = document.createElement('div');
+  nested.style.border = '1px solid #ccc';
+  nested.style.padding = '10px';
+  nested.textContent = 'Nested content';
+  container.appendChild(nested);
+
+  return container;
+}
+
+/**
+ * Create a DOM with inline styles
+ */
+export function createDOMWithStyles(): HTMLDivElement {
+  const container = document.createElement('div');
+  container.style.background = 'linear-gradient(to right, #ff0000, #00ff00)';
+  container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+  container.style.borderRadius = '8px';
+  container.style.padding = '20px';
+
+  const text = document.createElement('span');
+  text.textContent = 'Styled content';
+  text.style.fontWeight = 'bold';
+  text.style.color = 'white';
+  container.appendChild(text);
+
+  return container;
+}
+
+/**
+ * Create a DOM with pseudo-elements (via CSS class)
+ */
+export function createDOMWithPseudoElements(): HTMLDivElement {
+  const style = document.createElement('style');
+  style.textContent = `
+    .pseudo-element {
+      position: relative;
+    }
+    .pseudo-element::before {
+      content: '→ ';
+      color: red;
+    }
+    .pseudo-element::after {
+      content: ' ←';
+      color: blue;
+    }
+  `;
+  document.head.appendChild(style);
+
+  const div = document.createElement('div');
+  div.className = 'pseudo-element';
+  div.textContent = 'Text with pseudo-elements';
+
+  return div;
+}
+
+/**
+ * Create a SVG element
+ */
+export function createSVGElement(): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('width', '100');
+  svg.setAttribute('height', '100');
+  svg.setAttribute('viewBox', '0 0 100 100');
+
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('cx', '50');
+  circle.setAttribute('cy', '50');
+  circle.setAttribute('r', '40');
+  circle.setAttribute('fill', 'blue');
+
+  svg.appendChild(circle);
+  return svg;
+}
+
+/**
+ * Wait for a specified time
+ */
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Get image data from a data URL
+ */
+export function parseDataUrl(dataUrl: string): { type: string; data: string } {
+  const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+  if (!match) {
+    throw new Error(`Invalid data URL: ${dataUrl}`);
+  }
+  return {
+    type: match[1],
+    data: match[2],
+  };
+}
+
+/**
+ * Check if a data URL is valid
+ */
+export function isValidDataUrl(str: string): boolean {
+  return typeof str === 'string' && str.startsWith('data:');
+}
+
+/**
+ * Check if a data URL is an image
+ */
+export function isImageDataUrl(str: string): boolean {
+  return typeof str === 'string' && str.startsWith('data:image/');
+}

package/tests/mocks/canvas-mock.ts

@@ -0,0 +1,94 @@
+/**
+ * Canvas mocking utilities for testing
+ */
+import { vi, SinonStub } from 'vitest';
+
+/**
+ * Mock HTMLCanvasElement.prototype.toDataURL
+ */
+export function mockCanvasToDataUrl(
+  returnValue: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
+): SinonStub {
+  return vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL').mockReturnValue(returnValue);
+}
+
+/**
+ * Mock HTMLCanvasElement.prototype.toBlob
+ */
+export function mockCanvasToBlob(
+  returnBlob: Blob = new Blob(['test'], { type: 'image/png' })
+): SinonStub {
+  return vi
+    .spyOn(HTMLCanvasElement.prototype, 'toBlob')
+    .mockImplementation((callback: BlobCallback) => {
+      // Use setTimeout to simulate async behavior
+      setTimeout(() => callback(returnBlob), 0);
+    });
+}
+
+/**
+ * Mock canvas context operations
+ */
+export function mockCanvasContext(): {
+  fillRect: SinonStub;
+  drawImage: SinonStub;
+  getImageData: SinonStub;
+} {
+  const mockContext = {
+    fillRect: vi.fn(),
+    drawImage: vi.fn(),
+    getImageData: vi.fn().mockReturnValue({
+      data: new Uint8ClampedArray(4), // RGBA for 1x1 pixel
+    }),
+  };
+
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
+    mockContext as any
+  );
+
+  return {
+    fillRect: mockContext.fillRect,
+    drawImage: mockContext.drawImage,
+    getImageData: mockContext.getImageData,
+  };
+}
+
+/**
+ * Create a valid PNG data URL
+ */
+export function createValidPngDataUrl(): string {
+  // Minimal valid PNG: 1x1 transparent pixel
+  return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+}
+
+/**
+ * Create a valid JPEG data URL
+ */
+export function createValidJpegDataUrl(): string {
+  // Minimal valid JPEG: 1x1 red pixel
+  return 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8VAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCwAA8A/9k=';
+}
+
+/**
+ * Create a valid SVG data URL
+ */
+export function createValidSvgDataUrl(): string {
+  const svg =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>';
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+/**
+ * Mock multiple data URLs for different formats
+ */
+export function mockCanvasDataUrls(): {
+  png: string;
+  jpeg: string;
+  svg: string;
+} {
+  return {
+    png: createValidPngDataUrl(),
+    jpeg: createValidJpegDataUrl(),
+    svg: createValidSvgDataUrl(),
+  };
+}