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

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/css/CSS2/positioning/relpos-calcs-004.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 - auto right = -left</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 'right'
12 is 'auto', its used value is minus the value of 'left'." />
13 <style type="text/css">
14 div {
15 height: 120px;
16 width: 120px;
17 margin-right: auto;
18 direction: ltr;
19 }
20 .container {
21 margin-left: -60px;
22 direction: rtl; /* only set RTL on the containing block in question */
23 }
24 .outer {
25 background: red;
26 position: relative;
27 left: 50%;
28 /*
29 div.outer's used left value is 60px
30 div.outer's right top value is -60px
31 div.outer's computed left value is 50%
32 but
33 div.outer's computed right value is auto and not 50%!
34 */
35
36 }
37 .inner {
38 background: green;
39 position: relative;
40 right: inherit; /* using inheritance to test computed vs. used */
41 }
42 .control {
43 background: red;
44 margin-bottom: -120px;
45 }
46 </style>
47 </head>
48 <body>
49 <p>Test passes if there is a filled green square and <strong>no red</strong> .</p>
50 <div class="control"></div>
51 <div class="container" dir="rtl">
52 <div class="outer" dir="ltr">
53 <div class="inner"></div>
54 </div>
55 </div>
56 </body>
57 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698