overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht (2990B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'top' and 'bottom' are not 'auto' in vertical-rl context</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <!-- 11 Credits should go to Aleks Totić for reporting 12 Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec 13 https://bugs.chromium.org/p/chromium/issues/detail?id=695270 14 and for providing an excellent test originally demonstrating the particular feature 15 being checked in this test. 16 --> 17 18 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" /> 19 <link rel="match" href="overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht" /> 20 21 <meta name="flags" content="image" /> 22 <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'top' and 'bottom' are not 'auto' in a vertical-rl context, then the value of 'top' wins and 'bottom' becomes -'top'." /> 23 24 <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" /> 25 <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" /> 26 27 <style type="text/css"><![CDATA[ 28 html 29 { 30 background: transparent url("support/bg-red-4col-2row-320x320.png") no-repeat calc(100% - 278px) 8px; 31 /* 32 16px : p's margin-right 33 246px : img's width 34 16px : p's margin-left 35 ======== 36 278px : background-position from the right edge of document box 37 */ 38 39 /* top = 8px since the red fail square is already on 2nd row in bg-red-4col-2row-320x320 */ 40 41 direction: ltr; 42 writing-mode: vertical-rl; 43 } 44 45 /* 46 Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. 47 48 So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules. 49 */ 50 51 div 52 { 53 background-color: green; 54 bottom: 80px; 55 height: 80px; 56 position: relative; 57 top: 80px; 58 width: 80px; 59 } 60 61 /* 62 Here, 'top' should win, 'bottom' should be ignored and the used bottom value should become -'top'. 63 */ 64 ]]></style> 65 66 </head> 67 68 <body> 69 70 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 71 72 <!-- 73 The image says: 74 Test passes if there is a filled 75 green square and <strong>no red</strong>. 76 --> 77 78 <div></div> 79 80 </body> 81 </html>