content/browser/debugger/manual_tests/element-styles.html - Issue 11630004: DevTools: rename debugger/ to devtools/, move DevTools files into content/renderer/devtools.

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: content/browser/debugger/manual_tests/element-styles.html

Issue 11630004: DevTools: rename debugger/ to devtools/, move DevTools files into content/renderer/devtools. (Closed) Base URL: http://git.chromium.org/chromium/src.git@master

Patch Set: For landing Created 8 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
	(Empty)
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 pa ne 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 styleshee t)" 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 seco nd argument (-3deg).

23 <li>Press Up/Down keys do see the argument value change in 1.0 steps (0.1 step s 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 rig ht 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 ins tructions.

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 bac kground should turn black.

31 <li>Expand the "padding" shorthand property using the arrow at the left. You s hould see the following

32 property values beneath: padding-top: 5px; padding-right: 6px; padding-bottom: 7 px; 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 CL ASS_TEST CLASS_TEST</div>

OLD	NEW