1 <style> 2 .classTest { 3 -webkit-transform:skew(-10deg,-3deg); 4 color: green; 5 background: #CCC; 6 border: 2px solid blue; 7 padding: 5px 6px 7px 8px; 8 } 9 </style> 10 <p>To begin test, open DevTools, select the Elements panel. Expand the Styles pane in the sidebar.</p> 11 <ul> 12 <li>Choose the <b><div class="classTest"...></b> element in the DOM tree. 13 You should see the following element styles in the ".classTest (inline stylesheet)" section: 14 <pre> 15 -webkit-transform:skew(-10deg,-3deg); 16 color: green; 17 background: #CCC; 18 border: 2px solid blue; 19 padding: 5px 6px 7px 8px; 20 </pre> 21 While changing all the property values, you should see corresponding live page changes. 22 <li>Double click the "-webkit-transform" rule and place the cursor at the second argument (-3deg). 23 <li>Press Up/Down keys do see the argument value change in 1.0 steps (0.1 steps in the [-1; 1] range). 24 <li>Press Shift+Up/Down keys to see the argument value change in 10.0 steps. 25 <li>Press Alt(Cmd)+Up/Downkeys to see the argument value change in 0.1 steps (1.0 steps in the [-1; 1] range). 26 <li>Move the mouse pointer within the section to display checkboxes to the right of the property values. 27 <li>Click the checkboxes to disable/enable the corresponding style properties and observe the page changes. 28 You can disable the "-webkit-transform" property if the element overlaps the instructions. 29 <li>Double-click the "background" rule and alter the color to "#FFF". The text background should turn white. 30 <li>Double-click the "color" rule and alter the color to "black". The text background should turn black. 31 <li>Expand the "padding" shorthand property using the arrow at the left. You should see the following 32 property values beneath: padding-top: 5px; padding-right: 6px; padding-bottom: 7px; padding-left: 8px; 33 <li>In the "Styles" pane titlebar click the gear button and choose "New Style Rule". In the editbox that appears, type: 34 <pre> 35 font-family: monospace; 36 </pre> 37 The font of the test string should alter to a monospaced one. 38 </ul> 39 40 <div class="classTest">CLASS_TEST CLASS_TEST CLASS_TEST CLASS_TEST CLASS_TEST CLASS_TEST CLASS_TEST</div>
