update tests.

googlearchive · Nov 19, 2013 · 2606d15 · 2606d15
1 parent 0159e56
commit 2606d15
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 23 deletions.
diff --git a/test/html/styling/pseudo-scoping-strict.html b/test/html/styling/pseudo-scoping-strict.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>Psuedo scoped styling</title>
+  <script src="../../../platform.js"></script>
+  <script src="register.js"></script>
+  <script src="../../../../tools/test/htmltest.js"></script>
+  <script src="../../../../tools/test/chai/chai.js"></script>
+  <script>
+    if (window.ShadowDOMPolyfill) {
+      Platform.ShadowCSS.strictStyling = true;
+    }
+  </script>
+  <style>
+    div {
+      font-size: 10px;
+    }
+  </style>
+</head>
+<body>
+  <x-foo></x-foo>
+  <button is="x-button"></button>
+  <div id="outerScopeDiv">10px</div>
+
+  <template id="x-inner">
+    <div>Not green</div>
+  </template>
+
+  <template id="x-foo">
+    <style>
+      @host {
+        * {
+          display: block;
+          border: 1px solid black;
+        }
+      }
+
+      div {
+        font-size: 20px;
+        background: green;
+      }
+
+      div::before { 
+        background: blue;
+        content: 'zonk';
+      }
+
+      @media screen and (max-width: 800px) {
+        div {
+          font-size: 50px;
+        }
+      } 
+    </style>
+    <div>20px / 50px</div>
+    <x-inner></x-inner>
+  </template>
+
+  <template id="x-button">
+    <style>
+      div {
+        background: red;
+      }
+
+      @media screen and (min-width: 50px) {
+        div {
+          font-size: 50px;
+        }
+      }
+    </style>
+    <div>button</div>
+  </template>
+
+  <script>
+    register('x-inner', '', HTMLElement.prototype);
+    register('x-foo', '', HTMLElement.prototype);
+    register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
+
+    document.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        var foo = document.querySelector('x-foo');
+        var fooDiv = foo.shadowRoot.querySelector('div');
+        var innerDiv = foo.shadowRoot.querySelector('x-inner')
+          .shadowRoot.querySelector('div');
+        var fooDivStyle = getComputedStyle(fooDiv);
+        chai.assert.equal(fooDivStyle.fontSize, window.innerWidth < 800 ? '50px' : '20px',
+          'shadowDOM styles are applied');
+        var fooDivBeforeStyle = getComputedStyle(fooDiv, ':before');
+        chai.assert.equal(fooDivBeforeStyle.backgroundColor, 'rgb(0, 0, 255)',
+          ':before styles are applied');
+        var div = document.querySelector('#outerScopeDiv');
+        chai.assert.equal(getComputedStyle(div).fontSize, '10px',
+          'shadowDOM styles are applied only in the correct scope');
+        var bgColor = getComputedStyle(innerDiv).backgroundColor;
+        chai.assert.isTrue(bgColor == 'rgba(0, 0, 0, 0)'|| bgColor == 'transparent',
+          'upper bound encapsulation is enforced');
+
+
+        var xButtonDiv = document.querySelector('[is=x-button]')
+            .shadowRoot.querySelector('div');
+        var xButtonDivStyle = getComputedStyle(xButtonDiv);
+        chai.assert.equal(xButtonDivStyle.backgroundColor, 'rgb(255, 0, 0)',
+          'type extension is properly shimmed');        
+        chai.assert.equal(xButtonDivStyle.fontSize, '50px',
+          'media query for type extension is properly shimmed');        
+
+        done();
+      });
+    });
+  </script>
+
+
+</body>
+</html>
diff --git a/test/html/styling/pseudo-scoping.html b/test/html/styling/pseudo-scoping.html
@@ -11,11 +11,6 @@
   <script src="register.js"></script>
   <script src="../../../../tools/test/htmltest.js"></script>
   <script src="../../../../tools/test/chai/chai.js"></script>
-  <script>
-    if (window.ShadowDOMPolyfill) {
-      Platform.ShadowCSS.strictStyling = true;
-    }
-  </script>
   <style>
     div {
       font-size: 10px;
@@ -24,12 +19,9 @@
 </head>
 <body>
   <x-foo></x-foo>
+  <button is="x-button"></button>
   <div id="outerScopeDiv">10px</div>
 
-  <template id="x-inner">
-    <div>Not green</div>
-  </template>
-
   <template id="x-foo">
     <style>
       @host {
@@ -44,33 +36,58 @@
         background: green;
       }
 
+      div::before { 
+        background: blue;
+        content: 'zonk';
+      }
+
       @media screen and (max-width: 800px) {
         div {
           font-size: 50px;
         }
       } 
     </style>
     <div>20px / 50px</div>
-    <x-inner></x-inner>
   </template>
+
+  <template id="x-button">
+    <style>
+      div {
+        background: red;
+      }
+
+      @media screen and (min-width: 50px) {
+        div {
+          font-size: 50px;
+        }
+      }
+    </style>
+    <div>button</div>
+  </template>
+
   <script>
-    register('x-inner', '', HTMLElement.prototype);
     register('x-foo', '', HTMLElement.prototype);
+    register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
 
     document.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {
         var foo = document.querySelector('x-foo');
-        fooDiv = foo.shadowRoot.querySelector('div');
-        innerDiv = foo.shadowRoot.querySelector('x-inner')
-          .webkitShadowRoot.querySelector('div');
-        chai.assert.equal(getComputedStyle(fooDiv).fontSize, window.innerWidth < 800 ? '50px' : '20px',
+        var fooDiv = foo.shadowRoot.querySelector('div');
+        var fooDivStyle = getComputedStyle(fooDiv);
+        chai.assert.equal(fooDivStyle.fontSize, window.innerWidth < 800 ? '50px' : '20px',
           'shadowDOM styles are applied');
-        var div = document.querySelector('#outerScopeDiv');
-        chai.assert.equal(getComputedStyle(div).fontSize, '10px',
-          'shadowDOM styles are applied only in the correct scope');
-        var bgColor = getComputedStyle(innerDiv).backgroundColor;
-        chai.assert.isTrue(bgColor == 'rgba(0, 0, 0, 0)'|| bgColor == 'transparent',
-          'upper bound encapsulation is enforced');
+        var fooDivBeforeStyle = getComputedStyle(fooDiv, ':before');
+        chai.assert.equal(fooDivBeforeStyle.backgroundColor, 'rgb(0, 0, 255)',
+          ':before styles are applied');
+
+        var xButtonDiv = document.querySelector('[is=x-button]')
+            .shadowRoot.querySelector('div');
+        var xButtonDivStyle = getComputedStyle(xButtonDiv);
+        chai.assert.equal(xButtonDivStyle.backgroundColor, 'rgb(255, 0, 0)',
+          'type extension is properly shimmed');        
+        chai.assert.equal(xButtonDivStyle.fontSize, '50px',
+          'media query for type extension is properly shimmed');        
+
         done();
       });
     });

diff --git a/test/js/tests.js b/test/js/tests.js
@@ -24,12 +24,13 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/host.html?shadow&register');
   htmlTest('html/styling/pseudo-scoping.html');
   htmlTest('html/styling/pseudo-scoping.html?shadow&register');
+  htmlTest('html/styling/pseudo-scoping-strict.html');
+  htmlTest('html/styling/pseudo-scoping-strict.html?shadow&register');
   htmlTest('html/styling/pseudos.html');
   htmlTest('html/styling/pseudos.html?shadow&register');
   htmlTest('html/styling/polyfill-directive.html');
   htmlTest('html/styling/polyfill-rule.html');
-  // TODO(sorvell): blocked on https://code.google.com/p/chromium/issues/detail?id=313935
-  //htmlTest('html/styling/colon-host.html');
+  htmlTest('html/styling/colon-host.html');
   htmlTest('html/styling/colon-host.html?shadow&register');
   htmlTest('html/styling/combinators.html');
   htmlTest('html/styling/combinators.html?shadow&register');