mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
54 lines
No EOL
2.4 KiB
HTML
54 lines
No EOL
2.4 KiB
HTML
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<title>CSS Writing Modes Test: position absolute and 'vertical-rl' - 'width' and 'right' are 'auto' and 'left' is not 'auto' with 'direction: rtl' in initial containing block</title>
|
|
<style type="text/css">
|
|
@page { font: italic 8pt sans-serif; color: gray;
|
|
margin: 7%;
|
|
counter-increment: page;
|
|
@top-left { content: "CSS Writing Modes Module Level 3 CR Test Suite"; }
|
|
@top-right { content: "Test abs-pos-non-replaced-icb-vrl-016"; }
|
|
@bottom-right { content: counter(page); }
|
|
}
|
|
</style>
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
|
<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="reference/abs-pos-non-replaced-icb-vrl-008-ref.xht" />
|
|
|
|
<meta content="" name="flags" />
|
|
<meta content="This test checks that when initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
|
|
|
|
<style type="text/css"><![CDATA[
|
|
object#overlapping-green
|
|
{
|
|
height: 116px;
|
|
width: 500px; /* 60% of 500px == 300px (offset of green square) */
|
|
vertical-align: top;
|
|
}
|
|
|
|
div#red-overlapped-reference
|
|
{
|
|
background-color: red;
|
|
bottom: 116px;
|
|
height: 100px;
|
|
left: 300px;
|
|
position: relative;
|
|
width: 100px;
|
|
z-index: -1;
|
|
}
|
|
]]></style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-016.html" type="text/html" id="overlapping-green">This test requires a browser with capability to embed an HTML document thanks to the HTML <object> element.</object></div>
|
|
|
|
<div id="red-overlapped-reference"></div>
|
|
|
|
</body>
|
|
</html> |