test/unit/styling-cross-scope-apply.html

<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body>

  <x-scope></x-scope>

  <dom-module id="story-card">

    <style>
      :host {
        display: block;
      }

      #story-card .story-content {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2em;
        @apply(--story-content);
      }
    </style>

    <template>
      <div id="story-card">
        <div class="story-content" id="content">Content</div>
      </div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'story-card'});
    });
    </script>
  </dom-module>

  <dom-module id="x-child-scope">
    <style>
      :host {
        display: block;

        --mixin2: {
          border: 3px solid seagreen;
          background: url(http://www.google.com/icon.png);
        };
      }

      #mixin1 {
        @apply(--mixin1);
      }

      #mixin2 {
        @apply(--mixin2);
      }

      #mixin3 {
        padding: 3px;
        @apply(--mixin3);
      }

      #mixin4 {
        @apply(--mixin4);
      }

      #mixin6 {
        @apply(--mixin6)
      }

      #mixin7 {@apply(--mixin7)}
    </style>

    <template>
      <div id="mixin1">mixin1</div>
      <div id="mixin2">mixin2</div>
      <div id="mixin3">mixin3</div>
      <div id="mixin4">mixin4</div>
      <div id="mixin6">mixin6</div>
      <div id="mixin7">mixin7</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'x-child-scope'});
    });
    </script>
  </dom-module>

  <dom-module id="x-keyframes">
    <template>
      <style>
        :host {
          display: block;
          position: relative;
          border: 10px solid blue;
          left: 0px;
          /* Prefix required by Safari <= 8 */
          -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
          -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
        }

        :host([animated]) {
          /* Prefix required by Safari <= 8 */
          -webkit-animation-name: x-keyframes-animation;
          animation-name: x-keyframes-animation;
        }

        /* Prefix required by Safari <= 8 */
        @-webkit-keyframes x-keyframes-animation {
          0% {
            left: var(--c1);
          }

          100% {
            left: var(--c2);
            @apply(--keyframe-finish);
          }
        }
        @keyframes x-keyframes-animation {
          0% {
            left: var(--c1);
          }

          100% {
            left: var(--c2);
            @apply(--keyframe-finish);
          }
        }
      </style>
      x-keyframes
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-keyframes',
        properties: {
          animated: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          }
        }
      });
    });
    </script>
  </dom-module>

  <dom-module id="x-scope">
    <style>
      :host {
        display: block;
        padding: 8px;

        --override-me: {
          border: 11px solid black;
        };

        --mixin1: {
          border: 1px solid black;
        };

        --b: 2px solid orange;

        --m1: 1px;
        --m2: 2px;

        --c1: 5px;
        --c2: 10px;

        --mixin2: {
          border: var(--b);
        };

        --mixin3: {
          @apply(--mixin2);
        };

        --mixin4: {
          padding: 2px;
          @apply(--mixin3);
          margin: var(--m2);
        };

        --mixin5: {
          border: calc(var(--c1) + var(--c2)) solid orange;
        };

        --mixin6: {
          border: 16px solid orange;
        }

        --mixin7: {
          border: 17px solid navy;
        }}

      #mixin1 {
        @apply(--mixin1);
      }

      #mixin2 {
        @apply(--mixin2);
      }

      #mixin3 {
        padding: 1px;
        margin: var(--m1);
        @apply(--mixin3);
      }

      #mixin4 {
        @apply(--mixin4);
      }

      #mixin5 {
        @apply(--mixin5);
      }

      #keyframes2 {
        --keyframe-finish: {
          left: 20px;
        };
      }

      x-child-scope {
        padding: 10px;
      }

      #card {
        --story-content: {
          border: 11px solid orange;
        };
      }

      #override {
        @apply(--override-me);
        border: 19px solid steelblue;
      }

    </style>

    <template>
      <div id="mixin1">mixin1</div>
      <div id="mixin2">mixin2</div>
      <div id="mixin3">mixin3</div>
      <div id="mixin4">mixin4</div>
      <div id="mixin5">mixin5</div>
      <hr>
      <x-keyframes id="keyframes1"></x-keyframes>
      <x-keyframes id="keyframes2"></x-keyframes>
      <x-child-scope id="child"></x-child-scope>
      <story-card id="card"></story-card>
      <div id="override">override</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'x-scope'});
    });
    </script>
  </dom-module>

  <dom-module id="x-var-produce-via-consume">
  <template>
    <style>
      :host {
        display: block;
        border: 10px solid orange;
        --foo: {
          color: var(--bar);
        }
      }
    </style>
        </template>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-var-produce-via-consume'
    });
  });
  </script>
</dom-module>


<script>
suite('scoped-styling-apply', function() {

  function assertComputed(element, value, property) {
    var computed = getComputedStyle(element);
    property = property || 'border-top-width';
    assert.equal(computed[property], value, 'computed style incorrect for ' + property);
  }

  var styled = document.querySelector('x-scope');

  test('variable mixins calculated correctly and inherit', function() {
     var e = styled;
     assert.property(e._styleProperties, '--mixin1');
     assert.property(e._styleProperties, '--mixin2');
     assert.property(e._styleProperties, '--mixin3');
     assert.property(e._styleProperties, '--mixin4');
     e = styled.$.child;
     assert.property(e._styleProperties, '--mixin1');
     assert.property(e._styleProperties, '--mixin2');
     assert.property(e._styleProperties, '--mixin3');
     assert.property(e._styleProperties, '--mixin4');
  });

  test('variable mixins apply', function() {
    assertComputed(styled.$.mixin1, '1px');
    assertComputed(styled.$.mixin2, '2px');
    assertComputed(styled.$.mixin3, '2px');
    assertComputed(styled.$.mixin3, '1px', 'padding-top');
    assertComputed(styled.$.mixin3, '1px', 'margin-top');
    assertComputed(styled.$.mixin4, '2px');
    assertComputed(styled.$.mixin4, '2px', 'padding-top');
    assertComputed(styled.$.mixin4, '2px', 'margin-top');
  });

  test('mixins apply with url values', function() {
    var url = 'http://www.google.com/icon.png';
    var e = styled.$.child;
    assert.include(e._styleProperties['--mixin2'], url);
    assert.include(e._customStyle.textContent, url);
  });

  test('variable mixins inherit and override', function() {
    var e = styled.$.child;
    assertComputed(e.$.mixin1, '1px');
    assertComputed(e.$.mixin2, '3px');
    assertComputed(e.$.mixin3, '2px');
    assertComputed(e.$.mixin3, '3px', 'padding-top');
    assertComputed(e.$.mixin4, '2px');
    assertComputed(e.$.mixin4, '2px', 'padding-top');
    assertComputed(e.$.mixin4, '2px', 'margin-top');
  });

  test('calc can be used in mixins', function() {
    assertComputed(styled.$.mixin5, '15px');
  });

  test('mixins work with selectors that contain element name', function() {
    assertComputed(styled.$.card.$.content, '11px');
  });

  test('mixins with trailing new line or } apply', function() {
    assertComputed(styled.$.child.$.mixin6, '16px');
    assertComputed(styled.$.child.$.mixin7, '17px');
  });

  test('mixins apply to @keyframe rules', function(done) {
    var xKeyframes1 = styled.$.keyframes1;
    var xKeyframes2 = styled.$.keyframes2;
    var completed = 0;

    [xKeyframes1, xKeyframes2].forEach(function(xKeyframes, index) {
      var target = index === 0 ? '10px' : '20px';
      var onAnimationEnd = function() {
        assert.include(xKeyframes.getComputedStyleValue('left'), target);

        xKeyframes.removeEventListener('animationend', onAnimationEnd);
        xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
        xKeyframes.animated = false;
        if (++completed > 1) {
          done();
        }
      };

      xKeyframes.addEventListener('animationend', onAnimationEnd);
      xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);

      xKeyframes.animated = true;
    });
  });

  test('producing a var that consumes another var preserves static styling', function() {
    var d = document.createElement('x-var-produce-via-consume');
    document.body.appendChild(d);
    CustomElements.takeRecords();
    assertComputed(d, '10px');
  });

  // TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
  test('mixin values can be overridden by subsequent concrete properties', function() {
    assertComputed(styled.$.override, '19px');
  });
});

</script>
</body>
</html>