• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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>&lt;div class="classTest"...></b> element in the DOM tree.
13You 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.
28You 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
32property 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>
35font-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>