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