Automatic page layout validation

• US 8,340,408 B2
• Filed: 02/27/2009
• Issued: 12/25/2012
• Est. Priority Date: 02/27/2009
• Status: Expired due to Fees

• Current Assignee: R2 Solutions LLC (Acacia Research Corporation)
• Original Assignee: Yahoo! Inc. (Apollo Global Management, Inc.)
• Inventors: Davan, Patrice, Chap, Sassda
• Primary Examiner(s): Dang, Duy M
• Application Number:
  US12/395,167
• Publication Number:
  US 20100220923A1
• Time in Patent Office: 1,397 Days
• Field of Search: 382/162, 382/164, 382/167, 382/274, 382/309, 358/1.12, 358/1.15, 358/1.18, 358/518, 714/744, 705/14.4
• US Class Current: 382/162
• CPC Class Codes: G06V 30/414 Extracting the geometrical structure, e.g. layout tree; Block segmentation, e.g. bounding boxes for graphics or text

Abstract

A method for validating the layout of webpages comprises receiving a webpage, transforming the webpage into a color-coded page, and determining based at least in part on detecting a color on the color-coded page that a layout of the webpage contains an error. The transforming can comprise identifying a block of content in the webpage, identifying a size and a location of the block, creating a new block with the size and the location of the block, and assigning a new color to the new block. The determining can comprise storing an image snapshot of the color-coded page and comparing the image snapshot to a reference image.

Claims

1. A method comprising:

receiving a webpage;

transforming the webpage into a color-coded page;

determining, based at least in part on a color added to the color-coded page during the transforming, that a layout of the webpage contains an error;

wherein the step of transforming is performed by one or more computing devices.

2. The method of claim 1, wherein the webpage comprises a first set of blocks and the color-coded page comprises a second set of blocks, and each block from the first set of blocks has a corresponding block of a same size and a same location in the second set of blocks.

3. The method of claim 2, wherein the step of determining comprises:

identifying a first block from the second set of blocks that overlaps with a second block from the second set of blocks.

4. The method of claim 1, wherein the step of transforming comprises:

identifying a block of content in the webpage;

identifying a size and a location of the block

creating a new block with the size and the location of the block;

assigning a new color to the new block.

5. The method of claim 1, wherein the step of determining comprises:

storing an image snapshot of the color-coded page;

comparing the image snapshot to a reference image.

6. The method of claim 5, wherein the step of comparing comprises:

determining an amount of difference between the image snapshot and the reference image.

7. The method of claim 5, wherein the step of comparing comprises:

subtracting a first pixel value of a pixel in the image snapshot from a second pixel value of a corresponding pixel in the reference image to determine a difference value;

detecting an error in the layout of the webpage based at least in part on the difference value.

8. The method of claim 1, wherein the step of determining comprises:

detecting a color on the color-coded page, the color to be indicative of an error in the layout of the live webpage.

9. The method of claim 1, wherein the step of determining comprises:

detecting a color on the color-coded page, the color to be indicative of a correct layout of the live webpage.

10. One or more non-transitory machine-readable storage media storing instructions which, when executed by one or more hardware processors, cause performance of the following steps:

receiving a webpage;

transforming the webpage into a color-coded page;

determining, based at least in part on a color added to the color-coded page during the transforming, that a layout of the webpage contains an error;

wherein the step of transforming is performed by one or more computing devices.

11. The media of claim 10, wherein the webpage comprises a first set of blocks and the color-coded page comprises a second set of blocks, and each block from the first set of blocks has a corresponding block of a same size and a same location in the second set of blocks.

12. The media of claim 11, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following step:

identifying a first block from the second set of blocks that overlaps with a second block from the second set of blocks.

13. The media of claim 10, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following steps:

identifying a block of content in the webpage;

identifying a size and a location of the block

creating a new block with the size and the location of the block;

assigning a new color to the new block.

14. The media of claim 10, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following steps:

storing an image snapshot of the color-coded page;

comparing the image snapshot to a reference image.

15. The media of claim 14, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following step:

determining an amount of difference between the image snapshot and the reference image.

16. The media of claim 14, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following steps:

subtracting a first pixel value of a pixel in the image snapshot from a second pixel value of a corresponding pixel in the reference image to determine a difference value;

detecting an error in the layout of the webpage based at least in part on the difference value.

17. The media of claim 10, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following step:

detecting a color on the color-coded page, the color to be indicative of an error in the layout of the live webpage.

18. The media of claim 10, wherein the instructions which, when executed by one or more hardware processors, further cause performance of the following step:

detecting a color on the color-coded page, the color to be indicative of a correct layout of the live webpage.