[CSSRegions] Add region styling test for region css rules specificity/position
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Mar 2012 10:45:51 +0000 (10:45 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Mar 2012 10:45:51 +0000 (10:45 +0000)
https://bugs.webkit.org/show_bug.cgi?id=76537

Patch by Mihai Balan <mibalan@adobe.com> on 2012-03-22
Reviewed by Andreas Kling.

* fast/regions/region-style-rule-specificity-expected.html: Added.
* fast/regions/region-style-rule-specificity.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@111667 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/regions/region-style-rule-specificity-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/region-style-rule-specificity.html [new file with mode: 0644]

index ae0696c..cdfdc6a 100644 (file)
@@ -1,3 +1,13 @@
+2012-03-22  Mihai Balan  <mibalan@adobe.com>
+
+        [CSSRegions] Add region styling test for region css rules specificity/position
+        https://bugs.webkit.org/show_bug.cgi?id=76537
+
+        Reviewed by Andreas Kling.
+
+        * fast/regions/region-style-rule-specificity-expected.html: Added.
+        * fast/regions/region-style-rule-specificity.html: Added.
+
 2012-03-22  Krist√≥f Koszty√≥  <kkristof@inf.u-szeged.hu>
 
         Unreviewed gardening after r111595.
diff --git a/LayoutTests/fast/regions/region-style-rule-specificity-expected.html b/LayoutTests/fast/regions/region-style-rule-specificity-expected.html
new file mode 100644 (file)
index 0000000..40ac594
--- /dev/null
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+       <head>
+               <style>
+               body {
+                       font-family: monospace;
+                       font-size: 1em;
+               }
+               p {
+                       margin: 0;
+                       line-height: 1em;
+               }
+               .container {
+                       background-color: lightgray;
+                       width: 15em;
+                       height: 5em;
+               }
+               .light {
+                       background-color: lightgreen;
+               }
+               .lime {
+                       background-color: lime;
+               }
+               .green {
+                       background-color: green;
+               }
+               </style>
+       </head>
+       <body>
+               <h1>Testing CSS selectors specificity/position is respected when using @region styling</h1>
+
+               Selector specificity in @region rule
+               <div class='container' id='r1'>
+                       <p class='light'>Plain paragraph</p>
+                       <p class='lime'>Styled with class</p>
+                       <p class='green'>Styled with ID</p>
+               </div>
+               Selector position in @region rule
+               <div class='container' id='r2'>
+                       <p class='light'>Plain paragraph</p>
+                       <p class='lime'>Styled with class</p>
+                       <p class='green'>Styled with ID</p>
+               </div>
+               More specific selector in flowed content
+               <div class='container' id='r3'>
+                       <p class='lime'>Class in content</p>
+                       <p class='lime'>ID in content</p>
+                       <p class='lime'>ID in content</p>
+               </div>
+               Style attribute in flowed content
+               <div class='container' id='r4'>
+                       <p class='lime'>Element style in region</p>
+                       <p class='lime'>ID style in region</p>
+                       <p class='lime'>Class in region</p>
+               </div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/region-style-rule-specificity.html b/LayoutTests/fast/regions/region-style-rule-specificity.html
new file mode 100644 (file)
index 0000000..e996679
--- /dev/null
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+       <head>
+               <style>
+               body {
+                       font-family: monospace;
+                       font-size: 1em;
+               }
+               p {
+                       margin: 0;
+                       line-height: 1em;
+               }
+               .container {
+                       background-color: lightgray;
+                       width: 15em;
+                       height: 5em;
+               }
+               /* selector specificity
+               #id => 100
+               .class => 10
+               element => 1
+               */
+               /*
+               selector position
+               in style="" attribute
+               in <style/> element / external file
+               */
+
+               /* Testing selector specificity is respected in @region style blocks */
+               #f1 {
+                       -webkit-flow-into: flow1;
+               }
+               #r1 {
+                       -webkit-flow-from: flow1;
+               }
+               @-webkit-region #r1 {
+                       * {
+                               background-color: yellow;
+                       }
+                       p {
+                               background-color: lightgreen;
+                       }
+                       .cr1 {
+                               background-color: lime;
+                       }
+                       #p1 {
+                               background-color: green;
+                       }
+               }
+
+               /* Testing selector position is respected in @region style blocks */
+               #f2 {
+                       -webkit-flow-into: flow2;
+               }
+               #r2 {
+                       -webkit-flow-from: flow2;
+               }
+               @-webkit-region #r2 {
+                       p, .cr21, #p2 {
+                               background-color: red;
+                       }
+               }
+               @-webkit-region #r2 {
+                       p {
+                               background-color: lightgreen;
+                       }
+                       .cr22 {
+                               background-color: lime;
+                       }
+                       #p2 {
+                               background-color: green;
+                       }
+               }
+
+               /* More specific selector in flowed content than in @region style */
+               .c3 {
+                       background-color: lime;
+               }
+               #p31, #p32 {
+                       background-color: lime;
+               }
+               #f3 {
+                       -webkit-flow-into: flow3;
+               }
+               #r3 {
+                       -webkit-flow-from: flow3;
+               }
+               @-webkit-region #r3 {
+                       p, .cr3 {
+                               background-color: red;
+                       }
+               }
+
+               /* Flowed content has style attribute */
+               #f4 {
+                       -webkit-flow-into: flow4;
+               }
+               #r4 {
+                       -webkit-flow-from: flow4;
+               }
+               @-webkit-region #r4 {
+                       p, #p4, .cr4 {
+                               background-color: red;
+                       }
+               }
+               </style>
+       </head>
+       <body>
+               <!-- Flowed content -->
+               <div id='f1'>
+                       <p>Plain paragraph</p>
+                       <p class='cr1'>Styled with class</p>
+                       <p id='p1'>Styled with ID</p>
+               </div>
+               <div id='f2'>
+                       <p>Plain paragraph</p>
+                       <p class='cr21 cr22'>Styled with class</p>
+                       <p id='p2'>Styled with ID</p>
+               </div>
+               <div id='f3'>
+                       <p class='c3'>Class in content</p>
+                       <p id='p31'>ID in content</p>
+                       <p class='cr3' id='p32'>ID in content</p>
+               </div>
+               <div id='f4'>
+                       <p style='background-color: lime;' >Element style in region</p>
+                       <p style='background-color: lime;' id='p2'>ID style in region</p>
+                       <p style='background-color: lime;' class='cr2'>Class in region</p>
+               </div>
+
+               <!-- Regions -->
+               <h1>Testing CSS selectors specificity/position is respected when using @region styling</h1>
+
+               Selector specificity in @region rule
+               <div class='container' id='r1'></div>
+               Selector position in @region rule
+               <div class='container' id='r2'></div>
+               More specific selector in flowed content
+               <div class='container' id='r3'></div>
+               Style attribute in flowed content
+               <div class='container' id='r4'></div>
+       </body>
+</html>
\ No newline at end of file