1<!doctype html> 2<!-- 3@license 4Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12 13<head> 14 15 <meta charset="utf-8"> 16 <script> 17 WCT = { waitFor: function (cb) { HTMLImports.whenReady(cb) } } 18 </script> 19 <script src="./test-flags.js"></script> 20 <script src="../node_modules/wct-browser-legacy/browser.js"></script> 21 <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script> 22 <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script> 23 <script src="../node_modules/@webcomponents/template/template.js"></script> 24 <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script> 25 <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script> 26 <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script> 27 <script src="../scoping-shim.min.js"></script> 28 <script> 29 if (customElements.polyfillWrapFlushCallback) { 30 // delay definition of custom-style until after template polyfill loads 31 customElements.polyfillWrapFlushCallback(function (cb) { 32 HTMLImports.whenReady(cb); 33 }); 34 } 35 </script> 36 <script src="module/generated/make-element.js"></script> 37 <title>Media Querty</title> 38 39</head> 40 41<body> 42 <template id="simple-element"> 43 <style> 44 :host { 45 height: 100px; 46 width: 100px; 47 display: block; 48 background-color: var(--color, rgb(0, 0, 0)); 49 } 50 @media (min-width: 1px) and (max-width: 1px) { 51 :host { 52 --color: rgb(128, 128, 128); 53 } 54 } 55 </style> 56 </template> 57 <script> 58 suite('Media Query correctness', function() { 59 makeElement('simple-element'); 60 test('test against whole @media rule', function() { 61 var el = document.createElement('simple-element'); 62 document.body.appendChild(el); 63 let bg = getComputedStyle(el).getPropertyValue('background-color').trim(); 64 assert.equal(bg, 'rgb(0, 0, 0)', 'background-color did not match'); 65 }); 66 }); 67 </script> 68</body> 69</html>