Automatic detection of CSS conflicts

• US 9,767,083 B2
• Filed: 06/23/2014
• Issued: 09/19/2017
• Est. Priority Date: 06/28/2013
• Status: Expired due to Fees

• Current Assignee: International Business Machines Corporation
• Original Assignee: International Business Machines Corporation
• Inventors: Fei, Jia, Hu, Kuang, Ruan, Qi, Wang, Pei, Zhu, Xiao Wen
• Primary Examiner(s): Stork, Kyle
• Assistant Examiner(s): LEE, SOOKIL J
• Application Number:
  US14/311,962
• Publication Number:
  US 20150007023A1
• Time in Patent Office: 1,184 Days
• CPC Class Codes: G06F 40/154 Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
• CPC Class Codes: G06F 40/205 Parsing

Abstract

A method, system, and/or computer program product automatically detects CSS conflicts. The method comprises: receiving at least one UI constraint and at least one first CSS rule defined by a developer of a widget as well as at least one second CSS rule customized by a user of the widget, the UI constraints being used to restrict the UI of the widget; running a page containing the widget; performing automatic validation on each UI constraint based on the result of running the page; and in response to deriving a UI constraint being violated from the validation, finding one or more of the second CSS rules that lead to violation of the UI constraint in a first set made up of the second CSS rules that override the first CSS rules.

Claims

1. A method for automatic detection of Cascading Style Sheet (CSS) conflicts, the method comprising:

receiving, by one or more processors, at least one user interface (UI) constraint and at least one first CSS rule defined by a developer of a widget as well as at least one second CSS rule customized by a user of the widget, and wherein the at least one second CSS rule overrides the at least one first CSS rule, wherein said UI constraints are used to restrict the UI of said widget, wherein the UI constraints validate an appearance of the widget, wherein the at least one first CSS rule and the at least one second CSS rule control the appearance of the widget, wherein said UI constraint is represented by a code segment of simplified syntax found in a customized library of UI constraints;

returning, by one or more processors, a Boolean value in response to the code segment being interpreted to identify the UI constraint by a call to the customized library;

running, by one or more processors, a page containing said widget;

combining, by one or more processors, various combinations of the second CSS rules that have the same properties as the first CSS rules and testing the various combinations of the second CSS rules with each UI constraint until at least one code segment of the UI constraint returns the Boolean value as false, indicating the UI constraint is violated, and the second CSS rules that override the first CSS rules are identified;

performing, by one or more processors, automatic validation on each UI constraint based on a result of running the page using the combinations of the second CSS rules; and

in response to deriving the UI constraint being violated from said automatic validation, finding, by one or more processors, one or more of the second CSS rules from the combinations of the second CSS rules that lead to the violation of the UI constraint.

2. The method according to claim 1, further comprising:

receiving, by one or more processors, a first CSS rule subset associated with each UI constraint, said first CSS rule subset associated with each UI constraint being a set of the first CSS rules that can impact the UI constraint among said at least one first CSS rule.

3. The method according to claim 1, wherein each of the first CSS rule and the second CSS rule is denoted as a pair of a property and a value.

4. The method according to claim 2, further comprising:

based on the received first CSS rule subset associated with each UI constraint, and in response to determining that the UI constraint is violated through said automatic validation, shrinking, by one or more processors, said first set to a second set that only contains the second CSS rules whose properties are the same as those of the first CSS rules in the first CSS rule sub set.

5. The method according to claim 4, further comprising:

finding, by one or more processors, one or more of the second CSS rules that lead to the violation of the UI constraint in the second set.

6. The method according to claim 1, wherein said UI constraint is a code segment written in JavaScript, and wherein the method further comprises:

returning, by one or more processors, a Boolean value in response to the code segment being executed.

7. The method according to claim 1, further comprising:

performing, by one or more processors, automatic validation on each UI constraint using only the second CSS rules that override the first CSS rules.

8. The method according to claim 1, further comprising:

automatically modifying, by one or more processors, the found second CSS rules that lead to the violation of the UI constraint.

9. The method according to claim 1, further comprising:

automatically deleting, by one or more processors, the found second CSS rules that lead to the violation of the UI constraint.

10. A computer system comprising one or more processors, one or more computer readable memories, and one or more computer readable storage mediums, and program instructions stored on at least one of the one or more storage mediums for execution by at least one of the one or more processors via at least one of the one or more computer readable memories, the stored program instructions comprising:

program instructions to receive at least one user interface (UI) constraint and at least one first CSS rule defined by a developer of a widget as well as at least one second CSS rule customized by a user of the widget, and wherein the at least one second CSS rule overrides the at least one first CSS rule, wherein said UI constraints are used to restrict the UI of said widget, wherein the UI constraints validate an appearance of the widget, wherein the at least one first CSS rule and the at least one second CSS rule control the appearance of the widget, wherein said UI constraint is represented by a code segment of simplified syntax found in a customized library of UI constraints;

program instructions to return a Boolean value in response to the code segment being interpreted to identify the UI constraint by a call to the customized library;

program instructions to run a page containing said widget;

program instructions to combine various combinations of the second CSS rules that have the same properties as the first CSS rules and testing the various combinations of the second CSS rules with each UI constraint until at least one code segment of the UI constraint returns the Boolean value as false, indicating the UI constraint is violated, and the second CSS rules that override the first CSS rules are identified;

program instructions to perform automatic validation on each UI constraint based on a result of running the page using the combinations of the second CSS rules; and

program instructions to, in response to deriving a LE constraint being violated from said automatic validation, find one or more of the second CSS rules that lead to the violation of the UI constraint in a first set made up of the second CSS rules that override the first CSS rules.

11. The computer system according to claim 10, further comprising:

program instructions to receive a first CSS rule subset associated with each UI constraint, said first CSS rule subset associated with each UI constraint being a set of the first CSS rules that can impact the UI constraint among said at least one first CSS rule.

12. The computer system according to claim 10, wherein each of the first CSS rule and the second CSS rule is denoted as a pair of a property and a value.

13. The computer system according to claim 11, further comprising:

program instructions to, based on the received first CSS rule subset associated with each UI constraint, shrink said first set to a second set that only contains the second CSS rules whose properties are the same as those of the first CSS rules in the first CSS rule subset, in response to determining that the UI constraint is violated through said automatic validation.

14. The computer system according to claim 13, further comprising:

program instructions to find one or more of the second CSS rules that lead to the violation of the UI constraint in the second set.

15. The computer system according to claim 10, wherein said UI constraint is a code segment written in JavaScript, and a Boolean value is returned in response to the code segment being interpreted.

16. The computer system according to claim 10, wherein said UI constraint is a code segment written in a customized library, and a Boolean value is returned in response to the code segment being executed.

17. The computer system according to claim 10, further comprising:

program instructions to automatically delete the found second CSS rules that lead to the violation of the UI constraint.

18. A computer program product for automatically detecting Cascading Style Sheet (CSS) conflicts, the computer program product comprising a computer readable storage medium having program code embodied therewith, the program code readable and executable by a processor to perform a method comprising:

receiving at least one user interface (UI) constraint and at least one first CSS rule defined by a developer of a widget as well as at least one second CSS rule customized by a user of the widget, and wherein the at least one second CSS rule overrides the at least one first CSS rule, wherein said UI constraints are used to restrict the UI of said widget, wherein the UI constraints validate an appearance of the widget, wherein the at least one first CSS rule and the at least one second CSS rule control the appearance of the widget, wherein said UI constraint is represented by a code segment of simplified syntax found in a customized library of UI constraints;

returning, a Boolean value in response to the code segment being interpreted to identify the UI constraint by a call to the customized library;

running a page containing said widget;

combining, various combinations of the second CSS rules that have the same properties as the first CSS rules and testing the various combinations of the second CSS rules with each UI constraint until at least one code segment of the UI constraint returns the Boolean value as false, indicating the UI constraint is violated, and the second CSS rules that override the first CSS rules are identified;

performing automatic validation on each UI constraint based on a result of running the page using the combinations of the second CSS rules; and

in response to deriving a UI constraint being violated from said automatic validation, finding one or more of the second CSS rules from the combinations of the second CSS rules that lead to the violation of the UI constraint in a first set made up of the second CSS rules that override the first CSS rules.

19. The computer program product of claim 18, wherein the method further comprises:

receiving a first CSS rule subset associated with each UI constraint, said first CSS rule subset associated with each UI constraint being a set of the first CSS rules that can impact the UI constraint among said at least one first CSS rule.

20. The computer program product of claim 19, wherein the method further comprises:

based on the received first CSS rule subset associated with each UI constraint, and in response to determining that the UI constraint is violated through said automatic validation, shrinking said first set to a second set that only contains the second CSS rules whose properties are the same as those of the first CSS rules in the first CSS rule subset.