third_party/WebKit/LayoutTests/svg/wicd/rightsizing-grid.xhtml - Issue 1542563002: Rewrite LayoutTest svg/wicd/rightsizing-grid as a reftest

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: third_party/WebKit/LayoutTests/svg/wicd/rightsizing-grid.xhtml

Issue 1542563002: Rewrite LayoutTest svg/wicd/rightsizing-grid as a reftest (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Add note about test inspiration Created 4 years, 12 months 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

« no previous file with comments | « third_party/WebKit/LayoutTests/svg/wicd/rightsizing-grid.html ('k') | third_party/WebKit/LayoutTests/svg/wicd/rightsizing-grid-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <?xml version="1.0" encoding="UTF-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xh tml-basic/xhtml-basic11.dtd">

3 <html xmlns="http://www.w3.org/1999/xhtml">

4 <head>

5 <title>WICD Core 1.0 #20-3 - SVG grid with percentage width</title>

6 <style type="text/css">

7 div,object

8 {float:left;}

9 .full

10 {width:100%;}

11 .half

12 {width:50%;}

13 .half2

14 {width:50%;}

15 .third

16 {width:33.33%;}

17 .quarter

18 {width:25%;}

19 .threequarters

20 {width:75%;}

21 </style>

22 </head>

23

24 <body>

25 <div>

26 <h1>SVG grid with percentage width</h1>

27 <h4>WICD Core 1.0 #20-3</h4>

28 <p>

29 <object class="half" type="image/svg+xml" data="resources/a.svg"/><object cl ass="half" type="image/svg+xml" data="resources/l.svg"/>

30

31 <object class="third" type="image/svg+xml" data="resources/bcde.svg"/><div c lass="third"><object width="100%" type="image/svg+xml" data="resources/k.svg"/>< br/><object width="100%" type="image/svg+xml" data="resources/j.svg"/></div><div class="third"><object class="full" type="image/svg+xml" data="resources/mnop.sv g"/><object class="full" type="image/svg+xml" data="resources/q.svg"/></div>

32

33 <object class="half" type="image/svg+xml" data="resources/f.svg"/><object cl ass="half" type="image/svg+xml" data="resources/i.svg"/>

34

35 <div class="half"><object class="quarter" type="image/svg+xml" data="resourc es/empty1.svg"/><object class="threequarters" type="image/svg+xml" data="resourc es/g.svg"/></div>

36

37 <div class="half2"><object class="half" type="image/svg+xml" data="resources /h.svg"/><object class="half" type="image/svg+xml" data="resources/r.svg"/></div >

38

39 <object class="quarter" type="image/svg+xml" data="resources/empty2.svg"/><o bject class="quarter" type="image/svg+xml" data="resources/empty3.svg"/>

40

41 <div class="half2"><object class="threequarters" type="image/svg+xml" data=" resources/s.svg"/><object class="quarter" type="image/svg+xml" data="resources/t .svg"/></div>

42 </p>

43

44 <p style="color:white"><br/>..</p> <!-- simple br didn't do it for me :) -->

45

46 <p>

47 Above, you should see a grid of 17 SVG child elements sticked together to bu ild one rectangle grid.

48 You should be able to resize your browser window and the grid rendering shou ld adjust to it. The outcome should look like in these sample screenshots:

49 <a href="rightsizing1.png">small</a>, <a href="rightsizing2.png">bigger</a> and <a href="rightsizing3.png">big</a>.

50 </p>

51 <p>

52 The test is successful, if all SVG elements resize exacly dependend on the w idth of the browser window, but keep their aspect ratio and relative position. T he complete grid should always show a perfect rectangle object.

53 </p>

54 <p><br/><a href="javascript:history.back()">Back</a></p>

55 </div>

56 </body>

57 </html>

OLD	NEW