diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/tables/separated-border-model-004e.xht')
-rw-r--r-- | testing/web-platform/tests/css/CSS2/tables/separated-border-model-004e.xht | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004e.xht b/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004e.xht new file mode 100644 index 0000000000..6fc350f651 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/tables/separated-border-model-004e.xht @@ -0,0 +1,105 @@ +<!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 Test: width of CSS table in border-collapse separate model</title> + + <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model" /> + <link rel="match" href="separated-border-model-004e-ref.xht" /> + + <meta content="The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the table border-spacing but excluding table padding and table borders)." name="assert" /> + + <style type="text/css"><![CDATA[ + div#table + { + border-left: 100px solid white; + border-right: 100px solid white; + border-spacing: 52px 0; + display: table; + padding: 0 33px; + width: 200px; + /* + The width of a CSS table is the distance from the left inner padding + edge to the right inner padding edge (including the table border-spacing + but excluding table padding and table borders). + + Therefore the 'padding: 0 33px;' is not involved in the used width + calculation and 'border-left: 100px solid white;' and + 'border-right: 100px solid white;' are not involved in the used + width calculation. + + The width of a CSS table is given by the greater of the value of + the 'width' property as set for the CSS table and the sum of the columns + width (plus border spacing): + + max(set width, sum of columns width plus border spacing) + + Here, the set width is 200px. + + The sums of columns' width plus border spacing is given by: + + 52px (left-most border-spacing) + + + 0px (div#td's width) + + + 52px (right-most border-spacing) + ====== + 104px : sum of columns plus border spacing + + 200px (set width of table) + - + 104px (sum of columns plus border spacing) + ===== + 96px : such extra (exceeding) 96px width will be distributed over + the columns, therefore given to the unique cell of such div#table + + So, the div#td should be 96px wide, 16px tall and painted black. + */ + } + + div#tr {display: table-row;} + + div#td + { + background-color: black; + display: table-cell; + height: 1em; + } + + div#reference + { + background-color: blue; + height: 1em; + left: 185px; + /* + 100px : table's border-left + 33px : table's padding-left + 52px : left-most border-spacing + ----- + 185px + */ + margin-top: 10px; + position: relative; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the black and blue stripes have the <strong>same width</strong>.</p> + + <div id="table"> + <div id="tr"> + <div id="td"></div> + </div> + </div> + + <div id="reference"></div> + + </body> +</html>
\ No newline at end of file |