diff options
| author | Rodrigo Arias Mallo <rodarima@gmail.com> | 2023-12-25 01:25:15 +0100 |
|---|---|---|
| committer | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-01-08 22:16:29 +0100 |
| commit | 787905a585ba2ccb80d80c1d52dbea716085ec6a (patch) | |
| tree | 135e7caf0431fe7aa3fc0da4623b379f630b5925 /test | |
| parent | dbdf01c83e4a0c04cd1ed517eee1ab985c35f909 (diff) | |
Add min-width and max-width CSS tests
Diffstat (limited to 'test')
21 files changed, 464 insertions, 2 deletions
diff --git a/test/html/Makefile.am b/test/html/Makefile.am index 467d812e..6a16eeb8 100644 --- a/test/html/Makefile.am +++ b/test/html/Makefile.am @@ -6,11 +6,19 @@ AM_TESTS_ENVIRONMENT = env \ LOG_COMPILER = $(srcdir)/driver.sh TESTS = \ + render/b-div.html \ render/float-img-justify.html \ render/img-aspect-ratio.html \ + render/max-width-body.html \ + render/max-width-div.html \ + render/max-width-html.html \ + render/max-width-nested-div.html \ + render/min-width-body.html \ + render/min-width-div.html \ + render/min-width-html.html \ + render/min-width-nested-div.html \ render/table-thead-tfoot.html \ - render/white-space.html \ - render/b-div.html + render/white-space.html # To be fixed XFAIL_TESTS = \ diff --git a/test/html/manual/max-width-body.html b/test/html/manual/max-width-body.html new file mode 100644 index 00000000..7690bde7 --- /dev/null +++ b/test/html/manual/max-width-body.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width and max-width CSS properties</title> + <style> + body {margin: 20px; min-width: 400px; max-width: 600px; background: lightgrey} + .min {width: 400px; background: lightgreen} + .max {width: 600px; background: lightgreen} + </style> + </head> + <body> + <div class="min"> + <p>By resizing the window, the content below in gray should stay + within the limits of minimum and maximum width.</p> + <p>Minimum width 400 px</p> + </div> + <div> + <p>This is a rather long text to increase the maximal paragraph + width. Sed ut perspiciatis, unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem aperiam + eaque ipsa, quae ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, + quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi + nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor + sit, amet, consectetur, adipisci velit, sed quia non numquam eius + modi tempora incidunt, ut labore et dolore magnam aliquam quaerat + voluptatem. ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur?</p> + </div> + <div class="max"><p>Maximum width 600 px</p></div> + </body> +</html> diff --git a/test/html/manual/max-width-div.html b/test/html/manual/max-width-div.html new file mode 100644 index 00000000..8c828fb1 --- /dev/null +++ b/test/html/manual/max-width-div.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width and max-width CSS properties</title> + <style> + body {margin: 20px} + .min {width: 400px; background: lightgreen} + .max {width: 600px; background: lightgreen} + .test {min-width: 400px; max-width: 600px; background: lightgrey} + </style> + </head> + <body> + <div class="min"> + <p>By resizing the window, the content below in gray should stay + within the limits of minimum and maximum width.</p> + <p>Minimum width 400 px</p> + </div> + <div class="test"> + <p>This is a rather long text to increase the maximal paragraph + width. Sed ut perspiciatis, unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem aperiam + eaque ipsa, quae ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, + quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi + nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor + sit, amet, consectetur, adipisci velit, sed quia non numquam eius + modi tempora incidunt, ut labore et dolore magnam aliquam quaerat + voluptatem. ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur?</p> + </div> + <div class="max"><p>Maximum width 600 px</p></div> + </body> +</html> diff --git a/test/html/manual/max-width-html.html b/test/html/manual/max-width-html.html new file mode 100644 index 00000000..3c36c713 --- /dev/null +++ b/test/html/manual/max-width-html.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width and max-width CSS properties</title> + <style> + html {max-width: 600px; background: lightgray} + body {margin: 7px} + .min {width: 400px; background: lightgreen} + .max {width: 600px; background: lightgreen} + </style> + </head> + <body> + <div class="min"> + <p>By resizing the window, the content below in gray should stay + within the limits of minimum and maximum width.</p> + <p>Minimum width 400 px</p> + </div> + <div> + <p>This is a rather long text to increase the maximal paragraph + width. Sed ut perspiciatis, unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem aperiam + eaque ipsa, quae ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, + quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi + nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor + sit, amet, consectetur, adipisci velit, sed quia non numquam eius + modi tempora incidunt, ut labore et dolore magnam aliquam quaerat + voluptatem. ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur?</p> + </div> + <div class="max"><p>Maximum width 600 px</p></div> + </body> +</html> diff --git a/test/html/manual/max-width-nested-div.html b/test/html/manual/max-width-nested-div.html new file mode 100644 index 00000000..84af8b10 --- /dev/null +++ b/test/html/manual/max-width-nested-div.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width and max-width CSS properties</title> + <style> + body {margin: 20px} + .test {min-width: 400px; max-width: 600px; background: lightgray} + .min {width: 400px; background: lightgreen} + .max {width: 600px; background: lightgreen} + </style> + </head> + <body> + <div class="background:lightblue"> + <div class="min"> + <p>By resizing the window, the content below in gray should stay + within the limits of minimum and maximum width.</p> + <p>Minimum width 400 px</p> + </div> + <div class="test"> + <p>This is a rather long text to increase the maximal paragraph + width. Sed ut perspiciatis, unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem aperiam + eaque ipsa, quae ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, + quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi + nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor + sit, amet, consectetur, adipisci velit, sed quia non numquam eius + modi tempora incidunt, ut labore et dolore magnam aliquam quaerat + voluptatem. ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur?</p> + </div> + <div class="max"><p>Maximum width 600 px</p></div> + </div> + </body> +</html> diff --git a/test/html/render/max-width-body.html b/test/html/render/max-width-body.html new file mode 100644 index 00000000..32c605e4 --- /dev/null +++ b/test/html/render/max-width-body.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in body</title> + <style> + body {margin: 20px; max-width: 400px} + </style> + </head> + <body> + <div> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-body.ref.html b/test/html/render/max-width-body.ref.html new file mode 100644 index 00000000..112981e6 --- /dev/null +++ b/test/html/render/max-width-body.ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in body</title> + <style> + body {margin: 20px; width: 400px} + </style> + </head> + <body> + <div> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-div.html b/test/html/render/max-width-div.html new file mode 100644 index 00000000..a146ee0e --- /dev/null +++ b/test/html/render/max-width-div.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width CSS properties</title> + <style> + body {margin: 20px} + .test {max-width: 600px; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-div.ref.html b/test/html/render/max-width-div.ref.html new file mode 100644 index 00000000..ec25ca87 --- /dev/null +++ b/test/html/render/max-width-div.ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width CSS properties</title> + <style> + body {margin: 20px} + .test {width: 600px; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-html.html b/test/html/render/max-width-html.html new file mode 100644 index 00000000..24b85466 --- /dev/null +++ b/test/html/render/max-width-html.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in html tag</title> + <style> + html {max-width: 400px} + body {margin: 20px} + </style> + </head> + <body> + <div> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-html.ref.html b/test/html/render/max-width-html.ref.html new file mode 100644 index 00000000..9ac5712e --- /dev/null +++ b/test/html/render/max-width-html.ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in html tag</title> + <style> + div {width: 360px} + body {margin: 20px} + </style> + </head> + <body> + <div> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the works. + By contrast, the GNU General Public License is intended to + guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its users. + We, the Free Software Foundation, use the GNU General Public + License for most of our software; it applies also to any other + work released this way by its authors. You can apply it to your + programs, too.</p> + </div> + </body> +</html> diff --git a/test/html/render/max-width-nested-div.html b/test/html/render/max-width-nested-div.html new file mode 100644 index 00000000..fe2c3828 --- /dev/null +++ b/test/html/render/max-width-nested-div.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in a nested div</title> + <style> + body {margin: 20px} + .test {max-width: 400px; background: lightgray} + </style> + </head> + <body> + <div style="background:lightblue"> + <div class="test"> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the + works. By contrast, the GNU General Public License is intended + to guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its + users. We, the Free Software Foundation, use the GNU General + Public License for most of our software; it applies also to any + other work released this way by its authors. You can apply it to + your programs, too.</p> + </div> + </div> + </body> +</html> diff --git a/test/html/render/max-width-nested-div.ref.html b/test/html/render/max-width-nested-div.ref.html new file mode 100644 index 00000000..f13f8bdb --- /dev/null +++ b/test/html/render/max-width-nested-div.ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test max-width in a nested div</title> + <style> + body {margin: 20px} + .test {width: 400px; background: lightgray} + </style> + </head> + <body> + <div style="background:lightblue"> + <div class="test"> + <p>The licenses for most software and other practical works are + designed to take away your freedom to share and change the + works. By contrast, the GNU General Public License is intended + to guarantee your freedom to share and change all versions of a + program--to make sure it remains free software for all its + users. We, the Free Software Foundation, use the GNU General + Public License for most of our software; it applies also to any + other work released this way by its authors. You can apply it to + your programs, too.</p> + </div> + </div> + </body> +</html> diff --git a/test/html/render/min-width-body.html b/test/html/render/min-width-body.html new file mode 100644 index 00000000..b7652912 --- /dev/null +++ b/test/html/render/min-width-body.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property in the body</title> + <style> + body {min-width: 2000px; margin: 50px} + .test {background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-body.ref.html b/test/html/render/min-width-body.ref.html new file mode 100644 index 00000000..84e7a5c0 --- /dev/null +++ b/test/html/render/min-width-body.ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property in the body</title> + <style> + body {margin: 50px} + .test {width: 2000px; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-div.html b/test/html/render/min-width-div.html new file mode 100644 index 00000000..91840f04 --- /dev/null +++ b/test/html/render/min-width-div.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property</title> + <style> + body {margin: 20px} + .test {min-width: 400px; display: inline-block; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-div.ref.html b/test/html/render/min-width-div.ref.html new file mode 100644 index 00000000..64c02c31 --- /dev/null +++ b/test/html/render/min-width-div.ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property</title> + <style> + body {margin: 20px} + .test {width: 400px; display: inline-block; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-html.html b/test/html/render/min-width-html.html new file mode 100644 index 00000000..09e89d5c --- /dev/null +++ b/test/html/render/min-width-html.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width in the html tag</title> + <style> + html {min-width: 2000px} + body {margin: 0px} + .test {background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-html.ref.html b/test/html/render/min-width-html.ref.html new file mode 100644 index 00000000..bce5f2d8 --- /dev/null +++ b/test/html/render/min-width-html.ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width in the html tag</title> + <style> + body {margin: 0px} + .test {width: 2000px; background: lightgrey} + </style> + </head> + <body> + <div class="test"> + <p>Hello</p> + </div> + </body> +</html> diff --git a/test/html/render/min-width-nested-div.html b/test/html/render/min-width-nested-div.html new file mode 100644 index 00000000..149ff2a9 --- /dev/null +++ b/test/html/render/min-width-nested-div.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property</title> + <style> + body {margin: 20px} + .container {background: lightcyan} + .test {min-width: 400px; display: inline-block; background: lightgrey} + </style> + </head> + <body> + <div class="container"> + <div class="test"> + <p>Hello</p> + </div> + </div> + </body> +</html> diff --git a/test/html/render/min-width-nested-div.ref.html b/test/html/render/min-width-nested-div.ref.html new file mode 100644 index 00000000..5bf44ccf --- /dev/null +++ b/test/html/render/min-width-nested-div.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test min-width CSS property</title> + <style> + body {margin: 20px} + .container {background: lightcyan} + .test {width: 400px; display: inline-block; background: lightgrey} + </style> + </head> + <body> + <div class="container"> + <div class="test"> + <p>Hello</p> + </div> + </div> + </body> +</html> |