PolymerElements · Westbrook · Jun 10, 2016 · Jun 10, 2016 · Jun 10, 2016 · Jun 10, 2016
diff --git a/.travis.yml b/.travis.yml
@@ -1,23 +1,24 @@
 language: node_js
 sudo: required
 before_script:
-- npm install -g bower polylint web-component-tester
-- bower install
-- polylint
+  - npm install -g bower polylint web-component-tester
+  - bower install
+  - polylint
 env:
   global:
-  - secure: JOd5P49LsE77iYvmnXcjrv4UOPBz5iXed34LnK4FB8+hJ79wFan/HuymA8mof1FDnyBYFqV9Zgmeo2BAmFxomtADwLL6fcX34fh5r0JPuM6pv1ovoaE/yNBrt3o7RfhQ9/VkezjGBFkrXF8ciw2e+OHu6aEcAvdqG8O0UqWHVn4=
-  - secure: HV8pPsLmz3GsoAyAnJosqMPVL/2QA/0G71b9KTrXGvnydRwPfaxPmgklrVs0S8LlS4t1OzJcL1M8p/k2ulWL/OsmG+KVB2LRB51JsrhfDEb+XF9VpXFXv5TSx2Bv9RE4gBlY2YaVnpq5OsL9oQDLmwMvsEcPZPF/nRfnbG6zD6g=
-node_js: stable
+    - secure: >-
+        JOd5P49LsE77iYvmnXcjrv4UOPBz5iXed34LnK4FB8+hJ79wFan/HuymA8mof1FDnyBYFqV9Zgmeo2BAmFxomtADwLL6fcX34fh5r0JPuM6pv1ovoaE/yNBrt3o7RfhQ9/VkezjGBFkrXF8ciw2e+OHu6aEcAvdqG8O0UqWHVn4=
+    - secure: >-
+        HV8pPsLmz3GsoAyAnJosqMPVL/2QA/0G71b9KTrXGvnydRwPfaxPmgklrVs0S8LlS4t1OzJcL1M8p/k2ulWL/OsmG+KVB2LRB51JsrhfDEb+XF9VpXFXv5TSx2Bv9RE4gBlY2YaVnpq5OsL9oQDLmwMvsEcPZPF/nRfnbG6zD6g=
+node_js: '6'
 addons:
-  firefox: '46.0'
+  firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
-  sauce_connect: true
+      - google-chrome-stable
 script:
-- xvfb-run wct
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
+  - xvfb-run wct
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
 dist: trusty
@@ -12,7 +12,7 @@
   <head>
 
     <title>iron-image demo</title>
-    
+
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -89,6 +89,24 @@ <h3>
         </template>
       </demo-snippet>
 
+      <h3>
+        <code>sizing="contain|cover"</code> with <code>has-context-menu</code> allows
+        the image to still be right clicked as well as dragged.
+      </h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <style is="custom-style">
+            #example-sizing-contain {
+              width: 150px;
+              height: 150px;
+              background: #ddd;
+            }
+          </style>
+
+          <iron-image sizing="contain" has-context-menu id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
+        </template>
+      </demo-snippet>
+
       <h3>
         Use the <code>--iron-image-width</code> property to set the width of
         the image wrapped by the <code>iron-image</code>.

@@ -43,6 +43,11 @@
     <iron-image style="width:400px; height:400px;" sizing="cover"
       src="http://lorempixel.com/600/400"></iron-image>
 
+  Will allow sized image be be right clicked and dragged:
+
+    <iron-image style="width:400px; height:400px;" sizing="cover"
+      has-context-menu src="http://lorempixel.com/600/400"></iron-image>
+
   Will show light-gray background until the image loads:
 
     <iron-image style="width:400px; height:400px; background-color: lightgray;"
@@ -98,6 +103,16 @@
         display: none;
       }
 
+      :host([has-context-menu][sizing]) #img {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
       #placeholder {
         @apply(--layout-fit);
 
@@ -118,7 +133,7 @@
       hidden$="[[_computeImgDivHidden(sizing)]]"
       aria-hidden$="[[_computeImgDivARIAHidden(alt)]]"
       aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
-    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]">
+    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing, hasContextMenu)]]">
     <div id="placeholder"
       hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]"
       class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
@@ -260,6 +275,20 @@
           type: Number,
           value: null
         },
+
+        /**
+         * Can the <img/> be right clicked or dragged when sizing is set.
+		 *
+         * @attribute hasContextMenu
+         * @type boolean
+         * @default false
+         */
+
+        hasContextMenu: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
       },
 
       observers: [
@@ -344,7 +373,7 @@
       },
 
       _computeImgHidden: function() {
-        return !!this.sizing;
+        return !!this.sizing && !this.hasContextMenu;
       },
 
       _widthChanged: function() {