Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(626)

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/relpos-calcs-007.xht

Issue 2824603002: Import css21/positioning W3C CSS Test Suite (Closed)
Patch Set: git rebase-update Created 3 years, 8 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
OLDNEW
(Empty)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS Test: Relative Positioning - overconstrained top = -bottom</title >
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade. net/contact"/>
6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/Brow serBugsSection/css21testsuite/" /> <!-- 2012-09-25 -->
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-posi tioning" />
8 <link rel="match" href="relpos-calcs-001-ref.xht" />
9
10 <meta name="flags" content="" />
11 <meta name="assert" content="For a relatively positioned element, if
12 neither 'top' nor 'bottom' is 'auto', used value of 'bottom' is minus the
13 value of 'top'." />
14 <style type="text/css">
15 div {
16 height: 80px;
17 width: 120px;
18 }
19 .outer {
20 background: green;
21 position: relative;
22 top: 50%;
23 bottom: 50%;
24
25 /*
26 div.outer's used top value is 40px
27 div.outer's used bottom value is -40px
28 div.outer's computed top value is 50%
29 div.outer's computed bottom value is 50%
30 */
31
32 }
33 .inner {
34 background: green;
35 position: relative;
36 bottom: inherit; /* using inheritance to test computed vs. used */
37 /* div.inner's bottom inherits div.outer's computed bottom value */
38 }
39 .control {
40 background: red;
41 margin-top: -80px;
42 height: 120px;
43 }
44 </style>
45 </head>
46 <body>
47 <p>Test passes if there is a filled green square and <strong>no red</strong> .</p>
48 <div class="container">
49 <div class="outer">
50 <div class="inner"></div>
51 </div>
52 </div>
53 <div class="control"></div>
54 </body>
55 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698