diff options
Diffstat (limited to 'layout/reftests/w3c-css/received')
467 files changed, 18369 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/received/README b/layout/reftests/w3c-css/received/README new file mode 100644 index 000000000..478ec34b5 --- /dev/null +++ b/layout/reftests/w3c-css/received/README @@ -0,0 +1,5 @@ +W3C CSS Test Suite Import Directory +----------------------------------- + +This directory contains reftests pulled from the CSSWG test repository +using ../import-tests.py . diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html new file mode 100644 index 000000000..49fd608dd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: DESCRIPTION OF TEST</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> + <link rel="match" href="reference/background-lime.html"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media"> + <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*)."> + <style> + @media{ body { background: lime; color: black; } } + </style> + </head> + <body> + This page should have a light green background. + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html new file mode 100644 index 000000000..7ae37f5bf --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: DESCRIPTION OF TEST</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> + <link rel="match" href="reference/background-lime.html"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media"> + <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*)."> + <style> + @media(min-width:0px){ body { background: lime; color: black; } } + </style> + </head> + <body> + This page should have a light green background. + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html new file mode 100644 index 000000000..a8157aa75 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <style> + div { + background-color:green; + height:100px; + width:100px; + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html new file mode 100644 index 000000000..7e6b21f6d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html @@ -0,0 +1,25 @@ +<!doctype html> +<head> + <title>CSS Test (Conditional Rules): Support for simple passing conditions in @supports</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 0) { + div { background-color:green; } + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html new file mode 100644 index 000000000..d4b59ff36 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Support for @supports within @media</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @media all { + @supports (margin: 0) { + div { background-color:green; } + } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html new file mode 100644 index 000000000..c138bbc30 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Support for @media within @supports</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 0) { + @media all{ + div { background-color:green; } + } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html new file mode 100644 index 000000000..6b9cf6f6b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): @supports within non-matching @media should not apply</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0) { div { background-color:green; } } + @media not all { + @supports (margin: 0) { + div { background-color:red; } + } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html new file mode 100644 index 000000000..67329e365 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): non-matching @media within @supports should not apply</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0) { div { background-color:green; } } + @supports (margin: 0) { + @media not all { + div { background-color:red; } + } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html new file mode 100644 index 000000000..f5c646106 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Nested parens around conditions in @supports should work</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((margin: 0)) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html new file mode 100644 index 000000000..a8184274f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Conjunctions of passing simple conditions in @supports should pass</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((margin: 0) and (display:inline-block !important)) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html new file mode 100644 index 000000000..f53b40c82 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Disjunctions with at least a passing simple condition in @supports should pass</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((margin: 0) or (foo: 15em)) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html new file mode 100644 index 000000000..ffe96f61a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Negations of failing simple conditions in @supports should pass</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (not (yadayada: x, calc( 2/3 ))) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html new file mode 100644 index 000000000..d3716718c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Combinations of conjuctions, disjunctions, and negations of simple conditions in @supports should work</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((yada: 2kg !trivial) or ((not (foo:bar)) and (((visibility:hidden))))) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html new file mode 100644 index 000000000..02e744e4b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Conditions not enclosed in parens in @supports should not work</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0) { div { background-color:green; } } + @supports margin: 0 { + div { background-color:red; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html new file mode 100644 index 000000000..8a30ead2f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Conjunctions with more than two terms in @supports should work</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((margin: 0) and (background: blue) and (padding:inherit)) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html new file mode 100644 index 000000000..619da8411 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Disjunction with more than two terms in @supports should work</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((yoyo: yaya) or (margin: 0) or (answer: 42)) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html new file mode 100644 index 000000000..c26d8057d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Negations in @supports should not work if "not" isn't follow by a space</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (width: 0) { + div { background-color:green; } + } + @supports not(foo: baz) { + div { background-color:red; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html new file mode 100644 index 000000000..fe3d5e561 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Bizarre syntax that still conforms to the core grammar should succesfully parse in @supports</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (not (foo: baz !unrelated $ ,/[&])) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html new file mode 100644 index 000000000..f8feaa470 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): In @supports, parens are required to mix conjunctions with disjunctions</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div{ + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0) { div { background-color:green; } } + @supports ((margin: 0) and (display: inline) or (width:1em)) { + div { background-color:red; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html new file mode 100644 index 000000000..81cbe4553 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): In @supports, functions can be parsed successfully</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background:red; + height:100px; + width:100px; + } + @supports (background: url("http://www.example.com/foo.jpg")) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html new file mode 100644 index 000000000..88bcedec9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): In @supports conditions, the arguments of a function can begin with spaces</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content=""> + <style> + div { + background:red; + height:100px; + width:100px; + } + @supports (not (width:compute( 2px + 2px ))) { + div { background-color:green; } + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html new file mode 100644 index 000000000..7e6bf448d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: ) { + div { background-color:red !important; } + } + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html new file mode 100644 index 000000000..eed31e5ea --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 2px) ) { + div { background-color:red !important; } + } + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html new file mode 100644 index 000000000..a3fdc83cc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0 ); + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html new file mode 100644 index 000000000..ec41734b4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports [margin: 0] { + div { background-color:red !important; } + } + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html new file mode 100644 index 000000000..e3df4f6f7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in nested @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @media all { + @supports (width: 0)) {} + @supports (margin:0) { div { background-color:green !important; } } + } + div { background-color:red; } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html new file mode 100644 index 000000000..94827ff53 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports; + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html new file mode 100644 index 000000000..e7079ee5c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ((margin:0) and [padding:0]) { + div { background-color:red !important; } + } + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html new file mode 100644 index 000000000..842a0ad66 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 0]) { + div { background-color:red !important; } + } + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html new file mode 100644 index 000000000..9d1fbaaf4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <style> + div { + background-color:green; + height:100px; + width:100px; + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html new file mode 100644 index 000000000..11a0ed1f0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-027-ref.html"> + <meta name="flags" content="invalid"> + <style> + @supports (margin:0) { div { background-color:green; } } + div { + height:100px; + width:100px; + } + @supports (margin: 0) + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html new file mode 100644 index 000000000..3abc95ebd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 0)) {} + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html new file mode 100644 index 000000000..b78a711fe --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-027-ref.html"> + <meta name="flags" content="invalid"> + <style> + @supports (margin:0) { div { background-color:green; } } + div { + height:100px; + width:100px; + } + @supports (margin: 0) ! + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html new file mode 100644 index 000000000..a2b66cfa6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin:0) { div { background-color:green; } } + @supports ((margin: 0) and ; + div { background-color:red; } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html new file mode 100644 index 000000000..2b4621d49 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports (margin: 0)) ; + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html new file mode 100644 index 000000000..d53deb175 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports {} + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html new file mode 100644 index 000000000..d2c682fb8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> + <link rel="author" href="http://opera.com" title="Opera Software ASA"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <style> + div { + background-color:red; + height:100px; + width:100px; + } + @supports ; + @supports (margin:0) { div { background-color:green; } } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html new file mode 100644 index 000000000..d9b9612ee --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0 or padding: 0) { div {background-color: red !important;} } + + @supports (margin: 0) { div {background-color: green;} } + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html new file mode 100644 index 000000000..23a706b32 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0) { div {background-color: green;} } + + @supports (margin: 0 or padding: 0) { div {background-color: red;} } + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html new file mode 100644 index 000000000..f352d5dbc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0 and padding: 0) + { + div {background-color: red !important;} + } + + @supports (margin: 0) { div {background-color: green;} } + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html new file mode 100644 index 000000000..7f23db6fd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0) { div {background-color: green;} } + + @supports (margin: 0 and padding: 0) { div {background-color: red;} } + + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html new file mode 100644 index 000000000..868a1e1f9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0;) { div {background-color: red !important;} } + + @supports (margin: 0) { div {background-color: green;} } + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html new file mode 100644 index 000000000..58e7ac2f0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule"> + <link rel="match" href="at-supports-001-ref.html"> + <meta name="flags" content="invalid"> + <meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se."> + + <!-- + + supports_condition_in_parens + : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition | + general_enclosed + ; + + --> + + <style> + div + { + background-color: red; + height: 100px; + width: 100px; + } + + @supports (margin: 0) { div {background-color: green;} } + + @supports (margin: 0;) { div {background-color: red;} } + </style> + </head> + + <body> + + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html b/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html new file mode 100644 index 000000000..fcb243c7f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test Reference</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> + <style> + body { background: lime; color: black; } + </style> + </head> + <body> + This page should have a light green background. + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html new file mode 100644 index 000000000..684b77b17 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via -moz-columns: [integer]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style type="text/css"> +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +</style> + <style type="text/css"> + .multicol-wrapper>*{ + font-family: Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + -moz-columns: 3; + -moz-column-gap: 0; + -moz-column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html new file mode 100644 index 000000000..76d55ac98 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via -moz-column-count: [integer]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style type="text/css"> +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +</style> + <style type="text/css"> + .multicol-wrapper>*{ + font-family: Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + -moz-column-count: 3; + -moz-column-gap: 0; + -moz-column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html new file mode 100644 index 000000000..49838534b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via -moz-columns: [width]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style type="text/css"> +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +</style> + <style type="text/css"> + .multicol-wrapper>*{ + font-family: Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + -moz-columns: 120px; + -moz-column-gap: 0; + -moz-column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html new file mode 100644 index 000000000..102721bcf --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via -moz-column-width: [width]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + +<style type="text/css"> +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +</style> + <style type="text/css"> + .multicol-wrapper>*{ + font-family: Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + -moz-column-width: 120px; + -moz-column-gap: 0; + -moz-column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht new file mode 100644 index 000000000..5695c7fe7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht @@ -0,0 +1,33 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td + { + padding: 0; + width: 3em; + } + + td + td {width: 8em;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="50" height="20" alt="Image download support must be enabled" /></td><td><img src="support/swatch-orange.png" width="40" height="80" alt="Image download support must be enabled" /></td> + </tr></table> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht new file mode 100644 index 000000000..d3093021e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht @@ -0,0 +1,55 @@ +<!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 Multi-column Layout Test: Overflowed content inside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-block-clip-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is clipped in the middle of the column gap." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + width: 11em; + } + + #first-column {color: blue;} + + #second-column {color: orange;} + + #third-column, #fourth-column {color: white;} + ]]></style> + </head> + <body> + <div> + <span id="first-column"> ab cd ef gh </span> + <h4> 1234567890123 </h4> + <span id="second-column"> ij kl mn oq </span> + <span id="third-column"> ab cd ef gh </span> + <span id="fourth-column"> rs tu vw xy </span> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht new file mode 100644 index 000000000..b5ba3f467 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht @@ -0,0 +1,54 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 serif; + border: 1em solid gray; + width: 11em; + height: 6em; + position: relative; + } + + img {position: absolute;} + + img#black {top: 4em;} + + img#first-orange {top: 5em;} + + img#second-orange {left: 4em;} + + img#first-pink + { + left: 4em; + top: 3em; + } + + img#second-pink {left: 8em;} + + img#yellow + { + left: 8em; + top: 1em; + } + ]]></style> + </head> + <body> + + <div> + <img id="blue" src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /> + <img id="black" src="support/black20x20.png" width="70" height="20" alt="Image download support must be enabled" /> + <img id="first-orange" src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" /> + <img id="second-orange" src="support/swatch-orange.png" width="40" height="60" alt="Image download support must be enabled" /> + <img id="first-pink" src="support/swatch-pink.png" width="40" height="60" alt="Image download support must be enabled" /> + <img id="second-pink" src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /> + <img id="yellow" src="support/swatch-yellow.png" width="40" height="80" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht new file mode 100644 index 000000000..42336ac77 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht @@ -0,0 +1,57 @@ +<!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 Multi-column Layout Test: Overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-block-clip-002-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is clipped in the middle of the column gap." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + width: 11em; + } + + #first-column {color: blue;} + + #second-column {color: orange;} + + #third-column {color: pink;} + + #fourth-column {color: yellow;} + ]]></style> + </head> + <body> + <div> + <span id="first-column"> ab cd ef gh </span> + <h4> 1234567890123 </h4> + <span id="second-column"> ij kl mn oq </span> + <span id="third-column"> ab cd ef gh </span> + <span id="fourth-column"> rs tu vw xy </span> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht new file mode 100644 index 000000000..28f8243ec --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht @@ -0,0 +1,51 @@ +<!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>multicol | break-inside: avoid-column</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-breaks"/> +<link rel="match" href="multicol-br-inside-avoidcolumn-ref.xht"/> +<meta name="flags" content=""/> +<style type="text/css"><![CDATA[ +html { + width: 800px; + background: white; +} +body { + background: black; + -moz-column-count: 3; + -moz-column-gap: 0; + -moz-column-fill: auto; + height: 300px; +} +h1 { + -moz-column-span: all; + color: white; +} +div { background: red; + height: 150px; + break-inside: avoid-column; +} +span { + float: left; +} +]]></style> +</head> +<body> +<h1>You should not see the word FAIL</h1> + +<div> + <span>FAIL</span> +</div> + +<div> + <span>FAIL</span> +</div> + +<div> + <span>FAIL</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht new file mode 100644 index 000000000..fc4655682 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht @@ -0,0 +1,30 @@ +<!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>multicol | break-inside: avoid-column</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +html { + width: 800px; + background: white; +} +h1 { + color: white; + margin-top: 0; + padding-top: 0.66em; +} +div { + height: 450px; + background: black; + height: 300px; +} +]]></style> +</head> +<body> +<div> + <h1>You should not see the word FAIL</h1> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht new file mode 100644 index 000000000..45aec43bb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem image" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht new file mode 100644 index 000000000..5553069e7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht @@ -0,0 +1,60 @@ +<!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 Multi-column Layout Test: break-after: column (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" /> + <link rel="match" href="multicol-break-000-ref.xht" /> + <meta name="flags" content="ahem image" /> + <meta name="assert" content="This test checks that basic support of 'break-after: column'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + div#test + { + -moz-column-fill: auto; + -moz-column-gap: 0; + -moz-column-width: 2em; + + /* + + N == 5; + + W == 2em; + + */ + } + + div#test > div {break-after: column;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + <div>A</div> + <div>B</div> + <div>C</div> + </div> + + <div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht new file mode 100644 index 000000000..742d0ecf8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht @@ -0,0 +1,35 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 --> + <meta name="flags" content="ahem image" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht new file mode 100644 index 000000000..245a7ea32 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht @@ -0,0 +1,59 @@ +<!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 Multi-column Layout Test: break-before: column (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" /> + <link rel="match" href="multicol-break-001-ref.xht" /> + <meta name="flags" content="ahem image" /> + <meta name="assert" content="This test checks that basic support of 'break-before: column'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + div#test + { + -moz-column-fill: auto; + -moz-column-gap: 0; + -moz-column-width: 2em; + + /* + + N == 5; + + W == 2em; + + */ + } + + div#test > div {break-before: column;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + <div>A</div> + <div>B</div> + <div>C</div> + </div> + + <div id="reference"> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht new file mode 100644 index 000000000..d742ea716 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 11em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img {left: 3em;} + + img + img + img {left: 6em;} + ]]></style> + </head> + <body> + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht new file mode 100644 index 000000000..c284be44f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht @@ -0,0 +1,50 @@ +<!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 Multi-column Layout Test: overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-clip-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: white; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 3; + -moz-column-gap: 4em; + } + + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span> + bl ac + bl ac + </span> + + <span> + bl ac + </span> + bl ue + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht new file mode 100644 index 000000000..681166c38 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 11em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img {left: 3em;} + + img + img + img {left: 6em;} + ]]></style> + </head> + <body> + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht new file mode 100644 index 000000000..6a8340e75 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-clip-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edges of the multi-column and are therefore hidden thanks to the 'overflow: hidden' declaration." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: white; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 11em; + + -moz-column-count: 3; + -moz-column-gap: 4em; + } + + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span> + bl ac + bl ac + </span> + + <span> + bl ac + </span> + bl ue + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht new file mode 100644 index 000000000..b5cd90c47 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: black solid 1px; + font: 1.25em/1 serif; + padding: 1em; + width: 8em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img + img {left: 2em;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht new file mode 100644 index 000000000..442ae4db5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: no margin collapsing with its first child block box</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-collapsing-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the top margin of the first child block box of a multicol element does not collapse with the margin top of such multicol element." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + background-color: black; + border: black solid 1px; + font: 1.25em/1 Ahem; + width: 10em; + } + + div > div + { + background-color: yellow; + color: black; + margin: 1em; + width: 8em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + h4 + { + font: inherit; + margin: 1em 0 0; + } + ]]></style> + </head> + <body> + <div> + <div> + <h4>ab cd</h4> + ef gh + ij kl + mn oq + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht new file mode 100644 index 000000000..c136af493 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht @@ -0,0 +1,30 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + <div>d da d da d da d da d da d da dam dam dam dam dam dam dame dame dame dame dame dame damerdamerdamerdamerdamerdamer<br />d da d da d da d da d da dam dam dam dam dam dame dame dame dame dame damerdamerdamerdamerdamer </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht new file mode 100644 index 000000000..9d601cac4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: 100px 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: 100px 6; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht new file mode 100644 index 000000000..7fd153518 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: 6 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: 6 100px; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht new file mode 100644 index 000000000..212fb60da --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: 100px auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: 100px auto; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht new file mode 100644 index 000000000..6b1ad5b5a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: auto 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: auto 100px; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht new file mode 100644 index 000000000..efc4030b8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties. '-moz-columns: 6' is equivalent to '-moz-column-width: auto' and '-moz-column-count: 6'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: 6; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht new file mode 100644 index 000000000..5546917c9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: 6 auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: 6 auto; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht new file mode 100644 index 000000000..fab0816ef --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-columns: auto 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-columns: auto 6; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht new file mode 100644 index 000000000..5c8470bd4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht @@ -0,0 +1,32 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht new file mode 100644 index 000000000..363b7b93e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: invalid -moz-columns shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that '-moz-columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-gap: 0; + -moz-columns: 8 normal; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht new file mode 100644 index 000000000..f6c4a39e3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht @@ -0,0 +1,56 @@ +<!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> + + <!-- + Original, initial filename of this test was + multicol-columns-toolong-002.xht + and it should be filename-renamed + multicol-columns-invalid-002.xht + --> + + <title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that '-moz-columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-gap: 0; + -moz-columns: 8 auto 6em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht new file mode 100644 index 000000000..8305ee358 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: narrower inline content inside wider colum box</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks the rendering of inline content (2em) inside wider (3em) column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht new file mode 100644 index 000000000..f7c279d11 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 2em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht new file mode 100644 index 000000000..0ba78986a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht @@ -0,0 +1,55 @@ +<!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 Multi-column Layout Test: a column box can not act as containing block for elements with 'position: absolute'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-containing-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a column box does not establish containing block for elements with 'position: absolute'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 3; + -moz-column-gap: 0; + } + + span + { + color: red; + position: absolute; + top: -1em; + } + + /* + In this test, the initial containing block establishes containing block + for such red span. Therefore, the 2 short red stripes should be + positioned out of view, just outside the top edge of viewport. + */ + + ]]></style> + </head> + <body> + <div> + bl ac + <span>re dd</span> + bl ac + bl ac + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht new file mode 100644 index 000000000..226560601 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht @@ -0,0 +1,37 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#inline-block + { + color: green; + display: inline-block; + font: 1.25em/1 Ahem; + } + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div>4444 4444 4444 4444</div> + <div>1 1 1 1 1 1 </div> + <div>1 1 1 1 1 1 </div> + <div>4444 4444 4444 4444</div> + <div>1 1 1 1 1</div> + <div>1 1 1 1 1</div> + <div>1 1 1 4444 4444</div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht new file mode 100644 index 000000000..e322b22c0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht @@ -0,0 +1,44 @@ +<!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 Multi-column Layout Test: a multi-column can act as containing block for elements with 'position: absolute'</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-containing-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a multi-column element can establish containing block for elements with 'position: absolute'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: white; + color: green; + font: 1.25em/1 Ahem; + position: relative; + width: 19em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + } + + span {color: red;} + + img#white-overlapping + { + left: 11em; + position: absolute; + top: 1em; + } + ]]></style> + </head> + <body> + + <div>4444 1 1 1 1 4444 1 1 1 4444 1 1 1 1 4444 1 1 1 1 1 1 4444 1<span>RED</span> 1<span>RED</span> 4444 1 1 4444 4444 1 1 4444 1 1 4444 <img id="white-overlapping" src="support/swatch-white.png" width="60" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht new file mode 100644 index 000000000..e1438a8f7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-column-count (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-column-count: 6; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht new file mode 100644 index 000000000..f764c7cf9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht @@ -0,0 +1,40 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 Ahem; + width: 21em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht new file mode 100644 index 000000000..6db119ecc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht @@ -0,0 +1,42 @@ +<!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 Multi-column Layout Test: -moz-column-count (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + + -moz-column-count: 4; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div>55555 1 1 22 1 22 1 1 333 1 333 1 333 55555 55555 1 1 22 1 22 1 1 22 1 22 1 22 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht new file mode 100644 index 000000000..3ee348e9d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht @@ -0,0 +1,56 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-count-computed-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + widows: 1; + orphans: 1; + + -moz-column-count: 3; + -moz-column-gap: 6em; + -moz-column-rule-color: blue; + -moz-column-rule-width: 1.5em; + -moz-column-rule-style: solid; +} +#pink {color: pink;} +#orange {color: orange;} +#purple {color: purple;} +#grey {color: grey;} +]]></style> +</head> + +<body> + +<div> + <span id="pink">xxxx</span> + <span id="orange">xxxx</span> + <span id="purple">xxxx</span> + <span id="grey">xxxx</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht new file mode 100644 index 000000000..482b537f4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht @@ -0,0 +1,56 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-count-computed-2-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + widows: 1; + orphans: 1; + + -moz-column-count: 3; + -moz-column-gap: 7em; + -moz-column-rule-color: red; + -moz-column-rule-width: 1.5em; + -moz-column-rule-style: solid; +} +#pink {color: pink;} +#orange {color: orange;} +#purple {color: purple;} +#grey {color: grey;} +]]></style> +</head> + +<body> + +<div> + <span id="pink">xxxx</span> + <span id="orange">xxxx</span> + <span id="purple">xxxx</span> + <span id="grey">xxxx</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht new file mode 100644 index 000000000..51668fbd4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht @@ -0,0 +1,25 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <meta name="flags" content="image" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + </head> + + <body> + + <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="70" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="70" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht new file mode 100644 index 000000000..a41fe6d8a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht @@ -0,0 +1,93 @@ +<!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 Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-count-computed-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st -moz-column-rule." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 13em; + + -moz-column-count: 3; + -moz-column-gap: 5em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1.5em; + } + + /* + (11) if (-moz-column-width = auto) and (-moz-column-count != auto) then + (12) N := -moz-column-count; + (13) W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + (14) exit; + + So, the used -moz-column-count in this test is 3. + + W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (13em - ((3 - 1) * 5em)) / 3); + W == max(0, (13em - (2 * 5em)) / 3); + W == max(0, (13em - (10em)) / 3); + W == max(0, (3em) / 3); + W == max(0, 1em); + W == 1em; + + So, the used -moz-column-width in this test is 1em. + */ + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + + /* + Since + " + Content in the normal flow that extends into + column gaps (e.g., long words or images) is + clipped in the middle of the column gap. + " + http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements + this causes the right-half (0.5em) of the 'K' glyph to + be overlapped by the right-half (0.75em) of the 1st blue -moz-column-rule. + Same thing should happen to the 'N' glyph of 'ORAN'. + + Because no inline content should be rendered into the + 3rd column box, this causes the 2nd column rule not + been rendered because + " + Column rules are only drawn between two -moz-columns that + both have content. + " + http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules + */ + ]]></style> + </head> + + <body> + + <div> + <span id="pink">PINK</span> + <span id="orange">ORAN</span> + <span id="purple">PURP</span> + <span id="gray">GRAY</span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht new file mode 100644 index 000000000..def8e5083 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht @@ -0,0 +1,25 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <meta name="flags" content="image" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + </head> + + <body> + + <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht new file mode 100644 index 000000000..9dfc5dcde --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht @@ -0,0 +1,52 @@ +<!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 Multi-column Layout Test: both '-moz-column-width' and '-moz-column-count' are 'auto'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-count-computed-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if '-moz-column-width' is 'auto' and if '-moz-column-count' is 'auto', then such element will not behave like a multi-column element and -moz-column-gap and -moz-column-rule declarations will be ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: auto; + -moz-column-gap: 7em; + -moz-column-rule-color: red; + -moz-column-rule-width: 1.5em; + -moz-column-rule-style: solid; + } + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + ]]></style> + </head> + + <body> + + <div> + <span id="pink">Pink</span> + <span id="orange">oran</span> + <span id="purple">PurP</span> + <span id="gray">gray</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht new file mode 100644 index 000000000..8648fff76 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht @@ -0,0 +1,97 @@ +<!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 Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-count-computed-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st -moz-column-rule." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 13em; + + -moz-column-gap: 5em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1.5em; + -moz-column-width: 1em; + } + + /* + (15) if (-moz-column-width != auto) and (-moz-column-count = auto) then + (16) N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap))); + (17) W := ((available-width + -moz-column-gap) / N) - -moz-column-gap; + (18) exit; + + N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap))); + N == max(1, floor((13em + 5em) / (1em + 5em))); + N == max(1, floor(18em / 6em)); + N == max(1, floor(3)); + N == 3; + + So, the used -moz-column-count in this test is 3. + + W := ((available-width + -moz-column-gap) / N) - -moz-column-gap; + W == ((13em + 5em) / 3) - 5em; + W == ((18em) / 3) - 5em; + W == (6em) - 5em; + W == 1em; + + So, the used -moz-column-width in this test is 1em. + */ + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + + /* + Since + " + Content in the normal flow that extends into + column gaps (e.g., long words or images) is + clipped in the middle of the column gap. + " + http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements + this causes the right-half (0.5em) of the 'K' glyph to + be overlapped by the right-half (0.75em) of the 1st blue -moz-column-rule. + Same thing should happen to the 'N' glyph of 'ORAN'. + + Because no inline content should be rendered into the + 3rd column box, this causes the 2nd column rule not + been rendered because + " + Column rules are only drawn between two -moz-columns that + both have content. + " + http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules + */ + ]]></style> + </head> + + <body> + + <div> + <span id="pink">PINK</span> + <span id="orange">ORAN</span> + <span id="purple">PURP</span> + <span id="gray">GRAY</span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht new file mode 100644 index 000000000..fdb8dab05 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht @@ -0,0 +1,58 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + height: 2em; + position: relative; + widows: 1; + orphans: 1; +} +#pink {color: pink;} +#orange {color: orange;} +#purple {color: purple;} +#grey {color: grey;} +span { + display: block; + position: absolute; +} +#orange { + left: 5em; + top: 0; +} +#purple { + left: 0; + top: 1em; +} +#grey { + left: 5em; + top: 1em; +} +]]></style> +</head> + +<body> + +<div> + <span id="purple">xxxx</span> + <span id="orange">xxxx</span> + <span id="grey">xxxx</span> + <span id="pink">xxxx</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht new file mode 100644 index 000000000..89dfe7045 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht @@ -0,0 +1,69 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + height: 2em; + position: relative; + widows: 1; + orphans: 1; + +} +span { + display: block; + position: absolute; +} +#pink { + color: pink; +} +#orange { + color: orange; + left: 0; + top: 1em; +} +#purple { + color: purple; + left: 9em; + top: 0; +} +#grey { + color: grey; + left: 9em; + top: 1em; +} +#blue { + left: 5.25em; + top: 0; + width: 1.5em; + height: 2em; + background: blue; +} +]]></style> +</head> + +<body> + +<div> + <span id="pink">xxxx</span> + <span id="orange">xxxx</span> + <span id="purple">xxxx</span> + <span id="grey">xxxx</span> + <span id="blue"></span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht new file mode 100644 index 000000000..1af66c104 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht @@ -0,0 +1,48 @@ +<!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>multicolumn | -moz-column-count</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-count-large-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: red; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + orphans: 1; + widows: 1; + + -moz-column-count: 1000; + -moz-column-gap: 0; +} +span { + color: black; +} +]]></style> +</head> + +<body> + +<div> + xx xx + xx xx + xx xx + <span>xx xx</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht new file mode 100644 index 000000000..275da208b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht @@ -0,0 +1,48 @@ +<!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>multicolumn | -moz-column-count</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-count-large-2-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + orphans: 1; + widows: 1; + + -moz-column-count: 1000; + -moz-column-gap: 0; +} +span { + color: blue; +} +]]></style> +</head> + +<body> + +<div> + xx xx + <span>xx xx</span> + xx xx + <span>xx xx</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht new file mode 100644 index 000000000..47b8b4445 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht @@ -0,0 +1,40 @@ +<!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>multicolumn | -moz-column-count</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + height: 1em; + position: relative; + orphans: 1; + widows: 1; +} +span { + color: blue; + background: blue; + width: 2em; + position: absolute; + left: 0; + top: 0; +} +]]></style> +</head> + +<body> + +<div> + <span>x</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht new file mode 100644 index 000000000..c6a604c34 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht @@ -0,0 +1,30 @@ +<!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>multicolumn | -moz-column-count</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 12em; + height: 1em; + orphans: 1; + widows: 1; + +} +]]></style> +</head> + +<body> + +<div>xx</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht new file mode 100644 index 000000000..9c546ebdc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: negative '-moz-column-count' value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified negative '-moz-column-count' value is invalid and ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-count: -1; + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht new file mode 100644 index 000000000..63c9633a7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: zero '-moz-column-count' value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified 0 '-moz-column-count' value is invalid and ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-count: 0; /* invalid; must be a greater-than-zero integer */ + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht new file mode 100644 index 000000000..f000b3034 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: non-integer '-moz-column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-count: 2.1; /* invalid; must be an integer */ + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht new file mode 100644 index 000000000..452010f45 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: non-integer '-moz-column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-count: 1.9; /* invalid; must be an integer */ + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht new file mode 100644 index 000000000..f38696ef9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: non-integer '-moz-column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-count: 4; + -moz-column-count: 2.0; /* invalid; must be an integer */ + -moz-column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht new file mode 100644 index 000000000..f1cc7ab1e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht @@ -0,0 +1,58 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0em; + color: lime; + margin: 1em 0em; + font: 1.25em/1 Ahem; + table-layout: fixed; + width: 18em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht new file mode 100644 index 000000000..e7c249cd0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: -moz-column-fill: balance (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" /> + <link rel="match" href="multicol-fill-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content is balanced into all -moz-columns thanks to '-moz-column-fill: balance'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div.test, table#reference + { + background-color: yellow; + color: lime; + margin: 1em 0em; + font: 1.25em/1 Ahem; + width: 18em; + } + + div.test + { + -moz-columns: 3; + -moz-column-fill: balance; + -moz-column-gap: 0em; + + /* + + N == 3; + + W == 6em; + + */ + + orphans: 1; + widows: 1; + } + + div.test > p {margin: 0em;} + + table + { + border-spacing: 0em; + table-layout: fixed; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p> + + <div class="test"> + <p>A</p> + <p>B</p> + <p>C</p> + </div> + + <div class="test">D<br />E<br />F</div> + + <table id="reference"> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht new file mode 100644 index 000000000..29dca1299 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht @@ -0,0 +1,53 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0em; + color: lime; + font: 1.25em/1 Ahem; + height: 5em; + margin: 1em 0em; + table-layout: fixed; + width: 20em; + } + + td + { + padding: 0em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p> + + <table> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + <table> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht new file mode 100644 index 000000000..57b83f95e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht @@ -0,0 +1,70 @@ +<!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 Multi-column Layout Test: -moz-column-fill: balance with set height (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" /> + <link rel="match" href="multicol-fill-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content is balanced into all -moz-columns of a multi-column element with a set height thanks to '-moz-column-fill: balance'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test, table#reference + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + height: 5em; + margin: 1em 0em; + width: 20em; + } + + div#test + { + -moz-columns: 2; + -moz-column-fill: balance; + -moz-column-gap: 0em; + + /* + + N == 2; + + W == 10em; + + */ + } + + table + { + border-spacing: 0em; + table-layout: fixed; + } + + td + { + padding: 0em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p> + + <div id="test">A<br />B<br />C<br />D<br />E<br />F</div> + + <table id="reference"> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht new file mode 100644 index 000000000..0d203cacb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht @@ -0,0 +1,45 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + float: left; + width: 10em; + margin-right: 1em; + } + ]]></style> + </head> + <body> + + <div>1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999 + 1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999</div> + + <div>1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht new file mode 100644 index 000000000..b6c6c70b3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht @@ -0,0 +1,39 @@ +<!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 Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" /> + <link rel="match" href="multicol-fill-auto-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + height: 10em; + orphans: 1; + widows: 1; + width: 32em; + + -moz-column-count: 3; + -moz-column-fill: auto; + -moz-column-gap: 1em; + } + ]]></style> + </head> + + <body> + + <div>1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht new file mode 100644 index 000000000..654b14aca --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht @@ -0,0 +1,49 @@ +<!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>multicolumn | -moz-column-fill-auto</title> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht new file mode 100644 index 000000000..d8834b151 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht @@ -0,0 +1,55 @@ +<!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>multicolumn | -moz-column-fill-auto</title> +<meta name="assert" content="This test checks that -moz-columns are not balanced when '-moz-column-fill: auto' is set"/> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-auto-002-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='col'> +<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div> +<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div> +o<br/>t<br/> +o<br/>t<br/> +</div> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht new file mode 100644 index 000000000..4cd6efdea --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 --> + <meta name="flags" content="ahem image" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div {font: 1.25em/1 Ahem;} + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht new file mode 100644 index 000000000..3f9f371ec --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht @@ -0,0 +1,65 @@ +<!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 Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" /> + <link rel="match" href="multicol-fill-auto-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks if inline content fills column boxes sequentially when '-moz-column-fill' is set to 'auto'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-image: url("support/red20x20.png"); + background-repeat: no-repeat; + background-position: 2em 4em; + border: green solid 1em; + color: green; + font: 1.25em/1 Ahem; + height: 6em; + width: 21em; + + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 1em; + -moz-column-rule: yellow solid 1em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div>1234567890 12 4567 90 123 56 890 123 56789 1 34567 90 12 4567 90 +123 56 890 123 56</div> + + <!-- + + Expected result: + + ************ ************ + |1234567890| |123 56 890| + |12 4567 90| |123 56 | + |123 56 890| | | + |123 56789 | | | + |1 34567 90| | | + |12 4567 90| | | + ************ ************ + + The digits are the green squares, the white squares + are the blank white spaces. The yellow vertical stripe + represent both the -moz-column-gap and the -moz-column-rule. + The "3" glyph at line 5 of 1st column box should be + overlapping the red square. + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht new file mode 100644 index 000000000..89ecf5374 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht @@ -0,0 +1,94 @@ +<!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>multicol | -moz-column-span: all | -moz-column-fill: auto</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-auto-block-children-ref.xht"/> +<meta name="flags" content=""/> +<style type="text/css"><![CDATA[ +html { + background: white; +} +body { + background: blue; + width: 1200px; + height: 492px; + -moz-column-count: 3; + -moz-column-gap: 2em; + -moz-column-fill: auto; +} +h1 { + -moz-column-span: all; + font-size: 2em; + height: 70px; +} +dl { + font-size: 70%; + color: blue; + padding: 5px 10px 3px; + margin: 0 0 15px; + border: 2px solid blue; + height: 72px; +} +dt { + font-weight: bold; + font-style: normal; + width: 47%; + height: 100%; + float: left; +} +dd { + line-height: 120%; + padding: 0; + margin: 0 0 5px 47%; + width: 50%; +} +]]></style> +</head> + +<body> +<h1>you should not see the word fail</h1> + +<dl> + <dt>block1</dt> + <dd>block1 block1</dd> + <dd>block1 block1</dd> + <dd>block1 block1 block1</dd> + <dd>damer block1 block1</dd> +</dl> + +<dl> + <dt>block2</dt> + <dd>block2 block2</dd> + <dd>block2 block2</dd> + <dd>block2 block2 block2</dd> + <dd>damer block2 block2</dd> +</dl> + +<dl> + <dt>block3</dt> + <dd>block3 block3</dd> + <dd>block3 block3</dd> + <dd>block3 block3 block3</dd> + <dd>damer block3 block3</dd> +</dl> + +<dl> + <dt>block4</dt> + <dd>block4 block4</dd> + <dd>block4 block4</dd> + <dd>block4 block4 block4</dd> + <dd>damer block4 block4</dd> +</dl> + +<dl> + <dt>fail</dt> + <dd>fail fail</dd> + <dd>fail fail</dd> + <dd>fail fail fail</dd> + <dd>fail fail fail</dd> +</dl> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht new file mode 100644 index 000000000..f57fa4359 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht @@ -0,0 +1,79 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div + { + background-color: blue; + height: 200px; + width: 680px; + } + + h1 + { + color: white; + font-size: 2em; + line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */ + margin-top: 8px; /* The margin-top of body and h1 will collapse into an 8px gap */ + margin-bottom: 21px; + padding-top: 21px; + } + + span#pass + { + color: blue; + font-size: 1.5em; + font-weight: bolder; + left: 698px; + + /* + + Expected result: + + 8px 688px + v v + ************************************************ + * * + * <h1>Test passes if the word "PASS!" is<br />* 1st line box + * on the right ↘</h1> * 2nd line box + * * + ************************************************ + * * + * <h2>nbsp;<h2> <h2>nbsp;<h2> <h2>nbsp;<h2> * <h2>PASS!</h2> + * * + ************************************************ + ^ ^ + 228px 458px + + */ + + line-height: 1; + position: absolute; + top: 130px; + + /* + 8px : margin-top of body element + 21px : margin-top of h1 element which must not collapse with body's margin-top + 80px : content height: 2 line boxes required to render the "Test passes if ..." sentence + 21px : margin-bottom of h1 element + ==================================== + 130px : top position of span#pass in document box + */ + } + ]]></style> + </head> + <body> + + <div> + <h1>Test passes if "PASS!" is<br />on the right ↘</h1> + <span id="pass">PASS!</span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht new file mode 100644 index 000000000..8c5fadbad --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht @@ -0,0 +1,99 @@ +<!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 Multi-column Layout Test: '-moz-column-fill: auto' and '-moz-column-span: all' (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" /> + + <meta name="flags" content="" /> + <meta name="assert" content="This test checks that if '-moz-column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a '-moz-column-span: all' element will occupy more space in a multi-column element than a '-moz-column-span: none' element, therefore reducing available space for content in column boxes." /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: blue; + height: 200px; + margin: 8px; + width: 680px; + + -moz-column-count: 3; + -moz-column-fill: auto; + -moz-column-gap: 10px; + + /* + So, each column box should be + [680px minus (2 mult 10px)] divided by 3 == 220px wide + */ + } + + h1 + { + color: white; + -moz-column-span: all; + font-size: 2em; + line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */ + margin: 21px 0em; + /* + 21px : margin-top of h1 element which must not collapse with body's margin-top + 80px : content height: 2 line boxes required to render the "Test passes if ..." sentence + 21px : margin-bottom of h1 element + ==================================== + 122px : margin box height of h1 element + */ + } + + h2 + { + color: blue; + font-size: 1.5em; + line-height: 1; + margin: 0 0 2.25em; + /* + 0px : margin-top of h2 element + 24px : content height: 1 line box required to render all the nbsp; and PASS! word + 54px : margin-bottom of h2 element + ==================================== + 78px : margin box height of h2 element + */ + } + ]]></style> + </head> + + <body> + + <h1>Test passes if "PASS!" is<br />on the right ↘</h1> + + <h2> </h2> + + <h2> </h2> + + <h2> </h2> + + <h2>PASS!</h2> + + <!-- + + Expected result: + + 8px 688px + v v + ************************************************ + * * + * <h1>Test passes if the word "PASS!" is<br />* 1st line box + * on the right ↘</h1> * 2nd line box + * * + ************************************************ + * * + * <h2>nbsp;<h2> <h2>nbsp;<h2> <h2>nbsp;<h2> * <h2>PASS!</h2> + * * + ************************************************ + ^ ^ + 228px 458px + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht new file mode 100644 index 000000000..5b89de611 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht @@ -0,0 +1,28 @@ +<!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>multicol | -moz-column-span: all | -moz-column-fill: auto</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +html { + background: white; +} +body { + background: blue; + width: 1200px; + height: 492px; +} +h1 { + font-size: 2em; + margin: 0; + padding-top: 0.66em; +} +]]></style> +</head> + +<body> +<h1>you should not see the word fail</h1> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht new file mode 100644 index 000000000..284865c2e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht @@ -0,0 +1,55 @@ +<!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>multicolumn | -moz-column-fill-auto</title> +<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: auto' is set"/> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='col'> +<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div> +<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div> +o<br/>t<br/> +o<br/>t<br/> +</div> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht new file mode 100644 index 000000000..59375d6da --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht @@ -0,0 +1,49 @@ +<!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>multicolumn | -moz-column-fill</title> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + -moz-column-count: 2; + -moz-column-fill: balance; + -moz-column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='ref'> +oo<br/>tt +</div> + +<div class='ref'> +oo<br/>tt +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht new file mode 100644 index 000000000..d80e52e8c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht @@ -0,0 +1,54 @@ +<!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>multicolumn | -moz-column-fill</title> +<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: balance' is set"/> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-balance-001-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + -moz-column-count: 2; + -moz-column-fill: balance; + -moz-column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='col'> +<div class='red' style="top: 0; left: 0; height: 2em; width: 2em;"></div> +o<br/>t<br/> +o<br/>t<br/> +</div> + +<div class='ref'> +oo<br/>tt +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht new file mode 100644 index 000000000..97985e50b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht @@ -0,0 +1,21 @@ +<!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>multicolumn | -moz-column-gap</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +div { + background: yellow; + height: 5em; + width: 30em; +} +]]></style> +</head> + +<body> + +<div></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht new file mode 100644 index 000000000..96211f9b2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht @@ -0,0 +1,34 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + margin: 1em 0; + width: 30em; + } + + span {color: yellow;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div>1234567890<span>1234567890</span>1234567890</div> + + <div>1234567890<span>1234567890</span>1234567890</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht new file mode 100644 index 000000000..c542d1b21 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: -moz-column-gap (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column gap appears between two -moz-columns." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + margin: 1em 0; + width: 30em; + } + + div#test + { + background-color: yellow; + orphans: 1; + widows: 1; + + -moz-column-width: 10em; + -moz-column-gap: 10em; + } + + span {color: yellow;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test">1234567890<br />1234567890</div> + + <div id="reference">1234567890<span>1234567890</span>1234567890</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht new file mode 100644 index 000000000..f8b6ee6a4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht @@ -0,0 +1,22 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {margin: 1.25em;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + <p>Test passes if the 2 stripes are <strong>identical</strong>.</p> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht new file mode 100644 index 000000000..6a20766d9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht @@ -0,0 +1,44 @@ +<!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 Multi-column Layout Test: '-moz-column-gap: normal'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-001-ref.xht" /> + <meta name="flags" content="ahem may" /> + <meta name="assert" content="This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + margin: 1em; + orphans: 1; + widows: 1; + width: 3em; + } + + div.multicol + { + -moz-column-gap: normal; + -moz-column-width: 1em; + } + + span {padding-right: 1em;} + ]]></style> + </head> + <body> + <p>Test passes if the 2 stripes are <strong>identical</strong>.</p> + + <div class="multicol">x<br />x</div> + <div><span>x</span>x</div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht new file mode 100644 index 000000000..afecc0cda --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + + td#last-cell {padding-right: 0;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td id="last-cell"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht new file mode 100644 index 000000000..368658291 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht @@ -0,0 +1,46 @@ +<!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 Multi-column Layout Test: -moz-column-gap (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht new file mode 100644 index 000000000..0088196ff --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht @@ -0,0 +1,46 @@ +<!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 Multi-column Layout Test: '-moz-column-gap: normal'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem may" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: normal; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht new file mode 100644 index 000000000..3dd69014d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht @@ -0,0 +1,73 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + background-color: gray; + font: 1.25em/1 Ahem; + height: 4em; + position: relative; + width: 14.5em; + } + + p, div > div + { + background-color: blue; + height: 1em; + left: 0; + margin: 0; + position: absolute; + top: 0; + width: 4em; + } + + div > div + { + background-color: black; + height: 4em; + } + + p {left: 7.5em;} + + p + p + { + left: 8.5em; + top: 1em; + } + + p + p + p + { + left: 9.5em; + top: 2em; + } + + p + p + p + p + { + left: 10.5em; + top: 3em; + } + ]]></style> + </head> + <body> + + <div> + <div></div> + <p></p> + <p></p> + <p></p> + <p></p> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht new file mode 100644 index 000000000..f4f7fc2a3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: '-moz-column-gap' with increasing values</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-fraction-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: gray; + font: 1.25em/1 Ahem; + width: 14.5em; + orphans: 1; + widows: 1; + + -moz-column-count: 2; + -moz-column-gap: 0.5em; + } + + #two {-moz-column-gap: 2.5em;} + + #three {-moz-column-gap: 4.5em;} + + #four {-moz-column-gap: 6.5em;} + + span {color: blue;} + ]]></style> + </head> + <body> + + <div id="one"> + blac + <span>blue</span> + </div> + + <div id="two"> + blac + <span>blue</span> + </div> + + <div id="three"> + blac + <span>blue</span> + </div> + + <div id="four"> + blac + <span>blue</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht new file mode 100644 index 000000000..162d875e7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht @@ -0,0 +1,21 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" +alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht new file mode 100644 index 000000000..1dddf928b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: '-moz-column-gap' with large value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" /> + <link rel="match" href="multicol-gap-large-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when '-moz-column-gap' is large and when used '-moz-column-width' is narrow, then content extends into -moz-column-gap until its middle and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: 4em; + + /* + N == 4; + W == 0em; + */ + + /* + In this test, the content of first 3 column + boxes extend into middle of -moz-column-gap and + content of the 4th column box extend outside the + right edge of multi-column. The gray border-right of + multi-column elemen overlaps partially the 3rd + -moz-column-gap. + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht new file mode 100644 index 000000000..ce17abb71 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht @@ -0,0 +1,24 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {font: 1.25em/1 serif;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht new file mode 100644 index 000000000..fb5a155d2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht @@ -0,0 +1,51 @@ +<!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 Multi-column Layout Test: '-moz-column-gap' with large value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" /> + <link rel="match" href="multicol-gap-large-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 2; + -moz-column-gap: 4em; + + /* + N == 2; + W == 3.5em; + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht new file mode 100644 index 000000000..ed5d6e325 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: -moz-column-gap with negative value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-gap: -1em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht new file mode 100644 index 000000000..d55aa7aa9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht @@ -0,0 +1,28 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + img + { + left: 135px; + /* 6em + (2em/2) - (10px/2) == 135px */ + position: relative; + vertical-align: top; + } + + img + img {left: 285px;} + /* 6em + 2em + 6em + (2em/2) - (10px/2) - 10px == 285px */ + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 blue vertical stripes of equal height.</p> + + <div><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht new file mode 100644 index 000000000..3be58cfb4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht @@ -0,0 +1,42 @@ +<!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 Multi-column Layout Test: -moz-column-count and height</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" /> + <link rel="match" href="multicol-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that length of column rules is equal to the length of the -moz-columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: white; + font: 1.25em/1 Ahem; + height: 8em; + width: 14em; + + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 2em; + -moz-column-rule: blue solid 10px; + } + ]]></style> + </head> + <body> + <p>Test passes if there are 2 blue vertical stripes of equal height.</p> + + <div> + 1st col 1st col 1st col + 1st col 2nd col 2nd col + 2nd col 2nd col 3rd col + 3rd col 3rd col 3rd col + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht new file mode 100644 index 000000000..27a87c3fe --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht @@ -0,0 +1,55 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 1.25em/1 serif; + } + + div#top + { + height: 5em; + width: 22em; + } + + div#bottom + { + height: 3em; + width: 14em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div id="top"><img src="support/black20x20.png" width="60" height="100" alt="Image download support must be enabled" /></div> + + <div id="bottom"><img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /></div> + + <!-- + + Expected results: + + 0em 14em 22em + v v v +0 ********************************************* + * bla | * + * bla | * + * bla | * + * bla | * +5 * bla | * +6 * orn |**************** +7 * orn | +8 * orn | + ***************************** + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht new file mode 100644 index 000000000..1331724f8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht @@ -0,0 +1,102 @@ +<!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 Multi-column Layout Test: multi-column element with child block (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" /> + <link rel="match" href="multicol-height-block-child-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 20px/1 Ahem; + height: 8em; + width: 14em; + + -moz-column-count: 2; + -moz-column-gap: 2em; + + /* + + N == 2; + + W == 6em; + + H == 8em; + + */ + } + + div#outer + { + color: black; + -moz-column-fill: auto; + } + + div#inner + { + color: orange; + -moz-column-fill: balance; + } + ]]></style> + </head> + <body> + + <div id="outer"> + bla bla bla bla bla + + <div id="inner">orn orn orn zzz zzz zzz</div> + + </div> + + <!-- + Both column boxes of div#inner start in the 1st + column box of div#outer multi-column element. + The first 3 lines boxes of 1st + column box of div#inner will be rendered inside the + 1st column box of div#outer but not its 2nd. + Because 1st column box of div#outer is + 6em wide while the div#inner multi-column element + is 14em wide, this makes the first 3 line boxes + (with the 'z' trios) of 2nd column box of div#inner + clipped. + + Then, at this point, the div#inner multi-column + element should be fragmented in order to continue to + render the 5 empty line boxes it has into the + 2nd column box of div#outer. Since those 5 line + boxes are empty, we only see the extension it + creates horizontally, which is + 14em - 6em == 8em horizontally and + 5 lines boxes == 5em tall + + + Expected results: + + 0em 14em 22em + v v v +0 ********************************************* + * bla | * + * bla | * + * bla | * + * bla | * +5 * bla | * +6 * orn |**************** +7 * orn | +8 * orn | + ***************************** + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht new file mode 100644 index 000000000..7da442b56 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht @@ -0,0 +1,35 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 serif; + margin: 0em 1em; + padding: 0em 1em 1em; + width: 30em; + } + + img + { + padding-right: 1em; + vertical-align: top; + } + + img.-moz-column-gap {margin-right: 2em;} + + img#last {padding-right: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" +width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht new file mode 100644 index 000000000..97a032e37 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht @@ -0,0 +1,81 @@ +<!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 Multi-column Layout Test: multicolumn and inheritance</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + width: 34em; + } + + body > div + { + -moz-column-count: 3; + -moz-column-gap: 1em; + + /* + N == 3; + + 34em : available width + - 2em : horizontal margin of external div + - 2em : 2 column gaps + ========== + 30em + + So, W == 10em; + + 30em + - 6em : 3 mult by 2em: horizontal margin of 3 internal divs + ========== + 24em : 8em for each of the 3 column boxes without their horizontal margins + + */ + } + + div + { + background-color: yellow; + color: black; + margin: 0 1em 1em; + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht new file mode 100644 index 000000000..0bbb417d0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 1.25em/1 serif; + margin: 1em; + padding: 0em 1em 1em; + width: 30em; + } + + img {vertical-align: top;} + + img.-moz-column-gap + { + margin-left: -2em; + margin-right: 3em; + vertical-align: bottom; + } + + img#last + { + margin-left: -2em; + vertical-align: bottom; + } + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht new file mode 100644 index 000000000..5fad8dc0b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht @@ -0,0 +1,88 @@ +<!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 Multi-column Layout Test: '-moz-column-count' and inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="multicol-inherit-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + background-color: blue; + -moz-column-count: 3; + -moz-column-gap: 1em; + font: 1.25em/1 Ahem; + width: 32em; + + /* + N == 3; + + 32em + - 2em : 2 column gaps + ========== + 30em : available width of the 3 inner multi-column elements + + So, W == 10em; + + 30em + - 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements + - 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements + ========== + 18em : 6em for each of the 3 column boxes without their own horizontal margins + So, each column boxes of inner multi-column elements is 2em wide. + */ + } + + div + { + color: black; + margin: 1em; + orphans: 1; + widows: 1; + } + + div > div + { + background-color: yellow; + -moz-column-count: inherit; + -moz-column-gap: 1em; + } + + div > div:first-child {margin-top: 0;} + ]]></style> + </head> + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht new file mode 100644 index 000000000..5d3130fa5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht @@ -0,0 +1,69 @@ +<!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>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-inherit-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + width: 75em; +} +body>div { + height: 2em; + -moz-column-width: 8em; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + orphans: 1; + widows: 1; +} +div>div { + margin: 0 1em 1em; +} +div+div { + color: blue; +} +div+div+div { + color: pink; +} +]]></style> +</head> + +<body> + +<div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht new file mode 100644 index 000000000..732a8d11b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht @@ -0,0 +1,61 @@ +<!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>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-inherit-4-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + width: 74em; + -moz-column-rule: 1em solid blue; +} +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: white; + background: white; + margin: 1em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 7em; +} +]]></style> +</head> + +<body> + +<div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht new file mode 100644 index 000000000..8016fb7d5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht @@ -0,0 +1,66 @@ +<!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>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + width: 75em; +} +body>div { + color: black; + background: yellow; + height: 2em; + position: relative; +} +div div { + position: absolute; + top: 0; + left: 0; +} +#two {left: 19em;} +#three {left: 38em;} +div div div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + width: 2em; + height: 2em; + color: black; + position: absolute; + left: 1em; +} +.a2 {left: 4em;} +.a3 {left: 10.5em;} +.a4 {left: 13.5em;} +#two div {color: blue;} +#three div {color: pink;} +]]></style> +</head> + +<body> + +<div> + <div> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> + <div id="two"> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> + <div id="three"> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht new file mode 100644 index 000000000..2972d7132 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht @@ -0,0 +1,37 @@ +<!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>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body>div { + margin: 1em; + background: white; + width: 74em; + height: 5em; + position: relative; +} +div div { + background: blue; + height: 5em; + width: 1em; + position: absolute; + top: 0; + left: 23em; +} +div>div+div { + left: 50em; +} +]]></style> +</head> + +<body> + +<div> + <div></div> + <div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht new file mode 100644 index 000000000..351696de5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht @@ -0,0 +1,22 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + height: 100px; + width: 200px; + } + ]]></style> + </head> + <body> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht new file mode 100644 index 000000000..70cb50560 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht @@ -0,0 +1,58 @@ +<!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 Multi-column Layout Test: multi-column and list-item</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-list-item-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that an unordered list of list items can be set to display its list-items in column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + ul + { + background-color: black; + font: 1.25em/1 Ahem; + margin: 0em; + padding: 0em; + width: 10em; + + -moz-column-gap: 0em; + -moz-column-width: 5em; + } + + li, span {font-size: 1em;} + + li + { + margin-left: 1em; + padding: 0em; + } + + span {display: block;} + ]]></style> + </head> + + <body> + + <ul> + <li>1sli</li> + <li>2nli</li> + <li>3rli</li> + <li>4tli</li> + <li>5tli</li> + <li><span>6tli</span></li> + <li>7tli</li> + <li>8tli</li> + <li>9tli</li> + <li>10tl</li> + </ul> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht new file mode 100644 index 000000000..cc51c0e6d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht @@ -0,0 +1,76 @@ +<!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 Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with -moz-column-fill: auto) does not collapse with its parent." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test-multi-column-red + { + background-color: red; + color: white; + font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */ + height: 4em; + margin-top: 0em; + width: 4em; + + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 0em; + } + + div#first-child {margin-top: 2em;} + + div#reference-overlapping-green + { + background-color: green; + bottom: 200px; + height: 100px; + position: relative; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test-multi-column-red"> + <div id="first-child">ab cd</div> + ef gh ij kl + </div> + + <div id="reference-overlapping-green"></div> + + <!-- + + Expected result (before the overlapping): + + ********************* + | margin- | ef | + | top red | | + | back | gh | + | ground | | + ********************* + | ab | ij | + | | | + | cd | kl | + | | | + ********************* + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht new file mode 100644 index 000000000..bd5a5bfc0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht @@ -0,0 +1,80 @@ +<!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 Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with -moz-column-fill: balance) does not collapse with its parent." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test-multi-column-red + { + background-color: red; + color: white; + font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */ + height: 4em; + margin-top: 0em; + width: 4em; + + -moz-column-count: 2; + -moz-column-fill: balance; + -moz-column-gap: 0em; + } + + span + { + display: inline-block; + margin-top: 2em; + } + + div#reference-overlapping-green + { + background-color: green; + bottom: 200px; + height: 100px; + position: relative; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test-multi-column-red"> + <span>ab cd</span> + ef gh ij kl + </div> + + <div id="reference-overlapping-green"></div> + + <!-- + + Expected result (before the overlapping): + + ********************* + | margin- | ef | + | top red | | + | back | gh | + | ground | | + ********************* + | ab | ij | + | | | + | cd | kl | + | | | + ********************* + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht new file mode 100644 index 000000000..db9a49db4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht @@ -0,0 +1,45 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: blue; + border: gray solid 1em; + font-size: 1.25em; + height: 8em; + position: relative; + width: 10em; + } + + div > div + { + background-color: yellow; + height: 1em; + left: 0; + position: absolute; + top: 3em; + width: 5em; + } + + #second-stripe {top: 5em;} + + #third-stripe {top: 7em;} + ]]></style> + + </head> + + <body> + + <div> + <div></div> + <div id="second-stripe"></div> + <div id="third-stripe"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht new file mode 100644 index 000000000..9f7fd67b6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht @@ -0,0 +1,54 @@ +<!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 Multi-column Layout Test: multi-column and margin collapsing of block children (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-margin-child-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-bottom of a block child in a multi-column element will collapse with the margin-top of a following block child of that same multi-colum element if those children are vertically adjacent and if no line boxes, no clearance, no padding and no border separate them." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + width: 10em; + + -moz-column-count: 2; + -moz-column-fill: balance; + -moz-column-gap: 0em; + } + + h4 + { + font: inherit; + margin: 1em 0; + } + ]]></style> + + </head> + + <body> + + <div> + 1scol 1scol + 1scol + <h4> h4h41 </h4> + <h4> h4h42 </h4> + 2ncol 2ncol + 2ncol 2ncol + 2ncol 2ncol + 2ncol 2ncol + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht new file mode 100644 index 000000000..e955c486f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht @@ -0,0 +1,106 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 7em; + } + + div#blue1 + { + background-color: blue; + left: 12em; + } + + div#blue2 + { + background-color: blue; + left: 15em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 18em; + } + + div#pink1 + { + background-color: pink; + left: 23em; + } + + div#pink2 + { + background-color: pink; + left: 26em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 29em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht new file mode 100644 index 000000000..662314004 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht @@ -0,0 +1,86 @@ +<!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 Multi-column Layout Test: multicolumn and margin-bottom collapsing</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-002-ref.xht" /> + <meta name="assert" content="This test checks that a block container element's margin-bottom can collapse with its multi-column parent's margin-bottom if no line boxes, no clearance, no padding and no border separate them." /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + body > div + { + font: 1.25em/1 Ahem; + width: 32em; + + -moz-column-gap: 1em; + -moz-column-width: 8em; + } + + /* + + N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap))); + N == max(1, floor((32em + 1em) / (8em + 1em))); + N == max(1, floor(33em / 9em)); + N == max(1, floor(3.6)); + N == max(1, 3); + N == 3; + + W == ((available-width + -moz-column-gap) / N) - -moz-column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + */ + + div + { + background: yellow; + color: black; + orphans: 1; + widows: 1; + } + + div > div {margin: 0 1em 1em;} + + div + div {color: blue;} + + div + div + div {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht new file mode 100644 index 000000000..4ecaf566a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht @@ -0,0 +1,35 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 serif; + margin: 1em; + padding: 0em 1em 1em; + width: 39em; + } + + img + { + padding-right: 2em; + vertical-align: top; + } + + img.-moz-column-gap {margin-right: 2em;} + + img#last {padding-right: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" +width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht new file mode 100644 index 000000000..28b967564 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht @@ -0,0 +1,112 @@ +<!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 Multi-column Layout Test: nested multi-columns and constrained dimensions</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-nested-005-ref.xht" /> + <!-- + The original filename of this test was + multicol-inherit-005.xht + This test also serves as a conversion of + multicol-nested-001.xht + --> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how the height of column boxes conditions the height of nested column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + -moz-column-gap: 1em; + font: 1.25em/1 Ahem; + width: 41em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 line + box. There are 8 duos; therefore, the first 2 inner + column boxes should use 3 line boxes and the 3rd inner + column box should be using 2 line boxes. + + So, the height of the 2 blue column rules should be 60px. + + */ + + div + { + background-color: yellow; + color: black; + font-size: 1em; + margin: 1em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + } + + div > div:first-child {margin-top: 0;} + ]]></style> + </head> + + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht new file mode 100644 index 000000000..8d86b42a6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht @@ -0,0 +1,45 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + font: 1.25em/1 serif; + position: relative; + } + + div#rel-pos-wrapper > div + { + background-color: blue; + font-size: 1em; + height: 3em; + position: absolute; + width: 1em; + } + + div#first-column-rule + { + left: 14em; + top: auto; + } + + div#second-column-rule + { + left: 29em; + top: auto; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + <div id="first-column-rule"></div> + <div id="second-column-rule"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht new file mode 100644 index 000000000..5dba8d8cb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht @@ -0,0 +1,128 @@ +<!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> + <!-- + This test's original filename was multicol-inherit-004.xht + and it has been modified and is now + multicol-nested-column-rule-001.xht + --> + <title>CSS Multi-column Layout Test: nested multi-columns and -moz-column-rule position</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-nested-column-rule-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how the height of column boxes conditions the height of column rule." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + -moz-column-rule: blue solid 1em; + font: 1.25em/1 Ahem; + width: 42em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (42em - ((3 - 1) * 3em)) / 3); + W == max(0, (42em - (2 * 3em)) / 3); + W == max(0, (42em - 6em) / 3); + W == max(0, 36em / 3); + W == max(0, 12em); + W == 12em; + + So, the first -moz-column-rule should be at: + + 1.0em : margin-left of outer div + 12.0em : width of 1st column box + 1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 1st -moz-column-rule + ========= + 14.0em + + The 2nd -moz-column-rule should be at: + + 1.0em : margin-left of outer div + 12.0em : width of 1st column box + 3.0em : first -moz-column-gap + 12.0em : width of 2nd column box + 1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 2nd -moz-column-rule + ========= + 29.0em + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 12em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 10em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (10em - ((3 - 1) * 3em)) / 3); + W == max(0, (10em - (2 * 3em)) / 3); + W == max(0, (10em - 6em) / 3); + W == max(0, 4em / 3); + W == max(0, 1.33333em); + W == 1.33333em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 line + box. There are 8 duos; therefore, the first 2 inner + column boxes should use 3 line boxes and the 3rd inner + column box should be using 2 line boxes. + + So, the height of the 2 blue column rules should be 60px. + + */ + + div + { + background-color: white; + color: white; + font-size: 1em; + margin: 0em 1em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 3em; + } + ]]></style> + </head> + + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht new file mode 100644 index 000000000..043b6c63c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht @@ -0,0 +1,107 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 3em; + margin: 1em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 7em; + } + + div#pink1 + { + background-color: pink; + left: 12em; + } + + div#pink2 + { + background-color: pink; + left: 15em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 18em; + } + + div#blue1 + { + background-color: blue; + left: 23em; + } + + div#blue2 + { + background-color: blue; + left: 26em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 29em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht new file mode 100644 index 000000000..9ebef718c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht @@ -0,0 +1,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 Multi-column Layout Test: multicolumn and nested margins</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-nested-margin-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that non-zero vertical margins can be applied on a multi-column element while the vertical margins of its own block containers can be set to zero." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + body > div + { + font: 1.25em/1 Ahem; + width: 32em; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + /* + + N == 3; + + W == ((available-width + -moz-column-gap) / N) - -moz-column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + */ + + div + { + background: yellow; + color: black; + margin: 1em; + orphans: 1; + widows: 1; + } + + div > div {margin: 0em 1em;} + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht new file mode 100644 index 000000000..b814e6755 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht @@ -0,0 +1,59 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div + { + background-color: yellow; + font: 1.25em/1 serif; + height: 5em; + position: relative; + width: 41em; + } + + div > div + { + background-color: blue; + font: inherit; + height: 3em; + position: absolute; + top: 0em; + width: 2em + } + + div#first-blue + { + background-color: blue; + left: 29em; + } + + div#second-blue + { + background-color: blue; + left: 33em; + } + + div#third-blue + { + background-color: blue; + height: 2em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div> + <div id="first-blue"></div> + <div id="second-blue"></div> + <div id="third-blue"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht new file mode 100644 index 000000000..701bc0391 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht @@ -0,0 +1,119 @@ +<!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 Multi-column Layout Test: nested multi-moz-columns and vertical margin (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when an inner nested multi-column element is preceded by a soft column break (caused by an unforced column-break), then the used margin-top of such inner nested multi-column element is '0'." /> + + <!-- + More info: + Re: [css3-multicol] vertical margins rendering in nested multi-columns + http://lists.w3.org/Archives/Public/www-style/2013Aug/0146.html + --> + +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 0;} + + body > div + { + background-color: yellow; + font: 1.25em/1 Ahem; + width: 41em; + /* + This test requires a viewport width of 820px + */ + } + + div + { + color: yellow; + font: inherit; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + div div {margin: 0em 1em;} + + div div:last-child + { + color: blue; + margin: 1em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 + line box. There are 15 'a' duos and 15 'm' duos; therefore, + the 3 inner column boxes of each first 2 inner + multi-column elements should use 5 line boxes. + + The 1st column box of last inner multi-column + (the blue one with 'x' duos) should have 'x1', + 'x2' and 'x3' duos filling 3 line boxes. + + The 2nd column box of last inner multi-column should + have 'x4', 'x5' and 'x6' duos filling 3 line boxes. + + The 3rd column box of the last inner multi-column should + have 'x7' and 'x8' duos filling 2 line boxes. + */ + + ]]></style> + </head> + <body> + + <div> + + <div> a1 a2 a3 a4 a5 a6 a7 a8 a9 a0 a1 a2 a3 a4 a5 </div> + + <div> m1 m2 m3 m4 m5 m6 m7 m8 m9 m0 m1 m2 m3 m4 m5 </div> + + <div> x1 x2 x3 x4 x5 x6 x7 x8 </div> + + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht new file mode 100644 index 000000000..719605105 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht @@ -0,0 +1,108 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + margin: 1em; + position: relative; + width: 41em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + top: 1em; + } + + div#black2 + { + background-color: black; + left: 5em; + top: 1em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 9em; + top: 1em; + } + + div#pink1 + { + background-color: pink; + left: 15em; + } + + div#pink2 + { + background-color: pink; + left: 19em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 23em; + } + + div#blue1 + { + background-color: blue; + left: 29em; + } + + div#blue2 + { + background-color: blue; + left: 33em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht new file mode 100644 index 000000000..93ee46f1f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht @@ -0,0 +1,102 @@ +<!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 Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a top margin set on the first child element of a nested multicol element will not collapse with the margins of the multicol element." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background-color: yellow; + color: black; + margin: 1em 1em 0; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + /* + + N == 3; + + 43em - 2em (horizontal margins) == available-width + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht new file mode 100644 index 000000000..937c60382 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht @@ -0,0 +1,137 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + margin: 1em; + position: relative; + width: 41em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + top: 1em; + } + + div#black2 + { + background-color: black; + left: 5em; + top: 1em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 9em; + top: 1em; + } + + div#pink1 + { + background-color: pink; + left: 15em; + } + + div#blue-bottom1 + { + background-color: blue; + height: 1em; + left: 15em; + top: 3em; + } + + div#pink2 + { + background-color: pink; + left: 19em; + } + + div#blue-bottom2 + { + background-color: blue; + height: 1em; + left: 19em; + top: 3em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 23em; + } + + div#blue-bottom3 + { + background-color: blue; + height: 1em; + left: 23em; + top: 3em; + } + + div#blue1 + { + background-color: blue; + height: 2em; + left: 29em; + } + + div#blue2 + { + background-color: blue; + height: 2em; + left: 33em; + } + + div#blue3 + { + background-color: blue; + height: 1em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="blue-bottom1"></div> + <div id="pink2"></div> + <div id="blue-bottom2"></div> + <div id="pink3"></div> + <div id="blue-bottom3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht new file mode 100644 index 000000000..ee6b20c58 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht @@ -0,0 +1,106 @@ +<!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 Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background: yellow; + color: black; + margin: 1em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + div div {margin: 0 1em;} + + div div:first-child {margin: 1em 1em 0;} + + /* + + N == 3; + + 43em - 2em (horizontal margins) == available-width + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht new file mode 100644 index 000000000..96c3f07c6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht @@ -0,0 +1,104 @@ +<!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 Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background: yellow; + color: black; + margin: 1em 1em 0em; + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + } + + div div {margin: 0 1em;} + + div div:first-child {margin: 1em 1em 0;} + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht new file mode 100644 index 000000000..079188169 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-right: lime solid 1em; + border-spacing: 0px; + color: lime; + font: 1.25em/1 Ahem; + margin: 1em 0; + table-layout: fixed; + width: 21em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht new file mode 100644 index 000000000..03fbef2f9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht @@ -0,0 +1,55 @@ +<!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 Multi-column Layout Test: multi-column with set height causing overflow outside (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-overflow-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column gap appears between two -moz-columns." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div, table + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + margin: 1em 0; + } + + div + { + -moz-columns: 2; + -moz-column-fill: balance; + -moz-column-gap: 0px; + height: 2em; + width: 20em; + } + + table + { + border-right: lime solid 1em; + border-spacing: 0px; + table-layout: fixed; + width: 21em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test">A<br />B<br />C<br />D<br />E<br />F</div> + + <table id="reference"><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht new file mode 100644 index 000000000..d3a6c6e03 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht @@ -0,0 +1,209 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 2em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 2em; + position: absolute; + top: 0; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + left: 7em; + } + + div#black4 + { + background-color: black; + height: 1em; + left: 12em; + } + + div#black5 + { + background-color: black; + height: 1em; + left: 15em; + } + + div#blue1 + { + background-color: blue; + left: 23em; + } + + div#blue2 + { + background-color: blue; + left: 26em; + } + + div#blue3 + { + background-color: blue; + left: 29em; + } + + div#blue4 + { + background-color: blue; + height: 1em; + left: 34em; + } + + div#yellow1 + { + background-color: yellow; + height: 1em; + left: 36em; + width: 1em; + } + + div#blue5 + { + background-color: blue; + height: 1em; + left: 37em; + } + + div#yellow2 + { + background-color: yellow; + height: 1em; + left: 39em; + width: 3em; + } + + div#pink1 + { + background-color: pink; + left: 45em; + } + + div#yellow3 + { + background-color: yellow; + left: 47em; + width: 1em; + } + + div#pink2 + { + background-color: pink; + left: 48em; + } + + div#yellow4 + { + background-color: yellow; + left: 50em; + width: 1em; + } + + div#pink3 + { + background-color: pink; + left: 51em; + } + + div#pink4 + { + background-color: pink; + height: 1em; + left: 56em; + } + + div#yellow5 + { + background-color: yellow; + height: 1em; + left: 58em; + width: 1em; + } + + div#pink5 + { + background-color: pink; + height: 1em; + left: 59em; + } + + div#yellow6 + { + background-color: yellow; + height: 1em; + left: 61em; + width: 3em; + } + + div#margin-right + { + background-color: transparent; + height: 1em; + left: 64em; + width: 1em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + <div id="black4"></div> + <div id="black5"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + <div id="blue4"></div> + <div id="yellow1"></div> + <div id="blue5"></div> + <div id="yellow2"></div> + + <div id="pink1"></div> + <div id="yellow3"></div> + <div id="pink2"></div> + <div id="yellow4"></div> + <div id="pink3"></div> + <div id="pink4"></div> + <div id="yellow5"></div> + <div id="pink5"></div> + <div id="yellow6"></div> + <div id="margin-right"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht new file mode 100644 index 000000000..09ca664ae --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht @@ -0,0 +1,92 @@ +<!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> + <!-- + This test's original filename was multicol-inherit-003.xht + and it has been modified and is now + multicol-overflowing-001.xht + --> + <title>CSS Multi-column Layout Test: multicolumn and overflowing constrained dimensions</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-overflowing-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the content of a multi-column element with a fixed height can overflow outside its fixed width according to the computed overflow value. In this test, the inline content of a multi-column element exceeds the available fixed height and fixed width for the multi-column element; therefore, it overflows outside of it and creates a 4th, 5th and 6th extra column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + height: 2em; + width: 32em; + + -moz-column-gap: 1em; + -moz-column-width: 8em; + } + + /* + + N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap))); + N == max(1, floor((32em + 1em) / (8em + 1em))); + N == max(1, floor(33em / 9em)); + N == max(1, floor(3.6)); + N == max(1, 3); + N == 3; + + W == ((available-width + -moz-column-gap) / N) - -moz-column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + H == 2em; + + */ + + div + { + background: yellow; + color: black; + orphans: 1; + widows: 1; + } + + div > div {margin: 0 1em 1em;} + + div + div {color: blue;} + + div + div + div {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png b/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png Binary files differnew file mode 100644 index 000000000..2d79f2b29 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht new file mode 100644 index 000000000..55eb43e27 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht @@ -0,0 +1,43 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: black solid thin; + color: orange; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 30em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p> + + <div> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + <div> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht new file mode 100644 index 000000000..3a3364a88 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht @@ -0,0 +1,69 @@ +<!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 Multi-column Layout Test: column width becomes wider to fill available space</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1 '-moz-column-width'" /> + <link rel="match" href="multicol-reduce-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column width is increased to fill the available space: in this test, there are only 2 column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + border: black solid thin; + color: orange; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 30em; + } + + div#test + { + -moz-column-gap: 0; + -moz-column-width: 201px; + + /* + + N == max(1, floor((U + -moz-column-gap)/(-moz-column-width + -moz-column-gap))) + N == max(1, floor((600px + 0px)/(201px + 0))) + N == max(1, floor(600px/201px)) + N == max(1, floor(2.985)) + N == max(1, 2) + N == 2; + + W == max(0, ((U + -moz-column-gap)/N - -moz-column-gap)) + W == max(0, ((600px + 0px)/2 - 0px)) + W == max(0, ((600px)/2 - 0px)) + W == max(0, (300px - 0px)) + W == max(0, 300px) + W == 300px; + + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p> + + <div id="test"> + 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 <span>A B C D E F G H I J K L M N O P</span> + </div> + + <div id="reference"> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht new file mode 100644 index 000000000..86a93ff1e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht @@ -0,0 +1,43 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 602px; + } + + span + { + border-left: lime solid 1px; + border-right: lime solid 1px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + <div> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht new file mode 100644 index 000000000..0effd0c22 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht @@ -0,0 +1,63 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 602px; + } + + div#test + { + -moz-columns: 3; + -moz-column-gap: 1px; + -moz-column-rule: lime solid 1px; + + /* + + N == 3; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span + { + border-left: lime solid 1px; + border-right: lime solid 1px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + 1234567890<br />ABCDEFGHIJ<br />1234567890 + </div> + + <div id="reference"> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht new file mode 100644 index 000000000..ac8667da8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht @@ -0,0 +1,33 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: green; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 20em; + } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p> + + <div>12345678901234567890</div> + + <div>12345678901234567890</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht new file mode 100644 index 000000000..55c880be3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht @@ -0,0 +1,55 @@ +<!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 Multi-column Layout Test: -moz-column-rule exceeding -moz-column-gap</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="If a column rule is wider than its gap, then the adjacent column boxes overlap the rule. This test checks that if inline content of column boxes uses only 1 twentieth (1/20) of each of the adjacent column box width, then the column rule must shine through 19 twentieths (19/20) of each of the adjacent column boxes (and above their respective backgrounds)." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + color: green; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 20em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0em; + -moz-column-rule: green solid 20em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p> + + <div id="test">1<br />2</div> + + <div id="reference">12345678901234567890</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht new file mode 100644 index 000000000..f1b9c2c48 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht @@ -0,0 +1,69 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + position: relative; + orphans: 1; + widows: 1; + + -moz-column-count: 4; + -moz-column-gap: 1em; +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 1em; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht new file mode 100644 index 000000000..3474589dd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht @@ -0,0 +1,27 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 15em; + } + + img {vertical-align: top;} + + img.yellow {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht new file mode 100644 index 000000000..ea2565c0d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht @@ -0,0 +1,46 @@ +<!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 Multi-column Layout Test: -moz-column-rule (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-003-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 15em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1em; + } + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht new file mode 100644 index 000000000..15558fe0e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + left: 8px; + position: absolute; + top: 52px; + width: 100px; + } + ]]></style> + </head> + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht new file mode 100644 index 000000000..52fafe4a6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: '-moz-column-fill: balance' and -moz-column-rule</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when '-moz-column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then -moz-column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + height: 5em; + position: relative; + right: 80px; + width: 13em; + + -moz-column-count: 2; + -moz-column-fill: balance; + -moz-column-gap: 5em; + -moz-column-rule: green solid 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">LEFT Colm RIGH Colm</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht new file mode 100644 index 000000000..aac462164 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht @@ -0,0 +1,27 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + + img.white {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht new file mode 100644 index 000000000..2c87fa7c7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: -moz-column-rule-color (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-color-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + color: lime; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + + span {color: black;} + ]]></style> + </head> + + <body> + + <div> + <span>1s cl</span> + <span>2n cl</span> + <span>3r cl</span> + <span>4t cl</span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht new file mode 100644 index 000000000..8bf2d7d2d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht @@ -0,0 +1,22 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {font-size: 1.25em;} + img {padding-left: 1em;} + ]]></style> + </head> + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div> + <img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht new file mode 100644 index 000000000..bdb32efa4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht @@ -0,0 +1,143 @@ +<!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 Multi-column Layout Test: -moz-column-rule-color: inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that, by default, -moz-column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case -moz-column-rule-color will be inherited from the parent's -moz-column-rule-color value." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#parent + { + -moz-column-rule-color: green; + -moz-column-rule-style: none; + font: 1.25em/1 Ahem; + width: 17em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (17em - ((3 - 1) * 1em)) / 3); + W == max(0, (17em - (2 * 1em)) / 3); + W == max(0, (17em - 2em) / 3); + W == max(0, 15em / 3); + W == max(0, 5em); + W == 5em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + div + { + color: red; /* both div#parent and div.child have and use 'color: red' */ + orphans: 1; + widows: 1; + + -moz-column-count: 3; + -moz-column-gap: 1em; + -moz-column-rule-width: 1em; + } + + div.child + { + -moz-column-rule-color: inherit; + -moz-column-rule-style: solid; + font-size: 1em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht new file mode 100644 index 000000000..297f66140 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht @@ -0,0 +1,127 @@ +<!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 Multi-column Layout Test: -moz-column-rule-color: inherit (complex)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 and 2016-10-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color" title="5.2. The 'currentcolor' keyword" /> + <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, div#parent's computed '-moz-column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's '-moz-column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's '-moz-column-rule-color'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#parent + { + color: red; + font: 20px/1 Ahem; + } + + div.child + { + color: green; + display: inline-block; + font-size: 1em; + width: 5em; + + -moz-column-count: 3; + -moz-column-gap: 1em; + -moz-column-rule-color: inherit; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht new file mode 100644 index 000000000..f4f21267f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime dashed 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht new file mode 100644 index 000000000..610d0f69b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'dashed' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-dashed-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime dashed 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime dashed 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht new file mode 100644 index 000000000..2cb139f0b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime dotted 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht new file mode 100644 index 000000000..71d772bfd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'dotted' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-dotted-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime dotted 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime dotted 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht new file mode 100644 index 000000000..b84d7a2ed --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime double 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht new file mode 100644 index 000000000..eed57c4e4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'double' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-double-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime double 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime double 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht new file mode 100644 index 000000000..29ab6de4a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht @@ -0,0 +1,28 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + + img.yellow {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" +width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht new file mode 100644 index 000000000..9d4e13057 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht @@ -0,0 +1,60 @@ +<!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 Multi-column Layout Test: -moz-column-rule-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="match" href="multicol-rule-fraction-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 0.9em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht new file mode 100644 index 000000000..ca395f2a3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht @@ -0,0 +1,24 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht new file mode 100644 index 000000000..eda6b0690 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: wide -moz-column-rule-width painted above background-color</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="match" href="multicol-rule-fraction-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue -moz-column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 1.9em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht new file mode 100644 index 000000000..1e1814c99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht @@ -0,0 +1,69 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-fraction-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 14em; + position: relative; + orphans: 1; + widows: 1; + + -moz-column-count: 4; + -moz-column-gap: 1em; +} +span { + background: blue; + position: absolute; + top: 0; + left: 2.4em; + height: 2em; + width: 1em; +} +span+span { + left: 6.15em; +} +span+span+span { + left: 9.9em; +} +]]></style> +</head> + +<body> + +<div> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht new file mode 100644 index 000000000..c023d6b16 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht @@ -0,0 +1,57 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 14em; + height: 2em; + position: relative; +} +div div { + width: 2em; + height: 2em; + background: black; + position: absolute; + left: 0; + top: 0; +} +.a { + background: blue; + width: 1em; +} +#a1 {left: 2.43em;} +#a2 {left: 3.75em;} +#a3 {left: 6.13em;} +#a4 {left: 7.5em;} +#a5 {left: 9.9em;} +#a6 {left: 11.25em;} +]]></style> +</head> + +<body> + +<div> + <div></div> + <div id="a1" class="a"></div> + <div id="a2"></div> + <div id="a3" class="a"></div> + <div id="a4"></div> + <div id="a5" class="a"></div> + <div id="a6"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht new file mode 100644 index 000000000..b6099842d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht new file mode 100644 index 000000000..10c93a5cb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'groove' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-groove-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime groove 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht new file mode 100644 index 000000000..a570954df --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht @@ -0,0 +1,34 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + font: 3.125em/1 serif; + height: 1em; + margin-bottom: 0.2em; + width: 8.2em; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div></div> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht new file mode 100644 index 000000000..ba41fc692 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht @@ -0,0 +1,54 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'hidden' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-hidden-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: red hidden 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">A</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht new file mode 100644 index 000000000..4ae1b4ebf --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht @@ -0,0 +1,57 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'inset' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-ridge-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="'border-style' values of -moz-column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime inset 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht new file mode 100644 index 000000000..d478fe264 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht @@ -0,0 +1,29 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 serif; + margin-left: 0em; + } + + div:first-child, div + div + div {margin-left: 1em;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="120" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht new file mode 100644 index 000000000..16d43cbba --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht @@ -0,0 +1,73 @@ +<!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 Multi-column Layout Test: excessively wide -moz-column-rule-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Sep/0006.html" title="[css3-multicol] z-order of -moz-column-rule: below or above border?" /> + <link rel="match" href="multicol-rule-large-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes; its painting will be above background of multi-column element but below the inline content inside the multicol element." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + margin-left: 1em; + } + + div + { + background-color: red; + border: gray solid 1em; + color: lime; + font-size: 1em; + orphans: 1; + widows: 1; + width: 15em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-style: solid; + -moz-column-rule-width: 17em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N); + W == max(0, (15em - ((4 - 1) * 1em)) / 4); + W == max(0, (15em - (3 * 1em)) / 4); + W == max(0, (15em - (3em)) / 4); + W == max(0, (12em) / 4); + W == max(0, 3em); + W == 3em; + + */ + + /* + Since column rules do not take up space, then the test + should not generate an horizontal scrollbar. + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht new file mode 100644 index 000000000..43a8ccd70 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht @@ -0,0 +1,54 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'none' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-hidden-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: red none 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">A</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht new file mode 100644 index 000000000..cddec7d5c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht @@ -0,0 +1,57 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'outset' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-groove-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="'border-style' values of -moz-column-rule are interpreted as in the collapsing border model in which case 'outset' value is drawn the same as 'groove'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime outset 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht new file mode 100644 index 000000000..8eab762a1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht @@ -0,0 +1,39 @@ +<!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 Multi-column Layout Test: -moz-column-rule-width and percentage unit (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="match" href="multicol-containing-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that the -moz-column-rule-width property does not accept percentage unit in its values." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + color: green; + font: 1.25em/1 Ahem; + width: 19em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: red; + -moz-column-rule-style: solid; + -moz-column-rule-width: 0; + -moz-column-rule-width: 200%; + } + ]]></style> + </head> + + <body> + + <div>4444 1 1 1 1 4444 1 1 1 4444 1 1 1 1 4444 1 1 1 1 1 1 4444 1 1 4444 1 1 4444 4444 1 1 4444 1 1 4444</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht new file mode 100644 index 000000000..4ae8133c2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht @@ -0,0 +1,65 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + orphans: 1; + widows: 1; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule-color: blue; + -moz-column-rule-width: 16px; + -moz-column-rule-style: solid; +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 16px; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div id="one"> + xx xx + xx xx + xx xx + xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht new file mode 100644 index 000000000..a4bcad4b7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht @@ -0,0 +1,51 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + height: 2em; +} +div div { + width: 2em; + height: 2em; + float: left; +} +.a { + color: blue; + width: 1em; + margin-left: 1em; +} +div+div+div { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht new file mode 100644 index 000000000..69212b632 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht new file mode 100644 index 000000000..690196335 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'ridge' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-ridge-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime ridge 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht new file mode 100644 index 000000000..9cc627227 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht @@ -0,0 +1,34 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + </head> + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht new file mode 100644 index 000000000..fc0521de1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-rule-width' has same lenght as '-moz-column-gap'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="match" href="multicol-rule-samelength-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule-color: green; + -moz-column-rule-style: solid; + -moz-column-rule-width: 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht new file mode 100644 index 000000000..e8ae8951a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht @@ -0,0 +1,87 @@ +<!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 Multi-column Layout Test: '-moz-column-rule' shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" /> + <link rel="match" href="multicol-rule-samelength-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule: green solid 5em; + -moz-column-rule: normal red 5em; + -moz-column-rule: normal 5em red; + -moz-column-rule: red normal 5em; + -moz-column-rule: red 5em normal; + -moz-column-rule: 5em normal red; + -moz-column-rule: 5em red normal; + -moz-column-rule: red 5em red solid; + -moz-column-rule: red 5em solid red; + -moz-column-rule: red solid 5em red; + -moz-column-rule: red solid red 5em; + -moz-column-rule: 5em red solid red; + -moz-column-rule: solid red 5em red; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht new file mode 100644 index 000000000..ddc0248cf --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime solid 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht new file mode 100644 index 000000000..af8310448 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht @@ -0,0 +1,56 @@ +<!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 Multi-column Layout Test: -moz-column-rule shorthand with 'solid' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-rule-solid-000-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + -moz-columns: 2; + -moz-column-gap: 0.2em; + -moz-column-rule: lime solid 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime solid 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht new file mode 100644 index 000000000..419d19f25 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht @@ -0,0 +1,54 @@ +<!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>multicolumn | -moz-column-count, stacking</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-stacking-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: blue; + background: red; + margin: 1em; + border: 1em solid gray; + width: 14em; + orphans: 1; + widows: 1; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule: 28em solid blue; +} +span { + color: black; + position: relative; + z-index: 1; +} +]]></style> +</head> + +<body> + +<div> + xx xx + xx xx + <span>xx xx</span> + xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht new file mode 100644 index 000000000..39f2bd921 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht @@ -0,0 +1,53 @@ +<!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>multicolumn | -moz-column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: blue; + margin: 1em; + border: 1em solid gray; + width: 14em; + height: 2em; + position: relative; +} +span { + margin-left: 7.5em; + width: 2em; + height: 2em; + display: inline-block; +} +div div { + background: blue; + position: absolute; + height: 2em; + width: 2em; + top: 0; + left: -2em; +} +div div+div { + left: 13em; + width: 11.75em; +} +]]></style> +</head> + +<body> + +<div> + <span>xx xx</span> + <div></div> + <div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht new file mode 100644 index 000000000..523b57085 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht @@ -0,0 +1,50 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + border-collapse: collapse; + border-left: orange groove 100px; + color: transparent; + display: table; + font: 6.25em/1 Ahem; + } + + div + div + { + position: relative; + top: 10px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div>T</div> + + <div>T</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht new file mode 100644 index 000000000..133e5ab30 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-rule-style' groove</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" /> + <link rel="match" href="multicol-rule-style-groove-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div {color: transparent;} + + div#reference + { + border-collapse: collapse; + border-left: orange groove 100px; + font: 6.25em/1 Ahem; + display: table; + } + + div#test + { + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + top: 0.5em; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule: orange groove 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div id="reference">T</div> + + <div id="test">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht new file mode 100644 index 000000000..b6f4a2eea --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-rule-style' inset</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" /> + <link rel="match" href="multicol-rule-style-ridge-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div {color: transparent;} + + div#reference + { + border-collapse: collapse; + border-left: orange inset 100px; + font: 6.25em/1 Ahem; + display: table; + } + + div#test + { + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + top: 0.5em; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule: orange inset 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div id="reference">T</div> + + <div id="test">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht new file mode 100644 index 000000000..8a6c4adf3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-rule-style' outset</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" /> + <link rel="match" href="multicol-rule-style-groove-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div {color: transparent;} + + div#reference + { + border-collapse: collapse; + border-left: orange outset 100px; + font: 6.25em/1 Ahem; + display: table; + } + + div#test + { + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + top: 0.5em; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule: orange outset 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div id="reference">T</div> + + <div id="test">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht new file mode 100644 index 000000000..5e6f59c51 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht @@ -0,0 +1,50 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + border-collapse: collapse; + border-left: orange ridge 100px; + color: transparent; + display: table; + font: 6.25em/1 Ahem; + } + + div + div + { + position: relative; + top: 10px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div>T</div> + + <div>T</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht new file mode 100644 index 000000000..88cdf1a59 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-rule-style' ridge</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" /> + <link rel="match" href="multicol-rule-style-ridge-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div {color: transparent;} + + div#reference + { + border-collapse: collapse; + border-left: orange ridge 100px; + font: 6.25em/1 Ahem; + display: table; + } + + div#test + { + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + top: 0.5em; + width: 9em; + + -moz-column-count: 2; + -moz-column-gap: 5em; + -moz-column-rule: orange ridge 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p> + + <div id="reference">T</div> + + <div id="test">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + -moz-column-gap + -moz-column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht new file mode 100644 index 000000000..5e5ccfd2b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht @@ -0,0 +1,65 @@ +<!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>multicolumn | invalid</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem invalid"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + orphans: 1; + widows: 1; + + -moz-column-count: 4; + -moz-column-gap: 1em; + -moz-column-rule: solid blue 1em; + column: normal red 1em; + -moz-columns: normal red 1em; +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 1em; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + xx xx + xx xx + xx xx + xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht new file mode 100644 index 000000000..7c076f4e3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht @@ -0,0 +1,36 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font-size: 1.25em; + line-height: 1; + margin-bottom: 0.5em; + width: 10em; + } + + img + { + padding-right: 4em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht new file mode 100644 index 000000000..e817b4f16 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht @@ -0,0 +1,70 @@ +<!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 Multi-column Layout Test: -moz-column-span (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" /> + <link rel="match" href="multicol-span-000-ref.xht" /> + <meta name="flags" content="ahem image" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 10em; + } + + div#test, div.test2 + { + -moz-columns: 2; + -moz-column-fill: balance; + -moz-column-gap: 0em; + + /* + + N == 2; + + W == 5em; + + */ + } + + div#test, div#reference {margin-bottom: 0.5em;} + + div#column-span + { + -moz-column-span: all; + font: inherit; + } + + img + { + padding-right: 4em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p> + + <div id="test">A<br />B<div id="-moz-column-span">123456</div>C<br />D</div> + + <div id="reference"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div class="test2">A<br />B</div> + <div>123456</div> + <div class="test2">C<br />D</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht new file mode 100644 index 000000000..f00eb944e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div#inline-block + { + background-color: yellow; + border: gray solid 1em; + display: inline-block; + font-size: 1.25em; + } + + div + div {line-height: 1;} + + img {vertical-align: top;} + + img.padding-left {padding-left: 1em;} + + img.padding-left-right {padding: 0em 1em;} + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" width="220" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht new file mode 100644 index 000000000..5eefa4aa9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht @@ -0,0 +1,67 @@ +<!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 Multi-column Layout Test: '-moz-column-span' element (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 4; + -moz-column-gap: 1em; + + /* + + N == 4; + + W == 2em; + + */ + + } + + span {color: blue;} + + span + span {color: pink;} + + h4 + { + background-color: black; + color: black; + font: inherit; + margin: 0; + + -moz-column-span: all; + } + ]]></style> + </head> + + <body> + + <div> + <span id="top-first-and-second-columns"> bl ue bl ue </span> + <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span> + <h4> sPana </h4> + ab cd ef gh + ij kl mn oq + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht new file mode 100644 index 000000000..b046cfaf4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht @@ -0,0 +1,35 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div#inline-block + { + background-color: yellow; + border: gray solid 1em; + display: inline-block; + font-size: 1.25em; + } + + div + div {line-height: 1;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-yellow.png" width="160" height="60" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht new file mode 100644 index 000000000..62def5e2b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht @@ -0,0 +1,75 @@ +<!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 Multi-column Layout Test: '-moz-column-span' element - large margin-left and 'overflow: hidden'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + + } + + span {color: blue;} + + span + span {color: pink;} + + h4 + { + background-color: black; + color: black; + font: inherit; + margin: 1em 0 1em 8em; + + -moz-column-span: all; + /* + Since there is not sufficient space for the + spanning element, UA may treat the element as + '-moz-column-span: none'; in which case, + 'overflow: hidden' will take care of + overflowed content out of multi-column box. + */ + } + ]]></style> + </head> + + <body> + + <div> + <span id="top-first-and-second-columns"> bl ue bl ue </span> + <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span> + <h4> sPana </h4> + ab cd ef gh + ij kl mn oq + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht new file mode 100644 index 000000000..f9e30e617 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht @@ -0,0 +1,54 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-count-002-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all -moz-columns before the element appears." /> + +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + + -moz-column-count: 4; + -moz-column-gap: 0; + } + + h4 + { + background-color: black; + -moz-column-span: all; + color: yellow; + font: 1em/1 Ahem; + margin: 0em; + } + ]]></style> + </head> + <body> + <div> + 55555 55555 55555 55555 + <h4> 4444 4444 4444 4444</h4> + 1 22 1 22 1 1 333 1 333 1 333 55555 1 22 1 22 1 1 22 1 22 1 22 55555 1 333 1 333 1 4444 4444 1 55555 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht new file mode 100644 index 000000000..4e91382e1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht @@ -0,0 +1,47 @@ +<!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>multicol | -moz-column-span: all | block-level child</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/> +<link rel="match" href="multicol-span-all-block-sibling-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1; + color: black; + background: black; + + -moz-column-count: 2; +} +h1 { + -moz-column-span: all; +} +]]></style> +</head> + +<body> + +<div> + <div> + <h1>foo</h1> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht new file mode 100644 index 000000000..19466a679 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht @@ -0,0 +1,34 @@ +<!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>multicol | -moz-column-span: all | block-level child</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1; + color: black; + background: black; +} +h1 { + margin-top: 0; + padding-top: 0.66em; +} +]]></style> +</head> + +<body> + +<div> + <div> + <h1>FAIL</h1> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht new file mode 100644 index 000000000..fe82d6a11 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht @@ -0,0 +1,109 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: blue; + font-size: 1.25em; + height: 10em; + position: relative; + width: 12em; + } + + div > div {position: absolute;} + + div#first-black + { + background-color: black; + left: 7em; + height: 1em; + top: 0em; + width: 5em; + } + + div#first-yellow + { + background-color: yellow; + left: 7em; + height: 3em; + top: 1em; + width: 1em; + } + + div#first-white + { + background-color: white; + left: 10em; + height: 9em; + top: 1em; + width: 2em; + } + + div#second-black + { + background-color: black; + left: 2em; + height: 1em; + top: 2em; + width: 3em; + } + + div#second-yellow + { + background-color: yellow; + left: 2em; + height: 3em; + top: 3em; + width: 1em; + } + + div#third-black + { + background-color: black; + left: 2em; + height: 1em; + top: 6em; + width: 3em; + } + + div#third-yellow + { + background-color: yellow; + left: 2em; + height: 3em; + top: 7em; + width: 1em; + } + + div#second-white + { + background-color: white; + left: 5em; + height: 4em; + top: 6em; + width: 7em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="first-black"></div> + <div id="first-yellow"></div> + <div id="first-white"></div> + <div id="second-black"></div> + <div id="second-yellow"></div> + <div id="third-black"></div> + <div id="third-yellow"></div> + <div id="second-white"></div> + + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht new file mode 100644 index 000000000..50896e563 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht @@ -0,0 +1,59 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' element with block children (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html" /> + <link rel="match" href="multicol-span-all-child-001-ref.xht" /> + <meta name="flags" content="ahem may" /> + <meta name="assert" content="This test checks how a spanning element with block children is rendered inside a multi-column element with a set height which is insufficient for rendering the entire spanning element. Since the available height (10em)is insufficient to render the spanning element (height needed: 3 times 4em) entirely inside the multi-column element, then UA may treat '-moz-column-span: all' as '-moz-column-span: none'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + color: black; + font: 1.25em/1 Ahem; + height: 10em; + orphans: 1; + widows: 1; + width: 10em; + + -moz-column-count: 2; + -moz-column-fill: auto; + -moz-column-gap: 0em; + } + + div + { + background-color: yellow; + border: blue solid 2em; + + -moz-column-span: all; + } + + span + { + display: block; + height: 4em; + width: 5em; + } + ]]></style> + </head> + + <body> + + <div> + <span>block</span> + <span>block</span> + <span>block</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht new file mode 100644 index 000000000..417bbe110 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht @@ -0,0 +1,32 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: black; + height: 8em; + width: 10em; + } + + div#overflow + { + bottom: 8em; + font: 1em/1 serif; + margin-left: 10em; + position: relative; + } + ]]></style> + </head> + <body> + + <div id="multi-column"></div> + + <div id="overflow">abc deg<br />ghk mno</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht new file mode 100644 index 000000000..3afb4a78f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht @@ -0,0 +1,86 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' element with block children (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html" /> + <link rel="match" href="multicol-span-all-child-002-ref.xht" /> + <meta name="flags" content="may" /> + <meta name="assert" content="This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat '-moz-column-span: all' as '-moz-column-span: none'." /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + height: 8em; + orphans: 1; + widows: 1; + width: 10em; + + -moz-column-count: 2; + -moz-column-gap: 0em; + + /* + + N == 2; + + W == 5em; + + */ + + } + + div, p + { + font: 1em/1 serif; + margin-top: 0em; + + -moz-column-span: all; + } + + span + { + color: black; + display: block; + height: 4em; + width: 5em; + } + ]]></style> + </head> + + <body> + + <div> + <span>FAIL</span> + <span>FAIL</span> + <span>FAIL</span> + <span>FAIL</span> + </div> + + <p>abc deg ghk mno</p> + + <!-- + + Expected results: + + ************************ + |FAIL |FAIL |abc deg + | | |ghk mno + | | | + | | | + |FAIL |FAIL | + | | | + | | | + | | | + ************************ + + The test presumes, postulates that + "abc deg" occupies not more than 5em. + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht new file mode 100644 index 000000000..6605ad8ef --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht @@ -0,0 +1,23 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1.25em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht new file mode 100644 index 000000000..21454a5dc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht @@ -0,0 +1,77 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' element and width exceeding available multi-colum width (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-margin-001-ref.xht" /> + <meta name="flags" content="ahem may" /> + <meta name="assert" content="This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('-moz-column-span: all') element exceeding the available width of the multi-column should be clipped accordingly." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2; + + */ + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 1em 0; + width: 11em; + + -moz-column-span: all; + + /* + This is the target of the test: the spanning element's + width (11em) exceeds the available width of the + multi-column element. The 3em exceeding such + width is first clipped at column box boundary. + */ + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + <h4> black </h4> + <h4> black </h4> + na vy na vy + na vy na vy + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht new file mode 100644 index 000000000..1538f1402 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {width: 240px;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="100" height="20" alt="Image download support must be enabled" /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" +alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" /> + +</div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht new file mode 100644 index 000000000..f240d3575 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht @@ -0,0 +1,81 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-margin-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2; + + */ + } + + h4 + { + font: inherit; + margin: 1em 0; + } + + h4#orange + { + background: orange; + color: orange; + /* + In this test, the glyphs "or" are painted into 4th column box + and the glyphs "ang" are painted in the overflow area. + */ + } + + h4#black + { + background: black; + color: black; + + -moz-column-span: all; + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + <h4 id="orange"> orang </h4> + <h4 id="black"> black </h4> + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht new file mode 100644 index 000000000..d6719f0b8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1.25em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht new file mode 100644 index 000000000..8655d8dbc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht @@ -0,0 +1,84 @@ +<!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 Multi-column Layout Test: '-moz-column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-margin-bottom-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4 + { + font: inherit; + margin: 1em 0; + } + + h4#black + { + background: black; + color: black; + + -moz-column-span: all; + } + + h4#orange + { + background: orange; + color: orange; + /* + In this test, the glyphs "or" are painted into 1st column box. + "Content in the normal flow that extends into column + gaps (e.g., long words or images) is clipped in the + middle of the column gap." + Therefore, the glyphs "ang" are clipped and not painted. + */ + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + na vy na vy + na vy na vy + <h4 id="black"> black </h4> + <h4 id="orange"> orang </h4> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht new file mode 100644 index 000000000..dee66329f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht @@ -0,0 +1,31 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1.25em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht new file mode 100644 index 000000000..5eb4d6d8b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht @@ -0,0 +1,75 @@ +<!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 Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4, div#child + { + background-color: black; + color: black; + font: inherit; + margin: 0; + } + + h4 + { + margin: 1em 0; + width: 11em; + + -moz-column-span: all; + } + ]]></style> + </head> + <body> + + <div id="multi-column"> + na vy na vy + na vy na vy + + <h4 id="first">black</h4> + + <div id="child"> + <h4 id="nested">black</h4> + </div> + + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht new file mode 100644 index 000000000..e646023bc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht @@ -0,0 +1,76 @@ +<!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 Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the resulting (from a margin collapsing with its nested h4 element) of top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + -moz-column-count: 4; + -moz-column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4, div#child + { + background-color: black; + color: black; + font: inherit; + margin: 1em 0; + } + + div#child {margin: 1em 0 0;} + + h4 + { + width: 11em; + + -moz-column-span: all; + } + ]]></style> + </head> + <body> + + <div id="multi-column"> + na vy na vy + na vy na vy + + <h4 id="first">black</h4> + + <div id="child"> + <h4 id="nested">black</h4> + </div> + + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht new file mode 100644 index 000000000..417e3e140 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht @@ -0,0 +1,45 @@ +<!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>multicolomn | -moz-column-span inside block</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/> +<link rel="match" href="multicol-span-all-margin-nested-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: black; + position: absolute; + orphans: 1; + widows: 1; + + -moz-column-count: 4; +} +#spanned { + -moz-column-span: all; +} +]]></style> +</head> + +<body> + +<div> + <div> + <div id="spanned">x</div> + </div> + FAIL FAIL FAIL FAIL +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht new file mode 100644 index 000000000..a104a66c9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht @@ -0,0 +1,23 @@ +<!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>multicolomn | -moz-column-span inside block</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body>div { + background: black; + width: 22em; + height: 2em; + position: absolute; +} +]]></style> +</head> + +<body> + +<div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht new file mode 100644 index 000000000..36494c537 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht @@ -0,0 +1,85 @@ +<!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>multicolumn | -moz-column-span</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/> +<link rel="match" href="multicol-span-all-margin-nested-firstchild-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: navy; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 8em; + float: left; + orphans: 1; + widows: 1; + overflow: hidden; + + -moz-column-count: 4; + -moz-column-gap: 0; +} +span, h6 { + font-family: ahem; + font-size: 1em; + font-weight: normal; + line-height: 1em; + color: black; + background: black; + padding: 0; + margin: 0; + display: block; +} +h6 { + margin: 1em 0; + width: 11em; + -moz-column-span: all; +} +span { + color: pink; + background: pink; + margin: 2em 0; +} +h6~h6 { + color: black; + background: black; + height: 1em; +} +h6~h6>span { + background: pink; + color: pink; + margin: -2em 0 0; +} +]]></style> +</head> + +<body> + +<div> + xx xx xx xx + xx xx xx xx + + <h6><span>xxxxx</span></h6> + <h6><span>xxxxx</span></h6> + + xx xx xx xx + xx xx xx xx +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht new file mode 100644 index 000000000..292272e30 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht @@ -0,0 +1,76 @@ +<!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>multicolumn | -moz-column-span</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + color: navy; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 8em; + height: 13em; + position: relative; + float: left; + overflow: hidden; +} +div div { + position: absolute; + top: 0; + left: 0; + width: 8em; + height: 2em; + background: navy; +} +#s2 { + top: 11em; +} +#s3 { + background: black; + top: 3em; +} +#s4 { + background: pink; + top: 5em; + height: 1em; +} +#s5 { + background: black; + top: 6em; + height: 1em; +} +#s6 { + background: pink; + top: 7em; + height: 1em; +} +#s7 { + background: black; + top: 9em; + height: 1em; +} +]]></style> +</head> + +<body> + +<div> + <div></div> + <div id="s2"></div> + <div id="s3"></div> + <div id="s4"></div> + <div id="s5"></div> + <div id="s6"></div> + <div id="s7"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht new file mode 100644 index 000000000..50addc377 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht @@ -0,0 +1,35 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font-size: 1.25em; + line-height: 1; + } + + img {vertical-align: top;} + + img:first-child {padding-left: 5em;} + + img#no-padding {padding-left: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img id="no-padding" src="support/swatch-pink.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht new file mode 100644 index 000000000..71c9eed9a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht @@ -0,0 +1,70 @@ +<!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 Multi-column Layout Test: floating a column-spanning element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-float-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-span' does not apply to floating element." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + margin-left: 5em; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 2; + -moz-column-gap: 1em; + + /* + + N == 2; + + W == 5em; + + */ + } + + span + { + display: block; + font: inherit; + margin: 0; + width: 11em; + + -moz-column-span: all; + } + + span:first-child + { + background-color: pink; + color: pink; + float: right; + } + + span + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span>Pinkk</span> + <span>black</span> + navyy navyy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht new file mode 100644 index 000000000..5472e779c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht @@ -0,0 +1,54 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 serif; + border: 1em solid gray; + width: 11em; + height: 5em; + position: relative; + } + + img {position: absolute;} + + img#first-blue {left: 0em; top: 0em;} + + img#second-blue {left: 3em; top: 0em;} + + img#first-pink {left: 6em; top: 0em;} + + img#second-pink {left: 9em; top: 0em;} + + img#black {left: 0em; top: 2em;} + + img#first-yellow {left: 6em; top: 2em;} + + img#second-yellow {left: 9em; top: 2em;} + + img#first-orange {left: 0em; top: 3em;} + + img#second-orange {left: 3em; top: 3em;} + ]]></style> + </head> + <body> + + <div> + <img id="first-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="first-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /> + + <img id="black" src="support/black20x20.png" width="110" height="20" alt="Image download support must be enabled" /> + + <img id="first-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /> + <img id="second-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /> + + <img id="first-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" /> + <img id="second-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht new file mode 100644 index 000000000..e398eff8a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht @@ -0,0 +1,67 @@ +<!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 Multi-column Layout Test: -moz-column-span: none (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns" title="6.1. '-moz-column-span'" /> + <link rel="match" href="multicol-span-none-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how a '-moz-column-span: none' element is rendered: it should not span across all column boxes." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + -moz-column-count: 2; + -moz-column-gap: 1em; + + /* + + N == 2; + + W == 5em; + + */ + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + width: 11em; + + -moz-column-span: none; + } + + #column1-top {color: blue;} + + #column1-bottom {color: orange;} + + #column2-top {color: pink;} + + #column2-bottom {color: yellow;} + ]]></style> + </head> + <body> + <div> + <span id="column1-top"> ab cd ef gh </span> + <h4> 1234567890123 </h4> + <span id="column1-bottom"> ij kl mn oq </span> + <span id="column2-top"> ab cd ef gh </span> + <span id="column2-bottom"> rs tu vw xy </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht new file mode 100644 index 000000000..fcc736a02 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht @@ -0,0 +1,12 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + </head> + <body> + <div><img src="support/black20x20.png" width="120" height="20" alt="Image download support must be enabled" /></div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht new file mode 100644 index 000000000..a4ca84f0e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht @@ -0,0 +1,37 @@ +<!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 Multi-column Layout Test: -moz-column-count and table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-table-cell-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell'." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + -moz-column-count: 6; + -moz-column-gap: 0em; + } + ]]></style> + </head> + <body> + + <div>P<br />A<br />S<br />S<br />E<br />D</div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht new file mode 100644 index 000000000..a2e4a8406 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht @@ -0,0 +1,23 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + height: 360px; + width: 300px; + } + + img + img {padding-left: 110px;} + ]]></style> + + </head> + <body> + <div><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /></div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht new file mode 100644 index 000000000..84fc06b13 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht @@ -0,0 +1,52 @@ +<!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 Multi-column Layout Test: -moz-column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 18em; + orphans: 1; + widows: 1; + width: 15em; + + -moz-column-count: 2; + -moz-column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht new file mode 100644 index 000000000..43b4407a8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht @@ -0,0 +1,52 @@ +<!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 Multi-column Layout Test: -moz-column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 0em; + orphans: 1; + widows: 1; + width: 15em; + + -moz-column-count: 2; + -moz-column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht new file mode 100644 index 000000000..83fb6aa82 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht @@ -0,0 +1,41 @@ +<!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>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model"/> +<link rel="match" href="multicol-table-cell-vertical-align-ref.xht"/> +<meta name="flags" content="ahem"/> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> +<style type="text/css"><![CDATA[ +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 400px; + display: table-cell; + + -moz-column-count: 2; + -moz-column-gap: 0; +} +]]></style> +</head> + +<body> + +<div> +aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht new file mode 100644 index 000000000..023c9c6a0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht @@ -0,0 +1,29 @@ +<!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>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +div { + font-family: ahem; + font-size: 1em; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 8em; +} +div+div { + margin-top: 10em; +} +]]></style> +</head> + +<body> +<div></div> +<div></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht new file mode 100644 index 000000000..6588d840f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht @@ -0,0 +1,50 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + width: 30em; + } + + div + { + background-color: yellow; + color: black; + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <div>d da d da d da d da d da <br /> + + dam dam dam dam dam <br /> + + dame dame dame dame dame <br /> + + damer damer damer damer damer <br /> + + d da d da d da d da <br /> + + dam dam dam dam <br /> + + dame dame dame dame <br /> + + damer damer damer damer + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht new file mode 100644 index 000000000..41d88287a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht @@ -0,0 +1,48 @@ +<!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 Multi-column Layout Test: -moz-column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-width-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + width: 30em; + } + + div + { + background-color: yellow; + color: black; + orphans: 1; + widows: 1; + + -moz-column-gap: 0; + -moz-column-width: 6em; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht new file mode 100644 index 000000000..59d54cadc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht @@ -0,0 +1,32 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht new file mode 100644 index 000000000..8be661047 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht @@ -0,0 +1,42 @@ +<!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 Multi-column Layout Test: -moz-column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-width-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-gap: 0; + -moz-column-width: 6em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac bl ac + <span> + bl ue bl ue + </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht new file mode 100644 index 000000000..dc56c1e1f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht @@ -0,0 +1,67 @@ +<!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 Multi-column Layout Test: -moz-column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-width-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + height: 2em; + orphans: 1; + position: relative; + widows: 1; + width: 12em; + + -moz-column-width: 6em; + -moz-column-gap: 0; + } + + div > div + { + background-color: black; + height: 2em; + position: absolute; + top: 0; + width: 2em; + } + + div#s2 {left: 3em;} + + div#s3 + { + background-color: blue; + left: 6em; + } + + div#s4 + { + background-color: blue; + left: 9em; + } + ]]></style> + </head> + <body> + + <div id="multi-column"> + <div></div> + <div id="s2"></div> + <div id="s3"></div> + <div id="s4"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht new file mode 100644 index 000000000..882520810 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht @@ -0,0 +1,49 @@ +<!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 Multi-column Layout Test: -moz-column-count and -moz-column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" /> + <link rel="match" href="multicol-width-001-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + width: 30em; + } + + div + { + background-color: yellow; + color: black; + orphans: 1; + widows: 1; + + -moz-column-count: 5; + -moz-column-gap: 0; + -moz-column-width: 6em; + } + ]]></style> + </head> + <body> + <div> + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + d da dam dame damer + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht new file mode 100644 index 000000000..07be600bd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht @@ -0,0 +1,42 @@ +<!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 Multi-column Layout Test: -moz-column-count and -moz-column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="flags" content="ahem" /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + + -moz-column-count: 4; + -moz-column-gap: 0; + -moz-column-width: 5em; + } + ]]></style> + </head> + <body> + <div>55555 1 1 22 1 22 1 1 333 1 333 1 333 55555 55555 1 1 22 1 22 1 1 22 1 22 1 22 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht new file mode 100644 index 000000000..b1cfa9f3f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht @@ -0,0 +1,42 @@ +<!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>multicolumn | -moz-column-width</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-width-ems-ref.xht"/> +<meta name="flags" content=""/> +<style type="text/css"><![CDATA[ +body { + margin: 0; + width: 40em; +} +div { + font-family: monospace; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + orphans: 1; + widows: 1; + + -moz-column-width: 8em; + -moz-column-gap: 0; +} +]]></style> +</head> + +<body> +<div> + one two three four + five six seven eight + nineten eleven twelve + thirtn fourtnfiftn sixtn + seventn eightn ninetn twenty + hundred thousand million billion + trillion +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht new file mode 100644 index 000000000..bc31ca34f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht @@ -0,0 +1,59 @@ +<!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>multicolumn | -moz-column-width</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +body { + margin: 0; + width: 40em; +} +div { + font-family: monospace; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + orphans: 1; + widows: 1; +} +span { + float: left; + width: 8em; +} +div::after { + content: ""; + clear: both; + display: block; +} +]]></style> +</head> + +<body> + +<div> +<span> + one two three four + five six seven eight +</span> +<span> + nineten eleven twelve + thirtn +</span> +<span> + fourtnfiftn sixtn + seventn eightn +</span> +<span> + ninetn twenty + hundred thousand +</span> +<span> + million billion + trillion +</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht new file mode 100644 index 000000000..a583e30f3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht @@ -0,0 +1,39 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + + <tr> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht new file mode 100644 index 000000000..f4d05d35e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: invalid -moz-column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that '-moz-column-width: bzzt' is invalid (generating a parsing error) and therefore will be ignored." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-gap: 0; + -moz-column-width: bzzt; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht new file mode 100644 index 000000000..7b174378d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: large -moz-column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set '-moz-column-width' may be wider (to fill the available space). In this test, the actual -moz-column-width will be increased to 12em." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-gap: 0; + -moz-column-width: 9em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht new file mode 100644 index 000000000..59148eaae --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht @@ -0,0 +1,47 @@ +<!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 Multi-column Layout Test: large -moz-column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set '-moz-column-width' equal in width to the whole available space of the multi-column will use it all for its column box." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-gap: 0; + -moz-column-width: 12em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht new file mode 100644 index 000000000..c1d652ca2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht @@ -0,0 +1,36 @@ +<!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 Multi-column Layout Test: negative -moz-column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a set '-moz-column-width' can not be negative." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: black solid 1em; + color: yellow; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 19em; + + -moz-column-width: -100px; + -moz-column-gap: 0; + } + ]]></style> + </head> + <body> + <div>4444 4444 4444 4444 1 1 1 1 1 1 1 1 1 1 1 1 4444 4444 4444 4444 1 1 1 1 1 1 1 1 1 1 1 1 1 4444 4444</div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht new file mode 100644 index 000000000..eb427d1da --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht @@ -0,0 +1,29 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 4em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht new file mode 100644 index 000000000..cb9f841ce --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht @@ -0,0 +1,61 @@ +<!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 Multi-column Layout Test: narrow -moz-column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-width-small-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set '-moz-column-width' which is small with regards to width of multi-column element. In this test, in-flow content that extends into column gaps is clipped in the middle of the column gap. " /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + -moz-column-gap: 0; + -moz-column-width: 1em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + Bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + Bl ac + </div> + + <!-- + + Expected results + + ************************* + *B|a|b|u|b|u|B|a| | | | * + ************************* + + Every "l", "c" and "e" glyphs are clipped. + + --> + + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht new file mode 100644 index 000000000..273bb43ec --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht @@ -0,0 +1,15 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-lime.png" width="100" height="300" alt="Image download support must be enabled" /></div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht new file mode 100644 index 000000000..82cd7be38 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht @@ -0,0 +1,44 @@ +<!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 Multi-column Layout Test: multi-column element with zero height</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" /> + <link rel="match" href="multicol-zero-height-001-ref.xht" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + height: 0; + orphans: 1; + widows: 1; + width: 200px; + + -moz-column-count: 2; + -moz-column-gap: 0; + + /* + + N == 2; + + W == 100px; + + */ + } + + div > div + { + background-color: lime; + float: left; + height: 300px; + width: 100px; + } + ]]></style> + </head> + <body> + <div id="multi-column"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html new file mode 100644 index 000000000..c5bf98f09 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test reference</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + <meta name="flags" content="ahem"/> + +<style type="text/css"> +@font-face { + font-family: Ahem; + src: url("../../../../fonts/Ahem.ttf"); +} +</style> + <style type="text/css"> + .multicol-wrapper>*{ + font-family: Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + border-spacing: 0; + border-collapse: collapse; + padding: 0; + } + + .multicol-basic-ref td{ + padding: 0; + } + .multicol-basic-ref-item{ + padding: 0; + width: 120px; + background: #000; + border-spacing: 0; + border-collapse: collapse; + display: inline; + border: none; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <table class="multicol-basic-ref"> + <tr> + <td><div class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + <td><div class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + <td><div class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + </tr> + </table> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png Binary files differnew file mode 100644 index 000000000..b98ca0ba0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png Binary files differnew file mode 100644 index 000000000..cb397fb09 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png Binary files differnew file mode 100644 index 000000000..3f86b0721 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png Binary files differnew file mode 100644 index 000000000..9b9a03955 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png Binary files differnew file mode 100644 index 000000000..6bd73ac10 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png Binary files differnew file mode 100644 index 000000000..dd43faec5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 000000000..84f5b2a4f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png Binary files differnew file mode 100644 index 000000000..b3c8cf3eb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png Binary files differnew file mode 100644 index 000000000..823f125b8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css new file mode 100644 index 000000000..b0dbb071d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css new file mode 100644 index 000000000..a0473f5ca --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png b/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png Binary files differnew file mode 100644 index 000000000..ebf7027ee --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css b/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css new file mode 100644 index 000000000..d4ba5c64e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png b/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png Binary files differnew file mode 100644 index 000000000..85dd73248 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css new file mode 100644 index 000000000..537104e66 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css b/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css new file mode 100644 index 000000000..9945ef471 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 000000000..6fcfeb488 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 000000000..fcf4f3fd7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 000000000..db8ed5cf7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png Binary files differnew file mode 100644 index 000000000..8b4b25364 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png b/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png Binary files differnew file mode 100644 index 000000000..5d44ef210 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png Binary files differnew file mode 100644 index 000000000..0f522d787 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png Binary files differnew file mode 100644 index 000000000..e567f51b9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png Binary files differnew file mode 100644 index 000000000..5853cbb23 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png Binary files differnew file mode 100644 index 000000000..bf2759634 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png Binary files differnew file mode 100644 index 000000000..92c73561f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png Binary files differnew file mode 100644 index 000000000..0aa79b0c8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png Binary files differnew file mode 100644 index 000000000..55fd7fdae --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png Binary files differnew file mode 100644 index 000000000..28dae8a3e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png Binary files differnew file mode 100644 index 000000000..d3cd498b5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png Binary files differnew file mode 100644 index 000000000..95b84499a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png Binary files differnew file mode 100644 index 000000000..73bea7751 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png Binary files differnew file mode 100644 index 000000000..1caf25c99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png Binary files differnew file mode 100644 index 000000000..1a7d4323d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png Binary files differnew file mode 100644 index 000000000..1591aa0e2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png Binary files differnew file mode 100644 index 000000000..904e24e99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png Binary files differnew file mode 100644 index 000000000..f413ff5c1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png Binary files differnew file mode 100644 index 000000000..82eeace7f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png Binary files differnew file mode 100644 index 000000000..f6ac0ef7e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png Binary files differnew file mode 100644 index 000000000..59843ae54 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml new file mode 100644 index 000000000..c40bb7f11 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml @@ -0,0 +1,20 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: prefix case-sensitivity</title> + <style> + @namespace Foo "y"; + @namespace foo "x"; + test { background:red } + Foo|test { background:lime } + foo|test { background:red } + FOO|test { background:red } + </style> + </head> + <body> + <p><test xmlns="y">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml new file mode 100644 index 000000000..cc78f3f0a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml @@ -0,0 +1,17 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: empty string prefix (Explicit element namespace)</title> + <style> + @namespace foo ""; + t { background:red } + foo|t { background:lime } + </style> + </head> + <body> + <p><t xmlns="">This sentence should have a green background.</t></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml new file mode 100644 index 000000000..0b6f3293d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml @@ -0,0 +1,15 @@ +<root> + <head xmlns="http://www.w3.org/1999/xhtml"> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-1-generic.xml"/> + <title>CSS Namespaces Test Suite: empty string prefix (Implied element namespace)</title> + <style> + @namespace foo ""; + t { background:red } + foo|t { background:lime } + </style> + </head> + <t>This sentence should have a green background.</t> +</root> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml new file mode 100644 index 000000000..70c3bd1ed --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml @@ -0,0 +1,18 @@ +<root> + <head xmlns="http://www.w3.org/1999/xhtml"> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-2-generic.xml"/> + <title>CSS Namespaces Test Suite: empty string default namespace</title> + <style> + @namespace ""; + @namespace x "test"; + *|t, *|root { display:block } + *|t, t[x] { background:lime } + t { background:red } + </style> + </head> + <t x="">This sentence should have a green background.</t> + <t xmlns="test">This sentence should have a green background.</t> +</root> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml new file mode 100644 index 000000000..458b5aa3e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml @@ -0,0 +1,18 @@ +<root> + <head xmlns="http://www.w3.org/1999/xhtml"> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="author" title="Boris Zbarsky" href="https://bugzilla.mozilla.org/show_bug.cgi?id=458381#c4"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-2-generic.xml"/> + <title>CSS Namespaces Test Suite: no default namespace</title> + <style> + @namespace x "test"; + root *|* { background:red; display:block } + head { display:none } + t { background: lime } + </style> + </head> + <t>This sentence should have a green background.</t> + <t xmlns="test">This sentence should have a green background.</t> +</root> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml new file mode 100644 index 000000000..0bf59915a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/> + <link rel="match" href="reftest/ref-lime-2.xml"/> + <title>CSS Namespaces Test Suite: no prefix</title> + <style> + @namespace "test"; + |t { background:lime } + t { background:red } + </style> + <style> + @namespace "test"; + t2 { background:lime } + |t2 { background:red } + </style> + </head> + <body> + <p><t xmlns="">This sentence should have a green background.</t></p> + <p><t2 xmlns="test">This sentence should have a green background.</t2></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml new file mode 100644 index 000000000..c26b6fcf2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml @@ -0,0 +1,10 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p style="background: lime">This sentence should have a green background.</p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml new file mode 100644 index 000000000..12c5c012d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml @@ -0,0 +1,11 @@ +<root> + <head xmlns="http://www.w3.org/1999/xhtml"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + <style> + t { background:lime } + </style> + </head> + <t>This sentence should have a green background.</t> +</root> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml new file mode 100644 index 000000000..9509a4bd3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml @@ -0,0 +1,10 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p><test style="background: lime">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml new file mode 100644 index 000000000..047be4221 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml @@ -0,0 +1,13 @@ +<root> + <head xmlns="http://www.w3.org/1999/xhtml"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + <style> + t, root { display:block } + t { background:lime } + </style> + </head> + <t>This sentence should have a green background.</t> + <t>This sentence should have a green background.</t> +</root> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml new file mode 100644 index 000000000..f2fa08395 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml @@ -0,0 +1,11 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml new file mode 100644 index 000000000..e50faba6b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml @@ -0,0 +1,12 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml new file mode 100644 index 000000000..9c45f9de7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml @@ -0,0 +1,14 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml new file mode 100644 index 000000000..d67da1ac3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml @@ -0,0 +1,15 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> + <link rel="author" title="Mozilla" href="http://mozilla.org/"/> + <title>CSS Namespaces Test Suite reference</title> + </head> + <body> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + <p><test style="background: lime">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml new file mode 100644 index 000000000..bed4171ef --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml @@ -0,0 +1,20 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#scope"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <meta name="flags" content="invalid"/> + <title>CSS Namespaces Test Suite: scope <style></title> + <style> + @namespace x url("test"); + test { background:lime } + </style> + <style> + x|test { background:red } + </style> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml new file mode 100644 index 000000000..d25eb8178 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#scope"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: scope @import</title> + <style> + test { background:lime } + </style> + <style> + @import url("support/scope-002a.css"); + @import url("support/scope-002b.css"); + @namespace w "test"; + x|test { background:red } + </style> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css new file mode 100644 index 000000000..1c2d64c7e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css @@ -0,0 +1 @@ +* { background:red ! important } diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css new file mode 100644 index 000000000..a8d20ba81 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css @@ -0,0 +1,3 @@ +@namespace x url("test"); +@namespace y url("test"); +w|test { background:red } diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css new file mode 100644 index 000000000..0c0d032a0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css @@ -0,0 +1,2 @@ +y|test { background: red } + diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css new file mode 100644 index 000000000..65d1fa73a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; +@namespace url("test"); +@namespace url("test2"); +*|test { background:lime } +test { background:red } diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml new file mode 100644 index 000000000..01c57e07c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml @@ -0,0 +1,16 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1-block.xml"/> + <title>CSS Namespaces Test Suite: @namespace case-insensitivity</title> + <style> + @NAmespace x "http://www.w3.org/1999/xhtml"; + x|p { background: lime } + </style> + </head> + <body> + <p>This sentence should have a green background.</p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml new file mode 100644 index 000000000..cb04b9c8d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml @@ -0,0 +1,16 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1-block.xml"/> + <title>CSS Namespaces Test Suite: @namespace syntax with escapes</title> + <style> + @\N\000041 mes\pac\65 x "http://www.w3.org/1999/xhtml"; + x|p { background: lime } + </style> + </head> + <body> + <p>This sentence should have a green background.</p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml new file mode 100644 index 000000000..256286eeb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml @@ -0,0 +1,39 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-5.xml"/> + <title>CSS Namespaces Test Suite: @namespace default namespace syntax</title> + <style> + *|test { background:red } + </style> + <style> + @namespace url(test-a); + test { background:lime } + </style> + <style> + @namespace url('test-b'); + test { background:lime } + </style> + <style> + @namespace url("test-c"); + test { background:lime } + </style> + <style> + @namespace 'test-d'; + test { background:lime } + </style> + <style> + @namespace "test-e"; + test { background:lime } + </style> + </head> + <body> + <p><test xmlns="test-a">This sentence should have a green background.</test></p> + <p><test xmlns="test-b">This sentence should have a green background.</test></p> + <p><test xmlns="test-c">This sentence should have a green background.</test></p> + <p><test xmlns="test-d">This sentence should have a green background.</test></p> + <p><test xmlns="test-e">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml new file mode 100644 index 000000000..335bca98d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml @@ -0,0 +1,17 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: @namespace url() with escape</title> + <style> + @namespace u\00072l("test"); + *|test { background:red } + test { background: lime } + </style> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml new file mode 100644 index 000000000..164bea1ec --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml @@ -0,0 +1,27 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-5.xml"/> + <title>CSS Namespaces Test Suite: @namespace string and url() syntax</title> + <style> + test { background:red } + </style> + <style> + @namespace a url(test-a); + @namespace b url('test-b'); + @namespace c url("test-c"); + @namespace d 'test-d'; + @namespace e "test-e"; + a|test, b|test, c|test, d|test, e|test { background:lime } + </style> + </head> + <body> + <p><test xmlns="test-a">This sentence should have a green background.</test></p> + <p><test xmlns="test-b">This sentence should have a green background.</test></p> + <p><test xmlns="test-c">This sentence should have a green background.</test></p> + <p><test xmlns="test-d">This sentence should have a green background.</test></p> + <p><test xmlns="test-e">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml new file mode 100644 index 000000000..1c5975a85 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml @@ -0,0 +1,20 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <meta name="flags" content="invalid"/> + <title>CSS Namespaces Test Suite: invalid ordering of @namespace and @import</title> + <style> + @namespace x u\00072l("test"); + @import url("support/fail.css"); + @namespace url("test2"); + x|test { background:lime } + test { background:red } + </style> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml new file mode 100644 index 000000000..6022d1c7e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml @@ -0,0 +1,13 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: @namespace and @charset</title> + <link rel="stylesheet" href="support/syntax-007.css"/> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml new file mode 100644 index 000000000..4cb4e2339 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml @@ -0,0 +1,23 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-2.xml"/> + <title>CSS Namespaces Test Suite: escapes in prefix</title> + <style> + @namespace \72x url("test"); + t { background:red } + r\78|t { background:lime } + </style> + <style> + @namespace \032 url("test"); /* two spaces, see CSS 2.1, 4.1.3 */ + t2 { background:red } + \32|t2 { background:lime } + </style> + </head> + <body> + <p><t xmlns="test">This sentence should have a green background.</t></p> + <p><t2 xmlns="test">This sentence should have a green background.</t2></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml new file mode 100644 index 000000000..9f69fec67 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml @@ -0,0 +1,18 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: escaped vertical bar in qualified name</title> + <style> + @namespace x "test"; + test { background:red } + x|test { background:lime } + x\00007Ctest { background:red } + </style> + </head> + <body> + <p><test xmlns="test">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml new file mode 100644 index 000000000..e175a7bd3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml @@ -0,0 +1,36 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-3.xml"/> + <meta name="flags" content="invalid"/> + <title>CSS Namespaces Test Suite: duplicate @namespace declarations</title> + <style> + @namespace "1"; + @namespace dummy "yummy"; + @namespace "2"; + *|t { background:lime } + t { background:red } + </style> + <style> + @namespace "1"; + @namespace dummy "yummy"; + @namespace "2"; + *|t2 { background:red } + t2 { background:lime } + </style> + <style> + @namespace x "1"; + @namespace dummy "yummy"; + @namespace x "2"; + *|t3 { background:red } + x|t3 { background:lime } + </style> + </head> + <body> + <p><t xmlns="1">This sentence should have a green background.</t></p> + <p><t2 xmlns="2">This sentence should have a green background.</t2></p> + <p><t3 xmlns="2">This sentence should have a green background.</t3></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml new file mode 100644 index 000000000..e60cbe115 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml @@ -0,0 +1,47 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-6.xml"/> + <title>CSS Namespaces Test Suite: string comparison (no URI resolving)</title> + <style> + @namespace url("http://example.com/"); + *|t { background:lime } + t { background:red } + </style> + <style> + @namespace url("http://example.com/"); + *|t2 { background:lime } + t2 { background:red } + </style> + <style> + @namespace url("HTTP://example.com/"); + *|t3 { background:lime } + t3 { background:red } + </style> + <style> + @namespace url("http://example.COM/"); + *|t4 { background:lime } + t4 { background:red } + </style> + <style> + @namespace url("%41"); + *|t5 { background:lime } + t5 { background:red } + </style> + <style> + @namespace url("A"); + *|t6 { background:lime } + t6 { background:red } + </style> + </head> + <body> + <p><t xmlns="HTTP://example.com/">This sentence should have a green background.</t></p> + <p><t2 xmlns="http://example.COM/">This sentence should have a green background.</t2></p> + <p><t3 xmlns="http://example.com/">This sentence should have a green background.</t3></p> + <p><t4 xmlns="http://example.com/">This sentence should have a green background.</t4></p> + <p><t5 xmlns="A">This sentence should have a green background.</t5></p> + <p><t6 xmlns="%41">This sentence should have a green background.</t6></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml new file mode 100644 index 000000000..557ba5065 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml @@ -0,0 +1,31 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-3.xml"/> + <title>CSS Namespaces Test Suite: whitespace and comment handling</title> + <style> + test { background:red } + </style> + <style> + @namespace/* test */ + a + url( +test-a ); + + @namespace/**/b/**/url( 'test-b' +); + + @namespace c url("test-c" +); + + a|test, b|test, c|test { background:lime } + </style> + </head> + <body> + <p><test xmlns="test-a">This sentence should have a green background.</test></p> + <p><test xmlns="test-b">This sentence should have a green background.</test></p> + <p><test xmlns="test-c">This sentence should have a green background.</test></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml new file mode 100644 index 000000000..983e2e62d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml @@ -0,0 +1,44 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-5.xml"/> + <meta name="flags" content="invalid"/> + <title>CSS Namespaces Test Suite: @namespace error handling</title> + <style> + t, t2, t3, t4, t5 { background:red } + </style> + <style> + @namespace "test" {} + t { background:lime } + </style> + <style id="a">@namespace x "test</style> + <script> + document.getElementById("a").sheet.insertRule("x|t2 {background:lime }", 1) + </script> + <style> + @namespace "fail; + ; t3 { background:lime } + </style> + <style> + @namespace url('fail); + t4 { background:red !important; } + ); + t4 { background:lime } + </style> + <style> + @namespace url(test); + @namespace url('test' x); + t5 { background:lime } + </style> + </head> + <body> + <p><t>This sentence should have a green background.</t></p> + <p><t2 xmlns="test">This sentence should have a green background.</t2></p> + <p><t3>This sentence should have a green background.</t3></p> + <p><t4>This sentence should have a green background.</t4></p> + <p><t5 xmlns="test">This sentence should have a green background.</t5></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml new file mode 100644 index 000000000..d57d8991c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml @@ -0,0 +1,31 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-3.xml"/> + <meta name="flags" content="invalid"/> + <title>CSS Namespaces Test Suite: @namespace and invalid at-rules</title> + <style> + t, t2, t3 { background:red } + </style> + <style> + @import x {} + @namespace x "test"; + x|t { background:lime } + </style> + <style> + @namespace x "test-top"; + @foobar this is funny { not:sure } + @namespace "test"; + @foobar this is funner; + t2 { background:lime } + x|t3 { background:lime } + </style> + </head> + <body> + <p><t xmlns="test">This sentence should have a green background.</t></p> + <p><t2 xmlns="test">This sentence should have a green background.</t2></p> + <p><t3 xmlns="test-top">This sentence should have a green background.</t3></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml new file mode 100644 index 000000000..4460ddf55 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml @@ -0,0 +1,18 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/> + <link rel="author" title="Opera Software ASA" href="http://opera.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/> + <link rel="match" href="reftest/ref-lime-1.xml"/> + <title>CSS Namespaces Test Suite: invalid URI</title> + <style> + @namespace x url("test"); + @namespace x url("}x< >x{"); + t { background:lime } + x|t { background:red } + </style> + </head> + <body> + <p><t xmlns="test">This sentence should have a green background.</t></p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html new file mode 100644 index 000000000..d538eebdd --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (colors) + </title> + <meta name="assert" content=" + Invalid color values in referenced attributes are replaced by the fallback value + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: red; width: 200px; height: 200px; } + + #outer { background: attr(data-test color, green); } + + </style> + +</head> +<body> + + <div id="outer" data-test="qqffuutt"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html new file mode 100644 index 000000000..92258893b --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (colors) + </title> + <meta name="assert" content=" + When the fallback value of an attr() function is invalid, the delcaration is ignored. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; width: 200px; height: 200px; } + + #outer { background: attr(data-test color, qqffuutt); } + + </style> + +</head> +<body> + + <div id="outer" data-test="red"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html new file mode 100644 index 000000000..8817e6b94 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (colors) + </title> + <meta name="assert" content=" + The value of the reference attribute is used correctly in the layout when it's a color. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: red; width: 200px; height: 200px; } + + #outer { background: attr(data-test color); } + + </style> + +</head> +<body> + + <div id="outer" data-test="green"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html new file mode 100644 index 000000000..a56c144c3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (types) + </title> + <meta name="assert" content=" + When the type of an att() function is known and unexpected, the declaration is ingored + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; width: attr(data-test color); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="green"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html new file mode 100644 index 000000000..69766c0e1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (types) + </title> + <meta name="assert" content=" + When the type of an att() function is known and unexpected, the declaration is ignored + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; width: attr(data-test number); height: 200px; } + /* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */ + /* The reason for this is that most numbers aren't valid length */ + /* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */ + + </style> + +</head> +<body> + + <div id="outer" data-test="0"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html new file mode 100644 index 000000000..69766c0e1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (types) + </title> + <meta name="assert" content=" + When the type of an att() function is known and unexpected, the declaration is ignored + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; width: attr(data-test number); height: 200px; } + /* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */ + /* The reason for this is that most numbers aren't valid length */ + /* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */ + + </style> + +</head> +<body> + + <div id="outer" data-test="0"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html new file mode 100644 index 000000000..930832363 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (length) + </title> + <meta name="assert" content=" + When the value of referenced attribute isn't a valid length, the fallback value is unsed instead. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: attr(data-test length, 200px); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="qqffuutt"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html new file mode 100644 index 000000000..6a5d4dfe6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (length) + </title> + <meta name="assert" content=" + When the attr() fallback is an invalid length, the delcaration is correctly ignored. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; width: attr(data-test length, invalid); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="300px"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html new file mode 100644 index 000000000..b8a042fd4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (length) + </title> + <meta name="assert" content=" + The value of referenced attribute is used correctly as a length (even if it's 0). + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + #outer2 { background: red; } + + #outer { width: 200px; height: 200px; } + #outer2 { width: 200px; width: attr(data-test length); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer"></div> + <div id="outer2" data-test="0"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html new file mode 100644 index 000000000..fcdebc6fa --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (length) + </title> + <meta name="assert" content=" + The value of referenced attribute is used correctly as a length (even if it's 0). + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + #outer2 { background: red; } + + #outer { width: 200px; height: 200px; } + #outer2 { width: 200px; width: attr(data-test length, 0); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer"></div> + <div id="outer2" data-test="0"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html new file mode 100644 index 000000000..c78258ffe --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (length) + </title> + <meta name="assert" content=" + The value of referenced attribute is used correctly as a length. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: attr(data-test length); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="200px"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html new file mode 100644 index 000000000..93b2d2182 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attributes references (pixels) + </title> + <meta name="assert" content=" + When the value of the referenced attribute is not a pixel value, the fallback value is used instead. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: attr(data-test px, 200); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="300px"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html new file mode 100644 index 000000000..778697d0d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (pixels) + </title> + <meta name="assert" content=" + When the fallback of a pixel attribute reference is invalid, the declaration is ignored. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; width: attr(data-test px, 300px); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="300"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html new file mode 100644 index 000000000..ec96924a6 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Attribute references (pixels) + </title> + <meta name="assert" content=" + Attribute references for pixel values are replaced correctly at computed time. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: attr(data-test px); height: 200px; } + + </style> + +</head> +<body> + + <div id="outer" data-test="200"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html new file mode 100644 index 000000000..3e035fecf --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Calc() inside calc() + </title> + <meta name="assert" content=" + The calc() function notation is allowed inside a calc() notation. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; } + #outer { height: calc(calc(100%)); + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html new file mode 100644 index 000000000..af5996963 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units and Media Queries Test: + Calc function inside media queries + </title> + <meta name="assert" content=" + The calc() expression is supported in the min-width media query. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html { background: red; } + @media (min-width: calc(100px)) { + html { background: green; } + } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html new file mode 100644 index 000000000..4b7d7c870 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units and Media Queries Test: + Calc function inside media queries + </title> + <meta name="assert" content=" + The calc() expression is supported in the min-width media query properly (=with range clamping). + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html { background: red; } + @media (min-width: calc(-100px)) { /* should clamp to 0px */ + html { background: green; } + } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html new file mode 100644 index 000000000..a88416a2c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Range clamping into calc() expressions + </title> + <meta name="assert" content=" + A calc expression can evaluate to a value which is outside the validity range. + If it does, this value must be clamped into the range. + The declaration must not be ignored. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + /> + + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/> + + <link + rel="match" + href="reference/200-200-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { background: green; width: 200px; height: 200px; } + #outer { border-radius: 10px; border-radius: calc(-10px); } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html new file mode 100644 index 000000000..1d9033d7e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Calc() inside calc() + </title> + <meta name="assert" content=" + The calc() function notation is allowed inside a calc() notation. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; } + #outer { height: calc((((((((((((((((((((((((100%)))))))))))))))))))))))); } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html new file mode 100644 index 000000000..8bb0b893c --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Values and Units Test: support for the ch unit</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths"> +<meta name="flags" content=""> +<link rel="match" href="reference/ch-unit-001-ref.html"> +<meta name="assert" content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it."> +<style> +span { + background: green; + color: green; + top: 0; bottom: 0; + position: absolute; +} +div { + background: red; + color: red; + position: relative; + height: 10ch; + width: 5ch; + float: left; +} + +div + div { + width: auto; +} + +div + div span { + width: 5ch; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div><span>00000</span></div> + <div><span></span>00000</div> +</body> diff --git a/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html new file mode 100644 index 000000000..f38226651 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units + CSS Background and Borders Test: + Initial property and background-color + </title> + <meta name="assert" content=" + The initial keyword is supported on background-color. + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: green; overflow: hidden; } + #outer { position: absolute; top: 0px; left: 0px; red; width: 100%; height: 100%; } + #outer { background: red; background-color: initial; } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html new file mode 100644 index 000000000..f3da3ddb3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are interpolated correctly (reference rendering) + </title> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: white; overflow: hidden; } + #outer { position: relative; background: green; } + + #outer { width: 200px; height: 200px; } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html new file mode 100644 index 000000000..c70532129 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html @@ -0,0 +1 @@ +<html style="background: green"></html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html new file mode 100644 index 000000000..499d43094 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Values and Units Test Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<meta name="flags" content=""> +<style> +div { + background: green; + height: 10ch; + width: 10ch; + float: left; +} + +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html new file mode 100644 index 000000000..eb5b15d4a --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + + <title>CSS Reference File</title> + <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + #frameTest { width: 600px; height: 200px; border: 1px solid #000; } + + </style> + + <script type="text/javascript"> + var height = 200; + + function resizeReference() { + + var frameTest = document.getElementById('frameTest'); + + // let's resize the iframe vertically only, showing that the vh sizes is not updated. + if (height <= 300) { + + //frameTest.style.width = height++ + "px"; + frameTest.style.height = height++ + "px"; + + setTimeout(resizeReference, 10); + + } else { + + // uncomment the next line to see how a width resize triggers a layout recalculation + //frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px"; + + } + + } + + setTimeout(resizeReference, 10); + </script> + +</head> +<body> + +<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe-ref.html" frameborder="0"></iframe> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png Binary files differnew file mode 100644 index 000000000..b98ca0ba0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png Binary files differnew file mode 100644 index 000000000..cb397fb09 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png Binary files differnew file mode 100644 index 000000000..3f86b0721 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png Binary files differnew file mode 100644 index 000000000..9b9a03955 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png Binary files differnew file mode 100644 index 000000000..6bd73ac10 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png Binary files differnew file mode 100644 index 000000000..dd43faec5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 000000000..84f5b2a4f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png Binary files differnew file mode 100644 index 000000000..b3c8cf3eb --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png Binary files differnew file mode 100644 index 000000000..823f125b8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/README b/layout/reftests/w3c-css/received/css-values-3/support/README new file mode 100644 index 000000000..2e5f2ad07 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/README @@ -0,0 +1,28 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/layout/reftests/w3c-css/received/css-values-3/support/a-green.css b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css new file mode 100644 index 000000000..b0dbb071d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/b-green.css b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css new file mode 100644 index 000000000..a0473f5ca --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/c-red.css b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css new file mode 100644 index 000000000..d4ba5c64e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/cat.png b/layout/reftests/w3c-css/received/css-values-3/support/cat.png Binary files differnew file mode 100644 index 000000000..85dd73248 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/cat.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-green.css b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css new file mode 100644 index 000000000..537104e66 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-red.css b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css new file mode 100644 index 000000000..9945ef471 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 000000000..9b88fbd81 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 000000000..fcf4f3fd7 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 000000000..d454e3a63 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png Binary files differnew file mode 100644 index 000000000..8b4b25364 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png Binary files differnew file mode 100644 index 000000000..cf2eea6b4 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png Binary files differnew file mode 100644 index 000000000..9f4658366 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png Binary files differnew file mode 100644 index 000000000..a837eca22 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png Binary files differnew file mode 100644 index 000000000..841410280 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png Binary files differnew file mode 100644 index 000000000..0f522d787 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png Binary files differnew file mode 100644 index 000000000..e567f51b9 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-white.png b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png Binary files differnew file mode 100644 index 000000000..5853cbb23 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/README b/layout/reftests/w3c-css/received/css-values-3/support/support/README new file mode 100644 index 000000000..ea8cb9ef3 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/README @@ -0,0 +1,4 @@ +The swatch-green.png file in this directory is really a RED swatch, +and the swatch-red.png file is really a green swatch. + +This directory is used to test relative URIs.
\ No newline at end of file diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png Binary files differnew file mode 100644 index 000000000..1caf25c99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png Binary files differnew file mode 100644 index 000000000..0aa79b0c8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png Binary files differnew file mode 100644 index 000000000..bf2759634 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png Binary files differnew file mode 100644 index 000000000..0aa79b0c8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png Binary files differnew file mode 100644 index 000000000..55fd7fdae --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png Binary files differnew file mode 100644 index 000000000..d3cd498b5 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png Binary files differnew file mode 100644 index 000000000..1caf25c99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png Binary files differnew file mode 100644 index 000000000..0293ce89d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png Binary files differnew file mode 100644 index 000000000..1a7d4323d --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png Binary files differnew file mode 100644 index 000000000..1591aa0e2 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png Binary files differnew file mode 100644 index 000000000..904e24e99 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-br.png b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png Binary files differnew file mode 100644 index 000000000..f413ff5c1 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png Binary files differnew file mode 100644 index 000000000..e473bf80e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png Binary files differnew file mode 100644 index 000000000..82eeace7f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png Binary files differnew file mode 100644 index 000000000..f6ac0ef7e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png Binary files differnew file mode 100644 index 000000000..59843ae54 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html new file mode 100644 index 000000000..3a422d4ce --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are supported inside calc expressions. + </title> + <meta name="assert" content=" + Check that viewport units add correctly to percentages in calc() expressions + " /> + + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #target { position: absolute; background: green; width: calc(100vw + 50%); height: calc(100vh + 50%); top: -50%; left: -50%; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html new file mode 100644 index 000000000..0e98941ab --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are supported inside calc expressions. + </title> + <meta name="assert" content=" + Check that viewport units add correctly to pixels in calc() expressions + " /> + + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + /> + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html new file mode 100644 index 000000000..1affbd093 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + 0vh and 0vw are correctly treated as 0px + </title> + <meta name="assert" content=" + 0vh and 0vw are correctly treated as 0px + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; font-size: 100vw; } + #target { background: green; width: 1rem; height: 1em; font-size: 100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html new file mode 100644 index 000000000..99890e309 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are inherited properly + </title> + <meta name="assert" content=" + Viewport units are inherited properly + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #outer { position: relative; background: green; width: 50vw; height: 100vh; } + #inner { position: absolute; background: green; left: 100%; width: inherit; height: inherit; } + + </style> + +</head> +<body> + + <div id="outer"><div id="inner"></div></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html new file mode 100644 index 000000000..293d686c8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta name="assert" content=" + The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw) + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/> + <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + @keyframes anim { + from { width: 0%; height: 0%; } + to { width: 200vw; height: 200vh; } + } + + html, body { margin: 0px; padding: 0px; height: 100%; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html new file mode 100644 index 000000000..f07135743 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta name="assert" content=" + The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw) + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/> + <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + @keyframes anim { + from { width: 0px; height: 0px; } + to { width: 200vw; height: 200vh; } + } + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html new file mode 100644 index 000000000..d6671174e --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta name="assert" content=" + The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw) + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/> + <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + @keyframes anim { + from { width: 75vw; height: 75vh; } + to { width: 125vw; height: 125vh; } + } + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html new file mode 100644 index 000000000..c79ace6df --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewports units are supported in @viewport rules + </title> + <meta name="assert" content=" + Viewports units are supported in @viewport rules + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + /> + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" /> + <link rel="help" href="https://drafts.csswg.org/css-device-adapt-1/" /> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + @viewport { width: 1vw; } + + html { background: red; } + #target { background: green; width: 100vw; height: 100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html new file mode 100644 index 000000000..06b2375a8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewports units are supported in margin properties + </title> + <meta name="assert" content=" + Viewports units are supported in margin properties + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: green; } + #target { background: red; width: 100%; height: 100%; margin-left: -100vw; margin-top: -100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html new file mode 100644 index 000000000..4b06a09fc --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewports units are supported in transform properties + </title> + <meta name="assert" content=" + Viewports units are supported in transform properties + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + <link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + html { background: green; } + iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; } + + </style> + +</head> +<body> + + <iframe src="iframe/vh-support-transform-origin-iframe.html"></iframe> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html new file mode 100644 index 000000000..e273026a0 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewports units are supported in transform properties + </title> + <meta name="assert" content=" + Viewports units are supported in transform properties (translate) + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + <link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + html { background: green; } + iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; } + + </style> + +</head> +<body> + + <iframe src="iframe/vh-support-transform-translate-iframe.html"></iframe> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-support.html new file mode 100644 index 000000000..c65b5493f --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-support.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + Viewports units are supported in sizing properties + </title> + <meta name="assert" content=" + Viewports units are supported in sizing properties + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + #target { background: green; width: 100vw; height: 100vh; } + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html new file mode 100644 index 000000000..1c1bcd176 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title> + CSS Values and Units Test: + 0vh and 0vw are correctly treated as 0px + </title> + <meta name="assert" content=" + 0vh and 0vw are correctly treated as 0px + " /> + + <link + rel="author" + title="François REMY" + href="mailto:fremycompany.developer@yahoo.fr" + / > + + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + + <link + rel="match" + href="reference/all-green.html" + /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: green; } + #target { background: red; width: 0vw; height: 0vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html new file mode 100644 index 000000000..11b973a29 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html @@ -0,0 +1,53 @@ +<!-- Submitted from TestTWF Paris --> +<!DOCTYPE html> +<html> +<head> + <title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title> + <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> + <link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html"> + <meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change."> + <!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 --> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + #frameTest { width: 600px; height: 200px; border: 1px solid #000; } + + </style> + + <script type="text/javascript"> + var height = 200; + + function resizeReference() { + + var frameTest = document.getElementById('frameTest'); + + // let's resize the iframe vertically only, showing that the vh sizes is not updated. + if (height <= 300) { + + //frameTest.style.width = height++ + "px"; + frameTest.style.height = height++ + "px"; + + setTimeout(resizeReference, 10); + + } else { + + // uncomment the next line to see how a width resize triggers a layout recalculation + //frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px"; + + } + + } + + setTimeout(resizeReference, 10); + </script> + +</head> +<body> + +<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html new file mode 100644 index 000000000..89ed75a52 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + + <title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title> + <meta name="assert" content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8"> + <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units"> + <link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html"> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + /* the first test box has its vertical dimension is set to some vh units */ + #testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; } + + /* the second test box, with fixed height */ + #testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; } + + /* third box, changed by using CSS transition */ + #testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left; + transition-property: width, height; + transition-duration: 1.5s; + transition-delay: 0; + } + + /* the reference box, growing in both directions (height by js, width by vh unit */ + #referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; } + + p { clear: both; margin: 10px 0; } + + </style> + +</head> +<body> + +<p> + All boxes should end up the same size. The green box is the reference one. +</p> + +<div id="testBoxWithVhOnly"></div> +<div id="testBoxNotGrownHorizontallyByJS"></div> +<div id="testBoxWithTransition"></div> +<div id="referenceBoxGrownHorizontallyByJS"></div> + +<script type="text/javascript"> + + // In case this file was opened by mistake, redirects to proper test + if (window.top.location.href === document.location.href) { + + window.top.location.href = "vh_not_refreshing_on_chrome.html"; + + } + + function setDimension(id, dimension, value) { + + var element = document.getElementById(id); + + element.style[dimension] = value + "px"; + + } + + function animate() { + + var viewportHeight = document.documentElement.clientHeight; + + var sizeH = 20; + + var referenceDimension = Math.round(sizeH * viewportHeight / 100); + + setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension); + + setTimeout(animate, 20); + } + + setTimeout(animate, 20); + + var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style; + transitionedTestBoxStyle.height = "60px"; +</script> + +</body> +</html> diff --git a/layout/reftests/w3c-css/received/import.log b/layout/reftests/w3c-css/received/import.log new file mode 100644 index 000000000..66988c5a1 --- /dev/null +++ b/layout/reftests/w3c-css/received/import.log @@ -0,0 +1,466 @@ +Importing revision: d261d6def2373f64d94b113860b29d3e45a02bd1 +from repository: https://hg.csswg.org/test +Importing css-conditional-3/at-media-whitespace-optional-001.html to css-conditional-3/at-media-whitespace-optional-001.html +Importing css-conditional-3/reference/background-lime.html to css-conditional-3/reference/background-lime.html +Importing css-conditional-3/at-media-whitespace-optional-002.html to css-conditional-3/at-media-whitespace-optional-002.html +Importing css-conditional-3/at-supports-001.html to css-conditional-3/at-supports-001.html +Importing css-conditional-3/at-supports-001-ref.html to css-conditional-3/at-supports-001-ref.html +Importing css-conditional-3/at-supports-002.html to css-conditional-3/at-supports-002.html +Importing css-conditional-3/at-supports-003.html to css-conditional-3/at-supports-003.html +Importing css-conditional-3/at-supports-004.html to css-conditional-3/at-supports-004.html +Importing css-conditional-3/at-supports-005.html to css-conditional-3/at-supports-005.html +Importing css-conditional-3/at-supports-006.html to css-conditional-3/at-supports-006.html +Importing css-conditional-3/at-supports-007.html to css-conditional-3/at-supports-007.html +Importing css-conditional-3/at-supports-008.html to css-conditional-3/at-supports-008.html +Importing css-conditional-3/at-supports-009.html to css-conditional-3/at-supports-009.html +Importing css-conditional-3/at-supports-010.html to css-conditional-3/at-supports-010.html +Importing css-conditional-3/at-supports-011.html to css-conditional-3/at-supports-011.html +Importing css-conditional-3/at-supports-012.html to css-conditional-3/at-supports-012.html +Importing css-conditional-3/at-supports-013.html to css-conditional-3/at-supports-013.html +Importing css-conditional-3/at-supports-014.html to css-conditional-3/at-supports-014.html +Importing css-conditional-3/at-supports-015.html to css-conditional-3/at-supports-015.html +Importing css-conditional-3/at-supports-016.html to css-conditional-3/at-supports-016.html +Importing css-conditional-3/at-supports-017.html to css-conditional-3/at-supports-017.html +Importing css-conditional-3/at-supports-018.html to css-conditional-3/at-supports-018.html +Importing css-conditional-3/at-supports-019.html to css-conditional-3/at-supports-019.html +Importing css-conditional-3/at-supports-020.html to css-conditional-3/at-supports-020.html +Importing css-conditional-3/at-supports-021.html to css-conditional-3/at-supports-021.html +Importing css-conditional-3/at-supports-022.html to css-conditional-3/at-supports-022.html +Importing css-conditional-3/at-supports-023.html to css-conditional-3/at-supports-023.html +Importing css-conditional-3/at-supports-024.html to css-conditional-3/at-supports-024.html +Importing css-conditional-3/at-supports-025.html to css-conditional-3/at-supports-025.html +Importing css-conditional-3/at-supports-026.html to css-conditional-3/at-supports-026.html +Importing css-conditional-3/at-supports-027.html to css-conditional-3/at-supports-027.html +Importing css-conditional-3/at-supports-027-ref.html to css-conditional-3/at-supports-027-ref.html +Importing css-conditional-3/at-supports-028.html to css-conditional-3/at-supports-028.html +Importing css-conditional-3/at-supports-029.html to css-conditional-3/at-supports-029.html +Importing css-conditional-3/at-supports-030.html to css-conditional-3/at-supports-030.html +Importing css-conditional-3/at-supports-031.html to css-conditional-3/at-supports-031.html +Importing css-conditional-3/at-supports-032.html to css-conditional-3/at-supports-032.html +Importing css-conditional-3/at-supports-033.html to css-conditional-3/at-supports-033.html +Importing css-conditional-3/at-supports-034.html to css-conditional-3/at-supports-034.html +Importing css-conditional-3/at-supports-035.html to css-conditional-3/at-supports-035.html +Importing css-conditional-3/at-supports-036.html to css-conditional-3/at-supports-036.html +Importing css-conditional-3/at-supports-037.html to css-conditional-3/at-supports-037.html +Importing css-conditional-3/at-supports-038.html to css-conditional-3/at-supports-038.html +Importing css-conditional-3/at-supports-039.html to css-conditional-3/at-supports-039.html +Importing css-multicol-1/multicol-basic-001.html to css-multicol-1/multicol-basic-001.html +Importing css-multicol-1/support/1x1-green.png to css-multicol-1/support/1x1-green.png +Importing css-multicol-1/support/1x1-lime.png to css-multicol-1/support/1x1-lime.png +Importing css-multicol-1/support/1x1-maroon.png to css-multicol-1/support/1x1-maroon.png +Importing css-multicol-1/support/1x1-navy.png to css-multicol-1/support/1x1-navy.png +Importing css-multicol-1/support/1x1-red.png to css-multicol-1/support/1x1-red.png +Importing css-multicol-1/support/1x1-white.png to css-multicol-1/support/1x1-white.png +Importing css-multicol-1/support/60x60-gg-rr.png to css-multicol-1/support/60x60-gg-rr.png +Importing css-multicol-1/support/60x60-green.png to css-multicol-1/support/60x60-green.png +Importing css-multicol-1/support/60x60-red.png to css-multicol-1/support/60x60-red.png +Importing css-multicol-1/support/a-green.css to css-multicol-1/support/a-green.css +Importing css-multicol-1/support/b-green.css to css-multicol-1/support/b-green.css +Importing css-multicol-1/support/black20x20.png to css-multicol-1/support/black20x20.png +Importing css-multicol-1/support/c-red.css to css-multicol-1/support/c-red.css +Importing css-multicol-1/support/cat.png to css-multicol-1/support/cat.png +Importing css-multicol-1/support/import-green.css to css-multicol-1/support/import-green.css +Importing css-multicol-1/support/import-red.css to css-multicol-1/support/import-red.css +Importing css-multicol-1/support/pattern-grg-rgr-grg.png to css-multicol-1/support/pattern-grg-rgr-grg.png +Importing css-multicol-1/support/pattern-grg-rrg-rgg.png to css-multicol-1/support/pattern-grg-rrg-rgg.png +Importing css-multicol-1/support/pattern-rgr-grg-rgr.png to css-multicol-1/support/pattern-rgr-grg-rgr.png +Importing css-multicol-1/support/pattern-tr.png to css-multicol-1/support/pattern-tr.png +Importing css-multicol-1/support/red20x20.png to css-multicol-1/support/red20x20.png +Importing css-multicol-1/support/square-purple.png to css-multicol-1/support/square-purple.png +Importing css-multicol-1/support/square-teal.png to css-multicol-1/support/square-teal.png +Importing css-multicol-1/support/square-white.png to css-multicol-1/support/square-white.png +Importing css-multicol-1/support/swatch-blue.png to css-multicol-1/support/swatch-blue.png +Importing css-multicol-1/support/swatch-gray.png to css-multicol-1/support/swatch-gray.png +Importing css-multicol-1/support/swatch-green.png to css-multicol-1/support/swatch-green.png +Importing css-multicol-1/support/swatch-lime.png to css-multicol-1/support/swatch-lime.png +Importing css-multicol-1/support/swatch-navy.png to css-multicol-1/support/swatch-navy.png +Importing css-multicol-1/support/swatch-orange.png to css-multicol-1/support/swatch-orange.png +Importing css-multicol-1/support/swatch-pink.png to css-multicol-1/support/swatch-pink.png +Importing css-multicol-1/support/swatch-purple.png to css-multicol-1/support/swatch-purple.png +Importing css-multicol-1/support/swatch-red.png to css-multicol-1/support/swatch-red.png +Importing css-multicol-1/support/swatch-white.png to css-multicol-1/support/swatch-white.png +Importing css-multicol-1/support/swatch-yellow.png to css-multicol-1/support/swatch-yellow.png +Importing css-multicol-1/support/test-bl.png to css-multicol-1/support/test-bl.png +Importing css-multicol-1/support/test-br.png to css-multicol-1/support/test-br.png +Importing css-multicol-1/support/test-outer.png to css-multicol-1/support/test-outer.png +Importing css-multicol-1/support/test-tl.png to css-multicol-1/support/test-tl.png +Importing css-multicol-1/support/test-tr.png to css-multicol-1/support/test-tr.png +Importing css-multicol-1/reference/multicol-basic-ref.html to css-multicol-1/reference/multicol-basic-ref.html +Importing css-multicol-1/multicol-basic-002.html to css-multicol-1/multicol-basic-002.html +Importing css-multicol-1/multicol-basic-003.html to css-multicol-1/multicol-basic-003.html +Importing css-multicol-1/multicol-basic-004.html to css-multicol-1/multicol-basic-004.html +Importing css-multicol-1/multicol-block-clip-001.xht to css-multicol-1/multicol-block-clip-001.xht +Importing css-multicol-1/multicol-block-clip-001-ref.xht to css-multicol-1/multicol-block-clip-001-ref.xht +Importing css-multicol-1/multicol-block-clip-002.xht to css-multicol-1/multicol-block-clip-002.xht +Importing css-multicol-1/multicol-block-clip-002-ref.xht to css-multicol-1/multicol-block-clip-002-ref.xht +Importing css-multicol-1/multicol-br-inside-avoidcolumn-001.xht to css-multicol-1/multicol-br-inside-avoidcolumn-001.xht +Importing css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht to css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht +Importing css-multicol-1/multicol-break-000.xht to css-multicol-1/multicol-break-000.xht +Importing css-multicol-1/multicol-break-000-ref.xht to css-multicol-1/multicol-break-000-ref.xht +Importing css-multicol-1/multicol-break-001.xht to css-multicol-1/multicol-break-001.xht +Importing css-multicol-1/multicol-break-001-ref.xht to css-multicol-1/multicol-break-001-ref.xht +Importing css-multicol-1/multicol-clip-001.xht to css-multicol-1/multicol-clip-001.xht +Importing css-multicol-1/multicol-clip-001-ref.xht to css-multicol-1/multicol-clip-001-ref.xht +Importing css-multicol-1/multicol-clip-002.xht to css-multicol-1/multicol-clip-002.xht +Importing css-multicol-1/multicol-clip-002-ref.xht to css-multicol-1/multicol-clip-002-ref.xht +Importing css-multicol-1/multicol-collapsing-001.xht to css-multicol-1/multicol-collapsing-001.xht +Importing css-multicol-1/multicol-collapsing-001-ref.xht to css-multicol-1/multicol-collapsing-001-ref.xht +Importing css-multicol-1/multicol-columns-001.xht to css-multicol-1/multicol-columns-001.xht +Importing css-multicol-1/multicol-columns-001-ref.xht to css-multicol-1/multicol-columns-001-ref.xht +Importing css-multicol-1/multicol-columns-002.xht to css-multicol-1/multicol-columns-002.xht +Importing css-multicol-1/multicol-columns-003.xht to css-multicol-1/multicol-columns-003.xht +Importing css-multicol-1/multicol-columns-004.xht to css-multicol-1/multicol-columns-004.xht +Importing css-multicol-1/multicol-columns-005.xht to css-multicol-1/multicol-columns-005.xht +Importing css-multicol-1/multicol-columns-006.xht to css-multicol-1/multicol-columns-006.xht +Importing css-multicol-1/multicol-columns-007.xht to css-multicol-1/multicol-columns-007.xht +Importing css-multicol-1/multicol-columns-invalid-001.xht to css-multicol-1/multicol-columns-invalid-001.xht +Importing css-multicol-1/multicol-columns-invalid-001-ref.xht to css-multicol-1/multicol-columns-invalid-001-ref.xht +Importing css-multicol-1/multicol-columns-invalid-002.xht to css-multicol-1/multicol-columns-invalid-002.xht +Importing css-multicol-1/multicol-columns-toolong-001.xht to css-multicol-1/multicol-columns-toolong-001.xht +Importing css-multicol-1/multicol-containing-001.xht to css-multicol-1/multicol-containing-001.xht +Importing css-multicol-1/multicol-containing-001-ref.xht to css-multicol-1/multicol-containing-001-ref.xht +Importing css-multicol-1/multicol-containing-002.xht to css-multicol-1/multicol-containing-002.xht +Importing css-multicol-1/multicol-containing-002-ref.xht to css-multicol-1/multicol-containing-002-ref.xht +Importing css-multicol-1/multicol-count-001.xht to css-multicol-1/multicol-count-001.xht +Importing css-multicol-1/multicol-count-002.xht to css-multicol-1/multicol-count-002.xht +Importing css-multicol-1/multicol-count-002-ref.xht to css-multicol-1/multicol-count-002-ref.xht +Importing css-multicol-1/multicol-count-computed-001.xht to css-multicol-1/multicol-count-computed-001.xht +Importing css-multicol-1/multicol-count-computed-ref.xht to css-multicol-1/multicol-count-computed-ref.xht +Importing css-multicol-1/multicol-count-computed-002.xht to css-multicol-1/multicol-count-computed-002.xht +Importing css-multicol-1/multicol-count-computed-2-ref.xht to css-multicol-1/multicol-count-computed-2-ref.xht +Importing css-multicol-1/multicol-count-computed-003.xht to css-multicol-1/multicol-count-computed-003.xht +Importing css-multicol-1/multicol-count-computed-003-ref.xht to css-multicol-1/multicol-count-computed-003-ref.xht +Importing css-multicol-1/multicol-count-computed-004.xht to css-multicol-1/multicol-count-computed-004.xht +Importing css-multicol-1/multicol-count-computed-004-ref.xht to css-multicol-1/multicol-count-computed-004-ref.xht +Importing css-multicol-1/multicol-count-computed-005.xht to css-multicol-1/multicol-count-computed-005.xht +Importing css-multicol-1/multicol-count-large-001.xht to css-multicol-1/multicol-count-large-001.xht +Importing css-multicol-1/multicol-count-large-ref.xht to css-multicol-1/multicol-count-large-ref.xht +Importing css-multicol-1/multicol-count-large-002.xht to css-multicol-1/multicol-count-large-002.xht +Importing css-multicol-1/multicol-count-large-2-ref.xht to css-multicol-1/multicol-count-large-2-ref.xht +Importing css-multicol-1/multicol-count-negative-001.xht to css-multicol-1/multicol-count-negative-001.xht +Importing css-multicol-1/multicol-count-negative-002.xht to css-multicol-1/multicol-count-negative-002.xht +Importing css-multicol-1/multicol-count-non-integer-001.xht to css-multicol-1/multicol-count-non-integer-001.xht +Importing css-multicol-1/multicol-count-non-integer-002.xht to css-multicol-1/multicol-count-non-integer-002.xht +Importing css-multicol-1/multicol-count-non-integer-003.xht to css-multicol-1/multicol-count-non-integer-003.xht +Importing css-multicol-1/multicol-fill-000.xht to css-multicol-1/multicol-fill-000.xht +Importing css-multicol-1/multicol-fill-000-ref.xht to css-multicol-1/multicol-fill-000-ref.xht +Importing css-multicol-1/multicol-fill-001.xht to css-multicol-1/multicol-fill-001.xht +Importing css-multicol-1/multicol-fill-001-ref.xht to css-multicol-1/multicol-fill-001-ref.xht +Importing css-multicol-1/multicol-fill-auto-001.xht to css-multicol-1/multicol-fill-auto-001.xht +Importing css-multicol-1/multicol-fill-auto-001-ref.xht to css-multicol-1/multicol-fill-auto-001-ref.xht +Importing css-multicol-1/multicol-fill-auto-002.xht to css-multicol-1/multicol-fill-auto-002.xht +Importing css-multicol-1/multicol-fill-auto-002-ref.xht to css-multicol-1/multicol-fill-auto-002-ref.xht +Importing css-multicol-1/multicol-fill-auto-003.xht to css-multicol-1/multicol-fill-auto-003.xht +Importing css-multicol-1/multicol-fill-auto-003-ref.xht to css-multicol-1/multicol-fill-auto-003-ref.xht +Importing css-multicol-1/multicol-fill-auto-block-children-001.xht to css-multicol-1/multicol-fill-auto-block-children-001.xht +Importing css-multicol-1/multicol-fill-auto-block-children-ref.xht to css-multicol-1/multicol-fill-auto-block-children-ref.xht +Importing css-multicol-1/multicol-fill-auto-block-children-002.xht to css-multicol-1/multicol-fill-auto-block-children-002.xht +Importing css-multicol-1/multicol-fill-auto-block-children-002-ref.xht to css-multicol-1/multicol-fill-auto-block-children-002-ref.xht +Importing css-multicol-1/multicol-fill-auto.xht to css-multicol-1/multicol-fill-auto.xht +Importing css-multicol-1/multicol-fill-ref.xht to css-multicol-1/multicol-fill-ref.xht +Importing css-multicol-1/multicol-fill-balance-001.xht to css-multicol-1/multicol-fill-balance-001.xht +Importing css-multicol-1/multicol-fill-balance-001-ref.xht to css-multicol-1/multicol-fill-balance-001-ref.xht +Importing css-multicol-1/multicol-gap-000.xht to css-multicol-1/multicol-gap-000.xht +Importing css-multicol-1/multicol-gap-000-ref.xht to css-multicol-1/multicol-gap-000-ref.xht +Importing css-multicol-1/multicol-gap-001.xht to css-multicol-1/multicol-gap-001.xht +Importing css-multicol-1/multicol-gap-001-ref.xht to css-multicol-1/multicol-gap-001-ref.xht +Importing css-multicol-1/multicol-gap-002.xht to css-multicol-1/multicol-gap-002.xht +Importing css-multicol-1/multicol-gap-002-ref.xht to css-multicol-1/multicol-gap-002-ref.xht +Importing css-multicol-1/multicol-gap-003.xht to css-multicol-1/multicol-gap-003.xht +Importing css-multicol-1/multicol-gap-fraction-001.xht to css-multicol-1/multicol-gap-fraction-001.xht +Importing css-multicol-1/multicol-gap-fraction-001-ref.xht to css-multicol-1/multicol-gap-fraction-001-ref.xht +Importing css-multicol-1/multicol-gap-large-001.xht to css-multicol-1/multicol-gap-large-001.xht +Importing css-multicol-1/multicol-gap-large-001-ref.xht to css-multicol-1/multicol-gap-large-001-ref.xht +Importing css-multicol-1/multicol-gap-large-002.xht to css-multicol-1/multicol-gap-large-002.xht +Importing css-multicol-1/multicol-gap-large-002-ref.xht to css-multicol-1/multicol-gap-large-002-ref.xht +Importing css-multicol-1/multicol-gap-negative-001.xht to css-multicol-1/multicol-gap-negative-001.xht +Importing css-multicol-1/multicol-height-001.xht to css-multicol-1/multicol-height-001.xht +Importing css-multicol-1/multicol-height-001-ref.xht to css-multicol-1/multicol-height-001-ref.xht +Importing css-multicol-1/multicol-height-block-child-001.xht to css-multicol-1/multicol-height-block-child-001.xht +Importing css-multicol-1/multicol-height-block-child-001-ref.xht to css-multicol-1/multicol-height-block-child-001-ref.xht +Importing css-multicol-1/multicol-inherit-001.xht to css-multicol-1/multicol-inherit-001.xht +Importing css-multicol-1/multicol-inherit-001-ref.xht to css-multicol-1/multicol-inherit-001-ref.xht +Importing css-multicol-1/multicol-inherit-002.xht to css-multicol-1/multicol-inherit-002.xht +Importing css-multicol-1/multicol-inherit-002-ref.xht to css-multicol-1/multicol-inherit-002-ref.xht +Importing css-multicol-1/multicol-inherit-003.xht to css-multicol-1/multicol-inherit-003.xht +Importing css-multicol-1/multicol-inherit-3-ref.xht to css-multicol-1/multicol-inherit-3-ref.xht +Importing css-multicol-1/multicol-inherit-004.xht to css-multicol-1/multicol-inherit-004.xht +Importing css-multicol-1/multicol-inherit-4-ref.xht to css-multicol-1/multicol-inherit-4-ref.xht +Importing css-multicol-1/multicol-list-item-001.xht to css-multicol-1/multicol-list-item-001.xht +Importing css-multicol-1/multicol-list-item-001-ref.xht to css-multicol-1/multicol-list-item-001-ref.xht +Importing css-multicol-1/multicol-margin-001.xht to css-multicol-1/multicol-margin-001.xht +Importing reference/ref-filled-green-100px-square.xht to reference/ref-filled-green-100px-square.xht +Importing css-multicol-1/multicol-margin-002.xht to css-multicol-1/multicol-margin-002.xht +Importing css-multicol-1/multicol-margin-child-001.xht to css-multicol-1/multicol-margin-child-001.xht +Importing css-multicol-1/multicol-margin-child-001-ref.xht to css-multicol-1/multicol-margin-child-001-ref.xht +Importing css-multicol-1/multicol-nested-002.xht to css-multicol-1/multicol-nested-002.xht +Importing css-multicol-1/multicol-nested-002-ref.xht to css-multicol-1/multicol-nested-002-ref.xht +Importing css-multicol-1/multicol-nested-005.xht to css-multicol-1/multicol-nested-005.xht +Importing css-multicol-1/multicol-nested-005-ref.xht to css-multicol-1/multicol-nested-005-ref.xht +Importing css-multicol-1/multicol-nested-column-rule-001.xht to css-multicol-1/multicol-nested-column-rule-001.xht +Importing css-multicol-1/multicol-nested-column-rule-001-ref.xht to css-multicol-1/multicol-nested-column-rule-001-ref.xht +Importing css-multicol-1/multicol-nested-margin-001.xht to css-multicol-1/multicol-nested-margin-001.xht +Importing css-multicol-1/multicol-nested-margin-001-ref.xht to css-multicol-1/multicol-nested-margin-001-ref.xht +Importing css-multicol-1/multicol-nested-margin-002.xht to css-multicol-1/multicol-nested-margin-002.xht +Importing css-multicol-1/multicol-nested-margin-002-ref.xht to css-multicol-1/multicol-nested-margin-002-ref.xht +Importing css-multicol-1/multicol-nested-margin-003.xht to css-multicol-1/multicol-nested-margin-003.xht +Importing css-multicol-1/multicol-nested-margin-003-ref.xht to css-multicol-1/multicol-nested-margin-003-ref.xht +Importing css-multicol-1/multicol-nested-margin-004.xht to css-multicol-1/multicol-nested-margin-004.xht +Importing css-multicol-1/multicol-nested-margin-004-ref.xht to css-multicol-1/multicol-nested-margin-004-ref.xht +Importing css-multicol-1/multicol-nested-margin-005.xht to css-multicol-1/multicol-nested-margin-005.xht +Importing css-multicol-1/multicol-overflow-000.xht to css-multicol-1/multicol-overflow-000.xht +Importing css-multicol-1/multicol-overflow-000-ref.xht to css-multicol-1/multicol-overflow-000-ref.xht +Importing css-multicol-1/multicol-overflowing-001.xht to css-multicol-1/multicol-overflowing-001.xht +Importing css-multicol-1/multicol-overflowing-001-ref.xht to css-multicol-1/multicol-overflowing-001-ref.xht +Importing css-multicol-1/multicol-red.png to css-multicol-1/multicol-red.png +Importing css-multicol-1/multicol-reduce-000.xht to css-multicol-1/multicol-reduce-000.xht +Importing css-multicol-1/multicol-reduce-000-ref.xht to css-multicol-1/multicol-reduce-000-ref.xht +Importing css-multicol-1/multicol-rule-000.xht to css-multicol-1/multicol-rule-000.xht +Importing css-multicol-1/multicol-rule-000-ref.xht to css-multicol-1/multicol-rule-000-ref.xht +Importing css-multicol-1/multicol-rule-001.xht to css-multicol-1/multicol-rule-001.xht +Importing css-multicol-1/multicol-rule-001-ref.xht to css-multicol-1/multicol-rule-001-ref.xht +Importing css-multicol-1/multicol-rule-002.xht to css-multicol-1/multicol-rule-002.xht +Importing css-multicol-1/multicol-rule-ref.xht to css-multicol-1/multicol-rule-ref.xht +Importing css-multicol-1/multicol-rule-003.xht to css-multicol-1/multicol-rule-003.xht +Importing css-multicol-1/multicol-rule-003-ref.xht to css-multicol-1/multicol-rule-003-ref.xht +Importing css-multicol-1/multicol-rule-004.xht to css-multicol-1/multicol-rule-004.xht +Importing css-multicol-1/multicol-rule-004-ref.xht to css-multicol-1/multicol-rule-004-ref.xht +Importing css-multicol-1/multicol-rule-color-001.xht to css-multicol-1/multicol-rule-color-001.xht +Importing css-multicol-1/multicol-rule-color-001-ref.xht to css-multicol-1/multicol-rule-color-001-ref.xht +Importing css-multicol-1/multicol-rule-color-inherit-001.xht to css-multicol-1/multicol-rule-color-inherit-001.xht +Importing css-multicol-1/multicol-rule-color-inherit-001-ref.xht to css-multicol-1/multicol-rule-color-inherit-001-ref.xht +Importing css-multicol-1/multicol-rule-color-inherit-002.xht to css-multicol-1/multicol-rule-color-inherit-002.xht +Importing css-multicol-1/multicol-rule-dashed-000.xht to css-multicol-1/multicol-rule-dashed-000.xht +Importing css-multicol-1/multicol-rule-dashed-000-ref.xht to css-multicol-1/multicol-rule-dashed-000-ref.xht +Importing css-multicol-1/multicol-rule-dotted-000.xht to css-multicol-1/multicol-rule-dotted-000.xht +Importing css-multicol-1/multicol-rule-dotted-000-ref.xht to css-multicol-1/multicol-rule-dotted-000-ref.xht +Importing css-multicol-1/multicol-rule-double-000.xht to css-multicol-1/multicol-rule-double-000.xht +Importing css-multicol-1/multicol-rule-double-000-ref.xht to css-multicol-1/multicol-rule-double-000-ref.xht +Importing css-multicol-1/multicol-rule-fraction-001.xht to css-multicol-1/multicol-rule-fraction-001.xht +Importing css-multicol-1/multicol-rule-fraction-001-ref.xht to css-multicol-1/multicol-rule-fraction-001-ref.xht +Importing css-multicol-1/multicol-rule-fraction-002.xht to css-multicol-1/multicol-rule-fraction-002.xht +Importing css-multicol-1/multicol-rule-fraction-002-ref.xht to css-multicol-1/multicol-rule-fraction-002-ref.xht +Importing css-multicol-1/multicol-rule-fraction-003.xht to css-multicol-1/multicol-rule-fraction-003.xht +Importing css-multicol-1/multicol-rule-fraction-3-ref.xht to css-multicol-1/multicol-rule-fraction-3-ref.xht +Importing css-multicol-1/multicol-rule-groove-000.xht to css-multicol-1/multicol-rule-groove-000.xht +Importing css-multicol-1/multicol-rule-groove-000-ref.xht to css-multicol-1/multicol-rule-groove-000-ref.xht +Importing css-multicol-1/multicol-rule-hidden-000.xht to css-multicol-1/multicol-rule-hidden-000.xht +Importing css-multicol-1/multicol-rule-hidden-000-ref.xht to css-multicol-1/multicol-rule-hidden-000-ref.xht +Importing css-multicol-1/multicol-rule-inset-000.xht to css-multicol-1/multicol-rule-inset-000.xht +Importing css-multicol-1/multicol-rule-ridge-000-ref.xht to css-multicol-1/multicol-rule-ridge-000-ref.xht +Importing css-multicol-1/multicol-rule-large-001.xht to css-multicol-1/multicol-rule-large-001.xht +Importing css-multicol-1/multicol-rule-large-001-ref.xht to css-multicol-1/multicol-rule-large-001-ref.xht +Importing css-multicol-1/multicol-rule-none-000.xht to css-multicol-1/multicol-rule-none-000.xht +Importing css-multicol-1/multicol-rule-outset-000.xht to css-multicol-1/multicol-rule-outset-000.xht +Importing css-multicol-1/multicol-rule-percent-001.xht to css-multicol-1/multicol-rule-percent-001.xht +Importing css-multicol-1/multicol-rule-px-001.xht to css-multicol-1/multicol-rule-px-001.xht +Importing css-multicol-1/multicol-rule-ridge-000.xht to css-multicol-1/multicol-rule-ridge-000.xht +Importing css-multicol-1/multicol-rule-samelength-001.xht to css-multicol-1/multicol-rule-samelength-001.xht +Importing css-multicol-1/multicol-rule-samelength-001-ref.xht to css-multicol-1/multicol-rule-samelength-001-ref.xht +Importing css-multicol-1/multicol-rule-shorthand-001.xht to css-multicol-1/multicol-rule-shorthand-001.xht +Warning: href attribute found empty in ../../../../csswg-test/css-multicol-1\multicol-rule-shorthand-2.xht +Importing css-multicol-1/multicol-rule-solid-000.xht to css-multicol-1/multicol-rule-solid-000.xht +Importing css-multicol-1/multicol-rule-solid-000-ref.xht to css-multicol-1/multicol-rule-solid-000-ref.xht +Importing css-multicol-1/multicol-rule-stacking-001.xht to css-multicol-1/multicol-rule-stacking-001.xht +Importing css-multicol-1/multicol-rule-stacking-ref.xht to css-multicol-1/multicol-rule-stacking-ref.xht +Importing css-multicol-1/multicol-rule-style-groove-001.xht to css-multicol-1/multicol-rule-style-groove-001.xht +Importing css-multicol-1/multicol-rule-style-groove-001-ref.xht to css-multicol-1/multicol-rule-style-groove-001-ref.xht +Importing css-multicol-1/multicol-rule-style-inset-001.xht to css-multicol-1/multicol-rule-style-inset-001.xht +Importing css-multicol-1/multicol-rule-style-ridge-001-ref.xht to css-multicol-1/multicol-rule-style-ridge-001-ref.xht +Importing css-multicol-1/multicol-rule-style-outset-001.xht to css-multicol-1/multicol-rule-style-outset-001.xht +Importing css-multicol-1/multicol-rule-style-ridge-001.xht to css-multicol-1/multicol-rule-style-ridge-001.xht +Importing css-multicol-1/multicol-shorthand-001.xht to css-multicol-1/multicol-shorthand-001.xht +Importing css-multicol-1/multicol-span-000.xht to css-multicol-1/multicol-span-000.xht +Importing css-multicol-1/multicol-span-000-ref.xht to css-multicol-1/multicol-span-000-ref.xht +Importing css-multicol-1/multicol-span-all-001.xht to css-multicol-1/multicol-span-all-001.xht +Importing css-multicol-1/multicol-span-all-001-ref.xht to css-multicol-1/multicol-span-all-001-ref.xht +Importing css-multicol-1/multicol-span-all-002.xht to css-multicol-1/multicol-span-all-002.xht +Importing css-multicol-1/multicol-span-all-002-ref.xht to css-multicol-1/multicol-span-all-002-ref.xht +Importing css-multicol-1/multicol-span-all-003.xht to css-multicol-1/multicol-span-all-003.xht +Importing css-multicol-1/multicol-span-all-block-sibling-003.xht to css-multicol-1/multicol-span-all-block-sibling-003.xht +Importing css-multicol-1/multicol-span-all-block-sibling-3-ref.xht to css-multicol-1/multicol-span-all-block-sibling-3-ref.xht +Importing css-multicol-1/multicol-span-all-child-001.xht to css-multicol-1/multicol-span-all-child-001.xht +Importing css-multicol-1/multicol-span-all-child-001-ref.xht to css-multicol-1/multicol-span-all-child-001-ref.xht +Importing css-multicol-1/multicol-span-all-child-002.xht to css-multicol-1/multicol-span-all-child-002.xht +Importing css-multicol-1/multicol-span-all-child-002-ref.xht to css-multicol-1/multicol-span-all-child-002-ref.xht +Importing css-multicol-1/multicol-span-all-margin-001.xht to css-multicol-1/multicol-span-all-margin-001.xht +Importing css-multicol-1/multicol-span-all-margin-001-ref.xht to css-multicol-1/multicol-span-all-margin-001-ref.xht +Importing css-multicol-1/multicol-span-all-margin-002.xht to css-multicol-1/multicol-span-all-margin-002.xht +Importing css-multicol-1/multicol-span-all-margin-002-ref.xht to css-multicol-1/multicol-span-all-margin-002-ref.xht +Importing css-multicol-1/multicol-span-all-margin-bottom-001.xht to css-multicol-1/multicol-span-all-margin-bottom-001.xht +Importing css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht to css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht +Importing css-multicol-1/multicol-span-all-margin-nested-001.xht to css-multicol-1/multicol-span-all-margin-nested-001.xht +Importing css-multicol-1/multicol-span-all-margin-nested-001-ref.xht to css-multicol-1/multicol-span-all-margin-nested-001-ref.xht +Importing css-multicol-1/multicol-span-all-margin-nested-002.xht to css-multicol-1/multicol-span-all-margin-nested-002.xht +Importing css-multicol-1/multicol-span-all-margin-nested-003.xht to css-multicol-1/multicol-span-all-margin-nested-003.xht +Importing css-multicol-1/multicol-span-all-margin-nested-3-ref.xht to css-multicol-1/multicol-span-all-margin-nested-3-ref.xht +Importing css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht to css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht +Importing css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht to css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht +Importing css-multicol-1/multicol-span-float-001.xht to css-multicol-1/multicol-span-float-001.xht +Importing css-multicol-1/multicol-span-float-001-ref.xht to css-multicol-1/multicol-span-float-001-ref.xht +Importing css-multicol-1/multicol-span-none-001.xht to css-multicol-1/multicol-span-none-001.xht +Importing css-multicol-1/multicol-span-none-001-ref.xht to css-multicol-1/multicol-span-none-001-ref.xht +Importing css-multicol-1/multicol-table-cell-001.xht to css-multicol-1/multicol-table-cell-001.xht +Importing css-multicol-1/multicol-table-cell-001-ref.xht to css-multicol-1/multicol-table-cell-001-ref.xht +Importing css-multicol-1/multicol-table-cell-height-001.xht to css-multicol-1/multicol-table-cell-height-001.xht +Importing css-multicol-1/multicol-table-cell-height-001-ref.xht to css-multicol-1/multicol-table-cell-height-001-ref.xht +Importing css-multicol-1/multicol-table-cell-height-002.xht to css-multicol-1/multicol-table-cell-height-002.xht +Importing css-multicol-1/multicol-table-cell-vertical-align-001.xht to css-multicol-1/multicol-table-cell-vertical-align-001.xht +Importing css-multicol-1/multicol-table-cell-vertical-align-ref.xht to css-multicol-1/multicol-table-cell-vertical-align-ref.xht +Importing css-multicol-1/multicol-width-001.xht to css-multicol-1/multicol-width-001.xht +Importing css-multicol-1/multicol-width-001-ref.xht to css-multicol-1/multicol-width-001-ref.xht +Importing css-multicol-1/multicol-width-002.xht to css-multicol-1/multicol-width-002.xht +Importing css-multicol-1/multicol-width-002-ref.xht to css-multicol-1/multicol-width-002-ref.xht +Importing css-multicol-1/multicol-width-003.xht to css-multicol-1/multicol-width-003.xht +Importing css-multicol-1/multicol-width-count-001.xht to css-multicol-1/multicol-width-count-001.xht +Importing css-multicol-1/multicol-width-count-002.xht to css-multicol-1/multicol-width-count-002.xht +Importing css-multicol-1/multicol-width-ems-001.xht to css-multicol-1/multicol-width-ems-001.xht +Importing css-multicol-1/multicol-width-ems-ref.xht to css-multicol-1/multicol-width-ems-ref.xht +Importing css-multicol-1/multicol-width-invalid-001.xht to css-multicol-1/multicol-width-invalid-001.xht +Importing css-multicol-1/multicol-width-invalid-001-ref.xht to css-multicol-1/multicol-width-invalid-001-ref.xht +Importing css-multicol-1/multicol-width-large-001.xht to css-multicol-1/multicol-width-large-001.xht +Importing css-multicol-1/multicol-width-large-002.xht to css-multicol-1/multicol-width-large-002.xht +Importing css-multicol-1/multicol-width-negative-001.xht to css-multicol-1/multicol-width-negative-001.xht +Importing css-multicol-1/multicol-width-small-001.xht to css-multicol-1/multicol-width-small-001.xht +Importing css-multicol-1/multicol-width-small-001-ref.xht to css-multicol-1/multicol-width-small-001-ref.xht +Importing css-multicol-1/multicol-zero-height-001.xht to css-multicol-1/multicol-zero-height-001.xht +Importing css-multicol-1/multicol-zero-height-001-ref.xht to css-multicol-1/multicol-zero-height-001-ref.xht +Importing css-namespaces-3/prefix-001.xml to css-namespaces-3/prefix-001.xml +Importing css-namespaces-3/support/fail.css to css-namespaces-3/support/fail.css +Importing css-namespaces-3/support/scope-002a.css to css-namespaces-3/support/scope-002a.css +Importing css-namespaces-3/support/scope-002b.css to css-namespaces-3/support/scope-002b.css +Importing css-namespaces-3/support/syntax-007.css to css-namespaces-3/support/syntax-007.css +Importing css-namespaces-3/reftest/ref-lime-1.xml to css-namespaces-3/reftest/ref-lime-1.xml +Importing css-namespaces-3/prefix-002.xml to css-namespaces-3/prefix-002.xml +Importing css-namespaces-3/prefix-003.xml to css-namespaces-3/prefix-003.xml +Importing css-namespaces-3/reftest/ref-lime-1-generic.xml to css-namespaces-3/reftest/ref-lime-1-generic.xml +Importing css-namespaces-3/prefix-004.xml to css-namespaces-3/prefix-004.xml +Importing css-namespaces-3/reftest/ref-lime-2-generic.xml to css-namespaces-3/reftest/ref-lime-2-generic.xml +Importing css-namespaces-3/prefix-005.xml to css-namespaces-3/prefix-005.xml +Importing css-namespaces-3/prefix-006.xml to css-namespaces-3/prefix-006.xml +Importing css-namespaces-3/reftest/ref-lime-2.xml to css-namespaces-3/reftest/ref-lime-2.xml +Importing css-namespaces-3/scope-001.xml to css-namespaces-3/scope-001.xml +Importing css-namespaces-3/scope-002.xml to css-namespaces-3/scope-002.xml +Importing css-namespaces-3/syntax-001.xml to css-namespaces-3/syntax-001.xml +Importing css-namespaces-3/reftest/ref-lime-1-block.xml to css-namespaces-3/reftest/ref-lime-1-block.xml +Importing css-namespaces-3/syntax-002.xml to css-namespaces-3/syntax-002.xml +Importing css-namespaces-3/syntax-003.xml to css-namespaces-3/syntax-003.xml +Importing css-namespaces-3/reftest/ref-lime-5.xml to css-namespaces-3/reftest/ref-lime-5.xml +Importing css-namespaces-3/syntax-004.xml to css-namespaces-3/syntax-004.xml +Importing css-namespaces-3/syntax-005.xml to css-namespaces-3/syntax-005.xml +Importing css-namespaces-3/syntax-006.xml to css-namespaces-3/syntax-006.xml +Importing css-namespaces-3/syntax-007.xml to css-namespaces-3/syntax-007.xml +Importing css-namespaces-3/syntax-008.xml to css-namespaces-3/syntax-008.xml +Importing css-namespaces-3/syntax-009.xml to css-namespaces-3/syntax-009.xml +Importing css-namespaces-3/syntax-010.xml to css-namespaces-3/syntax-010.xml +Importing css-namespaces-3/reftest/ref-lime-3.xml to css-namespaces-3/reftest/ref-lime-3.xml +Importing css-namespaces-3/syntax-011.xml to css-namespaces-3/syntax-011.xml +Importing css-namespaces-3/reftest/ref-lime-6.xml to css-namespaces-3/reftest/ref-lime-6.xml +Importing css-namespaces-3/syntax-012.xml to css-namespaces-3/syntax-012.xml +Importing css-namespaces-3/syntax-013.xml to css-namespaces-3/syntax-013.xml +Importing css-namespaces-3/syntax-014.xml to css-namespaces-3/syntax-014.xml +Importing css-namespaces-3/syntax-015.xml to css-namespaces-3/syntax-015.xml +Importing css-values-3/attr-color-invalid-cast.html to css-values-3/attr-color-invalid-cast.html +Importing css-values-3/support/1x1-green.png to css-values-3/support/1x1-green.png +Importing css-values-3/support/1x1-lime.png to css-values-3/support/1x1-lime.png +Importing css-values-3/support/1x1-maroon.png to css-values-3/support/1x1-maroon.png +Importing css-values-3/support/1x1-navy.png to css-values-3/support/1x1-navy.png +Importing css-values-3/support/1x1-red.png to css-values-3/support/1x1-red.png +Importing css-values-3/support/1x1-white.png to css-values-3/support/1x1-white.png +Importing css-values-3/support/60x60-gg-rr.png to css-values-3/support/60x60-gg-rr.png +Importing css-values-3/support/60x60-green.png to css-values-3/support/60x60-green.png +Importing css-values-3/support/60x60-red.png to css-values-3/support/60x60-red.png +Importing css-values-3/support/a-green.css to css-values-3/support/a-green.css +Importing css-values-3/support/b-green.css to css-values-3/support/b-green.css +Importing css-values-3/support/c-red.css to css-values-3/support/c-red.css +Importing css-values-3/support/cat.png to css-values-3/support/cat.png +Importing css-values-3/support/import-green.css to css-values-3/support/import-green.css +Importing css-values-3/support/import-red.css to css-values-3/support/import-red.css +Importing css-values-3/support/pattern-grg-rgr-grg.png to css-values-3/support/pattern-grg-rgr-grg.png +Importing css-values-3/support/pattern-grg-rrg-rgg.png to css-values-3/support/pattern-grg-rrg-rgg.png +Importing css-values-3/support/pattern-rgr-grg-rgr.png to css-values-3/support/pattern-rgr-grg-rgr.png +Importing css-values-3/support/pattern-tr.png to css-values-3/support/pattern-tr.png +Importing css-values-3/support/README to css-values-3/support/README +Importing css-values-3/support/ruler-h-50%.png to css-values-3/support/ruler-h-50%.png +Importing css-values-3/support/ruler-h-50px.png to css-values-3/support/ruler-h-50px.png +Importing css-values-3/support/ruler-v-100px.png to css-values-3/support/ruler-v-100px.png +Importing css-values-3/support/ruler-v-50px.png to css-values-3/support/ruler-v-50px.png +Importing css-values-3/support/square-purple.png to css-values-3/support/square-purple.png +Importing css-values-3/support/square-teal.png to css-values-3/support/square-teal.png +Importing css-values-3/support/square-white.png to css-values-3/support/square-white.png +Importing css-values-3/support/swatch-blue.png to css-values-3/support/swatch-blue.png +Importing css-values-3/support/swatch-green.png to css-values-3/support/swatch-green.png +Importing css-values-3/support/swatch-lime.png to css-values-3/support/swatch-lime.png +Importing css-values-3/support/swatch-orange.png to css-values-3/support/swatch-orange.png +Importing css-values-3/support/swatch-red.png to css-values-3/support/swatch-red.png +Importing css-values-3/support/swatch-teal.png to css-values-3/support/swatch-teal.png +Importing css-values-3/support/swatch-white.png to css-values-3/support/swatch-white.png +Importing css-values-3/support/swatch-yellow.png to css-values-3/support/swatch-yellow.png +Importing css-values-3/support/test-bl.png to css-values-3/support/test-bl.png +Importing css-values-3/support/test-br.png to css-values-3/support/test-br.png +Importing css-values-3/support/test-inner-half-size.png to css-values-3/support/test-inner-half-size.png +Importing css-values-3/support/test-outer.png to css-values-3/support/test-outer.png +Importing css-values-3/support/test-tl.png to css-values-3/support/test-tl.png +Importing css-values-3/support/test-tr.png to css-values-3/support/test-tr.png +Importing css-values-3/support/support/README to css-values-3/support/support/README +Importing css-values-3/support/support/swatch-green.png to css-values-3/support/support/swatch-green.png +Importing css-values-3/support/support/swatch-red.png to css-values-3/support/support/swatch-red.png +Importing css-values-3/reference/200-200-green.html to css-values-3/reference/200-200-green.html +Importing css-values-3/attr-color-invalid-fallback.html to css-values-3/attr-color-invalid-fallback.html +Importing css-values-3/attr-color-valid.html to css-values-3/attr-color-valid.html +Importing css-values-3/attr-invalid-type-001.html to css-values-3/attr-invalid-type-001.html +Importing css-values-3/attr-invalid-type-002.html to css-values-3/attr-invalid-type-002.html +Importing css-values-3/attr-invalid-type-003.html to css-values-3/attr-invalid-type-003.html +Importing css-values-3/attr-length-invalid-cast.html to css-values-3/attr-length-invalid-cast.html +Importing css-values-3/attr-length-invalid-fallback.html to css-values-3/attr-length-invalid-fallback.html +Importing css-values-3/attr-length-valid-zero-nofallback.html to css-values-3/attr-length-valid-zero-nofallback.html +Importing css-values-3/attr-length-valid-zero.html to css-values-3/attr-length-valid-zero.html +Importing css-values-3/attr-length-valid.html to css-values-3/attr-length-valid.html +Importing css-values-3/attr-px-invalid-cast.html to css-values-3/attr-px-invalid-cast.html +Importing css-values-3/attr-px-invalid-fallback.html to css-values-3/attr-px-invalid-fallback.html +Importing css-values-3/attr-px-valid.html to css-values-3/attr-px-valid.html +Importing css-values-3/calc-in-calc.html to css-values-3/calc-in-calc.html +Importing css-values-3/reference/all-green.html to css-values-3/reference/all-green.html +Importing css-values-3/calc-in-media-queries-001.html to css-values-3/calc-in-media-queries-001.html +Importing css-values-3/calc-in-media-queries-002.html to css-values-3/calc-in-media-queries-002.html +Importing css-values-3/calc-invalid-range-clamping.html to css-values-3/calc-invalid-range-clamping.html +Importing css-values-3/calc-parenthesis-stack.html to css-values-3/calc-parenthesis-stack.html +Importing css-values-3/ch-unit-001.html to css-values-3/ch-unit-001.html +Importing css-values-3/reference/ch-unit-001-ref.html to css-values-3/reference/ch-unit-001-ref.html +Importing css-values-3/initial-background-color.html to css-values-3/initial-background-color.html +Importing css-values-3/vh-calc-support-pct.html to css-values-3/vh-calc-support-pct.html +Importing css-values-3/vh-calc-support.html to css-values-3/vh-calc-support.html +Importing css-values-3/vh-em-inherit.html to css-values-3/vh-em-inherit.html +Importing css-values-3/vh-inherit.html to css-values-3/vh-inherit.html +Importing css-values-3/vh-interpolate-pct.html to css-values-3/vh-interpolate-pct.html +Importing css-values-3/vh-interpolate-px.html to css-values-3/vh-interpolate-px.html +Importing css-values-3/vh-interpolate-vh.html to css-values-3/vh-interpolate-vh.html +Importing css-values-3/vh-support-atviewport.html to css-values-3/vh-support-atviewport.html +Importing css-values-3/vh-support-margin.html to css-values-3/vh-support-margin.html +Importing css-values-3/vh-support-transform-origin.html to css-values-3/vh-support-transform-origin.html +Importing css-values-3/vh-support-transform-translate.html to css-values-3/vh-support-transform-translate.html +Importing css-values-3/vh-support.html to css-values-3/vh-support.html +Importing css-values-3/vh-zero-support.html to css-values-3/vh-zero-support.html +Importing css-values-3/vh_not_refreshing_on_chrome.html to css-values-3/vh_not_refreshing_on_chrome.html +Importing css-values-3/reference/vh_not_refreshing_on_chrome-ref.html to css-values-3/reference/vh_not_refreshing_on_chrome-ref.html +Importing css-values-3/vh_not_refreshing_on_chrome_iframe.html to css-values-3/vh_not_refreshing_on_chrome_iframe.html +Importing selectors-4/focus-within-001.html to selectors-4/focus-within-001.html +Importing selectors-4/focus-within-001-ref.html to selectors-4/focus-within-001-ref.html +Importing selectors-4/focus-within-002.html to selectors-4/focus-within-002.html +Importing selectors-4/focus-within-003.html to selectors-4/focus-within-003.html +Importing selectors-4/focus-within-004.html to selectors-4/focus-within-004.html +Importing selectors-4/focus-within-005.html to selectors-4/focus-within-005.html +Importing selectors-4/focus-within-006.html to selectors-4/focus-within-006.html +Importing selectors-4/focus-within-shadow-001.html to selectors-4/focus-within-shadow-001.html +Importing selectors-4/focus-within-shadow-001-ref.html to selectors-4/focus-within-shadow-001-ref.html +Importing selectors-4/focus-within-shadow-002.html to selectors-4/focus-within-shadow-002.html +Importing selectors-4/focus-within-shadow-003.html to selectors-4/focus-within-shadow-003.html +Importing selectors-4/focus-within-shadow-004.html to selectors-4/focus-within-shadow-004.html +Importing selectors-4/focus-within-shadow-005.html to selectors-4/focus-within-shadow-005.html +Importing selectors-4/of-type-selectors.xhtml to selectors-4/of-type-selectors.xhtml +Importing selectors-4/of-type-selectors-ref.xhtml to selectors-4/of-type-selectors-ref.xhtml +Importing selectors-4/selector-required.html to selectors-4/selector-required.html +Importing selectors-4/selector-required-ref.html to selectors-4/selector-required-ref.html +Importing selectors-4/selectors-dir-selector-ltr-001.html to selectors-4/selectors-dir-selector-ltr-001.html +Importing selectors-4/selectors-dir-selector-ref.html to selectors-4/selectors-dir-selector-ref.html +Importing selectors-4/selectors-dir-selector-rtl-001.html to selectors-4/selectors-dir-selector-rtl-001.html diff --git a/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht b/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht new file mode 100644 index 000000000..05a137944 --- /dev/null +++ b/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht @@ -0,0 +1,19 @@ +<!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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/reftest-stylo.list b/layout/reftests/w3c-css/received/reftest-stylo.list new file mode 100644 index 000000000..3c80dab8f --- /dev/null +++ b/layout/reftests/w3c-css/received/reftest-stylo.list @@ -0,0 +1,103 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# THIS FILE IS AUTOGENERATED BY import-tests.py +# DO NOT EDIT! +== css-conditional-3/at-media-whitespace-optional-001.html css-conditional-3/at-media-whitespace-optional-001.html +== css-conditional-3/at-media-whitespace-optional-002.html css-conditional-3/at-media-whitespace-optional-002.html +== css-conditional-3/at-supports-001.html css-conditional-3/at-supports-001.html +== css-conditional-3/at-supports-002.html css-conditional-3/at-supports-002.html +== css-conditional-3/at-supports-003.html css-conditional-3/at-supports-003.html +== css-conditional-3/at-supports-004.html css-conditional-3/at-supports-004.html +== css-conditional-3/at-supports-005.html css-conditional-3/at-supports-005.html +== css-conditional-3/at-supports-006.html css-conditional-3/at-supports-006.html +== css-conditional-3/at-supports-007.html css-conditional-3/at-supports-007.html +== css-conditional-3/at-supports-008.html css-conditional-3/at-supports-008.html +== css-conditional-3/at-supports-009.html css-conditional-3/at-supports-009.html +== css-conditional-3/at-supports-010.html css-conditional-3/at-supports-010.html +== css-conditional-3/at-supports-011.html css-conditional-3/at-supports-011.html +== css-conditional-3/at-supports-012.html css-conditional-3/at-supports-012.html +== css-conditional-3/at-supports-013.html css-conditional-3/at-supports-013.html +== css-conditional-3/at-supports-014.html css-conditional-3/at-supports-014.html +== css-conditional-3/at-supports-015.html css-conditional-3/at-supports-015.html +== css-conditional-3/at-supports-016.html css-conditional-3/at-supports-016.html +== css-conditional-3/at-supports-017.html css-conditional-3/at-supports-017.html +== css-conditional-3/at-supports-018.html css-conditional-3/at-supports-018.html +== css-conditional-3/at-supports-019.html css-conditional-3/at-supports-019.html +== css-conditional-3/at-supports-020.html css-conditional-3/at-supports-020.html +== css-conditional-3/at-supports-021.html css-conditional-3/at-supports-021.html +== css-conditional-3/at-supports-022.html css-conditional-3/at-supports-022.html +== css-conditional-3/at-supports-023.html css-conditional-3/at-supports-023.html +== css-conditional-3/at-supports-024.html css-conditional-3/at-supports-024.html +== css-conditional-3/at-supports-025.html css-conditional-3/at-supports-025.html +== css-conditional-3/at-supports-026.html css-conditional-3/at-supports-026.html +== css-conditional-3/at-supports-027.html css-conditional-3/at-supports-027.html +== css-conditional-3/at-supports-028.html css-conditional-3/at-supports-028.html +== css-conditional-3/at-supports-029.html css-conditional-3/at-supports-029.html +== css-conditional-3/at-supports-030.html css-conditional-3/at-supports-030.html +== css-conditional-3/at-supports-031.html css-conditional-3/at-supports-031.html +== css-conditional-3/at-supports-032.html css-conditional-3/at-supports-032.html +== css-conditional-3/at-supports-033.html css-conditional-3/at-supports-033.html +== css-conditional-3/at-supports-034.html css-conditional-3/at-supports-034.html +== css-conditional-3/at-supports-035.html css-conditional-3/at-supports-035.html +== css-conditional-3/at-supports-036.html css-conditional-3/at-supports-036.html +== css-conditional-3/at-supports-037.html css-conditional-3/at-supports-037.html +== css-conditional-3/at-supports-038.html css-conditional-3/at-supports-038.html +== css-conditional-3/at-supports-039.html css-conditional-3/at-supports-039.html +== css-namespaces-3/prefix-001.xml css-namespaces-3/prefix-001.xml +== css-namespaces-3/prefix-002.xml css-namespaces-3/prefix-002.xml +== css-namespaces-3/prefix-003.xml css-namespaces-3/prefix-003.xml +== css-namespaces-3/prefix-004.xml css-namespaces-3/prefix-004.xml +== css-namespaces-3/prefix-005.xml css-namespaces-3/prefix-005.xml +== css-namespaces-3/prefix-006.xml css-namespaces-3/prefix-006.xml +== css-namespaces-3/scope-001.xml css-namespaces-3/scope-001.xml +== css-namespaces-3/scope-002.xml css-namespaces-3/scope-002.xml +== css-namespaces-3/syntax-001.xml css-namespaces-3/syntax-001.xml +== css-namespaces-3/syntax-002.xml css-namespaces-3/syntax-002.xml +== css-namespaces-3/syntax-003.xml css-namespaces-3/syntax-003.xml +== css-namespaces-3/syntax-004.xml css-namespaces-3/syntax-004.xml +== css-namespaces-3/syntax-005.xml css-namespaces-3/syntax-005.xml +== css-namespaces-3/syntax-006.xml css-namespaces-3/syntax-006.xml +== css-namespaces-3/syntax-007.xml css-namespaces-3/syntax-007.xml +== css-namespaces-3/syntax-008.xml css-namespaces-3/syntax-008.xml +== css-namespaces-3/syntax-009.xml css-namespaces-3/syntax-009.xml +== css-namespaces-3/syntax-010.xml css-namespaces-3/syntax-010.xml +== css-namespaces-3/syntax-011.xml css-namespaces-3/syntax-011.xml +== css-namespaces-3/syntax-012.xml css-namespaces-3/syntax-012.xml +== css-namespaces-3/syntax-013.xml css-namespaces-3/syntax-013.xml +== css-namespaces-3/syntax-014.xml css-namespaces-3/syntax-014.xml +== css-namespaces-3/syntax-015.xml css-namespaces-3/syntax-015.xml +== css-values-3/attr-color-invalid-cast.html css-values-3/attr-color-invalid-cast.html +== css-values-3/attr-color-invalid-fallback.html css-values-3/attr-color-invalid-fallback.html +== css-values-3/attr-color-valid.html css-values-3/attr-color-valid.html +== css-values-3/attr-invalid-type-001.html css-values-3/attr-invalid-type-001.html +== css-values-3/attr-invalid-type-002.html css-values-3/attr-invalid-type-002.html +== css-values-3/attr-invalid-type-003.html css-values-3/attr-invalid-type-003.html +== css-values-3/attr-length-invalid-cast.html css-values-3/attr-length-invalid-cast.html +== css-values-3/attr-length-invalid-fallback.html css-values-3/attr-length-invalid-fallback.html +== css-values-3/attr-length-valid-zero-nofallback.html css-values-3/attr-length-valid-zero-nofallback.html +== css-values-3/attr-length-valid-zero.html css-values-3/attr-length-valid-zero.html +== css-values-3/attr-length-valid.html css-values-3/attr-length-valid.html +== css-values-3/attr-px-invalid-cast.html css-values-3/attr-px-invalid-cast.html +== css-values-3/attr-px-invalid-fallback.html css-values-3/attr-px-invalid-fallback.html +== css-values-3/attr-px-valid.html css-values-3/attr-px-valid.html +== css-values-3/calc-in-calc.html css-values-3/calc-in-calc.html +skip == css-values-3/calc-in-media-queries-001.html css-values-3/calc-in-media-queries-001.html +skip == css-values-3/calc-in-media-queries-002.html css-values-3/calc-in-media-queries-002.html +== css-values-3/calc-invalid-range-clamping.html css-values-3/calc-invalid-range-clamping.html +== css-values-3/calc-parenthesis-stack.html css-values-3/calc-parenthesis-stack.html +fuzzy-if(OSX,40,6) == css-values-3/ch-unit-001.html css-values-3/ch-unit-001.html +== css-values-3/initial-background-color.html css-values-3/initial-background-color.html +== css-values-3/vh-calc-support-pct.html css-values-3/vh-calc-support-pct.html +== css-values-3/vh-calc-support.html css-values-3/vh-calc-support.html +== css-values-3/vh-em-inherit.html css-values-3/vh-em-inherit.html +== css-values-3/vh-inherit.html css-values-3/vh-inherit.html +== css-values-3/vh-interpolate-pct.html css-values-3/vh-interpolate-pct.html +== css-values-3/vh-interpolate-px.html css-values-3/vh-interpolate-px.html +== css-values-3/vh-interpolate-vh.html css-values-3/vh-interpolate-vh.html +== css-values-3/vh-support-atviewport.html css-values-3/vh-support-atviewport.html +== css-values-3/vh-support-margin.html css-values-3/vh-support-margin.html +skip == css-values-3/vh-support-transform-origin.html css-values-3/vh-support-transform-origin.html +skip == css-values-3/vh-support-transform-translate.html css-values-3/vh-support-transform-translate.html +== css-values-3/vh-support.html css-values-3/vh-support.html +== css-values-3/vh-zero-support.html css-values-3/vh-zero-support.html +skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/vh_not_refreshing_on_chrome.html +skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/vh_not_refreshing_on_chrome_iframe.html diff --git a/layout/reftests/w3c-css/received/reftest.list b/layout/reftests/w3c-css/received/reftest.list new file mode 100644 index 000000000..494ab4d12 --- /dev/null +++ b/layout/reftests/w3c-css/received/reftest.list @@ -0,0 +1,257 @@ +# THIS FILE IS AUTOGENERATED BY import-tests.py +# DO NOT EDIT! +== css-conditional-3/at-media-whitespace-optional-001.html css-conditional-3/reference/background-lime.html +== css-conditional-3/at-media-whitespace-optional-002.html css-conditional-3/reference/background-lime.html +== css-conditional-3/at-supports-001.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-002.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-003.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-004.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-005.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-006.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-007.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-008.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-009.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-010.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-011.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-012.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-013.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-014.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-015.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-016.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-017.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-018.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-019.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-020.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-021.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-022.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-023.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-024.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-025.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-026.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-027.html css-conditional-3/at-supports-027-ref.html +== css-conditional-3/at-supports-028.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-029.html css-conditional-3/at-supports-027-ref.html +== css-conditional-3/at-supports-030.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-031.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-032.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-033.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-034.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-035.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-036.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-037.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-038.html css-conditional-3/at-supports-001-ref.html +== css-conditional-3/at-supports-039.html css-conditional-3/at-supports-001-ref.html +HTTP(../../..) == css-multicol-1/multicol-basic-001.html css-multicol-1/reference/multicol-basic-ref.html +HTTP(../../..) == css-multicol-1/multicol-basic-002.html css-multicol-1/reference/multicol-basic-ref.html +HTTP(../../..) == css-multicol-1/multicol-basic-003.html css-multicol-1/reference/multicol-basic-ref.html +HTTP(../../..) == css-multicol-1/multicol-basic-004.html css-multicol-1/reference/multicol-basic-ref.html +fails HTTP(../../..) == css-multicol-1/multicol-block-clip-001.xht css-multicol-1/multicol-block-clip-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-block-clip-002.xht css-multicol-1/multicol-block-clip-002-ref.xht +fails == css-multicol-1/multicol-br-inside-avoidcolumn-001.xht css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-break-000.xht css-multicol-1/multicol-break-000-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-break-001.xht css-multicol-1/multicol-break-001-ref.xht +fuzzy(135,1008) HTTP(../../..) == css-multicol-1/multicol-clip-001.xht css-multicol-1/multicol-clip-001-ref.xht +fuzzy(135,702) HTTP(../../..) == css-multicol-1/multicol-clip-002.xht css-multicol-1/multicol-clip-002-ref.xht +fuzzy(135,467) HTTP(../../..) == css-multicol-1/multicol-collapsing-001.xht css-multicol-1/multicol-collapsing-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-001.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-002.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-003.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-004.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-005.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-006.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-007.xht css-multicol-1/multicol-columns-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-columns-invalid-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-columns-invalid-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-columns-toolong-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(135,530) HTTP(../../..) == css-multicol-1/multicol-containing-001.xht css-multicol-1/multicol-containing-001-ref.xht +fuzzy(215,241) HTTP(../../..) == css-multicol-1/multicol-containing-002.xht css-multicol-1/multicol-containing-002-ref.xht +fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-count-001.xht css-multicol-1/multicol-columns-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-002.xht css-multicol-1/multicol-count-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-computed-001.xht css-multicol-1/multicol-count-computed-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-computed-002.xht css-multicol-1/multicol-count-computed-2-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-computed-003.xht css-multicol-1/multicol-count-computed-003-ref.xht +fuzzy-if(winWidget||OSX||gtkWidget,112,861) fails-if(Android) HTTP(../../..) == css-multicol-1/multicol-count-computed-004.xht css-multicol-1/multicol-count-computed-004-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-computed-005.xht css-multicol-1/multicol-count-computed-003-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-count-large-001.xht css-multicol-1/multicol-count-large-ref.xht +fuzzy(255,132) HTTP(../../..) == css-multicol-1/multicol-count-large-002.xht css-multicol-1/multicol-count-large-2-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-negative-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-negative-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-003.xht css-multicol-1/multicol-columns-invalid-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-fill-000.xht css-multicol-1/multicol-fill-000-ref.xht +HTTP(../../..) == css-multicol-1/multicol-fill-001.xht css-multicol-1/multicol-fill-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-fill-auto-001.xht css-multicol-1/multicol-fill-auto-001-ref.xht +fuzzy(135,80) HTTP(../../..) == css-multicol-1/multicol-fill-auto-002.xht css-multicol-1/multicol-fill-auto-002-ref.xht +fuzzy(135,3270) HTTP(../../..) == css-multicol-1/multicol-fill-auto-003.xht css-multicol-1/multicol-fill-auto-003-ref.xht +fails == css-multicol-1/multicol-fill-auto-block-children-001.xht css-multicol-1/multicol-fill-auto-block-children-ref.xht +fails == css-multicol-1/multicol-fill-auto-block-children-002.xht css-multicol-1/multicol-fill-auto-block-children-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-fill-auto.xht css-multicol-1/multicol-fill-ref.xht +fuzzy(135,80) HTTP(../../..) == css-multicol-1/multicol-fill-balance-001.xht css-multicol-1/multicol-fill-balance-001-ref.xht +fuzzy(135,821) HTTP(../../..) == css-multicol-1/multicol-gap-000.xht css-multicol-1/multicol-gap-000-ref.xht +fuzzy(255,290) HTTP(../../..) == css-multicol-1/multicol-gap-001.xht css-multicol-1/multicol-gap-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-002.xht css-multicol-1/multicol-gap-002-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-003.xht css-multicol-1/multicol-gap-002-ref.xht +fuzzy(107,1823) HTTP(../../..) == css-multicol-1/multicol-gap-fraction-001.xht css-multicol-1/multicol-gap-fraction-001-ref.xht +fuzzy-if(winWidget||OSX||gtkWidget,204,1048) fuzzy-if(skiaContent,208,1048) fails-if(Android) HTTP(../../..) == css-multicol-1/multicol-gap-large-001.xht css-multicol-1/multicol-gap-large-001-ref.xht +fuzzy(225,920) HTTP(../../..) == css-multicol-1/multicol-gap-large-002.xht css-multicol-1/multicol-gap-large-002-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-negative-001.xht css-multicol-1/multicol-gap-002-ref.xht +HTTP(../../..) == css-multicol-1/multicol-height-001.xht css-multicol-1/multicol-height-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-height-block-child-001.xht css-multicol-1/multicol-height-block-child-001-ref.xht +fuzzy(255,3762) HTTP(../../..) == css-multicol-1/multicol-inherit-001.xht css-multicol-1/multicol-inherit-001-ref.xht +fuzzy(135,1893) HTTP(../../..) == css-multicol-1/multicol-inherit-002.xht css-multicol-1/multicol-inherit-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-inherit-003.xht css-multicol-1/multicol-inherit-3-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-inherit-004.xht css-multicol-1/multicol-inherit-4-ref.xht +fuzzy(96,264) HTTP(../../..) == css-multicol-1/multicol-list-item-001.xht css-multicol-1/multicol-list-item-001-ref.xht +fuzzy(73,1200) HTTP(../../..) == css-multicol-1/multicol-margin-001.xht reference/ref-filled-green-100px-square.xht +fuzzy(73,1200) HTTP(../../..) == css-multicol-1/multicol-margin-002.xht reference/ref-filled-green-100px-square.xht +fuzzy(243,3322) fuzzy-if(skiaContent,244,3322) HTTP(../../..) == css-multicol-1/multicol-margin-child-001.xht css-multicol-1/multicol-margin-child-001-ref.xht +fuzzy(255,4008) HTTP(../../..) == css-multicol-1/multicol-nested-002.xht css-multicol-1/multicol-nested-002-ref.xht +fuzzy(255,4109) HTTP(../../..) == css-multicol-1/multicol-nested-005.xht css-multicol-1/multicol-nested-005-ref.xht +fuzzy(225,13600) HTTP(../../..) == css-multicol-1/multicol-nested-column-rule-001.xht css-multicol-1/multicol-nested-column-rule-001-ref.xht +fuzzy(204,2463) fuzzy-if(skiaContent,208,2463) HTTP(../../..) == css-multicol-1/multicol-nested-margin-001.xht css-multicol-1/multicol-nested-margin-001-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-nested-margin-002.xht css-multicol-1/multicol-nested-margin-002-ref.xht +fuzzy(204,2371) fuzzy-if(skiaContent,208,2371) HTTP(../../..) == css-multicol-1/multicol-nested-margin-003.xht css-multicol-1/multicol-nested-margin-003-ref.xht +fuzzy(225,2529) HTTP(../../..) == css-multicol-1/multicol-nested-margin-004.xht css-multicol-1/multicol-nested-margin-004-ref.xht +fuzzy(225,2529) HTTP(../../..) == css-multicol-1/multicol-nested-margin-005.xht css-multicol-1/multicol-nested-margin-004-ref.xht +fuzzy(135,142) HTTP(../../..) == css-multicol-1/multicol-overflow-000.xht css-multicol-1/multicol-overflow-000-ref.xht +fuzzy(204,1844) fuzzy-if(skiaContent,208,1844) HTTP(../../..) == css-multicol-1/multicol-overflowing-001.xht css-multicol-1/multicol-overflowing-001-ref.xht +fuzzy-if(OSX,61,2) fuzzy-if(skiaContent,64,2) HTTP(../../..) == css-multicol-1/multicol-reduce-000.xht css-multicol-1/multicol-reduce-000-ref.xht +fuzzy-if(OSX,8,20) HTTP(../../..) == css-multicol-1/multicol-rule-000.xht css-multicol-1/multicol-rule-000-ref.xht +fuzzy(135,1584) HTTP(../../..) == css-multicol-1/multicol-rule-001.xht css-multicol-1/multicol-rule-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-rule-002.xht css-multicol-1/multicol-rule-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-003.xht css-multicol-1/multicol-rule-003-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-004.xht css-multicol-1/multicol-rule-004-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-color-001.xht css-multicol-1/multicol-rule-color-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-color-inherit-001.xht css-multicol-1/multicol-rule-color-inherit-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-color-inherit-002.xht css-multicol-1/multicol-rule-color-inherit-001-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-dashed-000.xht css-multicol-1/multicol-rule-dashed-000-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-dotted-000.xht css-multicol-1/multicol-rule-dotted-000-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-double-000.xht css-multicol-1/multicol-rule-double-000-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-fraction-001.xht css-multicol-1/multicol-rule-fraction-001-ref.xht +fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-fraction-002.xht css-multicol-1/multicol-rule-fraction-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-rule-fraction-003.xht css-multicol-1/multicol-rule-fraction-3-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-groove-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht +fuzzy(94,256) HTTP(../../..) == css-multicol-1/multicol-rule-hidden-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-inset-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht +fuzzy(255,2808) HTTP(../../..) == css-multicol-1/multicol-rule-large-001.xht css-multicol-1/multicol-rule-large-001-ref.xht +fuzzy(94,256) HTTP(../../..) == css-multicol-1/multicol-rule-none-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-outset-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-percent-001.xht css-multicol-1/multicol-containing-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-rule-px-001.xht css-multicol-1/multicol-rule-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-ridge-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-samelength-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-shorthand-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht +fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-solid-000.xht css-multicol-1/multicol-rule-solid-000-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-rule-stacking-001.xht css-multicol-1/multicol-rule-stacking-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-style-groove-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-style-inset-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-style-outset-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht +HTTP(../../..) == css-multicol-1/multicol-rule-style-ridge-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-shorthand-001.xht css-multicol-1/multicol-rule-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-000.xht css-multicol-1/multicol-span-000-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-001.xht css-multicol-1/multicol-span-all-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-002.xht css-multicol-1/multicol-span-all-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-003.xht css-multicol-1/multicol-count-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-block-sibling-003.xht css-multicol-1/multicol-span-all-block-sibling-3-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-child-001.xht css-multicol-1/multicol-span-all-child-001-ref.xht +fails-if(OSX||winWidget) == css-multicol-1/multicol-span-all-child-002.xht css-multicol-1/multicol-span-all-child-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-001.xht css-multicol-1/multicol-span-all-margin-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-002.xht css-multicol-1/multicol-span-all-margin-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-bottom-001.xht css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-001.xht css-multicol-1/multicol-span-all-margin-nested-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-002.xht css-multicol-1/multicol-span-all-margin-nested-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-003.xht css-multicol-1/multicol-span-all-margin-nested-3-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-float-001.xht css-multicol-1/multicol-span-float-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-span-none-001.xht css-multicol-1/multicol-span-none-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-table-cell-001.xht css-multicol-1/multicol-table-cell-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-table-cell-height-001.xht css-multicol-1/multicol-table-cell-height-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-table-cell-height-002.xht css-multicol-1/multicol-table-cell-height-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-table-cell-vertical-align-001.xht css-multicol-1/multicol-table-cell-vertical-align-ref.xht +HTTP(../../..) == css-multicol-1/multicol-width-001.xht css-multicol-1/multicol-width-001-ref.xht +fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-width-002.xht css-multicol-1/multicol-width-002-ref.xht +HTTP(../../..) == css-multicol-1/multicol-width-003.xht css-multicol-1/multicol-width-002-ref.xht +HTTP(../../..) == css-multicol-1/multicol-width-count-001.xht css-multicol-1/multicol-width-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-width-count-002.xht css-multicol-1/multicol-count-002-ref.xht +fails == css-multicol-1/multicol-width-ems-001.xht css-multicol-1/multicol-width-ems-ref.xht +fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-invalid-001.xht css-multicol-1/multicol-width-invalid-001-ref.xht +fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-large-001.xht css-multicol-1/multicol-width-invalid-001-ref.xht +fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-large-002.xht css-multicol-1/multicol-width-invalid-001-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-width-negative-001.xht css-multicol-1/multicol-count-002-ref.xht +fails HTTP(../../..) == css-multicol-1/multicol-width-small-001.xht css-multicol-1/multicol-width-small-001-ref.xht +fails == css-multicol-1/multicol-zero-height-001.xht css-multicol-1/multicol-zero-height-001-ref.xht +== css-namespaces-3/prefix-001.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/prefix-002.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/prefix-003.xml css-namespaces-3/reftest/ref-lime-1-generic.xml +== css-namespaces-3/prefix-004.xml css-namespaces-3/reftest/ref-lime-2-generic.xml +== css-namespaces-3/prefix-005.xml css-namespaces-3/reftest/ref-lime-2-generic.xml +== css-namespaces-3/prefix-006.xml css-namespaces-3/reftest/ref-lime-2.xml +== css-namespaces-3/scope-001.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/scope-002.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/syntax-001.xml css-namespaces-3/reftest/ref-lime-1-block.xml +== css-namespaces-3/syntax-002.xml css-namespaces-3/reftest/ref-lime-1-block.xml +== css-namespaces-3/syntax-003.xml css-namespaces-3/reftest/ref-lime-5.xml +== css-namespaces-3/syntax-004.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/syntax-005.xml css-namespaces-3/reftest/ref-lime-5.xml +== css-namespaces-3/syntax-006.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/syntax-007.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/syntax-008.xml css-namespaces-3/reftest/ref-lime-2.xml +== css-namespaces-3/syntax-009.xml css-namespaces-3/reftest/ref-lime-1.xml +== css-namespaces-3/syntax-010.xml css-namespaces-3/reftest/ref-lime-3.xml +== css-namespaces-3/syntax-011.xml css-namespaces-3/reftest/ref-lime-6.xml +== css-namespaces-3/syntax-012.xml css-namespaces-3/reftest/ref-lime-3.xml +== css-namespaces-3/syntax-013.xml css-namespaces-3/reftest/ref-lime-5.xml +== css-namespaces-3/syntax-014.xml css-namespaces-3/reftest/ref-lime-3.xml +== css-namespaces-3/syntax-015.xml css-namespaces-3/reftest/ref-lime-1.xml +fails == css-values-3/attr-color-invalid-cast.html css-values-3/reference/200-200-green.html +== css-values-3/attr-color-invalid-fallback.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-color-valid.html css-values-3/reference/200-200-green.html +== css-values-3/attr-invalid-type-001.html css-values-3/reference/200-200-green.html +== css-values-3/attr-invalid-type-002.html css-values-3/reference/200-200-green.html +== css-values-3/attr-invalid-type-003.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-length-invalid-cast.html css-values-3/reference/200-200-green.html +== css-values-3/attr-length-invalid-fallback.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-length-valid-zero-nofallback.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-length-valid-zero.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-length-valid.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-px-invalid-cast.html css-values-3/reference/200-200-green.html +== css-values-3/attr-px-invalid-fallback.html css-values-3/reference/200-200-green.html +fails == css-values-3/attr-px-valid.html css-values-3/reference/200-200-green.html +== css-values-3/calc-in-calc.html css-values-3/reference/all-green.html +fails == css-values-3/calc-in-media-queries-001.html css-values-3/reference/all-green.html +fails == css-values-3/calc-in-media-queries-002.html css-values-3/reference/all-green.html +== css-values-3/calc-invalid-range-clamping.html css-values-3/reference/200-200-green.html +== css-values-3/calc-parenthesis-stack.html css-values-3/reference/all-green.html +fuzzy-if(OSX,40,6) == css-values-3/ch-unit-001.html css-values-3/reference/ch-unit-001-ref.html +== css-values-3/initial-background-color.html css-values-3/reference/all-green.html +== css-values-3/vh-calc-support-pct.html css-values-3/reference/all-green.html +== css-values-3/vh-calc-support.html css-values-3/reference/all-green.html +== css-values-3/vh-em-inherit.html css-values-3/reference/all-green.html +== css-values-3/vh-inherit.html css-values-3/reference/all-green.html +== css-values-3/vh-interpolate-pct.html css-values-3/reference/all-green.html +== css-values-3/vh-interpolate-px.html css-values-3/reference/all-green.html +== css-values-3/vh-interpolate-vh.html css-values-3/reference/all-green.html +== css-values-3/vh-support-atviewport.html css-values-3/reference/all-green.html +== css-values-3/vh-support-margin.html css-values-3/reference/all-green.html +skip == css-values-3/vh-support-transform-origin.html css-values-3/reference/all-green.html +skip == css-values-3/vh-support-transform-translate.html css-values-3/reference/all-green.html +== css-values-3/vh-support.html css-values-3/reference/all-green.html +== css-values-3/vh-zero-support.html css-values-3/reference/all-green.html +skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html +skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html +needs-focus == selectors-4/focus-within-001.html selectors-4/focus-within-001-ref.html +needs-focus == selectors-4/focus-within-002.html selectors-4/focus-within-001-ref.html +needs-focus == selectors-4/focus-within-003.html selectors-4/focus-within-001-ref.html +needs-focus == selectors-4/focus-within-004.html selectors-4/focus-within-001-ref.html +needs-focus == selectors-4/focus-within-005.html selectors-4/focus-within-001-ref.html +needs-focus fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),1,2) == selectors-4/focus-within-006.html selectors-4/focus-within-001-ref.html +fails needs-focus == selectors-4/focus-within-shadow-001.html selectors-4/focus-within-shadow-001-ref.html +pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-002.html selectors-4/focus-within-shadow-001-ref.html +pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-003.html selectors-4/focus-within-shadow-001-ref.html +pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-004.html selectors-4/focus-within-shadow-001-ref.html +pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-005.html selectors-4/focus-within-shadow-001-ref.html +== selectors-4/of-type-selectors.xhtml selectors-4/of-type-selectors-ref.xhtml +== selectors-4/selector-required.html selectors-4/selector-required-ref.html +== selectors-4/selectors-dir-selector-ltr-001.html selectors-4/selectors-dir-selector-ref.html +== selectors-4/selectors-dir-selector-rtl-001.html selectors-4/selectors-dir-selector-ref.html diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html new file mode 100644 index 000000000..9d76c0674 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within Reference File</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<style> +div { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p> +<div>Focus this element</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html new file mode 100644 index 000000000..15de67cef --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to an element with tabindex when :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +div { +border: solid 15px blue; +} +div:focus { +border-color: red; +} +div:focus-within { +border-color: green; +} +</style> +<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html new file mode 100644 index 000000000..b59dc25b5 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to the parent of an element with tabindex where :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#target:focus-within { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div id="target"> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html new file mode 100644 index 000000000..4c87dc627 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#target:focus-within { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div id="target"> + <div> + <div> + <div> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> + </div> + </div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html new file mode 100644 index 000000000..f0d3765a9 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; + + /* Make the caret invisible + since it matches the color of the text, which is transparent, + while keeping the text readable thanks to its shadow. + Not using the caret-color property as it is too new to be relied on. */ + color: transparent; text-shadow: black 0px 0px 0px; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +:focus { + border: solid 5px red; +} +div:focus-within, #focusme:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" contentEditable="true">Focus this element</div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html new file mode 100644 index 000000000..5a173fd72 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on links."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +/* Make the link look like the div in the reference file */ +#focusme { + display: block; + text-decoration: none; + color: currentColor; +} + +:focus { + border: solid 5px red; +} +div:focus-within, #focusme:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <a id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" href="">Focus this element</a> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html new file mode 100644 index 000000000..04e6cbcb9 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on form controls, using an input element."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + all: initial; + outline: none; + + /* Make the caret invisible + since it matches the color of the text, which is transparent, + while keeping the text readable thanks to its shadow. + Not using the caret-color property as it is too new to be relied on. */ + color: transparent; text-shadow: black 0px 0px 0px; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#focusme:focus:not(:focus-within) { + background: red; +} +div:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <div> + <input id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" value="Focus this element"> + <div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html new file mode 100644 index 000000000..4631ef3e3 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within shadow DOM Reference File</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<style> +div { + border: solid 15px green; +} +</style> +<p>Test passes if there is a green rectangle below.</p> +<div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html new file mode 100644 index 000000000..e4610dacf --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to a focused element inside the shadow DOM."> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +div:focus-within { + border: solid 15px green; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html new file mode 100644 index 000000000..b02a3f9a1 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element."> +<style> +div:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html new file mode 100644 index 000000000..588719424 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to the parent of a shadow host containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> +</div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html new file mode 100644 index 000000000..8348adc35 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div> + <div> + <div> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + </div> + </div> + </div> +</div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html new file mode 100644 index 000000000..6c486fa48 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div> + <div> + <div> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + </div> + </div> + </div> +</div> + +<template id="shadow-template"> +<div id="nested-shadow-host"><strong>Skip this test, nested shadow hosts are not supported.</strong></div> +</template> + +<template id="nested-shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); + +window.setTimeout(function() { +shadow = shadow.getElementById('nested-shadow-host').createShadowRoot(); +template = document.getElementById('nested-shadow-template'); +instance = document.importNode(template.content, true); +shadow.appendChild(instance); +}, 0); + +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml new file mode 100644 index 000000000..af883c97e --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selectors Level 4: :first-of-type</title> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> +<style type="text/css"> +div > *|* { + display: block; + color: black; + border: thin solid; + margin: 1em; +} +.yellow { + background: yellow; +} +.green { + background: lime; +} +</style> +</head> +<body> +<div> +<p class="green">This line should have a green background.</p> +<p class="yellow">This line should have a yellow background.</p> +<p class="yellow">This line should have a yellow background.</p> +<p class="green">This line should have a green background.</p> +<p class="green">This line should have a green background.</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml new file mode 100644 index 000000000..18fead9b1 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml"> +<head> +<title>Selectors Level 4: :first-of-type</title> +<meta name="flags" content="namespace nonHTML"/> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-of-type-pseudo"/> +<link rel="match" href="of-type-selectors-ref.xhtml"/> +<style type="text/css"> +div > *|* { + display: block; + color: black; + background: yellow; + border: thin solid; + margin: 1em; +} +div > *|*:first-of-type { + background: lime; +} +</style> +</head> +<body> +<div> +<p>This line should have a green background.</p> +<p>This line should have a yellow background.</p> +<html:p>This line should have a yellow background.</html:p> +<p xmlns="http://www.example.com/ns">This line should have a green background.</p> +<p xmlns="">This line should have a green background.</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html new file mode 100644 index 000000000..038a8a9b6 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS level4 Selector :required and :optional</title> + <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com"> + + <style> + input {border:3px solid green;} + </style> + </head> + <body> + <p> + You should see a green input box. + </p> + <p> + <input> + </p> + <p> + <input> + </p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required.html b/layout/reftests/w3c-css/received/selectors-4/selector-required.html new file mode 100644 index 000000000..9c0899ad2 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selector-required.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS level4 Selector :required and :optional</title> + <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#opt-pseudos"> + <meta name="assert" content="You should see a green input box."> + <link rel="match" href="selector-required-ref.html"> + <style> + input {border:3px solid red;} + :required {border-color:green;} + :optional {border-color:green;} + </style> + </head> + <body> + <p> + You should see a green input box. + </p> + <p> + <input required> + </p> + <p> + <input optional> + </p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html new file mode 100644 index 000000000..c11f42f62 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Selectors Level 4 Test: basic support for dir(ltr)</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo"> + <link rel="match" href="selectors-dir-selector-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="The :dir(ltr) pseudo-class matches an element that has a directionality of (ltr). Since the div element has dir=ltr, the selector matches."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: red; + } + + div:dir(ltr) { + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div dir="ltr"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html new file mode 100644 index 000000000..7b297d036 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference for CSS Selectors Level 4 :dir() Tests</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <meta name="flags" content=""> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html new file mode 100644 index 000000000..df2c63494 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo"> + <link rel="match" href="selectors-dir-selector-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: red; + } + + div:dir(rtl) { + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div dir="rtl"></div> +</body> +</html> |
