16abbd78e7
Add scripts/import_wpt_reftests.py to sparse-clone the upstream WPT repo and bulk-import qualifying CSS reftests (no JS, no external resources) as known_fail entries. 23 tests already pass and are promoted. The import script is idempotent and exposed via `just import-wpt`. CI now prints the WPT summary (pass=36 known_fail=2877 skip=1) on every run. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
107 lines
2.6 KiB
HTML
107 lines
2.6 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>CSS Test: margin collapsing - clear with descendants margins</title>
|
|
|
|
<!--
|
|
Inspired by
|
|
http://test.csswg.org/suites/css2.1/20110323/html4/c5525-fltmult-000.htm
|
|
-->
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" >
|
|
<link rel="reviewer" title="Arron Eicholz" href="arronei(at)gmail.com" > <!-- 2013-07-30 -->
|
|
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Jan/0022.html" title="[RC6] c5525-fltmult-000 imprecise and failed by several browsers" >
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins" >
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" >
|
|
|
|
<meta name="assert" content="An element on which 'clear' is set to a value other than 'none' can have its own margin-top collapse with the margin-top of its first inflow block-level child (which may also be the resulting combined margin of its own subtree of descendants) as long as no line boxes, no clearance, no padding and no border separate them." >
|
|
|
|
<style type="text/css"><![CDATA[
|
|
body {margin: 8px;}
|
|
|
|
p {margin: 1em 0em;}
|
|
|
|
div#overlapped-red
|
|
{
|
|
background-color: red;
|
|
height: 100px;
|
|
position: absolute;
|
|
width: 100px;
|
|
z-index: -1;
|
|
}
|
|
|
|
div#floated-left
|
|
{
|
|
background-color: green;
|
|
color: green;
|
|
float: left;
|
|
font: 1em/1.25 serif;
|
|
padding: 15px;
|
|
/*
|
|
|
|
15px : padding-top
|
|
+
|
|
20px : line box height
|
|
+
|
|
15px : padding-bottom
|
|
=====
|
|
50px
|
|
|
|
*/
|
|
width: 70px;
|
|
}
|
|
|
|
div#cleared-left {clear: left;}
|
|
|
|
div#child-of-cleared-left
|
|
{
|
|
background-color: red;
|
|
margin-top: 50px;
|
|
width: 100px;
|
|
}
|
|
|
|
div#grandchild-of-cleared-left
|
|
{
|
|
background-color: red;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
div#grand-grandchild-of-cleared-left
|
|
{
|
|
background-color: green;
|
|
color: green;
|
|
height: 50px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/*
|
|
The idea is to have div#cleared-left's margin-top collapse
|
|
with div#child-of-clear-left's margin-top. The margin
|
|
collapsing of margin-tops of descendants of div#cleared-left
|
|
should occur before calculating clearance.
|
|
*/
|
|
]]></style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div id="overlapped-red"></div>
|
|
|
|
<div id="floated-left">flt lft</div>
|
|
|
|
<div id="cleared-left">
|
|
<div id="child-of-cleared-left">
|
|
<div id="grandchild-of-cleared-left">
|
|
<div id="grand-grandchild-of-cleared-left">ggchld</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |