catapult/third_party/polymer/components/iron-behaviors/test/focused-state.html - platform/external/chromium-trace - Git at Google

 <!doctype html>
 <!--
 @license
 Copyright (c) 2015 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>
   <title>focused-state</title>

   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="test-elements.html">
 </head>
 <body>

   <test-fixture id="TrivialFocusedState">
     <template>
       <test-control tabindex="-1"></test-control>
     </template>
   </test-fixture>

   <test-fixture id="NestedFocusedState">
     <template>
       <nested-focusable></nested-focusable>
     </template>
   </test-fixture>

   <test-fixture id="LightDOM">
     <template>
       <test-light-dom>
         <input id="input">
         <nested-focusable></nested-focusable>
       </test-light-dom>
     </template>
   </test-fixture>

   <script>
     suite('focused-state', function() {
       var focusTarget;

       setup(function() {
         focusTarget = fixture('TrivialFocusedState');
       });

       suite('when is focused', function() {
         test('receives a focused attribute', function() {
           expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
           MockInteractions.focus(focusTarget);
           expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
         });

         test('focused property is true', function() {
           expect(focusTarget.focused).to.not.be.eql(true);
           MockInteractions.focus(focusTarget);
           expect(focusTarget.focused).to.be.eql(true);
         });
       });

       suite('when is blurred', function() {
         test('loses the focused attribute', function() {
           MockInteractions.focus(focusTarget);
           expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
           MockInteractions.blur(focusTarget);
           expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
         });

         test('focused property is false', function() {
           MockInteractions.focus(focusTarget);
           expect(focusTarget.focused).to.be.eql(true);
           MockInteractions.blur(focusTarget);
           expect(focusTarget.focused).to.be.eql(false);
         });
       });

       suite('when the focused state is disabled', function() {
         test('will not be focusable', function() {
           var blurSpy = sinon.spy(focusTarget, 'blur');
           MockInteractions.focus(focusTarget);
           focusTarget.disabled = true;
           expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
           expect(blurSpy.called).to.be.eql(true);
         });
       });
     });

     suite('nested focusable', function() {
       var focusable;

       setup(function() {
         focusable = fixture('NestedFocusedState');
       });

       test('focus/blur events fired on host element', function() {
         var nFocusEvents = 0;
         var nBlurEvents = 0;

         focusable.addEventListener('focus', function() {
           nFocusEvents += 1;
           expect(focusable.focused).to.be.equal(true);
           MockInteractions.blur(focusable.$.input);
         });
         focusable.addEventListener('blur', function() {
           expect(focusable.focused).to.be.equal(false);
           nBlurEvents += 1;
         });

         MockInteractions.focus(focusable.$.input);

         expect(nBlurEvents).to.be.greaterThan(0);
         expect(nFocusEvents).to.be.greaterThan(0);
       });

     });


     suite('elements in the light dom', function() {
       var lightDOM, input, lightDescendantShadowInput;

       setup(function() {
         lightDOM = fixture('LightDOM');
         input = document.querySelector('#input');
         lightDescendantShadowInput = Polymer.dom(lightDOM)
             .querySelector('nested-focusable').$.input;
       });

       test('should not fire the focus event', function() {
         var nFocusEvents = 0;

         lightDOM.addEventListener('focus', function() {
           nFocusEvents += 1;
         });

         MockInteractions.focus(input);

         expect(nFocusEvents).to.be.equal(0);
       });

       test('should not fire the focus event from shadow descendants', function() {
         var nFocusEvents = 0;

         lightDOM.addEventListener('focus', function() {
           nFocusEvents += 1;
         });

         MockInteractions.focus(lightDescendantShadowInput);

         expect(nFocusEvents).to.be.equal(0);
       });

     });

   </script>

 </body>
 </html>
	<!doctype html>
	<!--
	@license
	Copyright (c) 2015 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>
	<title>focused-state</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	<script src="../../web-component-tester/browser.js"></script>
	<script src="../../iron-test-helpers/mock-interactions.js"></script>
	<link rel="import" href="test-elements.html">
	</head>
	<body>

	<test-fixture id="TrivialFocusedState">
	<template>
	<test-control tabindex="-1"></test-control>
	</template>
	</test-fixture>

	<test-fixture id="NestedFocusedState">
	<template>
	<nested-focusable></nested-focusable>
	</template>
	</test-fixture>

	<test-fixture id="LightDOM">
	<template>
	<test-light-dom>
	<input id="input">
	<nested-focusable></nested-focusable>
	</test-light-dom>
	</template>
	</test-fixture>

	<script>
	suite('focused-state', function() {
	var focusTarget;

	setup(function() {
	focusTarget = fixture('TrivialFocusedState');
	});

	suite('when is focused', function() {
	test('receives a focused attribute', function() {
	expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
	MockInteractions.focus(focusTarget);
	expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
	});

	test('focused property is true', function() {
	expect(focusTarget.focused).to.not.be.eql(true);
	MockInteractions.focus(focusTarget);
	expect(focusTarget.focused).to.be.eql(true);
	});
	});

	suite('when is blurred', function() {
	test('loses the focused attribute', function() {
	MockInteractions.focus(focusTarget);
	expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
	MockInteractions.blur(focusTarget);
	expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
	});

	test('focused property is false', function() {
	MockInteractions.focus(focusTarget);
	expect(focusTarget.focused).to.be.eql(true);
	MockInteractions.blur(focusTarget);
	expect(focusTarget.focused).to.be.eql(false);
	});
	});

	suite('when the focused state is disabled', function() {
	test('will not be focusable', function() {
	var blurSpy = sinon.spy(focusTarget, 'blur');
	MockInteractions.focus(focusTarget);
	focusTarget.disabled = true;
	expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
	expect(blurSpy.called).to.be.eql(true);
	});
	});
	});

	suite('nested focusable', function() {
	var focusable;

	setup(function() {
	focusable = fixture('NestedFocusedState');
	});

	test('focus/blur events fired on host element', function() {
	var nFocusEvents = 0;
	var nBlurEvents = 0;

	focusable.addEventListener('focus', function() {
	nFocusEvents += 1;
	expect(focusable.focused).to.be.equal(true);
	MockInteractions.blur(focusable.$.input);
	});
	focusable.addEventListener('blur', function() {
	expect(focusable.focused).to.be.equal(false);
	nBlurEvents += 1;
	});

	MockInteractions.focus(focusable.$.input);

	expect(nBlurEvents).to.be.greaterThan(0);
	expect(nFocusEvents).to.be.greaterThan(0);
	});

	});


	suite('elements in the light dom', function() {
	var lightDOM, input, lightDescendantShadowInput;

	setup(function() {
	lightDOM = fixture('LightDOM');
	input = document.querySelector('#input');
	lightDescendantShadowInput = Polymer.dom(lightDOM)
	.querySelector('nested-focusable').$.input;
	});

	test('should not fire the focus event', function() {
	var nFocusEvents = 0;

	lightDOM.addEventListener('focus', function() {
	nFocusEvents += 1;
	});

	MockInteractions.focus(input);

	expect(nFocusEvents).to.be.equal(0);
	});

	test('should not fire the focus event from shadow descendants', function() {
	var nFocusEvents = 0;

	lightDOM.addEventListener('focus', function() {
	nFocusEvents += 1;
	});

	MockInteractions.focus(lightDescendantShadowInput);

	expect(nFocusEvents).to.be.equal(0);
	});

	});

	</script>

	</body>
	</html>